Mercurial > gemma

annotate client/src/components/importoverview/AGMLogItem.vue @ 3766:96ee62fb88fd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
agm_review: now with virtual scrolling
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 27 Jun 2019 15:11:02 +0200
parents
children fd6d62b08af7
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
3766
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
1 <template>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
2 <div class="d-flex flex-column">
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
3 <div class="px-2 d-flex justify-content-between">
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
4 <div class="d-flex">
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
5 <div @click="show = !show" class="my-auto text-left">
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
6 <UISpinnerButton
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
7 :state="show"
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
8 :icons="['angle-right', 'angle-down']"
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
9 classes="text-info"
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
10 />
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
11 </div>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
12 <div>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
13 {{ line["fk-gauge-id"] }}
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
14 <sup v-if="isNew(line)" class="text-success">
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
15 (<translate>New</translate>)
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
16 </sup>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
17 </div>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
18 </div>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
19 <div>{{ line["measure-date"] | dateTime }}</div>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
20 </div>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
21 <div v-if="show" class="compare-table">
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
22 <div class="row no-gutters px-4 text-left font-weight-bold">
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
23 <div :class="isNew(line) ? 'col-6' : 'col-4'">
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
24 <translate>Value</translate>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
25 </div>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
26 <div v-if="isOld(line)" class="col-4">
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
27 <translate>Old</translate>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
28 </div>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
29 <div :class="isNew(line) ? 'col-6' : 'col-4'">
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
30 <translate>New</translate>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
31 </div>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
32 </div>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
33 <div
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
34 class="row no-gutters px-4 text-left"
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
35 v-for="(entry, index) in Object.keys(line.versions[0])"
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
36 :key="index"
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
37 v-if="isNew(line) || isDifferent(line, entry)"
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
38 >
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
39 <div :class="isNew(line) ? 'col-6' : 'col-4'">
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
40 {{ entry }}
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
41 </div>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
42 <div :class="isNew(line) ? 'col-6' : 'col-4'">
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
43 {{ line.versions[0][entry] }}
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
44 </div>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
45 <div
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
46 v-if="isOld(line) && isDifferent(line, entry)"
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
47 :class="isNew(line) ? 'col-6' : 'col-4'"
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
48 >
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
49 {{ line.versions[1][entry] }}
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
50 </div>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
51 </div>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
52 </div>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
53 </div>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
54 </template>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
55
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
56 <script>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
57 export default {
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
58 props: ["line", "index", "showDiff"],
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
59 data() {
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
60 return {
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
61 show: this.index == this.showDiff
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
62 };
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
63 },
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
64 methods: {
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
65 isNew(result) {
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
66 return result && result.versions && result.versions.length === 1;
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
67 },
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
68 isOld(result) {
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
69 return !this.isNew(result);
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
70 },
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
71 isDifferent(result, entry) {
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
72 return (
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
73 this.isOld(result) &&
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
74 result.versions[0][entry] != result.versions[1][entry]
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
75 );
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
76 }
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
77 }
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
78 };
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
79 </script>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
80
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
81 <style lang="sass" scoped>
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
82 .diffs
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
83 width: 100%
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
84 overflow-y: auto
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
85 > div
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
86 border-top: dashed 1px #dee2e6
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
87 &:first-child
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
88 border-top: none
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
89 .compare-table
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
90 position: relative
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
91 overflow: hidden
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
92 &::after
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
93 content: ''
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
94 position: absolute
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
95 top: 0
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
96 right: -5px
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
97 bottom: 0
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
98 left: -5px
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
99 box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4)
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
100 > div
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
101 font-size: 0.7rem
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
102 &:nth-child(odd)
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
103 background-color: #f8f9fa
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
104
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
105 .split
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
106 max-height: 35vh
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
107
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
108 .full
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
109 max-height: 70vh
96ee62fb88fd agm_review: now with virtual scrolling
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
110 </style>