Paginate initial load fix

src/components/PaginateData.vue

@@ -61,8 +61,8 @@ const arrayData = useArrayData(props.dataKey, {
 });
 const store = arrayData.store;
 
-onMounted(() => {
-    if (props.autoLoad) paginate();
+onMounted(async () => {
+    if (props.autoLoad) await fetch();
 });
 
 watch(
@@ -72,6 +72,15 @@ watch(
     }
 );
 
+async function fetch() {
+    await arrayData.fetch({ append: false });
+    if (!arrayData.hasMoreData.value) {
+        isLoading.value = false;
+    }
+
+    emit('onFetch', store.data);
+}
+
 async function paginate() {
     const { page, rowsPerPage, sortBy, descending } = pagination.value;
 

src/components/ui/VnFilterPanel.vue

@@ -27,7 +27,7 @@ onMounted(() => {
 
 async function search() {
     const params = userParams.value;
-    await arrayData.apply({ params });
+    await arrayData.addFilter({ params });
 }
 
 const tags = computed(() => {

src/components/ui/VnSearchbar.vue

@@ -1,8 +1,7 @@
 <script setup>
 import { onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { useArrayData } from 'composables/useArrayData';
-import { route } from 'quasar/wrappers';
 
 const props = defineProps({
     dataKey: {
@@ -22,7 +21,7 @@ const props = defineProps({
 });
 
 const router = useRouter();
-// const route = useRoute();
+const route = useRoute();
 const arrayData = useArrayData(props.dataKey);
 const store = arrayData.store;
 const searchText = ref();
@@ -35,26 +34,26 @@ onMounted(() => {
 });
 
 async function search() {
-    await arrayData.apply({
+    await arrayData.applyFilter({
         params: {
             search: searchText.value,
         },
     });
     if (!props.redirect) return;
-    console.log(route.query);
+
+    const moduleRoute = route.matched[1];
+    console.log(moduleRoute);
+
     const rows = store.data;
     if (rows.length === 1) {
         const firstRow = rows[0];
-        router.push({ path: `/customer/${firstRow.id}` });
-    } else {
-        router.replace({ path: `/customer` });
+        const stateName = `${moduleRoute.name}Card`;
+        await router.push({ name: stateName, params: { id: firstRow.id } });
+        arrayData.updateStateParams();
+    } else if (route.matched.length > 3) {
+        await router.push({ name: moduleRoute.name });
+        arrayData.updateStateParams();
     }
-
-    // if (route.matched.length > 2) {
-
-    // } else {
-
-    // }
 }
 </script>
 
@@ -63,9 +62,9 @@ async function search() {
         <q-input
             id="searchbar"
             v-model="searchText"
-            :label="props.label"
+            :placeholder="props.label"
             dense
-            standout="bg-grey-6 text-white"
+            standout
             autofocus
         >
             <template #prepend>
@@ -74,3 +73,16 @@ async function search() {
         </q-input>
     </q-form>
 </template>
+
+<style lang="scss">
+#searchbar .q-field {
+    min-width: 350px;
+}
+
+.body--light #searchbar {
+    .q-field--standout.q-field--highlighted .q-field__control {
+        background-color: $grey-7;
+        color: #333;
+    }
+}
+</style>

src/composables/useArrayData.js

@@ -99,13 +99,20 @@ export function useArrayData(key, userOptions) {
         return response.data;
     }
 
-    async function apply({ filter, params }) {
+    async function applyFilter({ filter, params }) {
         if (filter) store.userFilter = filter;
         if (params) store.userParams = Object.assign({}, params);
 
         await fetch({ append: false });
     }
 
+    async function addFilter({ filter, params }) {
+        if (filter) store.userFilter = Object.assign(store.userFilter, filter);
+        if (params) store.userParams = Object.assign(store.userParams, params);
+
+        await fetch({ append: false });
+    }
+
     async function loadMore() {
         if (!hasMoreData.value) return;
 
@@ -133,7 +140,8 @@ export function useArrayData(key, userOptions) {
 
     return {
         fetch,
-        apply,
+        applyFilter,
+        addFilter,
         refresh,
         request,
         loadMore,

src/pages/Ticket/Card/TicketCard.vue

@@ -2,13 +2,18 @@
 import { useState } from 'src/composables/useState';
 import TicketDescriptor from './TicketDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
+import TeleportSlot from 'components/ui/TeleportSlot.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const state = useState();
 </script>
 <template>
+    <teleport-slot to="#searchbar">
+        <VnSearchbar data-key="TicketList" />
+    </teleport-slot>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit">
-            <ticket-descriptor />
+            <TicketDescriptor />
             <q-separator />
             <left-menu source="card" />
         </q-scroll-area>

src/pages/Ticket/TicketList.vue

@@ -73,7 +73,7 @@ function viewSummary(id) {
 
 <template>
     <teleport-slot to="#searchbar">
-        <VnSearchbar data-key="TicketList" />
+        <VnSearchbar data-key="TicketList" label="Search by ticket id or alias" />
     </teleport-slot>
     <teleport-slot to="#rightPanel">
         <VnFilterPanel data-key="TicketList">