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);