comparison client/src/components/staging/StagingDetail.vue @ 1615:95641748383f

refac: extracted staging details view
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 18 Dec 2018 12:56:05 +0100
parents
children 2e4ec4251c57
comparison
equal deleted inserted replaced
1614:efc409e330a6 1615:95641748383f
1 <template>
2 <tr>
3 <td>
4 <a @click="zoomTo(data.id)" href="#">{{ data.summary.bottleneck }}</a>
5 </td>
6 <td>{{ data.kind.toUpperCase() }}</td>
7 <td>{{ formatSurveyDate(data.summary.date) }}</td>
8 <td>{{ formatSurveyDate(data.enqueued.split("T")[0]) }}</td>
9 <td>{{ data.user }}</td>
10 <td>
11 <button
12 :class="{
13 btn: true,
14 'btn-sm': true,
15 'btn-outline-success': needsApproval(data) || isRejected(data),
16 'btn-success': isApproved(data)
17 }"
18 @click="toggleApproval(data.id, $options.STATES.APPROVED)"
19 >
20 <font-awesome-icon icon="check"></font-awesome-icon>
21 </button>
22 </td>
23 <td>
24 <button
25 :class="{
26 btn: true,
27 'btn-sm': true,
28 'btn-outline-danger': needsApproval(data) || isApproved(data),
29 'btn-danger': isRejected(data)
30 }"
31 @click="toggleApproval(data.id, $options.STATES.REJECTED)"
32 >
33 <font-awesome-icon icon="times"></font-awesome-icon>
34 </button>
35 </td>
36 </tr>
37 </template>
38
39 <script>
40 /* This is Free Software under GNU Affero General Public License v >= 3.0
41 * without warranty, see README.md and license for details.
42 *
43 * SPDX-License-Identifier: AGPL-3.0-or-later
44 * License-Filename: LICENSES/AGPL-3.0.txt
45 *
46 * Copyright (C) 2018 by via donau
47 * – Österreichische Wasserstraßen-Gesellschaft mbH
48 * Software engineering by Intevation GmbH
49 *
50 * Author(s):
51 * Thomas Junk <thomas.junk@intevation.de>
52 */
53
54 import { formatSurveyDate } from "@/lib/date.js";
55 import { STATES } from "@/store/imports.js";
56
57 export default {
58 name: "stagingdetail",
59 props: ["data"],
60 methods: {
61 formatSurveyDate(date) {
62 return formatSurveyDate(date);
63 },
64 needsApproval(item) {
65 return item.status === STATES.NEEDSAPPROVAL;
66 },
67 isRejected(item) {
68 return item.status === STATES.REJECTED;
69 },
70 isApproved(item) {
71 return item.status === STATES.APPROVED;
72 },
73 zoomTo(id) {
74 if (!id) return;
75 const soundingResult = this.filteredData.filter(x => x.id == id)[0];
76 const { lat, lon, bottleneck, date } = soundingResult.summary;
77 const coordinates = [lat, lon];
78
79 this.$store.commit("map/moveMap", {
80 coordinates: coordinates,
81 zoom: 17,
82 preventZoomOut: true
83 });
84 this.$store
85 .dispatch("bottlenecks/setSelectedBottleneck", bottleneck)
86 .then(() => {
87 this.$store.commit("bottlenecks/setSelectedSurveyByDate", date);
88 });
89 },
90 toggleApproval(id, newStatus) {
91 this.$store.commit("imports/toggleApproval", {
92 id: id,
93 newStatus: newStatus
94 });
95 }
96 },
97 STATES: STATES
98 };
99 </script>
100
101 <style lang="scss" scoped></style>