diff client/src/components/importoverview/AdditionalLog.vue @ 3755:7ca3b288ac5e infiniscroll

virtual_scrolling: size parameter
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 25 Jun 2019 12:04:45 +0200
parents dbdef91a3ff3
children da3fd4c3d1b5
line wrap: on
line diff
--- a/client/src/components/importoverview/AdditionalLog.vue	Tue Jun 25 08:58:35 2019 +0200
+++ b/client/src/components/importoverview/AdditionalLog.vue	Tue Jun 25 12:04:45 2019 +0200
@@ -5,7 +5,7 @@
       { split: showAdditional }
     ]"
   >
-    <virtual-list :size="20" :remain="8">
+    <virtual-list :size="scrollistConfig.size" :remain="scrollistConfig.remain">
       <Item
         class="d-flex flex-row px-2 border-top"
         v-for="item in details.entries"
@@ -13,45 +13,6 @@
         :line="item"
       />
     </virtual-list>
-    <!-- <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> -->
   </div>
 </template>
 
@@ -93,7 +54,19 @@
     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>