changeset 781:f6a6ce90a1b5

client: improve search * Make result entries clickable and catch the event. * Sort methods: in code.
author Bernhard Reiter <bernhard@intevation.de>
date Wed, 26 Sep 2018 14:35:55 +0200
parents c98f88ac08a4
children cb6dc630c702
files client/src/application/Topbar.vue
diffstat 1 files changed, 15 insertions(+), 5 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/application/Topbar.vue	Wed Sep 26 14:25:21 2018 +0200
+++ b/client/src/application/Topbar.vue	Wed Sep 26 14:35:55 2018 +0200
@@ -13,7 +13,8 @@
             <ul v-if="!searchbarCollapsed && searchResults !== null " class="list-group">
               <li v-for="entry of searchResults" :key="entry.name"
                   class="list-group-item">
-                {{entry.name}}
+                <a href="#" @click.prevent="moveToSearchResult(entry)"
+                   >{{entry.name}}</a>
               </li>
             </ul>
         </div>
@@ -33,6 +34,9 @@
 .splitbutton {
   height: $icon-height;
 }
+.list-group {
+  pointer-events: auto;
+}
 .splitscreen {
   background-color: white;
   padding: $small-offset;
@@ -141,6 +145,9 @@
     }
   },
   methods: {
+    triggerSearch: debounce(function() {
+      this.doSearch();
+    }, 500),
     doSearch() {
       this.isCalculating = true;
       this.searchResults = null;
@@ -174,6 +181,12 @@
       this.isCalculating = false;
       this.searchQueryIsDirty = false;
     },
+    moveToSearchResult(resultEntry) {
+      console.log("Moving to", resultEntry);
+      if(resultEntry.geom.type == "Point") {
+
+      }
+    },
     toggleSearchbar() {
       this.searchbarCollapsed = !this.searchbarCollapsed;
     },
@@ -182,10 +195,7 @@
     },
     splitScreen() {
       this.$store.commit("application/toggleSplitScreen");
-    },
-    triggerSearch: debounce(function() {
-      this.doSearch();
-    }, 500)
+    }
   }
 };
 </script>