Mercurial > gemma
comparison client/src/components/staging/StagingDetail.vue @ 2352:0d7b51930028
staging: fix detailsbutton behaviour with (U)BN. Only open one instead of all subdetailentries
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 20 Feb 2019 12:09:19 +0100 |
parents | 9c4d6a61ad1d |
children | d66f60163c2f |
comparison
equal
deleted
inserted
replaced
2351:9c4d6a61ad1d | 2352:0d7b51930028 |
---|---|
135 <div class="d-flex flex-row"> | 135 <div class="d-flex flex-row"> |
136 <a @click="moveToBottleneck(index)" class="small" href="#">{{ | 136 <a @click="moveToBottleneck(index)" class="small" href="#">{{ |
137 bottleneck.properties.objnam | 137 bottleneck.properties.objnam |
138 }}</a> | 138 }}</a> |
139 <div | 139 <div |
140 @click="showBottleneckDetails = !showBottleneckDetails" | 140 @click="showBottleneckDetails(index)" |
141 class="small mt-auto mb-auto text-info text-left" | 141 class="small mt-auto mb-auto text-info text-left" |
142 > | 142 > |
143 <font-awesome-icon | 143 <font-awesome-icon |
144 class="pointer" | 144 class="pointer" |
145 v-if="showBottleneckDetails" | 145 v-if="showBottleneckDetail === index" |
146 icon="angle-up" | 146 icon="angle-up" |
147 fixed-width | 147 fixed-width |
148 ></font-awesome-icon> | 148 ></font-awesome-icon> |
149 <font-awesome-icon | 149 <font-awesome-icon |
150 class="pointer" | 150 class="pointer" |
151 v-if="!showBottleneckDetails" | 151 v-if="!(showBottleneckDetail === index)" |
152 icon="angle-down" | 152 icon="angle-down" |
153 fixed-width | 153 fixed-width |
154 ></font-awesome-icon> | 154 ></font-awesome-icon> |
155 </div> | 155 </div> |
156 </div> | 156 </div> |
157 | 157 |
158 <div class="d-flex flex-row" v-if="showBottleneckDetails"> | 158 <div class="d-flex flex-row" v-if="showBottleneckDetail === index"> |
159 <table> | 159 <table> |
160 <tr | 160 <tr |
161 v-for="(info, index) in Object.keys(bottleneck.properties)" | 161 v-for="(info, index) in Object.keys(bottleneck.properties)" |
162 :key="index" | 162 :key="index" |
163 class="mr-1 small text-muted" | 163 class="mr-1 small text-muted" |
298 import { displayError } from "@/lib/errors.js"; | 298 import { displayError } from "@/lib/errors.js"; |
299 import { mapState } from "vuex"; | 299 import { mapState } from "vuex"; |
300 import { LAYERS } from "@/store/map.js"; | 300 import { LAYERS } from "@/store/map.js"; |
301 | 301 |
302 const NO_DIFF = -1; | 302 const NO_DIFF = -1; |
303 const NO_BOTTLENECK = -1; | |
303 | 304 |
304 export default { | 305 export default { |
305 name: "stagingdetail", | 306 name: "stagingdetail", |
306 props: ["data"], | 307 props: ["data"], |
307 data() { | 308 data() { |
308 return { | 309 return { |
309 showDiff: NO_DIFF, | 310 showDiff: NO_DIFF, |
310 showAGMDetails: false, | 311 showAGMDetails: false, |
311 showBottleneckDetails: false, | 312 showBottleneckDetail: NO_BOTTLENECK, |
312 show: false, | 313 show: false, |
313 loading: false, | 314 loading: false, |
314 bottlenecks: [] | 315 bottlenecks: [] |
315 }; | 316 }; |
316 }, | 317 }, |
350 this.$store.commit("imports/setImportToReview", id); | 351 this.$store.commit("imports/setImportToReview", id); |
351 if (this.open) this.showDetails(); | 352 if (this.open) this.showDetails(); |
352 } | 353 } |
353 }, | 354 }, |
354 methods: { | 355 methods: { |
356 showBottleneckDetails(index) { | |
357 if (index == this.showBottleneckDetail) { | |
358 this.showBottleneckDetail = NO_BOTTLENECK; | |
359 return; | |
360 } | |
361 this.showBottleneckDetail = index; | |
362 }, | |
355 toggleDiff(number) { | 363 toggleDiff(number) { |
356 if (this.showDiff !== number || this.showDiff == -1) { | 364 if (this.showDiff !== number || this.showDiff == -1) { |
357 this.showDiff = number; | 365 this.showDiff = number; |
358 } else { | 366 } else { |
359 this.showDiff = -1; | 367 this.showDiff = -1; |