Mercurial > gemma
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"