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
+
+
+
+