diff client/src/components/importoverview/AdditionalLog.vue @ 3750:dbdef91a3ff3 infiniscroll

first implementation
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 20 Jun 2019 17:21:09 +0200
parents 91539caae611
children 7ca3b288ac5e
line wrap: on
line diff
--- a/client/src/components/importoverview/AdditionalLog.vue	Thu Jun 20 13:47:54 2019 +0200
+++ b/client/src/components/importoverview/AdditionalLog.vue	Thu Jun 20 17:21:09 2019 +0200
@@ -5,7 +5,15 @@
       { split: showAdditional }
     ]"
   >
-    <div
+    <virtual-list :size="20" :remain="8">
+      <Item
+        class="d-flex flex-row px-2 border-top"
+        v-for="item in details.entries"
+        :key="item.time"
+        :line="item"
+      />
+    </virtual-list>
+    <!-- <div
       class="d-flex flex-row px-2 border-top"
       v-for="(line, index) in details.entries"
       :key="index"
@@ -43,7 +51,7 @@
         ]"
         >{{ line.message }}</span
       >
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -59,16 +67,6 @@
 
     &:hover
       background-color: #fcfcfc
-
-  .kind
-    width: 9%
-
-  .time
-    width: 26%
-
-  .message
-    width: 65%
-    word-wrap: break-word
 </style>
 
 <script>
@@ -86,9 +84,14 @@
  * 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"])
   }