Mercurial > gemma
changeset 2216:585373d33f8f pdf-export
prepared pdf template administration
prepared UI, connected to vuex store, backend still missing
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 07 Feb 2019 15:14:40 +0100 |
parents | 82867a69e10e |
children | 0783b4cdfd5c |
files | client/src/assets/application.scss client/src/components/systemconfiguration/PDFTemplates.vue client/src/store/application.js |
diffstat | 3 files changed, 111 insertions(+), 12 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/assets/application.scss Thu Feb 07 11:27:07 2019 +0100 +++ b/client/src/assets/application.scss Thu Feb 07 15:14:40 2019 +0100 @@ -99,16 +99,13 @@ } .popup { - position: absolute; - top: 40%; - left: 50%; - margin-left: -150px; width: 300px; max-width: 300px; + @extend %fully-centered; } .popup.show { - margin: 0.5rem 0 0 -150px; + margin: 0.5rem 0 0 0; max-height: 999px; } @@ -132,3 +129,11 @@ .headline { font-weight: bold; } + +.list-fade-enter-active, .list-fade-leave-active { + transition: transform .3s; +} +.list-fade-enter, .list-fade-leave-to { + opacity: 0; + transform: translateY(20px); +}
--- a/client/src/components/systemconfiguration/PDFTemplates.vue Thu Feb 07 11:27:07 2019 +0100 +++ b/client/src/components/systemconfiguration/PDFTemplates.vue Thu Feb 07 15:14:40 2019 +0100 @@ -3,16 +3,18 @@ <div class="d-flex flex-row justify-content-between"> <h5><translate>PDF-Templates</translate></h5> <input - id="uploadPDFTemplate" - ref="uploadPDFTemplate" + @change="upload" + id="uploadPDFTemplates" + ref="uploadPDFTemplates" type="file" style="visibility:hidden" /> <button class="btn btn-sm btn-info" - @click="$refs.uploadPDFTemplate.click()" + @click="$refs.uploadPDFTemplates.click()" > - <font-awesome-icon icon="plus" /> + <font-awesome-icon icon="spinner" class="fa-spin" v-if="uploading" /> + <font-awesome-icon icon="plus" v-else /> </button> </div> <div class="d-flex mt-1"> @@ -26,7 +28,7 @@ <th></th> </tr> </thead> - <tbody> + <transition-group name="list-fade" tag="tbody"> <tr v-for="template in pdfTemplates" :key="template.name"> <td>{{ template.name }}</td> <td>{{ template.description }}</td> @@ -36,14 +38,58 @@ <button class="btn btn-sm btn-info mr-2"> <font-awesome-icon icon="download" /> </button> - <button class="btn btn-sm btn-danger"> + <button + class="btn btn-sm btn-danger" + @click=" + showDeleteTemplatePrompt = true; + templateToDelete = template; + " + > <font-awesome-icon icon="trash" /> </button> </td> </tr> - </tbody> + </transition-group> </table> </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> @@ -65,8 +111,32 @@ export default { name: "pdftemplates", + data() { + return { + uploading: false, + templateToDelete: "", + showDeleteTemplatePrompt: false + }; + }, computed: { ...mapState("application", ["pdfTemplates"]) + }, + methods: { + upload() { + this.uploading = true; + this.$store + .dispatch( + "application/uploadPDFTemplates", + this.$refs.uploadPDFTemplates.files + ) + .then(() => { + this.uploading = false; + }); + }, + remove(template) { + this.showDeleteTemplatePrompt = false; + this.$store.dispatch("application/removePDFTemplate", template); + } } }; </script>
--- a/client/src/store/application.js Thu Feb 07 11:27:07 2019 +0100 +++ b/client/src/store/application.js Thu Feb 07 15:14:40 2019 +0100 @@ -212,6 +212,30 @@ resolve(); }, 500); }); + }, + uploadPDFTemplates({ state, commit }, files) { + return new Promise((resolve, reject) => { + setTimeout(() => { + const reader = new FileReader(); + reader.onload = event => { + let templates = state.pdfTemplates; + templates.push(JSON.parse(event.target.result)); + commit("pdfTemplates", templates); + // TODO: send template to server + }; + reader.onerror = error => reject(error); + reader.readAsText(files[0]); + resolve(); + }, 1000); + }); + }, + removePDFTemplate({ state, commit }, template) { + let templates = state.pdfTemplates; + let removeIndex = templates.findIndex(t => t.name === template.name); + if (removeIndex !== -1) { + templates.splice(removeIndex, 1); + commit("pdfTemplates", templates); + } } } };