Mercurial > gemma
changeset 3750:dbdef91a3ff3 infiniscroll
first implementation
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 20 Jun 2019 17:21:09 +0200 |
parents | e1972355fcfb |
children | ac12e135d4b8 |
files | client/package.json client/src/components/importoverview/AdditionalLog.vue client/src/components/importoverview/LogItem.vue client/yarn.lock |
diffstat | 4 files changed, 77 insertions(+), 12 deletions(-) [+] |
line wrap: on
line diff
--- a/client/package.json Thu Jun 20 13:47:54 2019 +0200 +++ b/client/package.json Thu Jun 20 17:21:09 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 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"]) }
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/importoverview/LogItem.vue Thu Jun 20 17:21:09 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 Thu Jun 20 13:47:54 2019 +0200 +++ b/client/yarn.lock Thu Jun 20 17:21:09 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"