# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1542636171 -3600
# Node ID 5a8e8ee9034d80dafc2943fb893e3ab68dc47cf7
# Parent  3372cf2a55c79dc3ac4de889d22175fb8ce525f9
staging prototypical listview

diff -r 3372cf2a55c7 -r 5a8e8ee9034d client/src/staging/Staging.vue
--- a/client/src/staging/Staging.vue	Mon Nov 19 14:23:39 2018 +0100
+++ b/client/src/staging/Staging.vue	Mon Nov 19 15:02:51 2018 +0100
@@ -1,5 +1,8 @@
 <template>
-    <div v-if="showStagingArea" class="staging-card bg-white mx-auto rounded position-relative">
+    <div
+        v-if="showStagingArea"
+        class="ui-element staging-card bg-white mx-auto rounded position-relative"
+    >
         <div class="p-3">
             <div
                 @click="$store.commit('application/showStagingArea', !showStagingArea);"
@@ -11,16 +14,81 @@
                 <h4>Staging area</h4>
                 <hr>
             </div>
-            <div class="d-flex flex-row input-group mb-4"></div>
+            <div class="d-flex flex-row input-group mb-4">
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Datatype</th>
+                            <th>Importdate</th>
+                            <th>ImportID</th>
+                            <th>&nbsp;</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="data in filteredData" :key="data.id">
+                            <td>{{data.name}}</td>
+                            <td>{{data.date}}</td>
+                            <td>{{data.type}}</td>
+                            <td>{{data.importID}}</td>
+                            <td>
+                                <input
+                                    type="checkbox"
+                                    aria-label="Checkbox for following text input"
+                                >
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
 import { mapState } from "vuex";
+
+const demodata = [
+  {
+    id: 1,
+    name: "B1",
+    date: "2018-11-19",
+    status: "Not approved",
+    importID: "123456789",
+    type: "bottleneck"
+  },
+  {
+    id: 2,
+    name: "B2",
+    date: "2018-11-19",
+    status: "Not approved",
+    importID: "123456789",
+    type: "bottleneck"
+  },
+  {
+    id: 3,
+    name: "s1",
+    date: "2018-11-13",
+    status: "Not approved",
+    importID: "987654321",
+    type: "soundingresult"
+  },
+  {
+    id: 4,
+    name: "s2",
+    date: "2018-11-13",
+    status: "Not approved",
+    importID: "987654321",
+    type: "soundingresult"
+  }
+];
+
 export default {
   computed: {
-    ...mapState("application", ["showStagingArea"])
+    ...mapState("application", ["showStagingArea"]),
+    filteredData() {
+      return demodata;
+    }
   }
 };
 </script>
@@ -37,4 +105,12 @@
   width: 30rem
   height: 28rem
   opacity: $slight-transparent
+  min-width: 600px
+
+.table th,
+td
+  font-size: 0.9rem
+  border-top: 0px !important
+  text-align: left
+  padding: 0.5rem !important
 </style>