Mercurial > gemma

diff client/src/bottlenecks/Bottlenecks.vue @ 1204:ddfdf440da24

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
made searchbar contextual if bottlenecks are open search bar refers to that list if imports are open search bar is hidden
author Markus Kottlaender <markus@intevation.de>
date Mon, 19 Nov 2018 11:23:00 +0100
parents d61be0d972d8
children 70116d392387
line wrap: on
line diff
--- a/client/src/bottlenecks/Bottlenecks.vue	Mon Nov 19 09:09:27 2018 +0100
+++ b/client/src/bottlenecks/Bottlenecks.vue	Mon Nov 19 11:23:00 2018 +0100
@@ -1,13 +1,12 @@
 <template>
     <div :class="bottlenecksStyle">
-        <div @click="$store.commit('application/showBottlenecks', !showBottlenecks);" class="ui-element close-bottlenecks">
+        <div @click="closeBottlenecks" class="ui-element close-bottlenecks">
             <i class="fa fa-close"></i>
         </div>
 
         <h4>Bottlenecks</h4>
         <hr class="mb-0">
-        <input type="text" v-model="search" placeholder="Search Bottleneck..." class="border-0 w-100 p-2" />
-        <div class="row p-2 border-top text-left small">
+        <div class="row p-2 text-left small">
             <div class="col-5">
                 <a href="#" @click="sortBy('name')" class="sort-link">Name</a>
                 <i :class="sortClass" v-if="sortColumn === 'name'"></i>
@@ -73,7 +72,6 @@
   name: "bottlenecks",
   data() {
     return {
-      search: "",
       sortColumn: "name",
       sortDirection: "ASC",
       openBottleneck: null,
@@ -81,12 +79,16 @@
     };
   },
   computed: {
-    ...mapState("application", ["showBottlenecks", "showSidebar"]),
+    ...mapState("application", [
+      "showBottlenecks",
+      "showSidebar",
+      "searchQuery"
+    ]),
     ...mapState("bottlenecks", ["bottlenecks"]),
     ...mapState("map", ["openLayersMap"]),
     bottlenecksStyle() {
       return [
-        "ui-element shadow bottlenecks",
+        "ui-element shadow bottlenecks border-top",
         {
           bottleneckscollapsed: !this.showBottlenecks,
           bottlenecksextended: this.showBottlenecks
@@ -109,7 +111,7 @@
         .filter(bn => {
           return bn.properties.name
             .toLowerCase()
-            .includes(this.search.toLowerCase());
+            .includes(this.searchQuery.toLowerCase());
         })
         .sort((bnA, bnB) => {
           switch (this.sortColumn) {
@@ -194,6 +196,10 @@
           });
       }
     },
+    closeBottlenecks() {
+      this.$store.commit("application/showBottlenecks", false);
+      this.$store.commit("application/showSearchbar", false);
+    },
     displayCurrentSurvey(current) {
       return current ? current.substr(0, current.length - 1) : "";
     },
@@ -213,7 +219,8 @@
   background-color: #ffffff
   padding-top: $offset
   opacity: $slight-transparent
-  border-radius: $border-radius
+  border-bottom-left-radius: $border-radius
+  border-bottom-right-radius: $border-radius
   transition: left 0.3s ease
   overflow: hidden
   background: #fff