feat: adapt tu VnTable → CrudModel

src/components/CrudModel.vue

@@ -89,6 +89,7 @@ defineExpose({
     saveChanges,
     getChanges,
     formData,
+    vnPaginateRef,
 });
 
 async function fetch(data) {
@@ -271,8 +272,9 @@ function isEmpty(obj) {
     if (obj.length > 0) return false;
 }
 
-async function reload() {
+async function reload(params) {
-    vnPaginateRef.value.fetch();
+    const data = await vnPaginateRef.value.fetch(params);
+    fetch(data);
 }
 
 watch(formUrl, async () => {
@@ -284,10 +286,10 @@ watch(formUrl, async () => {
     <VnPaginate
         :url="url"
         :limit="limit"
-        v-bind="$attrs"
         @on-fetch="fetch"
         :skeleton="false"
         ref="vnPaginateRef"
+        v-bind="$attrs"
     >
         <template #body v-if="formData">
             <slot

src/components/VnTable/VnTable.vue

@@ -6,7 +6,7 @@ import { useQuasar } from 'quasar';
 
 import { useStateStore } from 'stores/useStateStore';
 import FormModelPopup from 'components/FormModelPopup.vue';
-import VnPaginate from 'components/ui/VnPaginate.vue';
+import CrudModel from 'src/components/CrudModel.vue';
 import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
 import VnLv from 'components/ui/VnLv.vue';
 
@@ -63,7 +63,7 @@ const mode = ref('card');
 const selected = ref([]);
 const routeQuery = JSON.parse(route?.query[$props.searchUrl] ?? '{}');
 const params = ref({ ...routeQuery, ...routeQuery.filter?.where });
-const VnPaginateRef = ref({});
+const CrudModelRef = ref({});
 const showForm = ref(false);
 const splittedColumns = ref({ columns: [] });
 const tableModes = [
@@ -160,7 +160,7 @@ function stopEventPropagation(event) {
 }
 
 function reload(params) {
-    VnPaginateRef.value.fetch(params);
+    CrudModelRef.value.reload(params);
 }
 
 function columnName(col) {
@@ -198,6 +198,7 @@ defineExpose({
                         v-for="col of splittedColumns.columns"
                         :key="col.id"
                         v-model="params[columnName(col)]"
+                        :search-url="searchUrl"
                     />
                 </template>
                 <slot
@@ -208,11 +209,11 @@ defineExpose({
             </VnFilterPanel>
         </QScrollArea>
     </QDrawer>
-    <VnPaginate
+    <CrudModel
         v-bind="$attrs"
         class="q-px-md"
         :limit="20"
-        ref="VnPaginateRef"
+        ref="CrudModelRef"
         :search-url="searchUrl"
         :disable-infinite-scroll="mode == 'table'"
     >
@@ -231,7 +232,9 @@ defineExpose({
                 :style="mode == 'table' && 'max-height: 92vh'"
                 virtual-scroll
                 @virtual-scroll="
-                    (event) => event.index > rows.length - 2 && VnPaginateRef.paginate()
+                    (event) =>
+                        event.index > rows.length - 2 &&
+                        CrudModelRef.vnPaginateRef.paginate()
                 "
                 @row-click="(_, row) => rowClickFunction(row)"
             >
@@ -421,7 +424,7 @@ defineExpose({
                 </template>
             </QTable>
         </template>
-    </VnPaginate>
+    </CrudModel>
     <QPageSticky v-if="create" :offset="[20, 20]" style="z-index: 2">
         <QBtn @click="showForm = !showForm" color="primary" fab icon="add" />
         <QTooltip>

src/components/ui/VnPaginate.vue

@@ -100,6 +100,11 @@ watch(
     }
 );
 
+watch(
+    () => store.data,
+    (data) => emit('onFetch', data)
+);
+
 const addFilter = async (filter, params) => {
     await arrayData.addFilter({ filter, params });
 };
@@ -113,6 +118,7 @@ async function fetch(params) {
         isLoading.value = false;
     }
     emit('onFetch', store.data);
+    return store.data;
 }
 
 async function paginate() {
@@ -144,6 +150,7 @@ function endPagination() {
     emit('onPaginate');
 }
 async function onLoad(index, done) {
+    console.log('onLoad?');
     if (!store.data) return done();
 
     if (store.data.length === 0 || !props.url) return done(false);

src/composables/useArrayData.js

@@ -34,7 +34,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
             delete params.filter;
             store.userParams = { ...params, ...store.userParams };
             store.userFilter = { ...JSON.parse(filter), ...store.userFilter };
-            console.log('store.userParams', store.userParams, store.userFilter);
         }
     });
 
@@ -126,7 +125,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
     }
 
     function destroy() {
-        console.log('DESTROY', key);
         if (arrayDataStore.get(key)) {
             arrayDataStore.clear(key);
         }
@@ -223,13 +221,11 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
                     ? path.replace(/\/(list|:id)|-list/, `/${store.data[0].id}`)
                     : path.replace(/:id.*/, '');
 
-            console.log('to: ', to, store.userParams, store.userFilter, route.query);
             if (route.path != to) {
                 destroy();
                 const pushUrl = { path: to };
                 if (to.endsWith('/list') || to.endsWith('/'))
                     pushUrl.query = newUrl.query;
-                console.log('pushUrl: ', to, pushUrl.query);
                 return router.push(pushUrl);
             }
         }