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