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;