# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1544007387 -3600
# Node ID b76b23b3df61cd2054efcdab0365a4922441f7c7
# Parent  0abcc82ef9760b2463ceae7ef9d5d399d63756fb
staging-area: added refresh button

diff -r 0abcc82ef976 -r b76b23b3df61 client/src/components/map/contextbox/Staging.vue
--- a/client/src/components/map/contextbox/Staging.vue	Wed Dec 05 11:21:22 2018 +0100
+++ b/client/src/components/map/contextbox/Staging.vue	Wed Dec 05 11:56:27 2018 +0100
@@ -1,13 +1,13 @@
 <template>
-  <div class="w-90">
+  <div class="w-90 stagingcard">
     <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
       <font-awesome-icon
+        class="mr-2"
         icon="clipboard-check"
-        class="mr-2"
       ></font-awesome-icon>
       <translate>Staging Area</translate>
     </h6>
-    <table class="table mb-0">
+    <table class="table">
       <thead>
         <tr>
           <th><translate>Name</translate></th>
@@ -20,7 +20,7 @@
         </tr>
       </thead>
       <tbody v-if="filteredData.length">
-        <tr v-for="data in filteredData" :key="data.id">
+        <tr :key="data.id" v-for="data in filteredData">
           <td>
             <a @click="zoomTo(data.id)" href="#">{{
               data.summary.bottleneck
@@ -32,26 +32,26 @@
           <td>{{ data.user }}</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)
               }"
+              @click="toggleApproval(data.id, $options.STATES.APPROVED)"
             >
               <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)
               }"
+              @click="toggleApproval(data.id, $options.STATES.REJECTED)"
             >
               <font-awesome-icon icon="times"></font-awesome-icon>
             </button>
@@ -67,10 +67,13 @@
       </tbody>
     </table>
     <div class="p-3" v-if="filteredData.length">
-      <button @click="confirmReview" class="btn btn-info">
+      <button @click="confirmReview" class="confirm-button btn btn-info">
         <translate>Confirm</translate>
       </button>
     </div>
+    <div class="p-3">
+      <button @click="loadData" class="refresh btn btn-dark">Refresh</button>
+    </div>
   </div>
 </template>
 
@@ -199,6 +202,11 @@
 </script>
 
 <style lang="scss" scoped>
+.refresh {
+  position: absolute;
+  left: $offset;
+  bottom: $offset;
+}
 .table th,
 td {
   font-size: 0.9rem;
@@ -207,4 +215,15 @@
   text-align: left;
   padding: 0.5rem !important;
 }
+
+.stagingcard {
+  position: relative;
+  min-height: 150px;
+}
+
+.confirm-button {
+  position: absolute;
+  right: $offset;
+  bottom: $offset;
+}
 </style>