improved model dialog los changes warning

This commit is contained in:
vabene1111
2025-06-11 22:00:59 +02:00
parent 6bc3e26eff
commit d8f444e596
24 changed files with 34 additions and 25 deletions

View File

@@ -1,13 +1,13 @@
<template>
<v-dialog max-width="1400" :activator="dialogActivator" v-model="dialog">
<component :is="editorComponent" :item="props.item" :item-id="props.itemId" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false; " :itemDefaults="props.itemDefaults"></component>
<v-dialog max-width="1400" :activator="dialogActivator" v-model="dialog" :persistent="editingObjChangedState">
<component :is="editorComponent" :item="props.item" :item-id="props.itemId" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false; " @changed-state="(state:boolean) => {editingObjChangedState = state}" :itemDefaults="props.itemDefaults"></component>
</v-dialog>
</template>
<script setup lang="ts">
import {defineAsyncComponent, PropType, shallowRef, watch} from "vue";
import {defineAsyncComponent, PropType, ref, shallowRef, watch} from "vue";
import {EditorSupportedModels, getGenericModelFromString} from "@/types/Models";
import {useI18n} from "vue-i18n";
import {MealPlan} from "@/openapi";
@@ -33,6 +33,8 @@ const editorComponent = shallowRef(defineAsyncComponent(() => import(`@/componen
const dialog = defineModel<Boolean|undefined>({default: undefined})
const dialogActivator = (dialog.value !== undefined) ? undefined : props.activator
const editingObjChangedState = ref(false)
/**
* for some reason editorComponent is not updated automatically when prop is changed
* because of this watch prop changes and update manually if prop is changed

View File

@@ -46,7 +46,7 @@ const props = defineProps({
dialog: {type: Boolean, default: false}
})
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<AccessToken>('AccessToken', emit)

View File

@@ -46,7 +46,7 @@ const props = defineProps({
dialog: {type: Boolean, default: false}
})
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<Automation>('Automation', emit)
// object specific data (for selects/display)

View File

@@ -48,7 +48,7 @@ const props = defineProps({
dialog: {type: Boolean, default: false}
})
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
const {
setupState,
deleteObject,

View File

@@ -32,7 +32,7 @@ const props = defineProps({
dialog: {type: Boolean, default: false}
})
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<CustomFilter>('CustomFilter', emit)

View File

@@ -135,7 +135,7 @@ const props = defineProps({
dialog: {type: Boolean, default: false}
})
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<Food>('Food', emit)

View File

@@ -40,7 +40,7 @@ const props = defineProps({
dialog: {type: Boolean, default: false}
})
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<InviteLink>('InviteLink', emit)
// object specific data (for selects/display)

View File

@@ -35,7 +35,7 @@ const props = defineProps({
dialog: {type: Boolean, default: false}
})
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<Keyword>('Keyword', emit)
// object specific data (for selects/display)

View File

@@ -120,7 +120,7 @@ const props = defineProps({
dialog: {type: Boolean, default: false}
})
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
const {
setupState,
deleteObject,

View File

@@ -56,7 +56,7 @@ const props = defineProps({
dialog: {type: Boolean, default: false}
})
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<MealType>('MealType', emit)
// object specific data (for selects/display)

View File

@@ -41,7 +41,7 @@ const props = defineProps({
dialog: {type: Boolean, default: false}
})
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<Property>('Property', emit)

View File

@@ -40,7 +40,7 @@ const props = defineProps({
dialog: {type: Boolean, default: false}
})
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
const {
setupState,
deleteObject,

View File

@@ -76,7 +76,7 @@ const props = defineProps({
dialog: {type: Boolean, default: false}
})
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<RecipeBook>('RecipeBook', emit)
const {t} = useI18n()

View File

@@ -161,7 +161,7 @@ const props = defineProps({
dialog: {type: Boolean, default: false}
})
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<Recipe>('Recipe', emit)
// object specific data (for selects/display)

View File

@@ -46,7 +46,7 @@ const props = defineProps({
dialog: {type: Boolean, default: false}
})
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<ShoppingListEntry>('ShoppingListEntry', emit)
// object specific data (for selects/display)

View File

@@ -44,7 +44,7 @@ const props = defineProps({
dialog: {type: Boolean, default: false}
})
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<Storage>('Storage', emit)
// object specific data (for selects/display)

View File

@@ -36,7 +36,7 @@ const props = defineProps({
dialog: {type: Boolean, default: false}
})
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<SupermarketCategory>('SupermarketCategory', emit)
// object specific data (for selects/display)

View File

@@ -118,7 +118,7 @@ const props = defineProps({
dialog: {type: Boolean, default: false}
})
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<Supermarket>('Supermarket', emit)
// object specific data (for selects/display)

View File

@@ -39,7 +39,7 @@ const props = defineProps({
dialog: {type: Boolean, default: false}
})
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<Sync>('Sync', emit)
// object specific data (for selects/display)

View File

@@ -61,7 +61,7 @@ const props = defineProps({
dialog: {type: Boolean, default: false}
})
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<UnitConversion>('UnitConversion', emit)

View File

@@ -39,7 +39,7 @@ const props = defineProps({
dialog: {type: Boolean, default: false}
})
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<Unit>('Unit', emit)
// object specific data (for selects/display)

View File

@@ -63,7 +63,7 @@ const props = defineProps({
dialog: {type: Boolean, default: false}
})
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<UserFile>('UserFile', emit)
// object specific data (for selects/display)

View File

@@ -36,7 +36,7 @@ const props = defineProps({
dialog: {type: Boolean, default: false}
})
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<UserSpace>('UserSpace', emit)
// object specific data (for selects/display)

View File

@@ -29,6 +29,13 @@ export function useModelEditorFunctions<T>(modelName: EditorSupportedModels, emi
}
}, {deep: true})
/**
* emit the changed state of the object to parent components for display or navigation blocking
*/
watch(() => editingObjChanged.value, () => {
emit('changedState', editingObjChanged.value)
})
/**
* before mounting the component UI set the model class based on the given model name
*/