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;

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));
+    resetData(data);
-    formData.value = data && JSON.parse(JSON.stringify(data));
-    watch(formData, () => (hasChanges.value = true), { deep: true });
 
     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"

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

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);

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();