wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

fix: default model value depends on route

This commit is contained in:
Javier Segarra 2024-06-11 14:09:42 +02:00
parent 57eadbc74e
commit 7ac2aed326
1 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/FormModel.vue
View File

@ -12,6 +12,7 @@ import SkeletonForm from 'components/ui/SkeletonForm.vue';
import VnConfirm from './ui/VnConfirm.vue';
import { tMobile } from 'src/composables/tMobile';
import { useArrayData } from 'src/composables/useArrayData';
import { useRoute } from 'vue-router';
const { push } = useRouter();
const quasar = useQuasar();
@ -20,6 +21,7 @@ const stateStore = useStateStore();
const { t } = useI18n();
const { validate } = useValidator();
const { notify } = useNotify();
const route = useRoute();
const $props = defineProps({
url: {
@ -28,7 +30,7 @@ const $props = defineProps({
},
model: {
type: String,
default: '',
default: null,
},
filter: {
type: Object,
@ -82,17 +84,18 @@ const $props = defineProps({
description: 'It is used for redirect on click "save and continue"',
},
});
const emit = defineEmits(['onFetch', 'onDataSaved']);
const modelValue = computed(
() => $props.model ?? `formModel_${route?.meta?.title ?? route.name}`
);
const componentIsRendered = ref(false);
const arrayData = useArrayData($props.model);
const arrayData = useArrayData(modelValue);
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($props.model));
const formData = computed(() => state.get(modelValue));
const formUrl = computed(() => $props.url);
const defaultButtons = computed(() => ({
save: {
@ -114,7 +117,7 @@ onMounted(async () => {
nextTick(() => (componentIsRendered.value = true));
// Podemos enviarle al form la estructura de data inicial sin necesidad de fetchearla
state.set($props.model, $props.formInitialData);
state.set(modelValue, $props.formInitialData);
if ($props.autoLoad && !$props.formInitialData && $props.url) await fetch();
else if (arrayData.store.data) updateAndEmit('onFetch', arrayData.store.data);
@ -161,8 +164,8 @@ onBeforeRouteLeave((to, from, next) => {
onUnmounted(() => {
// Restauramos los datos originales en el store si se realizaron cambios en el formulario pero no se guardaron, evitando modificaciones erróneas.
if (hasChanges.value) return state.set($props.model, originalData.value);
if ($props.clearStoreOnUnmount) state.unset($props.model);
if (hasChanges.value) return state.set(modelValue, originalData.value);
if ($props.clearStoreOnUnmount) state.unset(modelValue);
});
async function fetch() {
@ -174,7 +177,7 @@ async function fetch() {
updateAndEmit('onFetch', data);
} catch (e) {
state.set($props.model, {});
state.set(modelValue, {});
originalData.value = {};
}
}
@ -235,11 +238,11 @@ function filter(value, update, filterOptions) {
}
function updateAndEmit(evt, val, res) {
state.set($props.model, val);
state.set(modelValue, val);
originalData.value = val && JSON.parse(JSON.stringify(val));
if (!$props.url) arrayData.store.data = val;
emit(evt, state.get($props.model), res);
emit(evt, state.get(modelValue), res);
}
defineExpose({ save, isLoading, hasChanges });