feat: refs #7957 enhance search functionality and improve data filtering logic

src/components/ui/VnSearchbar.vue

@@ -1,14 +1,16 @@
 <script setup>
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref, computed, watch } from 'vue';
 import { useQuasar } from 'quasar';
 import { useArrayData } from 'composables/useArrayData';
 import VnInput from 'src/components/common/VnInput.vue';
 import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'src/stores/useStateStore';
+import { useRoute } from 'vue-router';
 
 const quasar = useQuasar();
 const { t } = useI18n();
 const state = useStateStore();
+const route = useRoute();
 
 const props = defineProps({
     dataKey: {
@@ -119,27 +121,43 @@ async function search() {
     }
     await arrayData.applyFilter(filter);
 }
+
+const to = computed(() => {
+    const { params } = arrayData.getCurrentFilter();
+    params.search = searchText.value;
+    const url = { path: route.path, query: { ...(route.query ?? {}) } };
+    const searchUrl = arrayData.store.searchUrl;
+
+    for (const key in params) {
+        const val = params[key];
+        if (typeof val === 'object' && !Array.isArray(val) && !(val instanceof Date))
+            params[key] = JSON.stringify(val);
+    }
+
+    if (searchUrl) url.query[searchUrl] = JSON.stringify(params);
+    return url;
+});
 </script>
 <template>
     <Teleport to="#searchbar" v-if="state.isHeaderMounted()">
         <QForm @submit="search" id="searchbarForm">
+            <RouterLink :to="to" @click="!$event.shiftKey && !$event.ctrlKey && search()">
+                <QIcon
+                    v-if="!quasar.platform.is.mobile"
+                    class="cursor-pointer"
+                    name="search"
+                    size="sm"
+                />
+            </RouterLink>
             <VnInput
                 id="searchbar"
                 v-model.trim="searchText"
                 :placeholder="t(props.label)"
                 dense
-                standout
                 autofocus
                 data-cy="vnSearchBar"
+                borderless
             >
-                <template #prepend>
-                    <QIcon
-                        v-if="!quasar.platform.is.mobile"
-                        class="cursor-pointer"
-                        name="search"
-                        @click="search"
-                    />
-                </template>
                 <template #append>
                     <QIcon
                         v-if="props.info && $q.screen.gt.xs"
@@ -164,20 +182,38 @@ async function search() {
 .q-field {
     transition: width 0.36s;
 }
-</style>
 
-<style lang="scss">
 .cursor-info {
     cursor: help;
 }
-#searchbar {
-    .q-field--standout.q-field--highlighted .q-field__control {
+
+:deep(.q-field--dark .q-field__native:focus) {
+    background-color: white;
+    color: black;
+}
+
+.q-form {
+    display: flex;
+    align-items: center;
+    border-radius: 4px;
+    padding: 0 5px;
+    background-color: #4b4b4b;
+
+    &:focus-within {
         background-color: white;
-        color: black;
-        .q-field__native,
+
         .q-icon {
-            color: black !important;
+            color: black;
         }
     }
 }
+
+.q-icon {
+    color: var(--vn-label-color);
+}
+:deep(.q-field--focused) {
+    .q-icon {
+        color: black;
+    }
+}
 </style>

src/composables/useArrayData.js

@@ -69,27 +69,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
 
         cancelRequest();
         canceller = new AbortController();
-
-        const filter = {
-            limit: store.limit,
-        };
-
-        let userParams = { ...store.userParams };
-
-        Object.assign(filter, store.userFilter);
-
-        let where;
-        if (filter?.where || store.filter?.where)
-            where = Object.assign(filter?.where ?? {}, store.filter?.where ?? {});
-        Object.assign(filter, store.filter);
-        filter.where = where;
-        const params = { filter };
-
-        Object.assign(params, userParams);
-        if (params.filter) params.filter.skip = store.skip;
-        if (store?.order && typeof store?.order == 'string') store.order = [store.order];
-        if (store.order?.length) params.filter.order = [...store.order];
-        else delete params.filter.order;
+        const { params, limit } = getCurrentFilter();
 
         store.currentFilter = JSON.parse(JSON.stringify(params));
         delete store.currentFilter.filter.include;
@@ -115,7 +95,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
             params,
         });
 
-        const { limit } = filter;
         store.hasMoreData = limit && response.data.length >= limit;
 
         if (append) {
@@ -288,6 +267,31 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         router.replace(newUrl);
     }
 
+    function getCurrentFilter() {
+        const filter = {
+            limit: store.limit,
+        };
+
+        let userParams = { ...store.userParams };
+
+        Object.assign(filter, store.userFilter);
+
+        let where;
+        if (filter?.where || store.filter?.where)
+            where = Object.assign(filter?.where ?? {}, store.filter?.where ?? {});
+        Object.assign(filter, store.filter);
+        filter.where = where;
+        const params = { filter };
+
+        Object.assign(params, userParams);
+        if (params.filter) params.filter.skip = store.skip;
+        if (store?.order && typeof store?.order == 'string') store.order = [store.order];
+        if (store.order?.length) params.filter.order = [...store.order];
+        else delete params.filter.order;
+
+        return { filter, params, limit: filter.limit };
+    }
+
     const totalRows = computed(() => (store.data && store.data.length) || 0);
     const isLoading = computed(() => store.isLoading || false);
 
@@ -295,6 +299,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         fetch,
         applyFilter,
         addFilter,
+        getCurrentFilter,
         addFilterWhere,
         addOrder,
         deleteOrder,