Make full search button more visible

les-conjures-du-temporel · Jan 6, 2024 · 4fd99e4 · 4fd99e4
1 parent e99aa84
commit 4fd99e4
Showing 1 changed file with 32 additions and 21 deletions.
diff --git a/src/components/SearchGame.vue b/src/components/SearchGame.vue
@@ -24,29 +24,21 @@ type Item = {
   icon?: string
   badge?: string
   showSpinner: boolean
+  class?: string
 }
 const items: Ref<Item[]> = ref([])
 let abortController = new AbortController()
-
-const SEARCH_ICON = 'search'
+let lastFilterSearchTerm: string | null = null
 
 function filterGameSearch(term: string, doneFn: (callbackFn: () => void) => void) {
+  lastFilterSearchTerm = term
   abortController.abort()
   abortController = new AbortController()
 
   gameSearcher.searchForAutoComplete(term, abortController.signal, (results, searchingBgg) => {
     doneFn(() => {
       const newItems: Item[] = []
 
-      if (term) {
-        newItems.push({
-          label: 'Montrer tous les résultats',
-          value: term,
-          icon: SEARCH_ICON,
-          showSpinner: false
-        })
-      }
-
       for (const result of results) {
         newItems.push({
           label: result.name,
@@ -79,15 +71,6 @@ watch(selectedItem, async (newItem) => {
   selectedItem.value = null
   if (!newItem) {
     return
-  } else if (newItem.icon === SEARCH_ICON) {
-    state.value = 'loading'
-    try {
-      fullSearchResults.value = await gameSearcher.doFullSearch(newItem.value)
-      state.value = 'full-search'
-    } catch (error) {
-      notifyWarn(error as Error)
-      state.value = 'input'
-    }
   } else {
     state.value = 'loading'
     try {
@@ -101,6 +84,22 @@ watch(selectedItem, async (newItem) => {
   }
 })
 
+function displayFullSearch() {
+  if (lastFilterSearchTerm) {
+    state.value = 'loading'
+    gameSearcher
+      .doFullSearch(lastFilterSearchTerm)
+      .then((result) => {
+        fullSearchResults.value = result
+        state.value = 'full-search'
+      })
+      .catch((error) => {
+        notifyWarn(error as Error)
+        state.value = 'input'
+      })
+  }
+}
+
 function choseGame(game: Game): void {
   emit('input', game)
   state.value = 'input'
@@ -125,7 +124,7 @@ function choseGame(game: Game): void {
     dense
   >
     <template v-slot:option="scope">
-      <q-item v-bind="scope.itemProps">
+      <q-item v-bind="scope.itemProps" :class="['auto-complete-item', scope.opt.class]">
         <q-item-section>
           <q-item-label>
             {{ scope.opt.label }}
@@ -143,6 +142,18 @@ function choseGame(game: Game): void {
         </q-item-section>
       </q-item>
     </template>
+
+    <template v-slot:after-options>
+      <q-item class="bg-secondary text-white" @click="displayFullSearch">
+        <q-item-section>
+          <q-item-label>Montrer tous les résultats</q-item-label>
+        </q-item-section>
+
+        <q-item-section avatar>
+          <q-icon name="search" />
+        </q-item-section>
+      </q-item>
+    </template>
   </q-select>
 
   <div class="text-center" v-if="state === 'loading'">