Mercurial > gemma
diff client/src/components/systemconfiguration/PDFTemplates.vue @ 2384:c06b001dc26b
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 |
line wrap: on
line diff
--- a/client/src/components/systemconfiguration/PDFTemplates.vue Mon Feb 25 08:47:59 2019 +0100 +++ b/client/src/components/systemconfiguration/PDFTemplates.vue Mon Feb 25 13:11:30 2019 +0100 @@ -3,7 +3,7 @@ <div class="d-flex flex-row justify-content-between"> <h5><translate>PDF-Templates</translate></h5> <input - @change="upload" + @change="uploadTemplate" id="uploadTemplate" ref="uploadTemplate" type="file" @@ -11,35 +11,34 @@ /> </div> <div class="mt-1 border-bottom pb-4"> - <table class="table table-sm table-hover" v-if="templates.length"> - <thead> - <tr> - <th><translate>Name</translate></th> - <th><translate>Date</translate></th> - <th><translate>Country</translate></th> - <th></th> - </tr> - </thead> - <transition-group name="list-fade" tag="tbody"> - <tr v-for="template in templates" :key="template.name"> - <td>{{ template.name }}</td> - <td>{{ template.time }}</td> - <td v-if="template.country">{{ template.country }}</td> - <td v-else><i>global</i></td> - <td class="text-right"> - <button - class="btn btn-sm btn-dark" - @click=" - showDeleteTemplatePrompt = true; - templateToDelete = template; - " - > - <font-awesome-icon icon="trash" /> - </button> - </td> - </tr> - </transition-group> - </table> + <transition name="fade"> + <table class="table table-sm table-hover" v-if="templates.length"> + <thead> + <tr> + <th><translate>Name</translate></th> + <th><translate>Date</translate></th> + <th><translate>Country</translate></th> + <th></th> + </tr> + </thead> + <transition-group name="fade" tag="tbody"> + <tr v-for="template in templates" :key="template.name"> + <td>{{ template.name }}</td> + <td>{{ template.time }}</td> + <td v-if="template.country">{{ template.country }}</td> + <td v-else><i>global</i></td> + <td class="text-right"> + <button + class="btn btn-sm btn-dark" + @click="deleteTemplate(template)" + > + <font-awesome-icon icon="trash" /> + </button> + </td> + </tr> + </transition-group> + </table> + </transition> <button class="btn btn-info mt-2" @click="$refs.uploadTemplate.click()"> <font-awesome-icon icon="spinner" @@ -50,44 +49,6 @@ <translate>Upload new template</translate> </button> </div> - - <div - :class="[ - 'box popup ui-element rounded bg-white', - { show: showDeleteTemplatePrompt } - ]" - > - <div> - <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> - <font-awesome-icon icon="trash" class="mr-2"></font-awesome-icon> - <translate>Delete PDF Template</translate> - <font-awesome-icon - icon="times" - class="ml-auto text-muted" - @click="showDeleteTemplatePrompt = false" - ></font-awesome-icon> - </h6> - <div class="p-3 text-left"> - <translate class="text-center d-block"> - Do you really want to delete the following template: - </translate> - <h5 class="mt-3 text-center">{{ templateToDelete.name }}</h5> - </div> - <div - class="py-2 px-3 border-top d-flex align-items-center justify-content-between" - > - <button - class="btn btn-sm btn-warning" - @click="showDeleteTemplatePrompt = false" - > - no - </button> - <button class="btn btn-sm btn-info" @click="remove(templateToDelete)"> - yes - </button> - </div> - </div> - </div> </div> </template> @@ -123,13 +84,11 @@ data() { return { templates: [], - uploading: false, - templateToDelete: "", - showDeleteTemplatePrompt: false + uploading: false }; }, methods: { - upload() { + uploadTemplate() { const reader = new FileReader(); reader.onload = event => { let template; @@ -201,19 +160,38 @@ }); }); }, - remove(template) { - this.showDeleteTemplatePrompt = false; - HTTP.delete("/templates/print/" + template.name, { - headers: { - "X-Gemma-Auth": localStorage.getItem("token"), - "Content-type": "text/xml; charset=UTF-8" - } - }).then(() => { - let removeIndex = this.templates.findIndex( - t => t.name === template.name - ); - if (removeIndex !== -1) { - this.templates.splice(removeIndex, 1); + deleteTemplate(template) { + this.$store.commit("application/popup", { + icon: "trash", + title: this.$gettext("Delete Template"), + content: + this.$gettext( + "Do you really want to delete the following template:" + ) + + `<br> + <b>${template.name}</b>`, + confirm: { + label: this.$gettext("Delete"), + icon: "trash", + callback: () => { + HTTP.delete("/templates/print/" + template.name, { + headers: { + "X-Gemma-Auth": localStorage.getItem("token"), + "Content-type": "text/xml; charset=UTF-8" + } + }).then(() => { + let removeIndex = this.templates.findIndex( + t => t.name === template.name + ); + if (removeIndex !== -1) { + this.templates.splice(removeIndex, 1); + } + }); + } + }, + cancel: { + label: this.$gettext("Cancel"), + icon: "times" } }); }