fix search filtering and keyup modifiers

README.md

@@ -155,7 +155,6 @@ See [CONTRIBUTING.md](CONTRIBUTING.md).
 ## TODO
 
 * a11y
-* keyup.esc modifiers
 * responsiveness
 
 ## License

src/components/rest/RestQueryFormTabs.vue

@@ -9,7 +9,7 @@
             <q-btn icon="edit" flat dense size="sm">
               <q-popup-edit v-slot="scope" v-model="tab.label" auto-save anchor="top left"
                             @save="(v) => {updateTab(v, tab)}">
-                <q-input v-model="scope.value" dense autofocu outlined @keyup.enter="scope.set" />
+                <q-input v-model="scope.value" dense autofocu outlined @keydown.enter="scope.set" />
               </q-popup-edit>
             </q-btn>
 

src/components/rest/RestQuerySavedQueriesList.vue

@@ -24,7 +24,7 @@
           <q-btn icon="edit" color="dark-grey" dense>
             <q-popup-edit v-slot="scope" v-model="row.name" auto-save anchor="center right"
                           @save="(v:string) => (renameSavedQuery(v, row))">
-              <q-input v-model="scope.value" dense autofocu outlined @keyup.enter="scope.set" />
+              <q-input v-model="scope.value" dense autofocu outlined @keydown.enter="scope.set" />
             </q-popup-edit>
           </q-btn>
           <q-btn icon="delete" color="dark-grey" dense @click.stop="removeSavedQuery(row.id)" />

src/components/search/SearchDocuments.vue

@@ -15,7 +15,8 @@
             <q-input v-model="searchStore.q"
                      outlined
                      autofocus
-                     :label="t('search.form.query.label')" />
+                     :label="t('search.form.query.label')"
+                     @keydown.esc="searchStore.q = '*'" />
             <!-- eslint-disable-next-line vue/no-v-html -->
             <small v-html="t('search.form.query.messages')" />
           </div>

src/components/search/SearchResultsTable.vue

@@ -46,7 +46,7 @@
                :virtual-scroll="searchStore.stickyTableHeader"
                :virtual-scroll-item-size="14"
                :columns="tableColumns"
-               :rows="hits"
+               :rows="filteredHits"
                :rows-per-page-options="rowsPerPage"
                :visible-columns="searchStore.visibleColumns"
                selection="multiple"
@@ -113,6 +113,7 @@
     slicedTableColumns,
     resizeStore,
     hits,
+    filteredHits,
     rowsPerPage,
     onRequest,
     reload,

src/components/shared/FilterInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-input v-model="filter" :label="t('defaults.filter.label')" dense outlined name="filter" @keyup.esc="filter = ''">
+  <q-input v-model="filter" :label="t('defaults.filter.label')" dense outlined name="filter" @keydown.esc="filter = ''">
     <template #append>
       <q-icon name="search" />
     </template>

src/composables/components/search/SearchResultsTable.ts

@@ -7,6 +7,7 @@ import SearchResults from '../../../models/SearchResults.ts'
 import { sortableField } from '../../../helpers/search.ts'
 import { EsSearchResult } from './SearchDocuments.ts'
 import { ElasticsearchDocumentInfo } from './EditDocument.ts'
+import { filterItems } from '../../../helpers/filters.ts'
 
 export type SearchResultsTableProps = {
   results: EsSearchResult
@@ -78,6 +79,12 @@ export const useSearchResultsTable = (props: SearchResultsTableProps, emit: any)
     hits.value = results.docs
   })
 
+  const filteredHits = computed(() => {
+    if (filter.value.trim().length === 0) return hits.value
+
+    return filterItems(hits.value, filter.value, tableColumns.value.map(c => c.field))
+  })
+
   const slicedTableColumns = computed((): any[] => (tableColumns.value.slice(0, -1)))
 
   const onRequest = (pagination: any) => (emit('request', pagination))
@@ -100,6 +107,7 @@ export const useSearchResultsTable = (props: SearchResultsTableProps, emit: any)
     slicedTableColumns,
     resizeStore,
     hits,
+    filteredHits,
     rowsPerPage,
     onRequest,
     reload,