Mercurial > gemma
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"]) }