Mercurial > gemma
view client/src/components/stretches/Stretches.vue @ 4837:3b0ec9b56d7c
Merged
author | Sascha Wilde <wilde@intevation.de> |
---|---|
date | Fri, 08 Nov 2019 13:10:56 +0100 |
parents | 2e47b32a389d |
children | 008bc1ae8897 |
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-2" @click="download(stretch)" > <font-awesome-icon icon="download" 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"; import { format } from "date-fns"; 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: { download(stretch) { const { name } = stretch.properties; HTTP.get(`/data/stretch/shape/${encodeURIComponent(name)}`, { responseType: "blob", headers: { "X-Gemma-Auth": localStorage.getItem("token") } }).then(response => { const link = document.createElement("a"); const now = new Date(); link.href = window.URL.createObjectURL(response.data); link.download = `${name}-${format(now, "YYYY-MM-DD")}.zip`; document.body.appendChild(link); link.click(); document.body.removeChild(link); }); }, 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) { HTTP.post( "/imports/dst", { id: stretch.id.split(".")[1] * 1 }, { headers: { "X-Gemma-Auth": localStorage.getItem("token") } } ).then(() => { displayInfo({ title: this.$gettext("Staging Area"), message: this.$gettext("Deleting ") + stretch.properties.objnam }); }); }, 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>