Mercurial > gemma
view client/src/components/importoverview/AGMLogItem.vue @ 3802:e8a950cf6c02 yworks-svg2pdf
Move Template loading and Imageprocessing to mixin
Rationale:
1) Template loading is a process used by many components.
As such it makes sense to parametrize the URL and centralize loading.
2) Imageprocessing has to be done after each template is loaded on the client
As such it makes sense to centralize that.
To make handling easier, each (1) and (2) is in an independend Promise
to make chaining of calls easier to read.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 04 Jul 2019 10:57:43 +0200 |
parents | fd6d62b08af7 |
children | fe3dd65c0891 |
line wrap: on
line source
<template> <div class="d-flex flex-column"> <div class="px-2 d-flex justify-content-between"> <div class="d-flex"> <div @click="toggleShow(index)" 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"], computed: { show() { return this.index === this.showDiff; } }, methods: { toggleShow(index) { this.$emit("openDiff", index); }, 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>