Mercurial > gemma
view client/src/components/systemconfiguration/PDFTemplates.vue @ 4231:6f31a99cd92d
clinet: fix translations process and update source strings
* move strings for translations from *.po files to the component itself to let gettext() mark only the strings without the html elements.
(make makemessages complains to have html elements in the .po files and stops the process).
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Wed, 21 Aug 2019 11:13:12 +0200 |
parents | 851c0ccba59b |
children | 69166db6ba8a |
line wrap: on
line source
<template> <div class="d-flex flex-column pb-4"> <input @change="uploadTemplate" id="uploadTemplate" ref="uploadTemplate" type="file" style="visibility: hidden; position: absolute;" /> <UITableHeader :columns="[ { id: 'name', title: `${nameLabel}`, class: 'col-3' }, { id: 'time', title: `${dateLabel}`, class: 'col-3' }, { id: 'type', title: `${typeLabel}`, class: 'col-2' }, { id: 'country', title: `${countryLabel}`, class: 'col-2' } ]" /> <UITableBody :data="templates | sortTable(sortColumn, sortDirection)"> <template v-slot:row="{ item: template }"> <div class="py-1 col-3">{{ template.name }}</div> <div class="py-1 col-3">{{ template.time }}</div> <div class="py-1 col-2">{{ template.type }}</div> <div class="py-1 col-2" v-if="template.country"> {{ template.country }} </div> <div class="py-1 col-2" v-else><i>global</i></div> <div class="col py-1 text-right"> <button class="btn btn-xs btn-info mr-1" ref="downloadTemplate" @click="downloadTemplate(template)" > <font-awesome-icon icon="download" fixed-width /> </button> <button class="btn btn-xs btn-dark" @click="deleteTemplate(template)"> <font-awesome-icon icon="trash" fixed-width /> </button> </div> </template> </UITableBody> <div class="p-3 border-top"> <button class="btn btn-info btn-sm mr-2" @click=" type = 'map'; $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 map template</translate> </button> <button class="btn btn-info btn-sm" @click=" type = 'diagram'; $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 diagram 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, 2019 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Markus Kottländer <markus@intevation.de> * Fadi Abbud <fadi.abbud@intevation.de> */ import { HTTP } from "@/lib/http"; import { displayError, displayInfo } from "@/lib/errors"; import { sortTable } from "@/lib/mixins"; export default { name: "pdftemplates", mixins: [sortTable], data() { return { templates: [], uploading: false, type: null }; }, computed: { nameLabel() { return this.$gettext("Name"); }, dateLabel() { return this.$gettext("Date"); }, countryLabel() { return this.$gettext("Country"); }, typeLabel() { return this.$gettext("Type"); } }, methods: { downloadTemplate(template) { if (template) { var templateData = ""; var element = document.createElement("a"); element.style.display = "none"; element.setAttribute("download", template.name + ".json"); document.body.appendChild(element); HTTP.get(`/templates/${template.type}/${template.name}`, { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-type": "text/xml; charset=UTF-8" } }) .then(response => { templateData = response.data.template_data; element.setAttribute( "href", "data:text/json;charset=utf-8," + encodeURIComponent( JSON.stringify( { name: templateData.name, properties: templateData.properties, elements: templateData.elements }, null, 2 ) ) ); element.click(); }) .catch(e => { const { status, data } = e.response; displayError({ title: this.$gettext("Backend Error"), message: `${status}: ${data.message || data}` }); }) .finally(() => { document.body.removeChild(element); }); } }, 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." ) }); // allow the user to upload the same file // if user wants to upload the same file after edit it. this.$refs.uploadTemplate.value = null; } if (template.name) { // check if an element in the uploaded file does not match the predefind template-elements let checkElement = false; template.elements.forEach(e => { if ( [ "text", "box", "textbox", "image", "bottleneck", "legend", "scalebar", "scale", "northarrow", "diagramlegend", "diagramtitle", "diagram" ].indexOf(e.type) === -1 ) { checkElement = true; displayError({ title: this.$gettext("Invalid element"), message: e.type + this.$gettext(" does not match any template's element") }); // allow the user to upload the same file this.$refs.uploadTemplate.value = null; } }); if (!checkElement) { this.uploading = true; HTTP.post( "/templates/" + this.type + "/" + 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(); displayInfo({ message: template.name + " " + this.$gettext("uploaded successfully") }); }) .catch(e => { const { status, data } = e.response; if (status === 400) { displayError({ title: this.$gettext("Error"), message: `${data.message || data}` }); } else { displayError({ title: this.$gettext("Backend Error"), message: `${status}: ${data.message || data}` }); } }) .finally(() => { this.uploading = false; this.$refs.uploadTemplate.value = null; }); } } else { displayError({ title: this.$gettext("Format Error"), message: this.$gettext( "The provided template has no name property." ) }); // allow the user to upload the same file this.$refs.uploadTemplate.value = null; } }; reader.onerror = error => console.log(error); reader.readAsText(this.$refs.uploadTemplate.files[0]); }, loadTemplates() { HTTP.get("/templates", { 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/${template.type}/${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); displayInfo({ message: template.name + " " + this.$gettext("deleted successfully") }); } }); } }, cancel: { label: this.$gettext("Cancel"), icon: "times" } }); } }, mounted() { this.loadTemplates(); } }; </script>