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