Mercurial > gemma

comparison client/src/components/systemconfiguration/PDFTemplates.vue @ 2384:c06b001dc26b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: improved popup implementation For deleting users and templates there was a more or less quick n' dirty implementation of a confirmation dialog/popup. Since we need this kind of dialog in several more places I generalized the implementation a bit and made it more robust.
author Markus Kottlaender <markus@intevation.de>
date Mon, 25 Feb 2019 13:11:30 +0100
parents f910ecf23ce0
children 8044e379d8ee
comparison
equal deleted inserted replaced
2383:8d025f85a3fe 2384:c06b001dc26b
1 <template> 1 <template>
2 <div class="d-flex flex-column"> 2 <div class="d-flex flex-column">
3 <div class="d-flex flex-row justify-content-between"> 3 <div class="d-flex flex-row justify-content-between">
4 <h5><translate>PDF-Templates</translate></h5> 4 <h5><translate>PDF-Templates</translate></h5>
5 <input 5 <input
6 @change="upload" 6 @change="uploadTemplate"
7 id="uploadTemplate" 7 id="uploadTemplate"
8 ref="uploadTemplate" 8 ref="uploadTemplate"
9 type="file" 9 type="file"
10 style="visibility:hidden" 10 style="visibility:hidden"
11 /> 11 />
12 </div> 12 </div>
13 <div class="mt-1 border-bottom pb-4"> 13 <div class="mt-1 border-bottom pb-4">
14 <table class="table table-sm table-hover" v-if="templates.length"> 14 <transition name="fade">
15 <thead> 15 <table class="table table-sm table-hover" v-if="templates.length">
16 <tr> 16 <thead>
17 <th><translate>Name</translate></th> 17 <tr>
18 <th><translate>Date</translate></th> 18 <th><translate>Name</translate></th>
19 <th><translate>Country</translate></th> 19 <th><translate>Date</translate></th>
20 <th></th> 20 <th><translate>Country</translate></th>
21 </tr> 21 <th></th>
22 </thead> 22 </tr>
23 <transition-group name="list-fade" tag="tbody"> 23 </thead>
24 <tr v-for="template in templates" :key="template.name"> 24 <transition-group name="fade" tag="tbody">
25 <td>{{ template.name }}</td> 25 <tr v-for="template in templates" :key="template.name">
26 <td>{{ template.time }}</td> 26 <td>{{ template.name }}</td>
27 <td v-if="template.country">{{ template.country }}</td> 27 <td>{{ template.time }}</td>
28 <td v-else><i>global</i></td> 28 <td v-if="template.country">{{ template.country }}</td>
29 <td class="text-right"> 29 <td v-else><i>global</i></td>
30 <button 30 <td class="text-right">
31 class="btn btn-sm btn-dark" 31 <button
32 @click=" 32 class="btn btn-sm btn-dark"
33 showDeleteTemplatePrompt = true; 33 @click="deleteTemplate(template)"
34 templateToDelete = template; 34 >
35 " 35 <font-awesome-icon icon="trash" />
36 > 36 </button>
37 <font-awesome-icon icon="trash" /> 37 </td>
38 </button> 38 </tr>
39 </td> 39 </transition-group>
40 </tr> 40 </table>
41 </transition-group> 41 </transition>
42 </table>
43 <button class="btn btn-info mt-2" @click="$refs.uploadTemplate.click()"> 42 <button class="btn btn-info mt-2" @click="$refs.uploadTemplate.click()">
44 <font-awesome-icon 43 <font-awesome-icon
45 icon="spinner" 44 icon="spinner"
46 class="fa-spin fa-fw" 45 class="fa-spin fa-fw"
47 v-if="uploading" 46 v-if="uploading"
48 /> 47 />
49 <font-awesome-icon icon="upload" class="fa-fw" v-else /> 48 <font-awesome-icon icon="upload" class="fa-fw" v-else />
50 <translate>Upload new template</translate> 49 <translate>Upload new template</translate>
51 </button> 50 </button>
52 </div>
53
54 <div
55 :class="[
56 'box popup ui-element rounded bg-white',
57 { show: showDeleteTemplatePrompt }
58 ]"
59 >
60 <div>
61 <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
62 <font-awesome-icon icon="trash" class="mr-2"></font-awesome-icon>
63 <translate>Delete PDF Template</translate>
64 <font-awesome-icon
65 icon="times"
66 class="ml-auto text-muted"
67 @click="showDeleteTemplatePrompt = false"
68 ></font-awesome-icon>
69 </h6>
70 <div class="p-3 text-left">
71 <translate class="text-center d-block">
72 Do you really want to delete the following template:
73 </translate>
74 <h5 class="mt-3 text-center">{{ templateToDelete.name }}</h5>
75 </div>
76 <div
77 class="py-2 px-3 border-top d-flex align-items-center justify-content-between"
78 >
79 <button
80 class="btn btn-sm btn-warning"
81 @click="showDeleteTemplatePrompt = false"
82 >
83 no
84 </button>
85 <button class="btn btn-sm btn-info" @click="remove(templateToDelete)">
86 yes
87 </button>
88 </div>
89 </div>
90 </div> 51 </div>
91 </div> 52 </div>
92 </template> 53 </template>
93 54
94 <style lang="scss" scoped> 55 <style lang="scss" scoped>
121 export default { 82 export default {
122 name: "pdftemplates", 83 name: "pdftemplates",
123 data() { 84 data() {
124 return { 85 return {
125 templates: [], 86 templates: [],
126 uploading: false, 87 uploading: false
127 templateToDelete: "",
128 showDeleteTemplatePrompt: false
129 }; 88 };
130 }, 89 },
131 methods: { 90 methods: {
132 upload() { 91 uploadTemplate() {
133 const reader = new FileReader(); 92 const reader = new FileReader();
134 reader.onload = event => { 93 reader.onload = event => {
135 let template; 94 let template;
136 try { 95 try {
137 template = JSON.parse(event.target.result); 96 template = JSON.parse(event.target.result);
199 title: this.$gettext("Backend Error"), 158 title: this.$gettext("Backend Error"),
200 message: `${status}: ${data.message || data}` 159 message: `${status}: ${data.message || data}`
201 }); 160 });
202 }); 161 });
203 }, 162 },
204 remove(template) { 163 deleteTemplate(template) {
205 this.showDeleteTemplatePrompt = false; 164 this.$store.commit("application/popup", {
206 HTTP.delete("/templates/print/" + template.name, { 165 icon: "trash",
207 headers: { 166 title: this.$gettext("Delete Template"),
208 "X-Gemma-Auth": localStorage.getItem("token"), 167 content:
209 "Content-type": "text/xml; charset=UTF-8" 168 this.$gettext(
210 } 169 "Do you really want to delete the following template:"
211 }).then(() => { 170 ) +
212 let removeIndex = this.templates.findIndex( 171 `<br>
213 t => t.name === template.name 172 <b>${template.name}</b>`,
214 ); 173 confirm: {
215 if (removeIndex !== -1) { 174 label: this.$gettext("Delete"),
216 this.templates.splice(removeIndex, 1); 175 icon: "trash",
176 callback: () => {
177 HTTP.delete("/templates/print/" + template.name, {
178 headers: {
179 "X-Gemma-Auth": localStorage.getItem("token"),
180 "Content-type": "text/xml; charset=UTF-8"
181 }
182 }).then(() => {
183 let removeIndex = this.templates.findIndex(
184 t => t.name === template.name
185 );
186 if (removeIndex !== -1) {
187 this.templates.splice(removeIndex, 1);
188 }
189 });
190 }
191 },
192 cancel: {
193 label: this.$gettext("Cancel"),
194 icon: "times"
217 } 195 }
218 }); 196 });
219 } 197 }
220 }, 198 },
221 mounted() { 199 mounted() {