# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1549628496 -3600
# Node ID 0e2f4b059897c922bb0d4657defbaf227b13bd00
# Parent  b6b6993853028f9fd60505f5f2658ef6c894c22c
staging: agm diff visually adjusted

diff -r b6b699385302 -r 0e2f4b059897 client/src/components/staging/StagingDetail.vue
--- a/client/src/components/staging/StagingDetail.vue	Fri Feb 08 13:18:34 2019 +0100
+++ b/client/src/components/staging/StagingDetail.vue	Fri Feb 08 13:21:36 2019 +0100
@@ -173,21 +173,30 @@
     </div>
     <div v-if="showAGMDetails">
       <div class="pl-3 d-flex flex-row">
-        <span class="condensed header agmcode text-left"
-          ><translate>ISRS Code</translate></span
+        <span class="condensed agmcode text-left"
+          ><small><translate>ISRS Code</translate></small></span
         >
-        <span class="condensed header agmdetail text-left"
-          ><translate>Date of measurement</translate></span
+        <span class="condensed agmdetail text-left"
+          ><small><translate>Date of measurement</translate></small></span
         >
       </div>
       <div v-for="(result, index) in data.summary" :key="index">
         <div @click="toggleDiff(index)" class="pl-3 d-flex flex-row">
-          <span class="condensed agmcode text-left">{{
-            result["fk-gauge-id"]
-          }}</span>
-          <span class="condensed agmdetail text-left">{{
-            formatSurveyDate(result["measure-date"])
-          }}</span>
+          <span
+            v-if="result.versions.length == 1"
+            class="condensed agmcode text-left"
+            ><small
+              >{{ result["fk-gauge-id"] }} <translate>( New )</translate></small
+            ></span
+          >
+          <span
+            v-if="result.versions.length == 2"
+            class="condensed agmcode text-left"
+            ><small>{{ result["fk-gauge-id"] }}</small></span
+          >
+          <span class="condensed agmdetail text-left"
+            ><small>{{ formatSurveyDate(result["measure-date"]) }}</small></span
+          >
           <div
             @click="showBottleneckDetails = !showBottleneckDetails"
             class="small ml-auto mt-auto mb-auto text-info text-left"
@@ -208,17 +217,48 @@
         </div>
         <div v-if="showDiff == index" class="pl-3 d-flex flex-row">
           <div>
+            <div class="d-flex flex-row condensed pl-3 text-left">
+              <div class="header border-bottom agmdetailskeys">
+                <small><translate>Value</translate></small>
+              </div>
+              <div class="header border-bottom agmdetailsvalues">
+                <small><translate>Old</translate></small>
+              </div>
+              <div class="header border-bottom agmdetailsvalues">
+                <small><translate>New</translate></small>
+              </div>
+            </div>
             <div
               class="d-flex flex-row condensed pl-3 text-left"
               v-for="(entry, index) in Object.keys(result.versions[0])"
               :key="index"
             >
-              <div class="agmdetailskeys">{{ entry }}</div>
-              <div class="agmdetailsvalues">
-                {{ result.versions[0][entry] }}
+              <div
+                v-if="
+                  result.versions.length == 1 ||
+                    result.versions[0][entry] != result.versions[1][entry]
+                "
+                class="agmdetailskeys"
+              >
+                <small>{{ entry }}</small>
               </div>
-              <div v-if="result.versions.length == 2" class="agmdetailsvalues">
-                {{ result.versions[1][entry] }}
+              <div
+                v-if="
+                  result.versions.length == 1 ||
+                    result.versions[0][entry] != result.versions[1][entry]
+                "
+                class="agmdetailsvalues"
+              >
+                <small>{{ result.versions[0][entry] }}</small>
+              </div>
+              <div
+                v-if="
+                  result.versions.length == 2 &&
+                    result.versions[0][entry] != result.versions[1][entry]
+                "
+                class="agmdetailsvalues"
+              >
+                <small>{{ result.versions[1][entry] }}</small>
               </div>
             </div>
           </div>
@@ -252,12 +292,14 @@
 import { mapState } from "vuex";
 import { LAYERS } from "@/store/map.js";
 
+const NO_DIFF = -1;
+
 export default {
   name: "stagingdetail",
   props: ["data"],
   data() {
     return {
-      showDiff: -1,
+      showDiff: NO_DIFF,
       showAGMDetails: false,
       showBottleneckDetails: false,
       show: false,
@@ -288,6 +330,9 @@
     }
   },
   watch: {
+    showAGMDetails() {
+      if (!this.showAGMDetails) this.showDiff = NO_DIFF;
+    },
     open() {
       const { review } = this.$route.query;
       if (review) {