comparison client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue @ 2914:84a40983bb9f

client: importsoverview: improved opening mechanism for additional details
author Markus Kottlaender <markus@intevation.de>
date Wed, 03 Apr 2019 12:55:32 +0200
parents 399b03e59411
children ce148a7fb896
comparison
equal deleted inserted replaced
2913:cf6f595af2cb 2914:84a40983bb9f
6 split: showLogs 6 split: showLogs
7 }" 7 }"
8 > 8 >
9 <div v-for="(result, index) in details.summary" :key="index"> 9 <div v-for="(result, index) in details.summary" :key="index">
10 <div class="pl-2 d-flex flex-row"> 10 <div class="pl-2 d-flex flex-row">
11 <div 11 <div @click="toggleDiff(index)" class="my-auto text-left">
12 @click="toggleDiff(index)"
13 class="small mt-auto mb-auto text-info text-left"
14 >
15 <UISpinnerButton 12 <UISpinnerButton
16 :state="showDiff == index" 13 :state="showDiff === index"
17 :icons="['angle-right', 'angle-down']" 14 :icons="['angle-right', 'angle-down']"
18 class="text-info" 15 class="text-info"
19 /> 16 />
20 </div> 17 </div>
21 <span v-if="result.versions.length == 1" class="agmcode text-left" 18 <span v-if="result.versions.length == 1" class="agmcode text-left"
28 > 25 >
29 <span class="text-left" 26 <span class="text-left"
30 ><div>{{ result["measure-date"] | dateTime }}</div></span 27 ><div>{{ result["measure-date"] | dateTime }}</div></span
31 > 28 >
32 </div> 29 </div>
33 <div v-if="showDiff == index" class="pl-3 d-flex flex-row"> 30 <div v-if="showDiff === index" class="pl-3 d-flex flex-row">
34 <div class="w-100"> 31 <div class="w-100">
35 <div class="d-flex flex-row pl-3 text-left"> 32 <div class="d-flex flex-row pl-3 text-left">
36 <div class="header border-bottom agmdetailskeys"> 33 <div class="header border-bottom agmdetailskeys">
37 <small><translate>Value</translate></small> 34 <small><translate>Value</translate></small>
38 </div> 35 </div>
126 export default { 123 export default {
127 name: "agmdetails", 124 name: "agmdetails",
128 props: ["entry"], 125 props: ["entry"],
129 data() { 126 data() {
130 return { 127 return {
131 showDiff: false 128 showDiff: 0 // open first item by default
132 }; 129 };
133 }, 130 },
134 computed: { 131 computed: {
135 ...mapState("imports", ["showLogs", "details"]) 132 ...mapState("imports", ["showLogs", "details"])
136 }, 133 },