# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1542895548 -3600
# Node ID bcfd038b97a29f8203c7a15364004e1aa1ade482
# Parent  5aeda02c51b9fa8258fec6faa08106c89f00140d
stagingarea in new layout

diff -r 5aeda02c51b9 -r bcfd038b97a2 client/src/components/map/contextbox/Staging.vue
--- a/client/src/components/map/contextbox/Staging.vue	Thu Nov 22 13:37:29 2018 +0100
+++ b/client/src/components/map/contextbox/Staging.vue	Thu Nov 22 15:05:48 2018 +0100
@@ -24,22 +24,20 @@
                     <td>{{ data.date }}</td>
                     <td>{{ data.importID }}</td>
                     <td>
-                        <a
+                        <button
                             @click="toggleApproval(data.id, $options.STATES.APPROVED)"
-                            v-if="isApproved(data) || needsApproval(data)"
-                            class="text-success"
+                            :class="{btn:true, 'btn-sm':true, 'btn-outline-success':needsApproval(data) || isRejected(data), 'btn-success':isApproved(data)}"
                         >
                             <i class="fa fa-check"></i>
-                        </a>
+                        </button>
                     </td>
                     <td>
-                        <a
+                        <button
                             @click="toggleApproval(data.id, $options.STATES.REJECTED)"
-                            v-if="isRejected(data) || needsApproval(data)"
-                            class="text-danger"
+                            :class="{btn:true,  'btn-sm':true, 'btn-outline-danger':needsApproval(data) || isApproved(data), 'btn-danger':isRejected(data)}"
                         >
                             <i class="fa fa-close"></i>
-                        </a>
+                        </button>
                     </td>
                 </tr>
             </tbody>
@@ -177,12 +175,10 @@
       const stagedResult = this.demodata.find(e => {
         return e.id === id;
       });
-      if (this.needsApproval(stagedResult)) {
-        stagedResult.status = newStatus;
+      if (stagedResult.status === newStatus) {
+        stagedResult.status = this.$options.STATES.NEEDSAPPROVAL;
       } else {
-        stagedResult.status = this.isApproved(stagedResult)
-          ? this.$options.STATES.REJECTED
-          : this.$options.STATES.APPROVED;
+        stagedResult.status = newStatus;
       }
     }
   }