From 0d1dd948d1df85425b8de5b252fc5a5eef2d9392 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carsten=20K=C3=B6nig?= <carstenkoenig92@gmail.com>
Date: Tue, 11 Jul 2023 19:31:06 +0200
Subject: [PATCH] fix search filtering and keyup modifiers

---
 README.md                                               | 1 -
 src/components/rest/RestQueryFormTabs.vue               | 2 +-
 src/components/rest/RestQuerySavedQueriesList.vue       | 2 +-
 src/components/search/SearchDocuments.vue               | 3 ++-
 src/components/search/SearchResultsTable.vue            | 3 ++-
 src/components/shared/FilterInput.vue                   | 2 +-
 src/composables/components/search/SearchResultsTable.ts | 8 ++++++++
 7 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 9271dc2d..2017e5d0 100644
--- a/README.md
+++ b/README.md
@@ -155,7 +155,6 @@ See [CONTRIBUTING.md](CONTRIBUTING.md).
 ## TODO
 
 * a11y
-* keyup.esc modifiers
 * responsiveness
 
 ## License
diff --git a/src/components/rest/RestQueryFormTabs.vue b/src/components/rest/RestQueryFormTabs.vue
index cd1b700b..9e22776d 100644
--- a/src/components/rest/RestQueryFormTabs.vue
+++ b/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>
 
diff --git a/src/components/rest/RestQuerySavedQueriesList.vue b/src/components/rest/RestQuerySavedQueriesList.vue
index 10f49c2e..f8c384a2 100644
--- a/src/components/rest/RestQuerySavedQueriesList.vue
+++ b/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)" />
diff --git a/src/components/search/SearchDocuments.vue b/src/components/search/SearchDocuments.vue
index c3c18e78..432f1176 100644
--- a/src/components/search/SearchDocuments.vue
+++ b/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>
diff --git a/src/components/search/SearchResultsTable.vue b/src/components/search/SearchResultsTable.vue
index fc01c39a..cfdf60e8 100644
--- a/src/components/search/SearchResultsTable.vue
+++ b/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,
diff --git a/src/components/shared/FilterInput.vue b/src/components/shared/FilterInput.vue
index 6a9916a0..7599d412 100644
--- a/src/components/shared/FilterInput.vue
+++ b/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>
diff --git a/src/composables/components/search/SearchResultsTable.ts b/src/composables/components/search/SearchResultsTable.ts
index adc9c8bb..8a2fcf1a 100644
--- a/src/composables/components/search/SearchResultsTable.ts
+++ b/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,