# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1561641062 -7200
# Node ID 96ee62fb88fd0c2c51ee2b6ecc94e067c295d05e
# Parent  750df9c6bbdf48b4eb85c810e04d6af9e80a2edc
agm_review: now with virtual scrolling

diff -r 750df9c6bbdf -r 96ee62fb88fd client/src/components/importoverview/AGMLogItem.vue
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importoverview/AGMLogItem.vue	Thu Jun 27 15:11:02 2019 +0200
@@ -0,0 +1,110 @@
+<template>
+  <div class="d-flex flex-column">
+    <div class="px-2 d-flex justify-content-between">
+      <div class="d-flex">
+        <div @click="show = !show" class="my-auto text-left">
+          <UISpinnerButton
+            :state="show"
+            :icons="['angle-right', 'angle-down']"
+            classes="text-info"
+          />
+        </div>
+        <div>
+          {{ line["fk-gauge-id"] }}
+          <sup v-if="isNew(line)" class="text-success">
+            (<translate>New</translate>)
+          </sup>
+        </div>
+      </div>
+      <div>{{ line["measure-date"] | dateTime }}</div>
+    </div>
+    <div v-if="show" class="compare-table">
+      <div class="row no-gutters px-4 text-left font-weight-bold">
+        <div :class="isNew(line) ? 'col-6' : 'col-4'">
+          <translate>Value</translate>
+        </div>
+        <div v-if="isOld(line)" class="col-4">
+          <translate>Old</translate>
+        </div>
+        <div :class="isNew(line) ? 'col-6' : 'col-4'">
+          <translate>New</translate>
+        </div>
+      </div>
+      <div
+        class="row no-gutters px-4 text-left"
+        v-for="(entry, index) in Object.keys(line.versions[0])"
+        :key="index"
+        v-if="isNew(line) || isDifferent(line, entry)"
+      >
+        <div :class="isNew(line) ? 'col-6' : 'col-4'">
+          {{ entry }}
+        </div>
+        <div :class="isNew(line) ? 'col-6' : 'col-4'">
+          {{ line.versions[0][entry] }}
+        </div>
+        <div
+          v-if="isOld(line) && isDifferent(line, entry)"
+          :class="isNew(line) ? 'col-6' : 'col-4'"
+        >
+          {{ line.versions[1][entry] }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["line", "index", "showDiff"],
+  data() {
+    return {
+      show: this.index == this.showDiff
+    };
+  },
+  methods: {
+    isNew(result) {
+      return result && result.versions && result.versions.length === 1;
+    },
+    isOld(result) {
+      return !this.isNew(result);
+    },
+    isDifferent(result, entry) {
+      return (
+        this.isOld(result) &&
+        result.versions[0][entry] != result.versions[1][entry]
+      );
+    }
+  }
+};
+</script>
+
+<style lang="sass" scoped>
+.diffs
+  width: 100%
+  overflow-y: auto
+  > div
+    border-top: dashed 1px #dee2e6
+    &:first-child
+      border-top: none
+    .compare-table
+      position: relative
+      overflow: hidden
+      &::after
+        content: ''
+        position: absolute
+        top: 0
+        right: -5px
+        bottom: 0
+        left: -5px
+        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4)
+      > div
+        font-size: 0.7rem
+        &:nth-child(odd)
+          background-color: #f8f9fa
+
+.split
+  max-height: 35vh
+
+.full
+  max-height: 70vh
+</style>
diff -r 750df9c6bbdf -r 96ee62fb88fd client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue
--- a/client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue	Wed Jun 26 18:26:58 2019 +0200
+++ b/client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue	Thu Jun 27 15:11:02 2019 +0200
@@ -6,58 +6,16 @@
       split: showLogs
     }"
   >
-    <div v-for="(result, index) in details.summary" :key="index">
-      <div class="px-2 d-flex justify-content-between">
-        <div class="d-flex">
-          <div @click="toggleDiff(index)" class="my-auto text-left">
-            <UISpinnerButton
-              :state="showDiff === index"
-              :icons="['angle-right', 'angle-down']"
-              classes="text-info"
-            />
-          </div>
-          <div>
-            {{ result["fk-gauge-id"] }}
-            <sup v-if="isNew(result)" class="text-success">
-              (<translate>New</translate>)
-            </sup>
-          </div>
-        </div>
-        <div>{{ result["measure-date"] | dateTime }}</div>
-      </div>
-      <div v-if="showDiff === index" class="compare-table">
-        <div class="row no-gutters px-4 text-left font-weight-bold">
-          <div :class="isNew(result) ? 'col-6' : 'col-4'">
-            <translate>Value</translate>
-          </div>
-          <div v-if="isOld(result)" class="col-4">
-            <translate>Old</translate>
-          </div>
-          <div :class="isNew(result) ? 'col-6' : 'col-4'">
-            <translate>New</translate>
-          </div>
-        </div>
-        <div
-          class="row no-gutters px-4 text-left"
-          v-for="(entry, index) in Object.keys(result.versions[0])"
-          :key="index"
-          v-if="isNew(result) || isDifferent(result, entry)"
-        >
-          <div :class="isNew(result) ? 'col-6' : 'col-4'">
-            {{ entry }}
-          </div>
-          <div :class="isNew(result) ? 'col-6' : 'col-4'">
-            {{ result.versions[0][entry] }}
-          </div>
-          <div
-            v-if="isOld(result) && isDifferent(result, entry)"
-            :class="isNew(result) ? 'col-6' : 'col-4'"
-          >
-            {{ result.versions[1][entry] }}
-          </div>
-        </div>
-      </div>
-    </div>
+    <virtual-list :size="scrollistConfig.size" :remain="scrollistConfig.remain">
+      <Item
+        class="d-flex flex-row px-2 border-top"
+        v-for="(item, index) in details.summary"
+        :key="index"
+        :line="item"
+        :index="index"
+        :showDiff="showDiff"
+      />
+    </virtual-list>
   </div>
 </template>
 
@@ -107,6 +65,7 @@
  * Thomas Junk <thomas.junk@intevation.de>
  */
 import { mapState } from "vuex";
+import virtualList from "vue-virtual-scroll-list";
 
 export default {
   data() {
@@ -114,8 +73,24 @@
       showDiff: 0 // open first item by default
     };
   },
+  components: {
+    "virtual-list": virtualList,
+    Item: () => import("./AGMLogItem")
+  },
   computed: {
-    ...mapState("imports", ["showLogs", "details"])
+    ...mapState("imports", ["showLogs", "details"]),
+    scrollistConfig() {
+      const smallLayout = {
+        size: 10,
+        remain: 20
+      };
+      const largeLayout = {
+        size: 12,
+        remain: 22
+      };
+      if (this.showAdditional) return smallLayout;
+      return largeLayout;
+    }
   },
   methods: {
     toggleDiff(number) {
@@ -124,18 +99,6 @@
       } else {
         this.showDiff = false;
       }
-    },
-    isNew(result) {
-      return result && result.versions && result.versions.length === 1;
-    },
-    isOld(result) {
-      return !this.isNew(result);
-    },
-    isDifferent(result, entry) {
-      return (
-        this.isOld(result) &&
-        result.versions[0][entry] != result.versions[1][entry]
-      );
     }
   }
 };