Mercurial > gemma
view client/src/components/staging/StagingDetail.vue @ 1621:eeddc5dcb80c
staging now with details
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 18 Dec 2018 16:25:03 +0100 |
parents | 2e4ec4251c57 |
children | de4e4dcb8f87 |
line wrap: on
line source
<template> <div class="pb-2 d-flex flex-column w-100"> <div class="d-flex flex-row"> <div class="mt-auto d-flex flex-row mb-auto small name text-left"> <a v-if="!isBottleneck(data.kind.toUpperCase())" @click="zoomTo()" href="#" >{{ data.summary.bottleneck }}</a > <span v-else class="mr-auto ml-auto">*</span> </div> <div class="mt-auto mb-auto small text-left type"> {{ data.kind.toUpperCase() }} </div> <div class="mt-auto mb-auto small text-left date"> {{ formatSurveyDate(data.summary.date) }} </div> <div class="mt-auto mb-auto small text-left imported"> {{ formatSurveyDate(data.enqueued.split("T")[0]) }} </div> <div class="mt-auto mb-auto small text-left username"> {{ data.user }} </div> <div class="controls d-flex flex-row justify-content-end"> <div> <button :class="{ 'ml-3': true, 'mr-3': true, btn: true, 'btn-sm': true, 'btn-outline-success': needsApproval(data) || isRejected(data), 'btn-success': isApproved(data) }" @click="toggleApproval(data.id, $options.STATES.APPROVED)" > <font-awesome-icon icon="check"></font-awesome-icon> </button> </div> <div> <button :class="{ 'mr-3': true, btn: true, 'btn-sm': true, 'btn-outline-danger': needsApproval(data) || isApproved(data), 'btn-danger': isRejected(data) }" @click="toggleApproval(data.id, $options.STATES.REJECTED)" > <font-awesome-icon icon="times"></font-awesome-icon> </button> </div> <div v-if="isBottleneck(data.kind.toUpperCase())"> <div @click="showDetails()" class="mt-auto mb-auto text-info text-left" > <font-awesome-icon v-if="show" icon="angle-up" fixed-width ></font-awesome-icon> <font-awesome-icon v-if="loading" icon="spinner" fixed-width ></font-awesome-icon> <font-awesome-icon v-if="!show && !loading" icon="angle-down" fixed-width ></font-awesome-icon> </div> </div> <div v-else class="empty"></div> </div> </div> <div class="d-flex flex-row" v-if="show"> <a class="small" v-for="(bottleneck, index) in data.summary.bottlenecks" :key="index" href="#" >{{ bottleneck }}</a > </div> </div> </template> <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): * Thomas Junk <thomas.junk@intevation.de> */ import { formatSurveyDate } from "@/lib/date.js"; import { STATES } from "@/store/imports.js"; export default { name: "stagingdetail", props: ["data"], data() { return { show: false, loading: false }; }, methods: { showDetails() { if (this.show) { this.show = false; return; } this.show = true; }, isBottleneck(kind) { return kind === "BN"; }, formatSurveyDate(date) { return formatSurveyDate(date); }, needsApproval(item) { return item.status === STATES.NEEDSAPPROVAL; }, isRejected(item) { return item.status === STATES.REJECTED; }, isApproved(item) { return item.status === STATES.APPROVED; }, zoomTo() { const { lat, lon, bottleneck, date } = this.data.summary; const coordinates = [lat, lon]; this.$store.commit("map/moveMap", { coordinates: coordinates, zoom: 17, preventZoomOut: true }); this.$store .dispatch("bottlenecks/setSelectedBottleneck", bottleneck) .then(() => { this.$store.commit("bottlenecks/setSelectedSurveyByDate", date); }); }, toggleApproval(id, newStatus) { this.$store.commit("imports/toggleApproval", { id: id, newStatus: newStatus }); } }, STATES: STATES }; </script> <style lang="scss" scoped> .empty { margin-right: 20px; } .name { width: 120px; } .date { width: 90px; } .type { width: 40px; } .imported { width: 90px; } .username { width: 150px; } .controls { width: 60px; } </style>