changeset 779:8ba1be486833

client: improve search * Add display of searchResults as list-group.
author Bernhard Reiter <bernhard@intevation.de>
date Wed, 26 Sep 2018 13:46:18 +0200
parents 9be20bd0f131
children c98f88ac08a4
files client/src/application/Topbar.vue
diffstat 1 files changed, 14 insertions(+), 2 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/application/Topbar.vue	Wed Sep 26 13:17:32 2018 +0200
+++ b/client/src/application/Topbar.vue	Wed Sep 26 13:46:18 2018 +0200
@@ -10,6 +10,12 @@
                 </span>
             </div>
             <input v-if="!searchbarCollapsed" id="search" v-model="searchQuery" type="text" class="form-control ui-element search searchbar">
+            <ul v-if="!searchbarCollapsed && searchResults !== null " class="list-group">
+              <li v-for="entry of searchResults" :key="entry.name"
+                  class="list-group-item">
+                {{entry.name}}
+              </li>
+            </ul>
         </div>
         <div v-if="routeName == 'mainview'" class="splitbutton">
             <i @click="splitScreen" class="ui-element splitscreen fa fa-window-restore shadow"></i>
@@ -104,6 +110,7 @@
       searchbarCollapsed: true,
       searchQuery: "",
       searchQueryIsDirty: false,
+      searchResults: null,
       isSearching: false
     };
   },
@@ -136,7 +143,11 @@
   methods: {
     doSearch() {
       this.isCalculating = true;
-      console.log("Starting search of", this.searchQuery);
+      this.searchResults = null;
+
+      if (this.searchQuery == "") {
+        return;
+      }
 
       HTTP.post(
         "/search",
@@ -149,7 +160,8 @@
         }
       )
         .then(response => {
-          console.log("got:", response.data);
+          // console.log("got:", response.data);
+          this.searchResults = response.data;
         })
         .catch(error => {
           const { status, data } = error.response;