Mercurial > gemma
annotate client/src/components/importoverview/AGMLogItem.vue @ 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 | |
children | fd6d62b08af7 |
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> |