Mercurial > gemma

comparison client/src/application/Topbar.vue @ 773:22c3acea700d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 c12ec7fde3f2
children bb3558142b18
comparison
equal deleted inserted replaced
772:990a9d85ac6c 773:22c3acea700d
7 <div class="input-group-prepend shadow"> 7 <div class="input-group-prepend shadow">
8 <span @click="toggleSearchbar" class="ui-element input-group-text searchlabel" for="search"> 8 <span @click="toggleSearchbar" class="ui-element input-group-text searchlabel" for="search">
9 <i class="fa fa-search"></i> 9 <i class="fa fa-search"></i>
10 </span> 10 </span>
11 </div> 11 </div>
12 <input v-if="!searchbarCollapsed" id="search" type="text" class="form-control ui-element search searchbar"> 12 <input v-if="!searchbarCollapsed" id="search" v-model="searchQuery" type="text" class="form-control ui-element search searchbar">
13 </div> 13 </div>
14 <div v-if="routeName == 'mainview'" class="splitbutton"> 14 <div v-if="routeName == 'mainview'" class="splitbutton">
15 <i @click="splitScreen" class="ui-element splitscreen fa fa-window-restore shadow"></i> 15 <i @click="splitScreen" class="ui-element splitscreen fa fa-window-restore shadow"></i>
16 </div> 16 </div>
17 <div class=""> 17 <div class="">
84 } 84 }
85 </style> 85 </style>
86 86
87 87
88 <script> 88 <script>
89 import debounce from 'lodash.debounce'
90
89 import Layers from "../layers/Layers"; 91 import Layers from "../layers/Layers";
90 import Identify from "../layers/Identify"; 92 import Identify from "../layers/Identify";
91 93
92 export default { 94 export default {
93 name: "topbar", 95 name: "topbar",
95 Identify: Identify, 97 Identify: Identify,
96 Layers: Layers 98 Layers: Layers
97 }, 99 },
98 data() { 100 data() {
99 return { 101 return {
100 searchbarCollapsed: true 102 searchbarCollapsed: true,
103 searchQuery: "",
104 searchQueryIsDirty: false,
105 isSearching: false
101 }; 106 };
102 }, 107 },
103 computed: { 108 computed: {
109 searchIndicator: function () {
110 if (this.isSearching) {
111 return '⟳';
112 } else if (this.searchQueryIsDirty) {
113 return '';
114 } else {
115 return '✓';
116 }
117 },
104 searchbarContainerStyle() { 118 searchbarContainerStyle() {
105 return { 119 return {
106 "input-group": true, 120 "input-group": true,
107 searchcontainer: true, 121 searchcontainer: true,
108 "searchbar-collapsed": this.searchbarCollapsed, 122 "searchbar-collapsed": this.searchbarCollapsed,
109 "searchbar-expanded": !this.searchbarCollapsed 123 "searchbar-expanded": !this.searchbarCollapsed
110 }; 124 };
111 } 125 }
112 }, 126 },
113 props: ["routeName"], 127 props: ["routeName"],
128 watch: {
129 searchQuery: function() {
130 this.searchQueryIsDirty = true;
131 this.doSearch();
132 }
133 },
114 methods: { 134 methods: {
135 doSearch: debounce(function() {
136 this.isCalculating = true;
137 console.log("Would start search of", this.searchQuery);
138 this.isCalculating = false;
139 this.searchQueryIsDirty = false;
140 }, 500
141 ),
115 toggleSearchbar() { 142 toggleSearchbar() {
116 this.searchbarCollapsed = !this.searchbarCollapsed; 143 this.searchbarCollapsed = !this.searchbarCollapsed;
117 }, 144 },
118 toggleSidebar() { 145 toggleSidebar() {
119 this.$store.commit("application/toggleSidebar"); 146 this.$store.commit("application/toggleSidebar");