Mercurial > gemma
changeset 1290:ad528ad130d6
staging area: basic layout and selectionlogic
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 22 Nov 2018 13:10:22 +0100 |
parents | e1480ad4b6b0 |
children | e9fb72fa6bae |
files | client/src/components/map/contextbox/Staging.vue |
diffstat | 1 files changed, 88 insertions(+), 48 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/map/contextbox/Staging.vue Thu Nov 22 12:40:45 2018 +0100 +++ b/client/src/components/map/contextbox/Staging.vue Thu Nov 22 13:10:22 2018 +0100 @@ -1,5 +1,5 @@ <template> - <div> + <div class="w-90"> <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> <i class="fa fa-list-ol mr-2"></i> Staging Area @@ -12,6 +12,7 @@ <th>Importdate</th> <th>ImportID</th> <th> </th> + <th> </th> </tr> </thead> <tbody v-if="filteredData.length"> @@ -23,13 +24,22 @@ <td>{{ data.date }}</td> <td>{{ data.importID }}</td> <td> - <button class="btn btn-outline-info"> - <i class="fa fa-thumbs-up"></i> - </button> - - <button class="btn btn-outline-info"> - <i class="fa fa-thumbs-down"></i> - </button> + <a + @click="toggleApproval(data.id, $options.STATES.APPROVED)" + v-if="isApproved(data) || needsApproval(data)" + class="text-success" + > + <i class="fa fa-check"></i> + </a> + </td> + <td> + <a + @click="toggleApproval(data.id, $options.STATES.REJECTED)" + v-if="isRejected(data) || needsApproval(data)" + class="text-danger" + > + <i class="fa fa-close"></i> + </a> </td> </tr> </tbody> @@ -61,50 +71,58 @@ */ import { mapState } from "vuex"; -const demodata = [ - { - id: 1, - name: "B1", - date: "2018-11-19 10:23", - location: [16.5364, 48.1471], - status: "Not approved", - importID: "123456789", - type: "bottleneck" - }, - { - id: 2, - name: "B2", - date: "2018-11-19 10:24", - location: [16.5364, 48.1472], - status: "Not approved", - importID: "123456789", - type: "bottleneck" +export default { + STATES: { + NEEDSAPPROVAL: "NEEDSAPPROVAL", + APPROVED: "APPROVED", + REJECTED: "REJECTED" }, - { - id: 3, - name: "s1", - date: "2018-11-13 10:25", - location: [16.5364, 48.1473], - status: "Not approved", - importID: "987654321", - type: "soundingresult" + 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" + } + ] + }; }, - { - id: 4, - name: "s2", - date: "2018-11-13 10:26", - location: [16.5364, 48.1474], - status: "Not approved", - importID: "987654321", - type: "soundingresult" - } -]; - -export default { computed: { ...mapState("application", ["searchQuery"]), filteredData() { - return demodata.filter(data => { + return this.demodata.filter(data => { const nameFound = data.name .toLowerCase() .includes(this.searchQuery.toLowerCase()); @@ -139,18 +157,40 @@ } }, methods: { + needsApproval(item) { + return item.status === this.$options.STATES.NEEDSAPPROVAL; + }, + isRejected(item) { + return item.status === this.$options.STATES.REJECTED; + }, + isApproved(item) { + return item.status === this.$options.STATES.APPROVED; + }, zoomTo(coordinates) { this.$store.commit("map/moveMap", { coordinates: coordinates, zoom: 17, preventZoomOut: true }); + }, + toggleApproval(id, newStatus) { + const stagedResult = this.demodata.find(e => { + return e.id === id; + }); + if (this.needsApproval(stagedResult)) { + stagedResult.status = newStatus; + } else { + stagedResult.status = this.isApproved(stagedResult) + ? this.$options.STATES.REJECTED + : this.$options.STATES.APPROVED; + } } } }; </script> -<style lang="sass" scoped> +<style lang="sass" scoped> + .table th, td font-size: 0.9rem