From bea756d7cb0d7c4b7a3f631190564cdb73212f59 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 14 Jun 2024 10:53:02 +0200
Subject: [PATCH] feat(vnTable): reload data when change url

---
 src/boot/qformMixin.js             |  1 -
 src/components/CrudModel.vue       | 17 +++++++++++++----
 src/components/VnTable/VnTable.vue |  7 +------
 src/components/ui/VnPaginate.vue   | 10 +++++++---
 src/composables/useArrayData.js    |  9 ---------
 5 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/boot/qformMixin.js b/src/boot/qformMixin.js
index a809140b0..0bf1f9795 100644
--- a/src/boot/qformMixin.js
+++ b/src/boot/qformMixin.js
@@ -27,7 +27,6 @@ export default {
                 this.$el.addEventListener('keyup', function (evt) {
                     if (evt.key === 'Enter') {
                         const input = evt.target;
-                        console.log('input', input);
                         if (input.type == 'textarea' && evt.shiftKey) {
                             evt.preventDefault();
                             let { selectionStart, selectionEnd } = input;
diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index e58d342ce..8d0935288 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -75,6 +75,7 @@ const originalData = ref();
 const vnPaginateRef = ref();
 const formData = ref();
 const saveButtonRef = ref(null);
+const watchChanges = ref();
 const formUrl = computed(() => $props.url);
 
 const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
@@ -98,19 +99,26 @@ async function fetch(data) {
         data.map((d) => (d.$index = $index++));
     }
 
-    originalData.value = data && JSON.parse(JSON.stringify(data));
-    formData.value = data && JSON.parse(JSON.stringify(data));
-    watch(formData, () => (hasChanges.value = true), { deep: true });
+    resetData(data);
 
     emit('onFetch', data);
     return data;
 }
 
+function resetData(data) {
+    if (!data) return;
+    originalData.value = JSON.parse(JSON.stringify(data));
+    formData.value = JSON.parse(JSON.stringify(data));
+
+    if (watchChanges.value) watchChanges.value(); //destoy watcher
+    watchChanges.value = watch(formData, () => (hasChanges.value = true), { deep: true });
+}
+
 async function reset() {
     await fetch(originalData.value);
     hasChanges.value = false;
 }
-// eslint-disable-next-line vue/no-dupe-keys
+
 function filter(value, update, filterOptions) {
     update(
         () => {
@@ -287,6 +295,7 @@ watch(formUrl, async () => {
         :url="url"
         :limit="limit"
         @on-fetch="fetch"
+        @on-change="resetData"
         :skeleton="false"
         ref="vnPaginateRef"
         v-bind="$attrs"
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index bcca17cab..2aefc20fb 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -100,12 +100,6 @@ watch(
     { immediate: true }
 );
 
-// try without
-watch(
-    () => route.params.id,
-    () => reload(attrs)
-);
-
 watch(
     () => route.query[$props.searchUrl],
     (val) => setUserParams(val)
@@ -226,6 +220,7 @@ defineExpose({
         ref="CrudModelRef"
         :search-url="searchUrl"
         :disable-infinite-scroll="mode == 'table'"
+        @save-changes="reload"
     >
         <template #body="{ rows }">
             <QTable
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index a188a5059..625f8b845 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -68,7 +68,7 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(['onFetch', 'onPaginate']);
+const emit = defineEmits(['onFetch', 'onPaginate', 'onChange']);
 const isLoading = ref(false);
 const pagination = ref({
     sortBy: props.order,
@@ -102,7 +102,12 @@ watch(
 
 watch(
     () => store.data,
-    (data) => emit('onFetch', data)
+    (data) => emit('onChange', data)
+);
+
+watch(
+    () => props.url,
+    (url) => fetch({ url })
 );
 
 const addFilter = async (filter, params) => {
@@ -150,7 +155,6 @@ 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);
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index e59e02003..6db4251e1 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -66,19 +66,10 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
                 }
             }
         }
-        console.log('setOptions store.url: ', store.url);
     }
 
     async function fetch({ append = false, updateRouter = true }) {
         if (!store.url) return;
-        console.log('store.url: ', store.url);
-        console.log('userOptions.url: ', userOptions.url);
-        console.log('route.params.id: ', route.params.id);
-        // const urlSplited = store.url.split('/');
-        // if (!isNaN(+urlSplited[1]) && urlSplited[1] != route.params.id) {
-        //     urlSplited[1] = route.params.id;
-        //     store.url = urlSplited.join('/');
-        // }
 
         cancelRequest();
         canceller = new AbortController();