Mercurial > gemma
changeset 775:acd8e7af29aa
Merged.
author | Sascha L. Teichmann <sascha.teichmann@intevation.de> |
---|---|
date | Wed, 26 Sep 2018 12:22:12 +0200 |
parents | c55771b7c502 (current diff) 22c3acea700d (diff) |
children | f27bfc57143b |
files | |
diffstat | 1 files changed, 29 insertions(+), 2 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/Topbar.vue Wed Sep 26 12:21:12 2018 +0200 +++ b/client/src/application/Topbar.vue Wed Sep 26 12:22:12 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; },