Mercurial > gemma
changeset 773:22c3acea700d
client: add to search processing
* Add code that processes the input value and calls a stub doSearch()
function if typing is interrupted for 500 mseconds (aka debounced).
* Offer an indicator with three states: done, typing, searching.
Which are not used yet.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Wed, 26 Sep 2018 11:57:30 +0200 |
parents | 990a9d85ac6c |
children | acd8e7af29aa bb3558142b18 |
files | client/src/application/Topbar.vue |
diffstat | 1 files changed, 29 insertions(+), 2 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/Topbar.vue Wed Sep 26 09:49:00 2018 +0200 +++ b/client/src/application/Topbar.vue Wed Sep 26 11:57:30 2018 +0200 @@ -9,7 +9,7 @@ <i class="fa fa-search"></i> </span> </div> - <input v-if="!searchbarCollapsed" id="search" type="text" class="form-control ui-element search searchbar"> + <input v-if="!searchbarCollapsed" id="search" v-model="searchQuery" type="text" class="form-control ui-element search searchbar"> </div> <div v-if="routeName == 'mainview'" class="splitbutton"> <i @click="splitScreen" class="ui-element splitscreen fa fa-window-restore shadow"></i> @@ -86,6 +86,8 @@ <script> +import debounce from 'lodash.debounce' + import Layers from "../layers/Layers"; import Identify from "../layers/Identify"; @@ -97,10 +99,22 @@ }, data() { return { - searchbarCollapsed: true + searchbarCollapsed: true, + searchQuery: "", + searchQueryIsDirty: false, + isSearching: false }; }, computed: { + searchIndicator: function () { + if (this.isSearching) { + return '⟳'; + } else if (this.searchQueryIsDirty) { + return ''; + } else { + return '✓'; + } + }, searchbarContainerStyle() { return { "input-group": true, @@ -111,7 +125,20 @@ } }, props: ["routeName"], + watch: { + searchQuery: function() { + this.searchQueryIsDirty = true; + this.doSearch(); + } + }, methods: { + doSearch: debounce(function() { + this.isCalculating = true; + console.log("Would start search of", this.searchQuery); + this.isCalculating = false; + this.searchQueryIsDirty = false; + }, 500 + ), toggleSearchbar() { this.searchbarCollapsed = !this.searchbarCollapsed; },