# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1543228202 -3600
# Node ID eda98694e678604d67f39941ac4bcc380d338cbf
# Parent  9e0beb3736904f58f2bf232c560f05b3640f84fc
staging: retrieve real data instead of displaying demodata

diff -r 9e0beb373690 -r eda98694e678 client/src/components/map/contextbox/Staging.vue
--- a/client/src/components/map/contextbox/Staging.vue	Mon Nov 26 11:15:52 2018 +0100
+++ b/client/src/components/map/contextbox/Staging.vue	Mon Nov 26 11:30:02 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>&nbsp;</th>
-                    <th>&nbsp;</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>&nbsp;</th>
+          <th>&nbsp;</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;
-      }
     }
   }
 };
diff -r 9e0beb373690 -r eda98694e678 client/src/store/imports.js
--- a/client/src/store/imports.js	Mon Nov 26 11:15:52 2018 +0100
+++ b/client/src/store/imports.js	Mon Nov 26 11:30:02 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 };
diff -r 9e0beb373690 -r eda98694e678 client/src/store/index.js
--- a/client/src/store/index.js	Mon Nov 26 11:15:52 2018 +0100
+++ b/client/src/store/index.js	Mon Nov 26 11:30:02 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);