diff --git a/tailbone/templates/grids/buefy.mako b/tailbone/templates/grids/buefy.mako index 6fdcf77d..a3e6e229 100644 --- a/tailbone/templates/grids/buefy.mako +++ b/tailbone/templates/grids/buefy.mako @@ -358,7 +358,6 @@ let ${grid.component_studly}Data = { loading: false, - selectedFilter: null, ajaxDataUrl: ${json.dumps(grid.ajax_data_url)|n}, data: ${grid.component_studly}CurrentData, @@ -401,7 +400,8 @@ ## filterable: ${json.dumps(grid.filterable)|n}, filters: ${json.dumps(filters_data if grid.filterable else None)|n}, filtersSequence: ${json.dumps(filters_sequence if grid.filterable else None)|n}, - selectedFilter: null, + addFilterTerm: '', + addFilterShow: false, ## dummy input value needed for sharing links on *insecure* sites % if request.scheme == 'http': @@ -420,6 +420,39 @@ computed: { + addFilterChoices() { + + // collect all filters, which are *not* already shown + let choices = [] + for (let field of this.filtersSequence) { + let filtr = this.filters[field] + if (!filtr.visible) { + choices.push(filtr) + } + } + + // parse list of search terms + let terms = [] + for (let term of this.addFilterTerm.toLowerCase().split(' ')) { + term = term.trim() + if (term) { + terms.push(term) + } + } + + // only filters matching all search terms are presented + // as choices to the user + return choices.filter(option => { + let label = option.label.toLowerCase() + for (let term of terms) { + if (label.indexOf(term) < 0) { + return false + } + } + return true + }) + }, + // note, can use this with v-model for hidden 'uuids' fields selected_uuids: function() { return this.checkedRowUUIDs().join(',') @@ -644,12 +677,29 @@ location.href = url }, - addFilter(filter_key) { - - // reset dropdown so user again sees "Add Filter" placeholder - this.$nextTick(function() { - this.selectedFilter = null + addFilterButton(event) { + this.addFilterShow = true + this.$nextTick(() => { + this.$refs.addFilterAutocomplete.focus() }) + }, + + addFilterKeydown(event) { + + // ESC will clear searchbox + if (event.which == 27) { + this.addFilterTerm = '' + this.addFilterShow = false + } + }, + + addFilterSelect(filtr) { + this.addFilter(filtr.key) + this.addFilterTerm = '' + this.addFilterShow = false + }, + + addFilter(filter_key) { // show corresponding grid filter this.filters[filter_key].visible = true diff --git a/tailbone/templates/grids/filters_buefy.mako b/tailbone/templates/grids/filters_buefy.mako index 3136a15f..5e1fef9b 100644 --- a/tailbone/templates/grids/filters_buefy.mako +++ b/tailbone/templates/grids/filters_buefy.mako @@ -18,18 +18,29 @@ Apply Filters - - - + + Add Filter + + + +