Mercurial > gemma
changeset 3766:96ee62fb88fd
agm_review: now with virtual scrolling
| author | Thomas Junk <thomas.junk@intevation.de> |
|---|---|
| date | Thu, 27 Jun 2019 15:11:02 +0200 |
| parents | 750df9c6bbdf |
| children | fd6d62b08af7 |
| files | client/src/components/importoverview/AGMLogItem.vue client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue |
| diffstat | 2 files changed, 138 insertions(+), 65 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/importoverview/AGMLogItem.vue Thu Jun 27 15:11:02 2019 +0200 @@ -0,0 +1,110 @@ +<template> + <div class="d-flex flex-column"> + <div class="px-2 d-flex justify-content-between"> + <div class="d-flex"> + <div @click="show = !show" class="my-auto text-left"> + <UISpinnerButton + :state="show" + :icons="['angle-right', 'angle-down']" + classes="text-info" + /> + </div> + <div> + {{ line["fk-gauge-id"] }} + <sup v-if="isNew(line)" class="text-success"> + (<translate>New</translate>) + </sup> + </div> + </div> + <div>{{ line["measure-date"] | dateTime }}</div> + </div> + <div v-if="show" class="compare-table"> + <div class="row no-gutters px-4 text-left font-weight-bold"> + <div :class="isNew(line) ? 'col-6' : 'col-4'"> + <translate>Value</translate> + </div> + <div v-if="isOld(line)" class="col-4"> + <translate>Old</translate> + </div> + <div :class="isNew(line) ? 'col-6' : 'col-4'"> + <translate>New</translate> + </div> + </div> + <div + class="row no-gutters px-4 text-left" + v-for="(entry, index) in Object.keys(line.versions[0])" + :key="index" + v-if="isNew(line) || isDifferent(line, entry)" + > + <div :class="isNew(line) ? 'col-6' : 'col-4'"> + {{ entry }} + </div> + <div :class="isNew(line) ? 'col-6' : 'col-4'"> + {{ line.versions[0][entry] }} + </div> + <div + v-if="isOld(line) && isDifferent(line, entry)" + :class="isNew(line) ? 'col-6' : 'col-4'" + > + {{ line.versions[1][entry] }} + </div> + </div> + </div> + </div> +</template> + +<script> +export default { + props: ["line", "index", "showDiff"], + data() { + return { + show: this.index == this.showDiff + }; + }, + methods: { + isNew(result) { + return result && result.versions && result.versions.length === 1; + }, + isOld(result) { + return !this.isNew(result); + }, + isDifferent(result, entry) { + return ( + this.isOld(result) && + result.versions[0][entry] != result.versions[1][entry] + ); + } + } +}; +</script> + +<style lang="sass" scoped> +.diffs + width: 100% + overflow-y: auto + > div + border-top: dashed 1px #dee2e6 + &:first-child + border-top: none + .compare-table + position: relative + overflow: hidden + &::after + content: '' + position: absolute + top: 0 + right: -5px + bottom: 0 + left: -5px + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4) + > div + font-size: 0.7rem + &:nth-child(odd) + background-color: #f8f9fa + +.split + max-height: 35vh + +.full + max-height: 70vh +</style>
--- a/client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue Wed Jun 26 18:26:58 2019 +0200 +++ b/client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue Thu Jun 27 15:11:02 2019 +0200 @@ -6,58 +6,16 @@ split: showLogs }" > - <div v-for="(result, index) in details.summary" :key="index"> - <div class="px-2 d-flex justify-content-between"> - <div class="d-flex"> - <div @click="toggleDiff(index)" class="my-auto text-left"> - <UISpinnerButton - :state="showDiff === index" - :icons="['angle-right', 'angle-down']" - classes="text-info" - /> - </div> - <div> - {{ result["fk-gauge-id"] }} - <sup v-if="isNew(result)" class="text-success"> - (<translate>New</translate>) - </sup> - </div> - </div> - <div>{{ result["measure-date"] | dateTime }}</div> - </div> - <div v-if="showDiff === index" class="compare-table"> - <div class="row no-gutters px-4 text-left font-weight-bold"> - <div :class="isNew(result) ? 'col-6' : 'col-4'"> - <translate>Value</translate> - </div> - <div v-if="isOld(result)" class="col-4"> - <translate>Old</translate> - </div> - <div :class="isNew(result) ? 'col-6' : 'col-4'"> - <translate>New</translate> - </div> - </div> - <div - class="row no-gutters px-4 text-left" - v-for="(entry, index) in Object.keys(result.versions[0])" - :key="index" - v-if="isNew(result) || isDifferent(result, entry)" - > - <div :class="isNew(result) ? 'col-6' : 'col-4'"> - {{ entry }} - </div> - <div :class="isNew(result) ? 'col-6' : 'col-4'"> - {{ result.versions[0][entry] }} - </div> - <div - v-if="isOld(result) && isDifferent(result, entry)" - :class="isNew(result) ? 'col-6' : 'col-4'" - > - {{ result.versions[1][entry] }} - </div> - </div> - </div> - </div> + <virtual-list :size="scrollistConfig.size" :remain="scrollistConfig.remain"> + <Item + class="d-flex flex-row px-2 border-top" + v-for="(item, index) in details.summary" + :key="index" + :line="item" + :index="index" + :showDiff="showDiff" + /> + </virtual-list> </div> </template> @@ -107,6 +65,7 @@ * Thomas Junk <thomas.junk@intevation.de> */ import { mapState } from "vuex"; +import virtualList from "vue-virtual-scroll-list"; export default { data() { @@ -114,8 +73,24 @@ showDiff: 0 // open first item by default }; }, + components: { + "virtual-list": virtualList, + Item: () => import("./AGMLogItem") + }, computed: { - ...mapState("imports", ["showLogs", "details"]) + ...mapState("imports", ["showLogs", "details"]), + scrollistConfig() { + const smallLayout = { + size: 10, + remain: 20 + }; + const largeLayout = { + size: 12, + remain: 22 + }; + if (this.showAdditional) return smallLayout; + return largeLayout; + } }, methods: { toggleDiff(number) { @@ -124,18 +99,6 @@ } else { this.showDiff = false; } - }, - isNew(result) { - return result && result.versions && result.versions.length === 1; - }, - isOld(result) { - return !this.isNew(result); - }, - isDifferent(result, entry) { - return ( - this.isOld(result) && - result.versions[0][entry] != result.versions[1][entry] - ); } } };