diff --git a/src/components/CreateBankEntityForm.vue b/src/components/CreateBankEntityForm.vue index 2da3aa994..7c4b94a6a 100644 --- a/src/components/CreateBankEntityForm.vue +++ b/src/components/CreateBankEntityForm.vue @@ -14,7 +14,7 @@ const { t } = useI18n(); const bicInputRef = ref(null); const state = useState(); -const customer = computed(() => state.get('customer')); +const customer = computed(() => state.get('Customer')); const countriesFilter = { fields: ['id', 'name', 'code'], diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue index a8e8c0a1f..59141d374 100644 --- a/src/components/FormModel.vue +++ b/src/components/FormModel.vue @@ -84,7 +84,7 @@ const $props = defineProps({ }, reload: { type: Boolean, - default: false, + default: true, }, defaultTrim: { type: Boolean, @@ -105,8 +105,8 @@ const isLoading = ref(false); // Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas const isResetting = ref(false); const hasChanges = ref(!$props.observeFormChanges); -const originalData = ref({}); -const formData = computed(() => state.get(modelValue)); +const originalData = computed(() => state.get(modelValue)); +const formData = ref({}); const defaultButtons = computed(() => ({ save: { dataCy: 'saveDefaultBtn', @@ -127,8 +127,6 @@ const defaultButtons = computed(() => ({ })); onMounted(async () => { - originalData.value = JSON.parse(JSON.stringify($props.formInitialData ?? {})); - nextTick(() => (componentIsRendered.value = true)); // Podemos enviarle al form la estructura de data inicial sin necesidad de fetchearla @@ -159,10 +157,18 @@ if (!$props.url) (val) => updateAndEmit('onFetch', val), ); +watch( + originalData, + (val) => { + if (val) formData.value = JSON.parse(JSON.stringify(val)); + }, + { immediate: true }, +); + watch( () => [$props.url, $props.filter], async () => { - originalData.value = null; + state.set(modelValue, null); reset(); await fetch(); }, @@ -197,7 +203,6 @@ async function fetch() { updateAndEmit('onFetch', data); } catch (e) { state.set(modelValue, {}); - originalData.value = {}; throw e; } } @@ -236,6 +241,7 @@ async function saveAndGo() { } function reset() { + formData.value = JSON.parse(JSON.stringify(originalData.value)); updateAndEmit('onFetch', originalData.value); if ($props.observeFormChanges) { hasChanges.value = false; @@ -260,7 +266,6 @@ function filter(value, update, filterOptions) { function updateAndEmit(evt, val, res) { state.set(modelValue, val); - originalData.value = val && JSON.parse(JSON.stringify(val)); if (!$props.url) arrayData.store.data = val; emit(evt, state.get(modelValue), res); diff --git a/src/components/__tests__/FormModel.spec.js b/src/components/__tests__/FormModel.spec.js index e35684bc3..17812f146 100644 --- a/src/components/__tests__/FormModel.spec.js +++ b/src/components/__tests__/FormModel.spec.js @@ -93,7 +93,7 @@ describe('FormModel', () => { it('should call axios.patch with the right data', async () => { const spy = vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} }); - const { vm } = mount({ propsData: { url, model, formInitialData } }); + const { vm } = mount({ propsData: { url, model } }); vm.formData.mockKey = 'newVal'; await vm.$nextTick(); await vm.save(); @@ -106,6 +106,7 @@ describe('FormModel', () => { const { vm } = mount({ propsData: { url, model, formInitialData, urlCreate: 'mockUrlCreate' }, }); + await vm.$nextTick(); vm.formData.mockKey = 'newVal'; await vm.$nextTick(); await vm.save(); @@ -119,7 +120,7 @@ describe('FormModel', () => { }); const spyPatch = vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} }); const spySaveFn = vi.spyOn(vm.$props, 'saveFn'); - + await vm.$nextTick(); vm.formData.mockKey = 'newVal'; await vm.$nextTick(); await vm.save(); diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue index 0d80f43ce..44002c22a 100644 --- a/src/components/common/VnCard.vue +++ b/src/components/common/VnCard.vue @@ -10,11 +10,11 @@ import LeftMenu from 'components/LeftMenu.vue'; import RightMenu from 'components/common/RightMenu.vue'; const props = defineProps({ dataKey: { type: String, required: true }, - baseUrl: { type: String, default: undefined }, - customUrl: { type: String, default: undefined }, + url: { type: String, default: undefined }, filter: { type: Object, default: () => {} }, descriptor: { type: Object, required: true }, filterPanel: { type: Object, default: undefined }, + idInWhere: { type: Boolean, default: false }, searchDataKey: { type: String, default: undefined }, searchbarProps: { type: Object, default: undefined }, redirectOnError: { type: Boolean, default: false }, @@ -23,25 +23,20 @@ const props = defineProps({ const stateStore = useStateStore(); const route = useRoute(); const router = useRouter(); -const url = computed(() => { - if (props.baseUrl) { - return `${props.baseUrl}/${route.params.id}`; - } - return props.customUrl; -}); const searchRightDataKey = computed(() => { if (!props.searchDataKey) return route.name; return props.searchDataKey; }); + const arrayData = useArrayData(props.dataKey, { - url: url.value, - filter: props.filter, + url: props.url, + userFilter: props.filter, + oneRecord: true, }); onBeforeMount(async () => { try { - if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id }; - await arrayData.fetch({ append: false, updateRouter: false }); + await fetch(route.params.id); } catch { const { matched: matches } = router.currentRoute.value; const { path } = matches.at(-1); @@ -49,13 +44,17 @@ onBeforeMount(async () => { } }); -if (props.baseUrl) { - onBeforeRouteUpdate(async (to, from) => { - if (to.params.id !== from.params.id) { - arrayData.store.url = `${props.baseUrl}/${to.params.id}`; - await arrayData.fetch({ append: false, updateRouter: false }); - } - }); +onBeforeRouteUpdate(async (to, from) => { + const id = to.params.id; + if (id !== from.params.id) await fetch(id, true); +}); + +async function fetch(id, append = false) { + const regex = /\/(\d+)/; + if (props.idInWhere) arrayData.store.filter.where = { id }; + else if (!regex.test(props.url)) arrayData.store.url = `${props.url}/${id}`; + else arrayData.store.url = props.url.replace(regex, `/${id}`); + await arrayData.fetch({ append, updateRouter: false }); }