feat: refs #7701 form model use url

src/components/FormModel.vue

@@ -22,6 +22,7 @@ const { t } = useI18n();
 const { validate } = useValidator();
 const { notify } = useNotify();
 const route = useRoute();
+const router = useRouter();
 const myForm = ref(null);
 const attrs = useAttrs();
 const $props = defineProps({
@@ -100,6 +101,10 @@ const $props = defineProps({
         type: Function,
         default: () => {},
     },
+    searchUrl: {
+        type: [String, Boolean],
+        default: 'form',
+    },
 });
 const emit = defineEmits(['onFetch', 'onDataSaved']);
 const modelValue = computed(
@@ -133,6 +138,11 @@ const defaultButtons = computed(() => ({
 }));
 
 onMounted(async () => {
+    const urlInitalData =
+        $props.searchUrl && JSON.parse(route?.query[$props.searchUrl] ?? '{}');
+    originalData.value = JSON.parse(
+        JSON.stringify(urlInitalData ?? $props.formInitialData ?? {}),
+    );
     nextTick(() => (componentIsRendered.value = true));
 
     // Podemos enviarle al form la estructura de data inicial sin necesidad de fetchearla
@@ -181,6 +191,28 @@ watch(
     },
 );
 
+watch(
+    () => formData.value,
+    async (newData, oldData) => {
+        // console.log('Form data changed:', newData);
+        // console.log('formData: ', formData.value);
+        if (JSON.stringify(newData) === JSON.stringify(oldData)) return;
+        // console.log('Current route query:', route.query);
+        if (!$props.searchUrl) return;
+        if (!newData) return;
+        // console.log('sigue');
+        const urlParams = JSON.stringify(newData);
+        await nextTick();
+        router.replace({
+            query: {
+                ...route.query,
+                createForm: urlParams,
+            },
+        });
+    },
+    { deep: true },
+);
+
 onBeforeRouteLeave((to, from, next) => {
     if (hasChanges.value && $props.observeFormChanges)
         quasar.dialog({

src/components/VnTable/VnTable.vue

@@ -206,13 +206,13 @@ onMounted(async () => {
         ...['tableActions'],
     ];
     createForm.value = $props.create;
-    if ($props.create && route?.query?.createForm) {
+    // if ($props.create && route?.query?.createForm) {
-        showForm.value = true;
+    //     showForm.value = true;
-        createForm.value = {
+    //     createForm.value = {
-            ...createForm.value,
+    //         ...createForm.value,
-            ...{ formInitialData: JSON.parse(route?.query?.createForm) },
+    //         ...{ formInitialData: JSON.parse(route?.query?.createForm) },
-        };
+    //     };
-    }
+    // }
 });
 
 onUnmounted(async () => {
@@ -1035,6 +1035,7 @@ const rowCtrlClickFunction = computed(() => {
         transition-hide="scale"
         :full-width="createComplement?.isFullWidth ?? false"
         data-cy="vn-table-create-dialog"
+        persistent
     >
         <FormModelPopup
             ref="createRef"