Mercurial > gemma
view client/src/components/systemconfiguration/PDFTemplates.vue @ 2442:9b7138751f5b
staging: layout logs
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 01 Mar 2019 12:07:34 +0100 |
parents | c06b001dc26b |
children | 8044e379d8ee |
line wrap: on
line source
<template> <div class="d-flex flex-column"> <div class="d-flex flex-row justify-content-between"> <h5><translate>PDF-Templates</translate></h5> <input @change="uploadTemplate" id="uploadTemplate" ref="uploadTemplate" type="file" style="visibility:hidden" /> </div> <div class="mt-1 border-bottom pb-4"> <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" class="fa-spin fa-fw" v-if="uploading" /> <font-awesome-icon icon="upload" class="fa-fw" v-else /> <translate>Upload new template</translate> </button> </div> </div> </template> <style lang="scss" scoped> .table th, td { font-size: $smaller; border-top: 0px !important; text-align: left; padding: $small-offset !important; } </style> <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Markus Kottländer <markus@intevation.de> */ import { HTTP } from "@/lib/http"; import { displayError } from "@/lib/errors.js"; export default { name: "pdftemplates", data() { return { templates: [], uploading: false }; }, methods: { uploadTemplate() { const reader = new FileReader(); reader.onload = event => { let template; try { template = JSON.parse(event.target.result); } catch (e) { displayError({ title: this.$gettext("Format Error"), message: this.$gettext( "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: this.$gettext("Backend Error"), message: `${status}: ${data.message || data}` }); }) .finally(() => { this.uploading = false; }); } else { displayError({ title: this.$gettext("Format Error"), message: this.$gettext( "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: this.$gettext("Backend Error"), message: `${status}: ${data.message || data}` }); }); }, 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" } }); } }, mounted() { this.loadTemplates(); } }; </script>