# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1553601790 -3600
# Node ID 30a753f51a3c5bcc1c6c737c6f565216ccb681e1
# Parent  3b1bdbbc0225b09e08a7d3a45a87327c3e01b4a3
client: profiles: ordered bottleneck list by country code

diff -r 3b1bdbbc0225 -r 30a753f51a3c client/src/components/fairway/Profiles.vue
--- a/client/src/components/fairway/Profiles.vue	Tue Mar 26 13:02:12 2019 +0100
+++ b/client/src/components/fairway/Profiles.vue	Tue Mar 26 13:03:10 2019 +0100
@@ -25,12 +25,19 @@
           <option :value="null">
             <translate>Select Bottleneck</translate>
           </option>
-          <option
-            v-for="bn in bottlenecksList"
-            :key="bn.properties.name"
-            :value="bn.properties.name"
-            >{{ bn.properties.name }}</option
+          <optgroup
+            v-for="(bottlenecksForCountry, cc) in orderedBottlenecks"
+            :key="cc"
+            :label="cc"
           >
+            <option
+              v-for="bn in bottlenecksForCountry"
+              :key="bn.properties.name"
+              :value="bn.properties.name"
+            >
+              {{ bn.properties.name }}
+            </option>
+          </optgroup>
         </select>
         <div v-if="selectedBottleneck">
           <div class="d-flex mt-2">
@@ -264,6 +271,18 @@
       "profileLoading",
       "waterLevels"
     ]),
+    orderedBottlenecks() {
+      let orderedBottlenecks = {};
+      this.bottlenecksList.forEach(bn => {
+        let cc = bn.properties.responsible_country;
+        if (orderedBottlenecks.hasOwnProperty(cc)) {
+          orderedBottlenecks[cc].push(bn);
+        } else {
+          orderedBottlenecks[cc] = [bn];
+        }
+      });
+      return orderedBottlenecks;
+    },
     profilesLable() {
       return this.$gettext("Profiles");
     },