Mercurial > gemma

comparison client/src/components/map/contextbox/Staging.vue @ 1344:eda98694e678

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
staging: retrieve real data instead of displaying demodata
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 26 Nov 2018 11:30:02 +0100
parents 97d9e689520b
children 58d41573e530
comparison
equal deleted inserted replaced
1343:9e0beb373690 1344:eda98694e678
1 <template> 1 <template>
2 <div class="w-90"> 2 <div class="w-90">
3 <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> 3 <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
4 <font-awesome-icon icon="clipboard-check" class="mr-2"></font-awesome-icon>Staging Area 4 <font-awesome-icon icon="clipboard-check" class="mr-2"></font-awesome-icon>Staging Area
5 </h6> 5 </h6>
6 <table class="table mb-0"> 6 <table class="table mb-0">
7 <thead> 7 <thead>
8 <tr> 8 <tr>
9 <th>Name</th> 9 <th>Name</th>
10 <th>Datatype</th> 10 <th>Datatype</th>
11 <th>Importdate</th> 11 <th>Importdate</th>
12 <th>ImportID</th> 12 <th>ImportID</th>
13 <th>&nbsp;</th> 13 <th>&nbsp;</th>
14 <th>&nbsp;</th> 14 <th>&nbsp;</th>
15 </tr> 15 </tr>
16 </thead> 16 </thead>
17 <tbody v-if="filteredData.length"> 17 <tbody v-if="filteredData.length">
18 <tr v-for="data in filteredData" :key="data.id"> 18 <tr v-for="data in filteredData" :key="data.id">
19 <td> 19 <td>
20 <a @click="zoomTo(data.location)" href="#">{{ data.name }}</a> 20 <a @click="zoomTo(data.location)" href="#">{{ data.name }}</a>
21 </td> 21 </td>
22 <td>{{ data.type }}</td> 22 <td>{{ data.type }}</td>
23 <td>{{ data.date }}</td> 23 <td>{{ data.date }}</td>
24 <td>{{ data.importID }}</td> 24 <td>{{ data.importID }}</td>
25 <td> 25 <td>
26 <button 26 <button
27 @click="toggleApproval(data.id, $options.STATES.APPROVED)" 27 @click="toggleApproval(data.id, $options.STATES.APPROVED)"
28 :class="{btn:true, 'btn-sm':true, 'btn-outline-success':needsApproval(data) || isRejected(data), 'btn-success':isApproved(data)}" 28 :class="{btn:true, 'btn-sm':true, 'btn-outline-success':needsApproval(data) || isRejected(data), 'btn-success':isApproved(data)}"
29 > 29 >
30 <font-awesome-icon icon="check"></font-awesome-icon> 30 <font-awesome-icon icon="check"></font-awesome-icon>
31 </button> 31 </button>
32 </td> 32 </td>
33 <td> 33 <td>
34 <button 34 <button
35 @click="toggleApproval(data.id, $options.STATES.REJECTED)" 35 @click="toggleApproval(data.id, $options.STATES.REJECTED)"
36 :class="{btn:true, 'btn-sm':true, 'btn-outline-danger':needsApproval(data) || isApproved(data), 'btn-danger':isRejected(data)}" 36 :class="{btn:true, 'btn-sm':true, 'btn-outline-danger':needsApproval(data) || isApproved(data), 'btn-danger':isRejected(data)}"
37 > 37 >
38 <font-awesome-icon icon="times"></font-awesome-icon> 38 <font-awesome-icon icon="times"></font-awesome-icon>
39 </button> 39 </button>
40 </td> 40 </td>
41 </tr> 41 </tr>
42 </tbody> 42 </tbody>
43 <tbody v-else> 43 <tbody v-else>
44 <tr> 44 <tr>
45 <td class="text-center" colspan="6">No results.</td> 45 <td class="text-center" colspan="6">No results.</td>
46 </tr> 46 </tr>
47 </tbody> 47 </tbody>
48 </table> 48 </table>
49 <div class="p-3" v-if="filteredData.length"> 49 <div class="p-3" v-if="filteredData.length">
50 <button @click="confirmReview" class="btn btn-info">Confirm</button> 50 <button @click="confirmReview" class="btn btn-info">Confirm</button>
51 </div>
52 </div> 51 </div>
52 </div>
53 </template> 53 </template>
54 54
55 <script> 55 <script>
56 /* This is Free Software under GNU Affero General Public License v >= 3.0 56 /* This is Free Software under GNU Affero General Public License v >= 3.0
57 * without warranty, see README.md and license for details. 57 * without warranty, see README.md and license for details.
65 * 65 *
66 * Author(s): 66 * Author(s):
67 * Thomas Junk <thomas.junk@intevation.de> 67 * Thomas Junk <thomas.junk@intevation.de>
68 */ 68 */
69 import { mapState } from "vuex"; 69 import { mapState } from "vuex";
70 70 import { STATES } from "../../../store/imports.js";
71 import { displayError, displayInfo } from "../../../lib/errors.js"; 71 import { displayError, displayInfo } from "../../../lib/errors.js";
72 72
73 export default { 73 export default {
74 STATES: {
75 NEEDSAPPROVAL: "NEEDSAPPROVAL",
76 APPROVED: "APPROVED",
77 REJECTED: "REJECTED"
78 },
79 data() { 74 data() {
80 return { 75 return {};
81 demodata: [
82 {
83 id: 1,
84 name: "B1",
85 date: "2018-11-19 10:23",
86 location: [16.5364, 48.1471],
87 status: "NEEDSAPPROVAL",
88 importID: "123456789",
89 type: "bottleneck"
90 },
91 {
92 id: 2,
93 name: "B2",
94 date: "2018-11-19 10:24",
95 location: [16.5364, 48.1472],
96 status: "NEEDSAPPROVAL",
97 importID: "123456789",
98 type: "bottleneck"
99 },
100 {
101 id: 3,
102 name: "s1",
103 date: "2018-11-13 10:25",
104 location: [16.5364, 48.1473],
105 status: "NEEDSAPPROVAL",
106 importID: "987654321",
107 type: "soundingresult"
108 },
109 {
110 id: 4,
111 name: "s2",
112 date: "2018-11-13 10:26",
113 location: [16.5364, 48.1474],
114 status: "NEEDSAPPROVAL",
115 importID: "987654321",
116 type: "soundingresult"
117 }
118 ]
119 };
120 }, 76 },
121 mounted() { 77 mounted() {
122 this.$store.dispatch("imports/getStaging").catch(error => { 78 this.$store.dispatch("imports/getStaging").catch(error => {
123 const { status, data } = error.response; 79 const { status, data } = error.response;
124 displayError({ 80 displayError({
127 }); 83 });
128 }); 84 });
129 }, 85 },
130 computed: { 86 computed: {
131 ...mapState("application", ["searchQuery"]), 87 ...mapState("application", ["searchQuery"]),
88 ...mapState("imports", ["staging"]),
132 filteredData() { 89 filteredData() {
133 return this.demodata.filter(data => { 90 return this.staging.filter(data => {
134 const nameFound = data.name 91 const nameFound = data.name
135 .toLowerCase() 92 .toLowerCase()
136 .includes(this.searchQuery.toLowerCase()); 93 .includes(this.searchQuery.toLowerCase());
137 const dateFound = data.date 94 const dateFound = data.date
138 .toLowerCase() 95 .toLowerCase()
175 title: "Staging Area", 132 title: "Staging Area",
176 message: message 133 message: message
177 }); 134 });
178 }, 135 },
179 needsApproval(item) { 136 needsApproval(item) {
180 return item.status === this.$options.STATES.NEEDSAPPROVAL; 137 return item.status === STATES.NEEDSAPPROVAL;
181 }, 138 },
182 isRejected(item) { 139 isRejected(item) {
183 return item.status === this.$options.STATES.REJECTED; 140 return item.status === STATES.REJECTED;
184 }, 141 },
185 isApproved(item) { 142 isApproved(item) {
186 return item.status === this.$options.STATES.APPROVED; 143 return item.status === STATES.APPROVED;
187 }, 144 },
188 zoomTo(coordinates) { 145 zoomTo(coordinates) {
189 this.$store.commit("map/moveMap", { 146 this.$store.commit("map/moveMap", {
190 coordinates: coordinates, 147 coordinates: coordinates,
191 zoom: 17, 148 zoom: 17,
192 preventZoomOut: true 149 preventZoomOut: true
193 }); 150 });
194 }, 151 },
195 toggleApproval(id, newStatus) { 152 toggleApproval(id, newStatus) {
196 const stagedResult = this.demodata.find(e => { 153 this.$store.commit("imports/toggleApproval", {
197 return e.id === id; 154 id: id,
155 newStatus: newStatus
198 }); 156 });
199 if (stagedResult.status === newStatus) {
200 stagedResult.status = this.$options.STATES.NEEDSAPPROVAL;
201 } else {
202 stagedResult.status = newStatus;
203 }
204 } 157 }
205 } 158 }
206 }; 159 };
207 </script> 160 </script>
208 161