feat: add quick search to list view

Author: davidstackio

src/runtime/components/QuickSearch.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
+import { ref } from 'vue'
+import type { PropType } from 'vue'
+
+// Props
+defineProps({
+  searchGroups: {
+    type: Array as PropType<{
+      title: string
+      items: string[]
+    }[]>,
+    default: () => [],
+  },
+})
+
+// Component state
+const search = defineModel<string>({ default: '' })
+const showQuickSearch = ref(true)
+</script>
+
+<template>
+  <div
+    v-if="searchGroups.length"
+    class="px-4"
+  >
+    <h2 class="text-subtitle-1 font-weight-bold">
+      Quick search
+
+      <span
+        class="text-caption text-secondary cursor-pointer ml-2"
+        @click="showQuickSearch = !showQuickSearch"
+      >
+        {{ showQuickSearch ? 'Hide' : 'Show' }}
+        <v-icon
+          :icon="showQuickSearch ? mdiChevronUp : mdiChevronDown"
+        />
+      </span>
+    </h2>
+
+    <v-expand-transition>
+      <div
+        v-if="showQuickSearch"
+        class="d-flex flex-wrap ga-2"
+      >
+        <div
+          v-for="group in searchGroups"
+          :key="group.title"
+        >
+          <h3 class="text-subtitle-2 text-medium-emphasis">
+            {{ group.title }}
+          </h3>
+          <v-chip-group>
+            <v-chip
+              v-for="item in group.items"
+              :key="item"
+              :text="item"
+              label
+              size="small"
+              class="mr-2"
+              :variant="search === item ? 'flat' : 'outlined'"
+              :color="search === item ? 'secondary' : 'primary'"
+              @click="search === item ? search = '' : search = item"
+            />
+          </v-chip-group>
+        </div>
+      </div>
+    </v-expand-transition>
+  </div>
+</template>
+
+<style scoped>
+:deep(.v-chip__overlay) {
+  --v-activated-opacity: 0;
+}
+</style>

src/runtime/components/firebase/FirebaseListTable.vue

@@ -77,6 +77,13 @@ const props = defineProps({
     type: Function,
     default: () => '',
   },
+  searchGroups: {
+    type: Array as PropType<{
+      title: string
+      items: string[]
+    }[]>,
+    default: () => [],
+  },
 })
 
 // App state
@@ -112,7 +119,13 @@ const viewItem = (pointerEvent: PointerEvent, item: any) => {
       />
     </div>
 
-    <v-card>
+    <v-card flat>
+      <!-- Quick search -->
+      <QuickSearch
+        v-model="search"
+        :search-groups
+      />
+
       <!-- Search -->
       <v-text-field
         v-if="!disableSearch"

src/runtime/pages/admin/users/UsersIndex.vue

@@ -85,6 +85,18 @@ const headers = [
     filterable: false,
   },
 ]
+
+// Define search groups
+const searchGroups = [
+  {
+    title: 'Role',
+    items: ['Admin', 'User'],
+  },
+  {
+    title: 'Status',
+    items: ['Active', 'Inactive'],
+  },
+]
 </script>
 
 <template>
@@ -102,6 +114,7 @@ const headers = [
           disable-create
           disable-delete
           :export-formats="['CSV']"
+          :search-groups
         />
       </v-col>
     </v-row>