Mercurial > gemma
changeset 1346:474e95475832
Merged.
author | Sascha L. Teichmann <sascha.teichmann@intevation.de> |
---|---|
date | Mon, 26 Nov 2018 11:30:53 +0100 |
parents | 6a021108410b (current diff) eda98694e678 (diff) |
children | 594f3f1e45aa |
files | |
diffstat | 3 files changed, 68 insertions(+), 114 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/map/contextbox/Staging.vue Mon Nov 26 11:30:28 2018 +0100 +++ b/client/src/components/map/contextbox/Staging.vue Mon Nov 26 11:30:53 2018 +0100 @@ -1,55 +1,55 @@ <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>Staging Area - </h6> - <table class="table mb-0"> - <thead> - <tr> - <th>Name</th> - <th>Datatype</th> - <th>Importdate</th> - <th>ImportID</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.location)" href="#">{{ data.name }}</a> - </td> - <td>{{ data.type }}</td> - <td>{{ data.date }}</td> - <td>{{ data.importID }}</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">No results.</td> - </tr> - </tbody> - </table> - <div class="p-3" v-if="filteredData.length"> - <button @click="confirmReview" class="btn btn-info">Confirm</button> - </div> + <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>Staging Area + </h6> + <table class="table mb-0"> + <thead> + <tr> + <th>Name</th> + <th>Datatype</th> + <th>Importdate</th> + <th>ImportID</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.location)" href="#">{{ data.name }}</a> + </td> + <td>{{ data.type }}</td> + <td>{{ data.date }}</td> + <td>{{ data.importID }}</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">No results.</td> + </tr> + </tbody> + </table> + <div class="p-3" v-if="filteredData.length"> + <button @click="confirmReview" class="btn btn-info">Confirm</button> </div> + </div> </template> <script> @@ -67,56 +67,12 @@ * Thomas Junk <thomas.junk@intevation.de> */ import { mapState } from "vuex"; - +import { STATES } from "../../../store/imports.js"; import { displayError, displayInfo } from "../../../lib/errors.js"; export default { - STATES: { - NEEDSAPPROVAL: "NEEDSAPPROVAL", - APPROVED: "APPROVED", - REJECTED: "REJECTED" - }, data() { - return { - demodata: [ - { - id: 1, - name: "B1", - date: "2018-11-19 10:23", - location: [16.5364, 48.1471], - status: "NEEDSAPPROVAL", - importID: "123456789", - type: "bottleneck" - }, - { - id: 2, - name: "B2", - date: "2018-11-19 10:24", - location: [16.5364, 48.1472], - status: "NEEDSAPPROVAL", - importID: "123456789", - type: "bottleneck" - }, - { - id: 3, - name: "s1", - date: "2018-11-13 10:25", - location: [16.5364, 48.1473], - status: "NEEDSAPPROVAL", - importID: "987654321", - type: "soundingresult" - }, - { - id: 4, - name: "s2", - date: "2018-11-13 10:26", - location: [16.5364, 48.1474], - status: "NEEDSAPPROVAL", - importID: "987654321", - type: "soundingresult" - } - ] - }; + return {}; }, mounted() { this.$store.dispatch("imports/getStaging").catch(error => { @@ -129,8 +85,9 @@ }, computed: { ...mapState("application", ["searchQuery"]), + ...mapState("imports", ["staging"]), filteredData() { - return this.demodata.filter(data => { + return this.staging.filter(data => { const nameFound = data.name .toLowerCase() .includes(this.searchQuery.toLowerCase()); @@ -177,13 +134,13 @@ }); }, needsApproval(item) { - return item.status === this.$options.STATES.NEEDSAPPROVAL; + return item.status === STATES.NEEDSAPPROVAL; }, isRejected(item) { - return item.status === this.$options.STATES.REJECTED; + return item.status === STATES.REJECTED; }, isApproved(item) { - return item.status === this.$options.STATES.APPROVED; + return item.status === STATES.APPROVED; }, zoomTo(coordinates) { this.$store.commit("map/moveMap", { @@ -193,14 +150,10 @@ }); }, toggleApproval(id, newStatus) { - const stagedResult = this.demodata.find(e => { - return e.id === id; + this.$store.commit("imports/toggleApproval", { + id: id, + newStatus: newStatus }); - if (stagedResult.status === newStatus) { - stagedResult.status = this.$options.STATES.NEEDSAPPROVAL; - } else { - stagedResult.status = newStatus; - } } } };
--- a/client/src/store/imports.js Mon Nov 26 11:30:28 2018 +0100 +++ b/client/src/store/imports.js Mon Nov 26 11:30:53 2018 +0100 @@ -31,7 +31,7 @@ }; }; -export default { +const imports = { init, namespaced: true, state: init(), @@ -44,15 +44,14 @@ }, toggleApproval: (state, change) => { - throw "Not implemented!"; - const { id, newState } = change; + const { id, newStatus } = change; const stagedResult = this.state.staging.find(e => { return e.id === id; }); - if (stagedResult.status === newState) { - stagedResult.status = this.$options.STATES.NEEDSAPPROVAL; + if (stagedResult.status === newStatus) { + stagedResult.status = STATES.NEEDSAPPROVAL; } else { - stagedResult.status = newState; + stagedResult.status = newStatus; } } }, @@ -102,3 +101,5 @@ } } }; + +export { imports, STATES };
--- a/client/src/store/index.js Mon Nov 26 11:30:28 2018 +0100 +++ b/client/src/store/index.js Mon Nov 26 11:30:53 2018 +0100 @@ -22,7 +22,7 @@ import map from "./map"; import fairwayprofile from "./fairway"; import bottlenecks from "./bottlenecks"; -import imports from "./imports"; +import { imports } from "./imports"; Vue.use(Vuex);