Mercurial > gemma
changeset 2257:ce6fd3d4a3a2
client: pdf-gen: moved template handling from store to components
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Thu, 14 Feb 2019 08:56:32 +0100 |
| parents | 0d272d7bcfb9 |
| children | 24cafd6b1a55 |
| files | client/src/components/Pdftool.vue client/src/components/systemconfiguration/PDFTemplates.vue client/src/store/application.js |
| diffstat | 3 files changed, 107 insertions(+), 124 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Pdftool.vue Wed Feb 13 18:18:41 2019 +0100 +++ b/client/src/components/Pdftool.vue Thu Feb 14 08:56:32 2019 +0100 @@ -22,7 +22,7 @@ class="form-control d-block mb-2 w-100 font-weight-bold" > <option - v-for="template in pdfTemplates" + v-for="template in templates" :value="template" :key="template.name" > @@ -117,6 +117,7 @@ downloadType: "download", resolution: "80" }, + templates: [], templateData: null, pdf: { doc: null, @@ -128,7 +129,7 @@ }; }, computed: { - ...mapState("application", ["showPdfTool", "logoForPDF", "pdfTemplates"]), + ...mapState("application", ["showPdfTool", "logoForPDF"]), ...mapState("bottlenecks", ["selectedBottleneck", "selectedSurvey"]), ...mapState("map", ["openLayersMap", "isolinesLegendImgDataURL"]), ...mapGetters("map", ["getLayerByName"]), @@ -754,10 +755,24 @@ } }, mounted() { - this.$store.dispatch("application/loadPdfTemplates").then(() => { - this.form.template = this.pdfTemplates[0]; - this.applyTemplateToForm(); - }); + HTTP.get("/templates/print", { + headers: { + "X-Gemma-Auth": localStorage.getItem("token"), + "Content-type": "text/xml; charset=UTF-8" + } + }) + .then(response => { + this.templates = response.data; + this.form.template = this.templates[0]; + this.applyTemplateToForm(); + }) + .catch(e => { + const { status, data } = e.response; + displayError({ + title: "Backend Error", + message: `${status}: ${data.message || data}` + }); + }); } }; </script>
--- a/client/src/components/systemconfiguration/PDFTemplates.vue Wed Feb 13 18:18:41 2019 +0100 +++ b/client/src/components/systemconfiguration/PDFTemplates.vue Thu Feb 14 08:56:32 2019 +0100 @@ -4,8 +4,8 @@ <h5><translate>PDF-Templates</translate></h5> <input @change="upload" - id="uploadPDFTemplate" - ref="uploadPDFTemplate" + id="uploadTemplate" + ref="uploadTemplate" type="file" style="visibility:hidden" /> @@ -20,7 +20,7 @@ </tr> </thead> <transition-group name="list-fade" tag="tbody"> - <tr v-for="template in pdfTemplates" :key="template.name"> + <tr v-for="template in templates" :key="template.name"> <td>{{ template.name }}</td> <td>{{ template.time }}</td> <td class="text-right"> @@ -40,10 +40,7 @@ </tr> </transition-group> </table> - <button - class="btn btn-sm btn-info" - @click="$refs.uploadPDFTemplate.click()" - > + <button class="btn btn-sm btn-info" @click="$refs.uploadTemplate.click()"> <font-awesome-icon icon="spinner" class="fa-spin fa-fw" @@ -108,39 +105,107 @@ * Author(s): * Markus Kottländer <markus@intevation.de> */ -import { mapState } from "vuex"; +import { HTTP } from "@/lib/http"; +import { displayError } from "@/lib/errors.js"; export default { name: "pdftemplates", data() { return { + templates: [], uploading: false, templateToDelete: "", showDeleteTemplatePrompt: false }; }, - computed: { - ...mapState("application", ["pdfTemplates"]) - }, methods: { upload() { - this.uploading = true; - this.$store - .dispatch( - "application/uploadPDFTemplate", - this.$refs.uploadPDFTemplate.files - ) - .finally(() => { - this.uploading = false; + const reader = new FileReader(); + reader.onload = event => { + let template; + try { + template = JSON.parse(event.target.result); + } catch (e) { + displayError({ + title: "Format Error", + message: "Uploaded file does not contain valid json data." + }); + } + if (template.name) { + this.uploading = true; + HTTP.post( + "/templates/print/" + template.name, + { + template_name: template.name, + template_data: template + }, + { + headers: { + "X-Gemma-Auth": localStorage.getItem("token"), + "Content-type": "text/xml; charset=UTF-8" + } + } + ) + .then(() => { + this.loadTemplates(); + }) + .catch(e => { + const { status, data } = e.response; + displayError({ + title: "Backend Error", + message: `${status}: ${data.message || data}` + }); + }) + .finally(() => { + this.uploading = false; + }); + } else { + displayError({ + title: "Format Error", + message: "The provided template has no name property." + }); + } + }; + reader.onerror = error => console.log(error); + reader.readAsText(this.$refs.uploadTemplate.files[0]); + }, + loadTemplates() { + HTTP.get("/templates/print", { + headers: { + "X-Gemma-Auth": localStorage.getItem("token"), + "Content-type": "text/xml; charset=UTF-8" + } + }) + .then(response => { + this.templates = response.data; + }) + .catch(e => { + const { status, data } = e.response; + displayError({ + title: "Backend Error", + message: `${status}: ${data.message || data}` + }); }); }, remove(template) { this.showDeleteTemplatePrompt = false; - this.$store.dispatch("application/removePDFTemplate", template); + 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); + } + }); } }, mounted() { - this.$store.dispatch("application/loadPdfTemplates"); + this.loadTemplates(); } }; </script>
--- a/client/src/store/application.js Wed Feb 13 18:18:41 2019 +0100 +++ b/client/src/store/application.js Thu Feb 14 08:56:32 2019 +0100 @@ -15,8 +15,6 @@ */ import { version } from "../../package.json"; -import { HTTP } from "../lib/http"; -import { displayError } from "@/lib/errors.js"; // initial state const init = () => { @@ -24,7 +22,6 @@ appTitle: process.env.VUE_APP_TITLE, secondaryLogo: process.env.VUE_APP_SECONDARY_LOGO_URL, logoForPDF: process.env.VUE_APP_LOGO_FOR_PDF_URL, - pdfTemplates: [], showSidebar: false, showUsermenu: false, showSplitscreen: false, @@ -106,100 +103,6 @@ }, searchQuery: (state, searchQuery) => { state.searchQuery = searchQuery; - }, - pdfTemplates: (state, pdfTemplates) => { - state.pdfTemplates = pdfTemplates; - } - }, - actions: { - loadPdfTemplates({ commit }) { - return new Promise((resolve, reject) => { - HTTP.get("/templates/print", { - headers: { - "X-Gemma-Auth": localStorage.getItem("token"), - "Content-type": "text/xml; charset=UTF-8" - } - }) - .then(response => { - commit("pdfTemplates", response.data); - resolve(); - }) - .catch(e => { - reject(e); - const { status, data } = e.response; - displayError({ - title: "Backend Error", - message: `${status}: ${data.message || data}` - }); - }); - }); - }, - uploadPDFTemplate({ dispatch }, files) { - return new Promise((resolve, reject) => { - const reader = new FileReader(); - reader.onload = event => { - let template; - try { - template = JSON.parse(event.target.result); - } catch (e) { - displayError({ - title: "Format Error", - message: "Uploaded file does not contain valid json data." - }); - reject(e); - } - if (template.name) { - HTTP.post( - "/templates/print/" + template.name, - { - template_name: template.name, - template_data: template - }, - { - headers: { - "X-Gemma-Auth": localStorage.getItem("token"), - "Content-type": "text/xml; charset=UTF-8" - } - } - ) - .then(response => { - dispatch("loadPdfTemplates"); - resolve(response); - }) - .catch(e => { - reject(e); - const { status, data } = e.response; - displayError({ - title: "Backend Error", - message: `${status}: ${data.message || data}` - }); - }); - } else { - reject(); - displayError({ - title: "Format Error", - message: "The provided template has no name property." - }); - } - }; - reader.onerror = error => reject(error); - reader.readAsText(files[0]); - }); - }, - removePDFTemplate({ state, commit }, template) { - HTTP.delete("/templates/print/" + template.name, { - headers: { - "X-Gemma-Auth": localStorage.getItem("token"), - "Content-type": "text/xml; charset=UTF-8" - } - }).then(() => { - let templates = state.pdfTemplates; - let removeIndex = templates.findIndex(t => t.name === template.name); - if (removeIndex !== -1) { - templates.splice(removeIndex, 1); - commit("pdfTemplates", templates); - } - }); } } };