Mercurial > gemma
changeset 1615:95641748383f
refac: extracted staging details view
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 18 Dec 2018 12:56:05 +0100 |
parents | efc409e330a6 |
children | f4b31cf5b656 |
files | client/src/components/staging/Staging.vue client/src/components/staging/StagingDetail.vue |
diffstat | 2 files changed, 110 insertions(+), 37 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/staging/Staging.vue Tue Dec 18 12:42:43 2018 +0100 +++ b/client/src/components/staging/Staging.vue Tue Dec 18 12:56:05 2018 +0100 @@ -20,43 +20,11 @@ </tr> </thead> <tbody v-if="filteredData.length"> - <tr :key="data.id" v-for="data in filteredData"> - <td> - <a @click="zoomTo(data.id)" href="#">{{ - data.summary.bottleneck - }}</a> - </td> - <td>{{ data.kind.toUpperCase() }}</td> - <td>{{ formatSurveyDate(data.summary.date) }}</td> - <td>{{ formatSurveyDate(data.enqueued.split("T")[0]) }}</td> - <td>{{ data.user }}</td> - <td> - <button - :class="{ - 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> - </td> - <td> - <button - :class="{ - 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> - </td> - </tr> + <StagingDetail + :key="data.id" + v-for="data in filteredData" + :data="data" + ></StagingDetail> </tbody> <tbody v-else> <tr> @@ -97,11 +65,15 @@ import { STATES } from "@/store/imports.js"; import { displayError, displayInfo } from "@/lib/errors.js"; import { formatSurveyDate } from "@/lib/date.js"; +import StagingDetail from "./StagingDetail"; export default { data() { return {}; }, + components: { + StagingDetail + }, mounted() { this.loadData(); },
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/staging/StagingDetail.vue Tue Dec 18 12:56:05 2018 +0100 @@ -0,0 +1,101 @@ +<template> + <tr> + <td> + <a @click="zoomTo(data.id)" href="#">{{ data.summary.bottleneck }}</a> + </td> + <td>{{ data.kind.toUpperCase() }}</td> + <td>{{ formatSurveyDate(data.summary.date) }}</td> + <td>{{ formatSurveyDate(data.enqueued.split("T")[0]) }}</td> + <td>{{ data.user }}</td> + <td> + <button + :class="{ + 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> + </td> + <td> + <button + :class="{ + 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> + </td> + </tr> +</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"], + methods: { + 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(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) + .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></style>