0
0
Fork 0

fix: formModelPoup defaultActions false

This commit is contained in:
Alex Moreno 2024-07-12 13:34:31 +02:00
parent eaea8a50f0
commit 73c5e0f1f4
2 changed files with 65 additions and 73 deletions

View File

@ -90,7 +90,7 @@ const $props = defineProps({
}); });
const emit = defineEmits(['onFetch', 'onDataSaved']); const emit = defineEmits(['onFetch', 'onDataSaved']);
const modelValue = computed( const modelValue = computed(
() => $props.model ?? `formModel_${route?.meta?.title ?? route.name}`, () => $props.model ?? `formModel_${route?.meta?.title ?? route.name}`
).value; ).value;
const componentIsRendered = ref(false); const componentIsRendered = ref(false);
const arrayData = useArrayData(modelValue); const arrayData = useArrayData(modelValue);
@ -137,7 +137,7 @@ onMounted(async () => {
JSON.stringify(newVal) !== JSON.stringify(originalData.value); JSON.stringify(newVal) !== JSON.stringify(originalData.value);
isResetting.value = false; isResetting.value = false;
}, },
{ deep: true }, { deep: true }
); );
} }
}); });
@ -145,7 +145,7 @@ onMounted(async () => {
if (!$props.url) if (!$props.url)
watch( watch(
() => arrayData.store.data, () => arrayData.store.data,
(val) => updateAndEmit('onFetch', val), (val) => updateAndEmit('onFetch', val)
); );
watch(formUrl, async () => { watch(formUrl, async () => {
@ -239,7 +239,7 @@ function filter(value, update, filterOptions) {
(ref) => { (ref) => {
ref.setOptionIndex(-1); ref.setOptionIndex(-1);
ref.moveOptionSelection(1, true); ref.moveOptionSelection(1, true);
}, }
); );
} }
@ -261,13 +261,7 @@ defineExpose({
</script> </script>
<template> <template>
<div class="column items-center full-width"> <div class="column items-center full-width">
<QForm <QForm @submit="save" @reset="reset" class="q-pa-md" id="formModel">
@submit="save"
@reset="reset"
class="q-pa-md"
id="formModel"
>
<QCard> <QCard>
<slot <slot
v-if="formData" v-if="formData"
@ -276,70 +270,72 @@ defineExpose({
:validate="validate" :validate="validate"
:filter="filter" :filter="filter"
/> />
<SkeletonForm v-else/> <SkeletonForm v-else />
</QCard> </QCard>
</QForm> </QForm>
</div> </div>
<Teleport <Teleport
to="#st-actions" to="#st-actions"
v-if="stateStore?.isSubToolbarShown() && componentIsRendered" v-if="
$props.defaultActions &&
stateStore?.isSubToolbarShown() &&
componentIsRendered
"
> >
<div v-if="$props.defaultActions"> <QBtnGroup push class="q-gutter-x-sm">
<QBtnGroup push class="q-gutter-x-sm"> <slot name="moreActions" />
<slot name="moreActions" /> <QBtn
<QBtn :label="tMobile(defaultButtons.reset.label)"
:label="tMobile(defaultButtons.reset.label)" :color="defaultButtons.reset.color"
:color="defaultButtons.reset.color" :icon="defaultButtons.reset.icon"
:icon="defaultButtons.reset.icon" flat
flat @click="reset"
@click="reset" :disable="!hasChanges"
:disable="!hasChanges" :title="t(defaultButtons.reset.label)"
:title="t(defaultButtons.reset.label)" />
/> <QBtnDropdown
<QBtnDropdown v-if="$props.goTo"
v-if="$props.goTo" @click="saveAndGo"
@click="saveAndGo" :label="tMobile('globals.saveAndContinue')"
:label="tMobile('globals.saveAndContinue')" :title="t('globals.saveAndContinue')"
:title="t('globals.saveAndContinue')" :disable="!hasChanges"
:disable="!hasChanges" color="primary"
color="primary" icon="save"
icon="save" split
split >
> <QList>
<QList> <QItem
<QItem clickable
clickable v-close-popup
v-close-popup @click="save"
@click="save" :title="t('globals.save')"
:title="t('globals.save')" >
> <QItemSection>
<QItemSection> <QItemLabel>
<QItemLabel> <QIcon
<QIcon name="save"
name="save" color="white"
color="white" class="q-mr-sm"
class="q-mr-sm" size="sm"
size="sm" />
/> {{ t('globals.save').toUpperCase() }}
{{ t('globals.save').toUpperCase() }} </QItemLabel>
</QItemLabel> </QItemSection>
</QItemSection> </QItem>
</QItem> </QList>
</QList> </QBtnDropdown>
</QBtnDropdown> <QBtn
<QBtn v-else
v-else :label="tMobile('globals.save')"
:label="tMobile('globals.save')" color="primary"
color="primary" icon="save"
icon="save" @click="save"
@click="save" :disable="!hasChanges"
:disable="!hasChanges" :title="t(defaultButtons.save.label)"
:title="t(defaultButtons.save.label)" />
/> </QBtnGroup>
</QBtnGroup>
</div>
</Teleport> </Teleport>
<QInnerLoading <QInnerLoading
:showing="isLoading" :showing="isLoading"
:label="t('globals.pleaseWait')" :label="t('globals.pleaseWait')"

View File

@ -23,16 +23,12 @@ const formModelRef = ref(null);
const closeButton = ref(null); const closeButton = ref(null);
const onDataSaved = (formData, requestResponse) => { const onDataSaved = (formData, requestResponse) => {
closeForm(); if (closeButton.value) closeButton.value.click();
emit('onDataSaved', formData, requestResponse); emit('onDataSaved', formData, requestResponse);
}; };
const isLoading = computed(() => formModelRef.value?.isLoading); const isLoading = computed(() => formModelRef.value?.isLoading);
const closeForm = async () => {
if (closeButton.value) closeButton.value.click();
};
defineExpose({ defineExpose({
isLoading, isLoading,
onDataSaved, onDataSaved,