Searchbar

src/components/PaginateData.vue

@@ -26,15 +26,11 @@ const $props = defineProps({
         type: Object,
         default: null,
     },
-    sortBy: {
+    order: {
         type: String,
         default: '',
     },
     limit: {
-        type: String,
-        default: '',
-    },
-    rowsPerPage: {
         type: Number,
         default: 10,
     },
@@ -47,8 +43,8 @@ const $props = defineProps({
 const emit = defineEmits(['onFetch', 'onPaginate']);
 const isLoading = ref(false);
 const pagination = ref({
-    sortBy: $props.sortBy,
+    sortBy: $props.order,
-    rowsPerPage: $props.rowsPerPage,
+    rowsPerPage: $props.limit,
     page: 1,
 });
 
@@ -56,8 +52,8 @@ const arrayData = useArrayData('customers', {
     url: $props.url,
     filter: $props.filter,
     where: $props.where,
-    limit: $props.rowsPerPage,
+    limit: $props.limit,
-    order: $props.sortBy,
+    order: $props.order,
 });
 const store = arrayData.store;
 
@@ -136,7 +132,7 @@ async function onLoad(...params) {
             </div>
         </div>
         <div v-if="!store" class="card-list q-gutter-y-md">
-            <q-card class="card" v-for="$index in $props.rowsPerPage" :key="$index">
+            <q-card class="card" v-for="$index in $props.limit" :key="$index">
                 <q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
                     <q-item-section class="q-pa-md">
                         <q-skeleton type="rect" class="q-mb-md" square />

src/composables/useArrayData.js

@@ -1,4 +1,5 @@
 import { ref, onUnmounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
 import axios from 'axios';
 import { useArrayDataStore } from 'stores/useArrayDataStore';
 
@@ -12,18 +13,18 @@ export function useArrayData(key, userOptions) {
     }
 
     const store = arrayDataStore.get(key);
-    const filter = ref({});
-    const userFilter = ref({});
-    const userParams = ref({});
     const hasMoreData = ref(true);
-    const options = ref({
+    const router = useRouter();
-        limit: 10,
+    const route = useRoute();
-        skip: 0,
+
-    });
     const page = ref(1);
 
     if (typeof userOptions === 'object') {
-        Object.assign(options.value, userOptions);
+        if (userOptions.url) store.url = userOptions.url;
+        if (userOptions.limit) store.limit = userOptions.limit;
+        if (userOptions.order) store.order = userOptions.order;
+        //Object.assign(store.value, userOptions);
+        //console.log(options.value);
     }
 
     // if (typeof userOptions === 'object' && userOptions.filter) {
@@ -36,21 +37,22 @@ export function useArrayData(key, userOptions) {
     });
 
     async function fetch({ append = false }) {
-        if (!options.value.url) return;
+        if (!store.url) return;
 
-        const fetchFilter = {
+        const filter = {
-            order: options.value.order,
+            order: store.order,
-            limit: options.value.limit,
+            limit: store.limit,
-            skip: options.value.skip,
+            skip: store.skip,
         };
 
-        Object.assign(fetchFilter, userFilter.value);
+        Object.assign(filter, store.userFilter);
-        filter.value = fetchFilter;
 
-        const requestOptions = { params: { filter: filter.value } };
+        store.filter = filter;
-        const response = await axios.get(options.value.url, requestOptions);
 
-        const { limit } = filter.value;
+        const requestOptions = { params: { filter: filter } };
+        const response = await axios.get(store.url, requestOptions);
+
+        const { limit } = filter;
 
         hasMoreData.value = response.data.length === limit;
 
@@ -61,11 +63,30 @@ export function useArrayData(key, userOptions) {
         if (append === false) {
             store.data = response.data;
         }
+
+        updateStateParams();
+    }
+
+    async function request({ userFilter }) {
+        if (!store.url) return;
+
+        const filter = {
+            order: store.order,
+            limit: store.limit,
+            skip: store.skip,
+        };
+
+        Object.assign(filter, userFilter);
+
+        const requestOptions = { params: { filter: filter } };
+        const response = await axios.get(store.url, requestOptions);
+
+        return response.data;
     }
 
     async function apply({ filter, params }) {
-        if (filter) userFilter.value = filter;
+        if (filter) store.userFilter = filter;
-        if (params) userParams.value = params;
+        if (params) store.userParams = params;
 
         await fetch({ append: false });
     }
@@ -73,22 +94,35 @@ export function useArrayData(key, userOptions) {
     async function loadMore() {
         if (!hasMoreData.value) return;
 
-        options.value.skip = options.value.limit * (page.value - 1);
+        store.skip = store.limit * (page.value - 1);
         page.value += 1;
 
         await fetch({ append: true });
     }
 
     async function refresh() {
-        // TODO
+        // TODO: Refresh
+    }
+
+    function updateStateParams() {
+        router.replace({
+            path: route.path,
+            query: {
+                order: store.order,
+                limit: store.limit,
+                skip: store.skip,
+            },
+        });
     }
 
     return {
         fetch,
         apply,
         refresh,
+        request,
         loadMore,
         store,
         hasMoreData,
+        updateStateParams,
     };
 }

src/pages/Customer/CustomerList.vue

@@ -1,22 +1,14 @@
 <script setup>
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
-import TeleportSlot from 'src/components/ui/TeleportSlot.vue';
 import Paginate from 'src/components/PaginateData.vue';
 import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
 
-import { useArrayData } from 'composables/useArrayData';
-
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
-const arrayData = useArrayData('customers', {
-    url: 'Clients',
-});
-
 function navigate(id) {
     router.push({ path: `/customer/${id}` });
 }
@@ -29,29 +21,11 @@ function viewSummary(id) {
         },
     });
 }
-
-const search = ref('');
-async function doSearch() {
-    let filter = {};
-    if (search.value != '') {
-        filter = {
-            where: {
-                id: search,
-            },
-        };
-    }
-    await arrayData.apply({ filter });
-}
 </script>
 
 <template>
-    <teleport-slot to="#searchbar">
-        <q-form @submit="doSearch">
-            <q-input v-model="search" label="Search" dense />
-        </q-form>
-    </teleport-slot>
     <q-page class="q-pa-md">
-        <paginate url="/Clients" sort-by="id DESC" auto-load>
+        <paginate url="/Clients" order="id DESC" auto-load>
             <template #body="{ rows }">
                 <q-card class="card" v-for="row of rows" :key="row.id">
                     <q-item class="q-pa-none items-start cursor-pointer q-hoverable" v-ripple clickable>

src/pages/Customer/CustomerMain.vue

@@ -1,12 +1,67 @@
 <script setup>
-import { useState } from 'src/composables/useState';
+import { ref } from 'vue';
+import { useState } from 'composables/useState';
+import { useArrayData } from 'composables/useArrayData';
 import LeftMenu from 'components/LeftMenu.vue';
-// import TeleportSlot from 'src/components/ui/TeleportSlot.vue';
+import TeleportSlot from 'components/ui/TeleportSlot.vue';
 
 const state = useState();
+const arrayData = useArrayData('customers');
+
+const search = ref('');
+async function doSearch() {
+    let filter = {};
+    if (search.value != '') {
+        filter = {
+            where: {
+                id: search.value,
+            },
+        };
+    }
+    await arrayData.apply({ filter });
+}
+
+const searchRows = ref([])
+async function pre(value) {
+    let filter = {};
+    if (value != '') {
+        filter = {
+            where: {
+                id: value,
+            },
+        };
+    }
+    console.log(filter)
+    const rows = await arrayData.request({ userFilter: filter });
+    searchRows.value = rows
+}
 </script>
 
 <template>
+    <teleport-slot to="#searchbar">
+        <q-form @submit="doSearch">
+            <q-input id="searchbar" v-model="search" label="Search" @update:model-value="pre" dark dense standout>
+                <template #prepend>
+                    <q-icon name="search" />
+                </template>
+                <template #append>
+                    <q-btn icon="filter_alt" flat dense />
+                </template>
+                <q-popup-proxy v-if="searchRows.length === 1">
+                    <q-list>
+                        <q-item v-for="row of searchRows" :key="row.id" v-ripple clickable>
+                            <q-item-section avatar>
+                                <q-img src="http://localhost:9000/api/Images/user/160x160/9/download?access_token=qBo7qT6T24FasiG74QTfFZfXstxTVLZdmvHz7uqvhxpAG1G0dIF6RRGVeoS3NGiA" />
+                            </q-item-section>
+                            <q-item-section>
+                                <q-item-label>{{ row.name }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                    </q-list>
+                </q-popup-proxy>
+            </q-input>
+        </q-form>
+    </teleport-slot>
     <!-- <teleport-slot to="#searchbar">
         <q-select
             ref="search"
@@ -18,9 +73,8 @@ const state = useState();
             color="black"
             :stack-label="false"
             label="Search or jump to..."
-            v-model="text"
+            v-model="search"
-            :options="filteredOptions"
+            @input-value="doSearch"
-            @filter="filter"
             style="width: 400px"
         >
             <template #append>
@@ -64,3 +118,9 @@ const state = useState();
         <router-view></router-view>
     </q-page-container>
 </template>
+
+<style lang="scss">
+#searchbar {
+    width: 400px;
+}
+</style>

src/router/modules/customer.js

@@ -27,7 +27,7 @@ export default {
                         title: 'list',
                         icon: 'view_list',
                     },
-                    component: () => import('src/pages/Customer/CustomerList.vue'),
+                    component: () => import('src/pages/Customer/CustomerList.vue')
                 },
                 {
                     path: 'create',

src/stores/useArrayDataStore.js

@@ -9,7 +9,16 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
     }
 
     function set(key) {
-        state.value[key] = { data: ref([]) };
+        state.value[key] = { 
+            filter: {},
+            userFilter: {},
+            userParams: {},
+            url: '',
+            limit: 10,
+            skip: 0,
+            order: '',
+            data: ref([]) 
+        };
     }
 
     function clear(key) {