Mercurial > gemma
view client/src/components/systemconfiguration/PDFTemplates.vue @ 2329:514193fd0120
refac: improve routing structure. We now have /bottlenecks, /stretches, /review routes
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 19 Feb 2019 14:57:48 +0100 |
parents | 5b53be76080c |
children | 7b79d4966a87 |
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="upload" id="uploadTemplate" ref="uploadTemplate" type="file" style="visibility:hidden" /> </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></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 class="text-right"> <button class="btn btn-sm btn-danger" @click=" showDeleteTemplatePrompt = true; templateToDelete = template; " > <font-awesome-icon icon="trash" /> </button> </td> </tr> </transition-group> </table> <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 :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> <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, templateToDelete: "", showDeleteTemplatePrompt: false }; }, methods: { upload() { 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}` }); }); }, 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); } }); } }, mounted() { this.loadTemplates(); } }; </script>