Mercurial > gemma
comparison client/src/components/importconfiguration/types/Soundingresults.vue @ 3692:3138836bf840
import_soundingresults: bottlenecks grouped by countrycode
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 18 Jun 2019 17:44:28 +0200 |
parents | 3c4f6b9acaad |
children | 5754793ff9b0 |
comparison
equal
deleted
inserted
replaced
3691:afc8ac7001ee | 3692:3138836bf840 |
---|---|
11 <div class="d-flex"> | 11 <div class="d-flex"> |
12 <div class="text-left mr-3"> | 12 <div class="text-left mr-3"> |
13 <small class="text-muted"> | 13 <small class="text-muted"> |
14 <translate>Bottleneck</translate> | 14 <translate>Bottleneck</translate> |
15 </small> | 15 </small> |
16 <select v-model="bottleneck" class="custom-select custom-select-sm"> | 16 <select class="form-control font-weight-bold" v-model="bottleneck"> |
17 <option | 17 <option :value="null">{{ placeholder }}</option> |
18 v-for="bottleneck in availableBottlenecks" | 18 <optgroup |
19 :value="bottleneck" | 19 v-for="(bottlenecksForCountry, cc) in orderedBottlenecks" |
20 :key="bottleneck.properties.objnam" | 20 :key="cc" |
21 :label="cc" | |
21 > | 22 > |
22 {{ bottleneck.properties.objnam }} | 23 <option |
23 </option> | 24 v-for="bn in bottlenecksForCountry" |
25 :key="bn.properties.objnam" | |
26 :value="bn" | |
27 > | |
28 {{ bn.properties.objnam }} | |
29 </option> | |
30 </optgroup> | |
24 </select> | 31 </select> |
25 <span class="text-danger"> | 32 <span class="text-danger"> |
26 <small v-if="!bottleneck"> | 33 <small v-if="!bottleneck"> |
27 <translate>Please select a bottleneck</translate> | 34 <translate>Please select a bottleneck</translate> |
28 </small> | 35 </small> |
354 return this.disableUpload; | 361 return this.disableUpload; |
355 }, | 362 }, |
356 availableBottlenecks() { | 363 availableBottlenecks() { |
357 return this.bottlenecks; | 364 return this.bottlenecks; |
358 }, | 365 }, |
366 placeholder() { | |
367 return this.$gettext("Select bottleneck"); | |
368 }, | |
369 orderedBottlenecks() { | |
370 let groupedBottlenecks = {}, | |
371 orderedGroups = {}; | |
372 | |
373 // group bottlenecks by cc | |
374 this.availableBottlenecks.forEach(bn => { | |
375 let cc = bn.properties.responsible_country; | |
376 if (groupedBottlenecks.hasOwnProperty(cc)) { | |
377 groupedBottlenecks[cc].push(bn); | |
378 } else { | |
379 groupedBottlenecks[cc] = [bn]; | |
380 } | |
381 }); | |
382 | |
383 // order groups by cc | |
384 Object.keys(groupedBottlenecks) | |
385 .sort() | |
386 .forEach(cc => (orderedGroups[cc] = groupedBottlenecks[cc])); | |
387 | |
388 return orderedGroups; | |
389 }, | |
359 editState() { | 390 editState() { |
360 return this.importState === IMPORTSTATE.EDIT; | 391 return this.importState === IMPORTSTATE.EDIT; |
361 }, | 392 }, |
362 uploadState() { | 393 uploadState() { |
363 return this.importState === IMPORTSTATE.UPLOAD; | 394 return this.importState === IMPORTSTATE.UPLOAD; |