fix: use autocomplete for grid filter verb choices

src/wuttaweb/templates/base.mako

@@ -164,12 +164,9 @@
         gap: 0.5rem;
     }
 
-    .wutta-filter .button.filter-toggle {
-        justify-content: left;
-    }
-
     .wutta-filter .button.filter-toggle,
     .wutta-filter .filter-verb {
+        justify-content: left;
         min-width: 15rem;
     }
 

src/wuttaweb/templates/wutta-components.mako

@@ -88,16 +88,26 @@
       <div v-show="filter.active"
            style="display: flex; gap: 0.5rem;">
 
-        <b-select v-model="filter.verb"
+        <b-button v-if="verbKnown"
                   class="filter-verb"
-                  @input="focusValue()"
+                  @click="verbChoiceInit()"
                   :size="isSmall ? 'is-small' : null">
-          <option v-for="verb in filter.verbs"
-                  :key="verb"
-                  :value="verb">
-            {{ filter.verb_labels[verb] || verb }}
-          </option>
-        </b-select>
+          {{ verbLabel }}
+        </b-button>
+
+        <b-autocomplete v-if="!verbKnown"
+                        ref="verbAutocomplete"
+                        :data="verbOptions"
+                        v-model="verbTerm"
+                        field="verb"
+                        :custom-formatter="formatVerb"
+                        open-on-focus
+                        keep-first
+                        clearable
+                        clear-on-select
+                        @select="verbChoiceSelect"
+                        icon-pack="fas"
+                        :size="isSmall ? 'is-small' : null" />
 
         <wutta-filter-value v-model="filter.value"
                             ref="filterValue"
@@ -116,12 +126,81 @@
             isSmall: Boolean,
         },
 
+        data() {
+            return {
+                verbKnown: !!this.filter.verb,
+                verbLabel: this.filter.verb_labels[this.filter.verb],
+                verbTerm: '',
+            }
+        },
+
+        computed: {
+
+            verbOptions() {
+
+                // construct list of options
+                const options = []
+                for (let verb of this.filter.verbs) {
+                    options.push({
+                        verb,
+                        label: this.filter.verb_labels[verb],
+                    })
+                }
+
+                // parse list of search terms
+                const terms = []
+                for (let term of this.verbTerm.toLowerCase().split(' ')) {
+                    term = term.trim()
+                    if (term) {
+                        terms.push(term)
+                    }
+                }
+
+                // show all if no search terms
+                if (!terms.length) {
+                    return options
+                }
+
+                // only show filters matching all search terms
+                return options.filter(option => {
+                    let label = option.label.toLowerCase()
+                    for (let term of terms) {
+                        if (label.indexOf(term) < 0) {
+                            return false
+                        }
+                    }
+                    return true
+                })
+
+                return options
+            },
+        },
+
         methods: {
 
             focusValue() {
                 this.$refs.filterValue.focus()
             },
 
+            formatVerb(option) {
+                return option.label || option.verb
+            },
+
+            verbChoiceInit(option) {
+                this.verbKnown = false
+                this.$nextTick(() => {
+                    this.$refs.verbAutocomplete.focus()
+                })
+            },
+
+            verbChoiceSelect(option) {
+                this.filter.verb = option.verb
+                this.verbLabel = option.label
+                this.verbKnown = true
+                this.verbTerm = ''
+                this.focusValue()
+            },
+
             valuedVerb() {
                 /* return true if the current verb should expose value input(s) */