Mercurial > gemma
view client/src/components/stretches/Stretches.vue @ 4238:fe24cdde614d
styles-config: prepare components for WMS-Layer styling and set default color values
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Wed, 21 Aug 2019 17:21:14 +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>