Improve search feature

Author: doroudi

src/components.d.ts

@@ -50,19 +50,11 @@ declare module 'vue' {
     NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
     NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
     NButton: typeof import('naive-ui')['NButton']
-    NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDataTable: typeof import('naive-ui')['NDataTable']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
-    NDrawer: typeof import('naive-ui')['NDrawer']
-    NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDropdown: typeof import('naive-ui')['NDropdown']
     NEmpty: typeof import('naive-ui')['NEmpty']
-    NForm: typeof import('naive-ui')['NForm']
-    NFormItem: typeof import('naive-ui')['NFormItem']
-    NFormItemGi: typeof import('naive-ui')['NFormItemGi']
-    NGi: typeof import('naive-ui')['NGi']
-    NGrid: typeof import('naive-ui')['NGrid']
     NIcon: typeof import('naive-ui')['NIcon']
     NInput: typeof import('naive-ui')['NInput']
     NLayout: typeof import('naive-ui')['NLayout']
@@ -72,7 +64,6 @@ declare module 'vue' {
     NListItem: typeof import('naive-ui')['NListItem']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
-    NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
     Notifications: typeof import('./components/Navbar/Notifications.vue')['default']
     NPageHeader: typeof import('naive-ui')['NPageHeader']
@@ -81,18 +72,12 @@ declare module 'vue' {
     NRadioButton: typeof import('naive-ui')['NRadioButton']
     NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
-    NSkeleton: typeof import('naive-ui')['NSkeleton']
     NSpace: typeof import('naive-ui')['NSpace']
-    NSpin: typeof import('naive-ui')['NSpin']
     NSwitch: typeof import('naive-ui')['NSwitch']
-    NTabPane: typeof import('naive-ui')['NTabPane']
-    NTabs: typeof import('naive-ui')['NTabs']
     NTag: typeof import('naive-ui')['NTag']
     NText: typeof import('naive-ui')['NText']
     NThing: typeof import('naive-ui')['NThing']
     NTooltip: typeof import('naive-ui')['NTooltip']
-    NTreeSelect: typeof import('naive-ui')['NTreeSelect']
-    NUpload: typeof import('naive-ui')['NUpload']
     OrderManagement: typeof import('./components/Orders/OrderManagement.vue')['default']
     PersianIcon: typeof import('./components/CustomIcons/PersianIcon.vue')['default']
     ProductsManagement: typeof import('./components/Products/ProductsManagement.vue')['default']

src/components/Navbar/Search.vue

@@ -1,22 +1,28 @@
 <script setup lang="ts">
+import generatedRoutes from 'virtual:generated-pages'
 import { Search24Regular as SearchIcon } from '@vicons/fluent'
 import { useMagicKeys, whenever } from '@vueuse/core'
 import type { InputInst } from 'naive-ui/es/input/src/interface'
-
+import type { RouteRecordRaw } from 'vue-router'
 const { t } = useI18n()
-const value = ref('')
+const searchTerm = ref('')
 const focused = ref(false)
-const valueRef = ref('')
-
-//TODO: implement features search
 const options = computed(() => {
-  return ['@gmail.com', '@outlook.com', '@yahoo.com'].map((suffix) => {
-    const prefix = valueRef.value.split('@')[0]
-    return {
-      label: prefix + suffix,
-      value: prefix + suffix,
-    }
-  })
+  return generatedRoutes
+    .filter((x) => x.meta?.title !== undefined && x.meta?.title !== null)
+    .filter(
+      (x) =>
+        searchTerm.value === '' ||
+        (typeof x.meta?.title === 'string' &&
+          x.meta.title.indexOf(searchTerm.value) >= 0),
+    )
+    .map((item) => {
+      return {
+        label: t(`menu.${item.meta?.title || item.name}`),
+        value: item,
+        key: item.name || item.path,
+      }
+    })
 })
 
 const searchInput = ref<InputInst | null>(null)
@@ -27,12 +33,19 @@ const { ctrl_k } = useMagicKeys({
   },
 })
 whenever(ctrl_k, () => searchInput.value.focus())
+const router = useRouter()
+function gotoRoute(route: RouteRecordRaw) {
+  if (route) {
+    searchTerm.value = ''
+    router.push(route.path)
+  }
+}
 </script>
 
 <template>
     <div class="hidden md:block md:me-2 md:w-40 transition-property-all transition-ease-in transition-duration-200"
         :class="{ 'md:w-60': focused }">
-        <n-auto-complete v-model:value="value" :options="options">
+        <n-auto-complete v-model:value="searchTerm" @select="gotoRoute" :options="options" blur-after-select>
             <template #default="{ value: slotValue, handleInput }">
                 <n-input ref="searchInput" @input="handleInput" :value="slotValue" :placeholder="t('common.search')"
                     @focus="focused = true" @blur="focused = false">