Mercurial > gemma
view client/src/components/stretches/Stretches.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 | c2cba529658d |
children | 4d5cd3b5775a |
line wrap: on
line source
<template> <div class="d-flex flex-column"> <UIBoxHeader icon="road" :title="title" :closeCallback="$parent.close" /> <div class="position-relative"> <UISpinnerOverlay v-if="loading" /> <StretchForm v-if="showForm" :editStretch="editStretch" /> <div v-else> <UITableHeader :columns="[ { id: 'properties.name', title: `${nameLabel}`, class: 'col-4' }, { id: 'properties.date_info', title: `${dateLabel}`, class: 'col-2' }, { id: 'properties.source_organization', title: `${sourceorganizationLabel}`, class: 'col-3' } ]" /> <UITableBody :data="filteredStretches() | sortTable(sortColumn, sortDirection)" > <template v-slot:row="{ item: stretch }"> <div class="py-1 px-2 col-4"> <a @click="moveMapToStretch(stretch)" href="#"> {{ stretch.properties.name }} </a> </div> <div class="py-1 px-2 col-2"> {{ stretch.properties.date_info | surveyDate }} </div> <div class="py-1 px-2 col-3"> {{ stretch.properties.source_organization }} </div> <div class="py-1 px-2 col text-right"> <button v-if="isInStaging(stretch.properties.name)" @click="gotoStaging(stretch.properties.name)" class="btn btn-xs btn-danger mr-1" > <font-awesome-icon icon="exclamation-triangle" fixed-width v-tooltip="reviewTooltip" /> </button> <button class="btn btn-xs btn-dark mr-1" @click=" showForm = true; editStretch = stretch; " > <font-awesome-icon icon="pencil-alt" fixed-width /> </button> <button class="btn btn-xs btn-dark" @click="deleteStretch(stretch)" > <font-awesome-icon icon="trash" fixed-width /> </button> </div> </template> </UITableBody> <div class="text-right p-2 border-top"> <button @click=" showForm = true; editStretch = null; " class="btn btn-sm btn-info" > <translate>New stretch</translate> </button> </div> </div> </div> </div> </template> <style lang="sass" scoped> .input-button border-top-left-radius: 0 border-bottom-left-radius: 0 right: 0 height: 31px </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): * Thomas Junk <thomas.junk@intevation.de> * Tom Gottfried <tom.gottfried@intevation.de> */ import { mapState, mapGetters } from "vuex"; import { displayError, displayInfo } from "@/lib/errors"; import { HTTP } from "@/lib/http"; import { sortTable } from "@/lib/mixins"; export default { mixins: [sortTable], components: { StretchForm: () => import("./StretchForm") }, data() { return { staging: [], loading: false, showForm: false, editStretch: null }; }, computed: { ...mapState("application", ["searchQuery"]), ...mapGetters("map", ["openLayersMap"]), ...mapState("imports", ["stretches"]), title() { return this.$gettext("Define Stretches"); }, nameLabel() { return this.$gettext("Name"); }, dateLabel() { return this.$gettext("Date"); }, sourceorganizationLabel() { return this.$gettext("Source organization"); }, reviewTooltip() { return this.$gettext("Review pending import"); } }, methods: { filteredStretches() { return this.stretches.filter(s => { return (s.properties.name + s.properties.source_organization) .toLowerCase() .includes(this.searchQuery.toLowerCase()); }); }, gotoStaging(stretchName) { let pendingImport = this.staging.find(s => s.name === stretchName); if (pendingImport) this.$router.push("/imports/overview/" + pendingImport.id); }, isInStaging(stretchName) { return !!this.staging.find(s => s.name === stretchName); }, loadStagingData() { HTTP.get("/imports?states=pending&kinds=st", { headers: { "X-Gemma-Auth": localStorage.getItem("token") } }) .then(response => { response.data.imports.forEach(i => { HTTP.get("/imports/" + i.id, { headers: { "X-Gemma-Auth": localStorage.getItem("token") } }) .then(response => { this.staging.push({ id: i.id, name: response.data.summary.stretch }); }) .catch(error => { const { status, data } = error.response; displayError({ title: this.$gettext("Backend Error"), message: `${status}: ${data.message || data}` }); }) .finally(() => (this.loading = false)); }); }) .catch(error => { const { status, data } = error.response; displayError({ title: this.$gettext("Backend Error"), message: `${status}: ${data.message || data}` }); }); }, deleteStretch(stretch) { this.$store.commit("application/popup", { icon: "trash", title: this.$gettext("Delete Stretch"), content: this.$gettext("Do you really want to delete this stretch:") + `<br> <b>${stretch.properties.name}, ${ stretch.properties.source_organization } (${stretch.properties.countries})</b>`, confirm: { label: this.$gettext("Delete"), icon: "trash", callback: () => { displayInfo({ title: this.$gettext("Not implemented"), message: this.$gettext("Deleting ") + stretch.id }); } }, cancel: { label: this.$gettext("Cancel"), icon: "times" } }); }, moveMapToStretch(stretch) { this.$store.commit("imports/selectedStretchId", stretch.id); this.$store.commit("fairwayavailability/type", "stretches"); this.$store.commit("application/showFairwayDepth", true); this.openLayersMap() .getLayer("STRETCHES") .setVisible(true); this.$store.dispatch("map/moveToFeauture", { feature: stretch, zoom: 17, preventZoomOut: true }); } }, mounted() { this.loading = true; this.$store .dispatch("imports/loadStretches") .catch(error => { const { status, data } = error.response; displayError({ title: this.$gettext("Backend Error"), message: `${status}: ${data.message || data}` }); }) .finally(() => (this.loading = false)); this.loadStagingData(); } }; </script>