Mercurial > gemma
comparison client/src/components/importoverview/ImportOverview.vue @ 4493:b4880e7d4082
client: ImportOverview: change place of save button
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Fri, 27 Sep 2019 15:49:52 +0200 |
parents | e289d3f32b75 |
children | 8763da6bef4a |
comparison
equal
deleted
inserted
replaced
4492:e289d3f32b75 | 4493:b4880e7d4082 |
---|---|
2 <div class="overview"> | 2 <div class="overview"> |
3 <UIBoxHeader | 3 <UIBoxHeader |
4 icon="clipboard-check" | 4 icon="clipboard-check" |
5 :title="importReviewLabel" | 5 :title="importReviewLabel" |
6 :closeCallback="$parent.close" | 6 :closeCallback="$parent.close" |
7 :actions="[{ callback: loadUpdatedLogs, icon: 'sync' }]" | 7 :actions="[ |
8 { callback: saveImportsView, icon: 'download' }, | |
9 { callback: loadUpdatedLogs, icon: 'sync' } | |
10 ]" | |
8 /> | 11 /> |
9 <div class="position-relative"> | 12 <div class="position-relative"> |
10 <UISpinnerOverlay v-if="loading" /> | 13 <UISpinnerOverlay v-if="loading" /> |
11 <div class="border-bottom p-2 d-flex justify-content-between"> | 14 <div class="border-bottom p-2 d-flex justify-content-between"> |
12 <Filters></Filters> | 15 <Filters></Filters> |
99 </template> | 102 </template> |
100 <template v-slot:expand="{ item: entry }"> | 103 <template v-slot:expand="{ item: entry }"> |
101 <LogDetail :entry="entry"></LogDetail> | 104 <LogDetail :entry="entry"></LogDetail> |
102 </template> | 105 </template> |
103 </UITableBody> | 106 </UITableBody> |
104 <a | |
105 :class="[ | |
106 'btn btn-xs btn-info d-block mt-2', | |
107 { disabled: !imports.length } | |
108 ]" | |
109 :href="importsCSV" | |
110 download="log.txt" | |
111 > | |
112 <translate class="text-white">Export as CSV</translate> | |
113 </a> | |
114 </div> | 107 </div> |
115 </div> | 108 </div> |
116 </template> | 109 </template> |
117 | 110 |
118 <style lang="sass" scoped> | 111 <style lang="sass" scoped> |
182 ...mapGetters("usermanagement", ["userCountries"]), | 175 ...mapGetters("usermanagement", ["userCountries"]), |
183 ...mapGetters("imports", ["filters"]), | 176 ...mapGetters("imports", ["filters"]), |
184 countryLabel() { | 177 countryLabel() { |
185 return this.$gettext("Country"); | 178 return this.$gettext("Country"); |
186 }, | 179 }, |
187 importsCSV() { | |
188 if (!this.imports.length) return; | |
189 return ( | |
190 "data:text/csv;charset=utf-8," + | |
191 encodeURIComponent( | |
192 this.imports | |
193 .map(el => { | |
194 return ` ${el.id}, ${el.kind}, ${el.enqueued}, ${el.user || | |
195 " "}, ${el.country || " "}, ${el.signer || " "}, ${el.state || | |
196 " "}, ${el.warnings || " "}`; | |
197 }) | |
198 .join("\n") | |
199 ) | |
200 ); | |
201 }, | |
202 importReviewLabel() { | 180 importReviewLabel() { |
203 return this.$gettext("Import review"); | 181 return this.$gettext("Import review"); |
204 }, | 182 }, |
205 idLabel() { | 183 idLabel() { |
206 return this.$gettext("Id"); | 184 return this.$gettext("Id"); |
250 filters() { | 228 filters() { |
251 this.loadLogs(); | 229 this.loadLogs(); |
252 } | 230 } |
253 }, | 231 }, |
254 methods: { | 232 methods: { |
233 saveImportsView() { | |
234 let element = document.createElement("a"); | |
235 element.setAttribute("download", "log.txt"); | |
236 element.setAttribute("href", this.csvLink()); | |
237 element.click(); | |
238 }, | |
239 csvLink() { | |
240 return ( | |
241 "data:text/csv;charset=utf-8," + | |
242 encodeURIComponent( | |
243 this.imports | |
244 .map(el => { | |
245 return ` ${el.id}, ${el.kind}, ${el.enqueued}, ${el.user || | |
246 " "}, ${el.country || " "}, ${el.signer || " "}, ${el.state || | |
247 " "}, ${el.warnings || " "}`; | |
248 }) | |
249 .join("\n") | |
250 ) | |
251 ); | |
252 }, | |
255 showSingleRessource(id) { | 253 showSingleRessource(id) { |
256 id = id * 1; | 254 id = id * 1; |
257 this.loadDetails(id) | 255 this.loadDetails(id) |
258 .then(response => { | 256 .then(response => { |
259 this.$store.commit("imports/setCurrentDetails", response.data); | 257 this.$store.commit("imports/setCurrentDetails", response.data); |