Mercurial > gemma
view client/src/components/map/contextbox/Staging.vue @ 1468:5e1218b5a123 bulkreview
proof of concept
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 29 Nov 2018 12:09:01 +0100 |
parents | 15c3672e2e86 |
children | 2365acde39dc |
line wrap: on
line source
<template> <div class="w-90"> <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> <font-awesome-icon icon="clipboard-check" class="mr-2"></font-awesome-icon> <translate>Staging Area</translate> </h6> <table class="table mb-0"> <thead> <tr> <th> <translate>Name</translate> </th> <th> <translate>Type</translate> </th> <th> <translate>Date</translate> </th> <th> <translate>Imported</translate> </th> <th> <translate>Username</translate> </th> <th> </th> <th> </th> </tr> </thead> <tbody v-if="filteredData.length"> <tr v-for="data in filteredData" :key="data.id"> <td> <a @click="zoomTo(data.id)" href="#">{{ data.summary.bottleneck }}</a> </td> <td>{{ data.kind.toUpperCase() }}</td> <td>{{ data.summary.date }}</td> <td>{{ data.enqueued.split("T")[0] }}</td> <td>{{ data.user }}</td> <td> <button @click="toggleApproval(data.id, $options.STATES.APPROVED)" :class="{btn:true, 'btn-sm':true, 'btn-outline-success':needsApproval(data) || isRejected(data), 'btn-success':isApproved(data)}" > <font-awesome-icon icon="check"></font-awesome-icon> </button> </td> <td> <button @click="toggleApproval(data.id, $options.STATES.REJECTED)" :class="{btn:true, 'btn-sm':true, 'btn-outline-danger':needsApproval(data) || isApproved(data), 'btn-danger':isRejected(data)}" > <font-awesome-icon icon="times"></font-awesome-icon> </button> </td> </tr> </tbody> <tbody v-else> <tr> <td class="text-center" colspan="6"> <translate>No results.</translate> </td> </tr> </tbody> </table> <div class="p-3" v-if="filteredData.length"> <button @click="confirmReview" class="btn btn-info"> <translate>Confirm</translate> </button> </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> * Markus Kottländer <markus@intevation.de> */ import { mapState } from "vuex"; import { HTTP } from "../../../lib/http.js"; import { STATES } from "../../../store/imports.js"; import { displayError, displayInfo } from "../../../lib/errors.js"; export default { data() { return {}; }, mounted() { this.loadData(); }, computed: { ...mapState("application", ["searchQuery"]), ...mapState("imports", ["staging"]), filteredData() { return this.staging.filter(data => { const result = [data.id + "", data.enqueued, data.kind, data.user].some( x => x.toLowerCase().includes(this.searchQuery.toLowerCase()) ); return result; }); } }, STATES: STATES, methods: { loadData() { this.$store.dispatch("imports/getStaging").catch(error => { const { status, data } = error.response; displayError({ title: "Backend Error", message: `${status}: ${data.message || data}` }); }); }, confirmReview() { const reviewResults = this.staging.map(r => { return { id: r.id, state: r.status }; }); HTTP.patch("/imports", reviewResults, { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-type": "application/json" } }) .then(() => { const message = this.staging .map(x => { return x.id + ": " + x.status; }) .join("\n"); displayInfo({ title: "Staging Area", message: message }); this.loadData(); }) .catch(error => { const { status, data } = error.response; displayError({ title: "Backend Error", message: `${status}: ${data.message || data}` }); }); }, needsApproval(item) { return item.status === STATES.NEEDSAPPROVAL; }, isRejected(item) { return item.status === STATES.REJECTED; }, isApproved(item) { return item.status === STATES.APPROVED; }, zoomTo(id) { if (!id) return; const soundingResult = this.filteredData.filter(x => x.id == id)[0]; const { lat, lon, bottleneck, date } = soundingResult.summary; const coordinates = [lat, lon]; this.$store.commit("map/moveMap", { coordinates: coordinates, zoom: 17, preventZoomOut: true }); this.$store.dispatch("bottlenecks/setSelectedBottleneck", bottleneck); this.$store.commit("bottlenecks/selectedSurvey", date); }, toggleApproval(id, newStatus) { this.$store.commit("imports/toggleApproval", { id: id, newStatus: newStatus }); } } }; </script> <style lang="sass" scoped> .table th, td font-size: 0.9rem border-top: 0px !important border-bottom-width: 1px text-align: left padding: 0.5rem !important </style>