changeset 3758:5bdee22f3ce0

merging with branch infiniscroll
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 25 Jun 2019 12:08:37 +0200
parents 78ba9b2574ff (current diff) dbd2531abc17 (diff)
children b65596531fda
files
diffstat 4 files changed, 88 insertions(+), 50 deletions(-) [+]
line wrap: on
line diff
--- a/client/package.json	Tue Jun 25 10:27:09 2019 +0200
+++ b/client/package.json	Tue Jun 25 12:08:37 2019 +0200
@@ -54,6 +54,7 @@
     "vue-js-toggle-button": "^1.3.0",
     "vue-router": "^3.0.2",
     "vue-snotify": "^3.2.1",
+    "vue-virtual-scroll-list": "^1.3.9",
     "vuex": "^3.0.1",
     "webpack-cli": "^3.1.2"
   },
--- a/client/src/components/importoverview/AdditionalLog.vue	Tue Jun 25 10:27:09 2019 +0200
+++ b/client/src/components/importoverview/AdditionalLog.vue	Tue Jun 25 12:08:37 2019 +0200
@@ -5,45 +5,14 @@
       { split: showAdditional }
     ]"
   >
-    <div
-      class="d-flex flex-row px-2 border-top"
-      v-for="(line, index) in details.entries"
-      :key="index"
-    >
-      <span
-        :class="[
-          'kind',
-          {
-            'text-danger': /error/.test(line.kind),
-            'text-warning': /warn/.test(line.kind),
-            'font-weight-bold': /warn|error/.test(line.kind)
-          }
-        ]"
-        >{{ line.kind.toUpperCase() }}</span
-      >
-      <span
-        :class="[
-          'time',
-          {
-            'text-danger': /error/.test(line.kind),
-            'text-warning': /warn/.test(line.kind),
-            'font-weight-bold': /warn|error/.test(line.kind)
-          }
-        ]"
-        >{{ line.time | dateTime }}</span
-      >
-      <span
-        :class="[
-          'message',
-          {
-            'text-danger': /error/.test(line.kind),
-            'text-warning': /warn/.test(line.kind),
-            'font-weight-bold': /warn|error/.test(line.kind)
-          }
-        ]"
-        >{{ line.message }}</span
-      >
-    </div>
+    <virtual-list :size="scrollistConfig.size" :remain="scrollistConfig.remain">
+      <Item
+        class="d-flex flex-row px-2 border-top"
+        v-for="item in details.entries"
+        :key="item.time"
+        :line="item"
+      />
+    </virtual-list>
   </div>
 </template>
 
@@ -59,16 +28,6 @@
 
     &:hover
       background-color: #fcfcfc
-
-  .kind
-    width: 9%
-
-  .time
-    width: 26%
-
-  .message
-    width: 65%
-    word-wrap: break-word
 </style>
 
 <script>
@@ -86,11 +45,28 @@
  * Thomas Junk <thomas.junk@intevation.de>
  */
 import { mapState } from "vuex";
+import virtualList from "vue-virtual-scroll-list";
 
 export default {
   name: "additionallogs",
+  components: {
+    "virtual-list": virtualList,
+    Item: () => import("./LogItem.vue")
+  },
   computed: {
-    ...mapState("imports", ["showAdditional", "details"])
+    ...mapState("imports", ["showAdditional", "details"]),
+    scrollistConfig() {
+      const smallLayout = {
+        size: 10,
+        remain: 20
+      };
+      const largeLayout = {
+        size: 12,
+        remain: 22
+      };
+      if (this.showAdditional) return smallLayout;
+      return largeLayout;
+    }
   }
 };
 </script>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importoverview/LogItem.vue	Tue Jun 25 12:08:37 2019 +0200
@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <span
+      :class="[
+        'kind',
+        {
+          'text-danger': /error/.test(line.kind),
+          'text-warning': /warn/.test(line.kind),
+          'font-weight-bold': /warn|error/.test(line.kind)
+        }
+      ]"
+      >{{ line.kind.toUpperCase() }}</span
+    >
+    <span
+      :class="[
+        'time',
+        {
+          'text-danger': /error/.test(line.kind),
+          'text-warning': /warn/.test(line.kind),
+          'font-weight-bold': /warn|error/.test(line.kind)
+        }
+      ]"
+      >{{ line.time | dateTime }}</span
+    >
+    <span
+      :class="[
+        'message',
+        {
+          'text-danger': /error/.test(line.kind),
+          'text-warning': /warn/.test(line.kind),
+          'font-weight-bold': /warn|error/.test(line.kind)
+        }
+      ]"
+      >{{ line.message }}</span
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Item",
+  props: ["height", "line", "index"]
+};
+</script>
+
+<style lang="sass" scoped>
+.kind
+  width: 9%
+
+.time
+  width: 26%
+
+.message
+  width: 65%
+  word-wrap: break-word
+</style>
--- a/client/yarn.lock	Tue Jun 25 10:27:09 2019 +0200
+++ b/client/yarn.lock	Tue Jun 25 12:08:37 2019 +0200
@@ -11587,6 +11587,11 @@
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue-virtual-scroll-list@^1.3.9:
+  version "1.3.9"
+  resolved "https://registry.yarnpkg.com/vue-virtual-scroll-list/-/vue-virtual-scroll-list-1.3.9.tgz#ba3ce6425374fb323ea83ab33daa2727117808ed"
+  integrity sha512-K979Bk0Fmfxrjb9KIMhJmkIDrKLR/Y+N4B5ivJzzYoTRPGyz/JEe7jLn3vwzYt3YbU6a0KV7c0rf2DP7GGZh3g==
+
 vue@^2.5.16:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"