Mercurial > gemma
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;