From d8f444e596c7c5cee175973c9e668c95175d3cf1 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Wed, 11 Jun 2025 22:00:59 +0200
Subject: [PATCH] improved model dialog los changes warning

---
 vue3/src/components/dialogs/ModelEditDialog.vue           | 8 +++++---
 vue3/src/components/model_editors/AccessTokenEditor.vue   | 2 +-
 vue3/src/components/model_editors/AutomationEditor.vue    | 2 +-
 .../components/model_editors/ConnectorConfigEditor.vue    | 2 +-
 vue3/src/components/model_editors/CustomFilterEditor.vue  | 2 +-
 vue3/src/components/model_editors/FoodEditor.vue          | 2 +-
 vue3/src/components/model_editors/InviteLinkEditor.vue    | 2 +-
 vue3/src/components/model_editors/KeywordEditor.vue       | 2 +-
 vue3/src/components/model_editors/MealPlanEditor.vue      | 2 +-
 vue3/src/components/model_editors/MealTypeEditor.vue      | 2 +-
 vue3/src/components/model_editors/PropertyEditor.vue      | 2 +-
 vue3/src/components/model_editors/PropertyTypeEditor.vue  | 2 +-
 vue3/src/components/model_editors/RecipeBookEditor.vue    | 2 +-
 vue3/src/components/model_editors/RecipeEditor.vue        | 2 +-
 .../components/model_editors/ShoppingListEntryEditor.vue  | 2 +-
 vue3/src/components/model_editors/StorageEditor.vue       | 2 +-
 .../model_editors/SupermarketCategoryEditor.vue           | 2 +-
 vue3/src/components/model_editors/SupermarketEditor.vue   | 2 +-
 vue3/src/components/model_editors/SyncEditor.vue          | 2 +-
 .../src/components/model_editors/UnitConversionEditor.vue | 2 +-
 vue3/src/components/model_editors/UnitEditor.vue          | 2 +-
 vue3/src/components/model_editors/UserFileEditor.vue      | 2 +-
 vue3/src/components/model_editors/UserSpaceEditor.vue     | 2 +-
 vue3/src/composables/useModelEditorFunctions.ts           | 7 +++++++
 24 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/vue3/src/components/dialogs/ModelEditDialog.vue b/vue3/src/components/dialogs/ModelEditDialog.vue
index fed62d0cd..90f46393f 100644
--- a/vue3/src/components/dialogs/ModelEditDialog.vue
+++ b/vue3/src/components/dialogs/ModelEditDialog.vue
@@ -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
diff --git a/vue3/src/components/model_editors/AccessTokenEditor.vue b/vue3/src/components/model_editors/AccessTokenEditor.vue
index 3167458a2..58949fb82 100644
--- a/vue3/src/components/model_editors/AccessTokenEditor.vue
+++ b/vue3/src/components/model_editors/AccessTokenEditor.vue
@@ -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)
 
 
diff --git a/vue3/src/components/model_editors/AutomationEditor.vue b/vue3/src/components/model_editors/AutomationEditor.vue
index b046dbc6a..a62891f3a 100644
--- a/vue3/src/components/model_editors/AutomationEditor.vue
+++ b/vue3/src/components/model_editors/AutomationEditor.vue
@@ -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)
diff --git a/vue3/src/components/model_editors/ConnectorConfigEditor.vue b/vue3/src/components/model_editors/ConnectorConfigEditor.vue
index fc3710bf4..625eecfcf 100644
--- a/vue3/src/components/model_editors/ConnectorConfigEditor.vue
+++ b/vue3/src/components/model_editors/ConnectorConfigEditor.vue
@@ -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,
diff --git a/vue3/src/components/model_editors/CustomFilterEditor.vue b/vue3/src/components/model_editors/CustomFilterEditor.vue
index 00125a78e..204f768e3 100644
--- a/vue3/src/components/model_editors/CustomFilterEditor.vue
+++ b/vue3/src/components/model_editors/CustomFilterEditor.vue
@@ -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)
 
 
diff --git a/vue3/src/components/model_editors/FoodEditor.vue b/vue3/src/components/model_editors/FoodEditor.vue
index 9f6fce733..f22649606 100644
--- a/vue3/src/components/model_editors/FoodEditor.vue
+++ b/vue3/src/components/model_editors/FoodEditor.vue
@@ -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)
 
 
diff --git a/vue3/src/components/model_editors/InviteLinkEditor.vue b/vue3/src/components/model_editors/InviteLinkEditor.vue
index 07e644e3d..2175f041d 100644
--- a/vue3/src/components/model_editors/InviteLinkEditor.vue
+++ b/vue3/src/components/model_editors/InviteLinkEditor.vue
@@ -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)
diff --git a/vue3/src/components/model_editors/KeywordEditor.vue b/vue3/src/components/model_editors/KeywordEditor.vue
index ed0bffdb1..7dd7d6627 100644
--- a/vue3/src/components/model_editors/KeywordEditor.vue
+++ b/vue3/src/components/model_editors/KeywordEditor.vue
@@ -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)
diff --git a/vue3/src/components/model_editors/MealPlanEditor.vue b/vue3/src/components/model_editors/MealPlanEditor.vue
index c30d82a81..567fc9499 100644
--- a/vue3/src/components/model_editors/MealPlanEditor.vue
+++ b/vue3/src/components/model_editors/MealPlanEditor.vue
@@ -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,
diff --git a/vue3/src/components/model_editors/MealTypeEditor.vue b/vue3/src/components/model_editors/MealTypeEditor.vue
index 84493c746..707ab72bf 100644
--- a/vue3/src/components/model_editors/MealTypeEditor.vue
+++ b/vue3/src/components/model_editors/MealTypeEditor.vue
@@ -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)
diff --git a/vue3/src/components/model_editors/PropertyEditor.vue b/vue3/src/components/model_editors/PropertyEditor.vue
index 2d05eab3e..4fd53d362 100644
--- a/vue3/src/components/model_editors/PropertyEditor.vue
+++ b/vue3/src/components/model_editors/PropertyEditor.vue
@@ -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)
 
 
diff --git a/vue3/src/components/model_editors/PropertyTypeEditor.vue b/vue3/src/components/model_editors/PropertyTypeEditor.vue
index 39bf8505a..666f1dae5 100644
--- a/vue3/src/components/model_editors/PropertyTypeEditor.vue
+++ b/vue3/src/components/model_editors/PropertyTypeEditor.vue
@@ -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,
diff --git a/vue3/src/components/model_editors/RecipeBookEditor.vue b/vue3/src/components/model_editors/RecipeBookEditor.vue
index 9c227cfd3..602d82ef3 100644
--- a/vue3/src/components/model_editors/RecipeBookEditor.vue
+++ b/vue3/src/components/model_editors/RecipeBookEditor.vue
@@ -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()
diff --git a/vue3/src/components/model_editors/RecipeEditor.vue b/vue3/src/components/model_editors/RecipeEditor.vue
index b617b6e5c..0d0c0e0f2 100644
--- a/vue3/src/components/model_editors/RecipeEditor.vue
+++ b/vue3/src/components/model_editors/RecipeEditor.vue
@@ -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)
diff --git a/vue3/src/components/model_editors/ShoppingListEntryEditor.vue b/vue3/src/components/model_editors/ShoppingListEntryEditor.vue
index 10f1dd02b..40e523f4c 100644
--- a/vue3/src/components/model_editors/ShoppingListEntryEditor.vue
+++ b/vue3/src/components/model_editors/ShoppingListEntryEditor.vue
@@ -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)
diff --git a/vue3/src/components/model_editors/StorageEditor.vue b/vue3/src/components/model_editors/StorageEditor.vue
index 943fda829..8cb75352e 100644
--- a/vue3/src/components/model_editors/StorageEditor.vue
+++ b/vue3/src/components/model_editors/StorageEditor.vue
@@ -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)
diff --git a/vue3/src/components/model_editors/SupermarketCategoryEditor.vue b/vue3/src/components/model_editors/SupermarketCategoryEditor.vue
index 17a47d9e0..094584063 100644
--- a/vue3/src/components/model_editors/SupermarketCategoryEditor.vue
+++ b/vue3/src/components/model_editors/SupermarketCategoryEditor.vue
@@ -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)
diff --git a/vue3/src/components/model_editors/SupermarketEditor.vue b/vue3/src/components/model_editors/SupermarketEditor.vue
index d02a5f93e..34ab73a58 100644
--- a/vue3/src/components/model_editors/SupermarketEditor.vue
+++ b/vue3/src/components/model_editors/SupermarketEditor.vue
@@ -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)
diff --git a/vue3/src/components/model_editors/SyncEditor.vue b/vue3/src/components/model_editors/SyncEditor.vue
index 587703c1c..ae4273539 100644
--- a/vue3/src/components/model_editors/SyncEditor.vue
+++ b/vue3/src/components/model_editors/SyncEditor.vue
@@ -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)
diff --git a/vue3/src/components/model_editors/UnitConversionEditor.vue b/vue3/src/components/model_editors/UnitConversionEditor.vue
index 1fa5e78c3..78f60c6c2 100644
--- a/vue3/src/components/model_editors/UnitConversionEditor.vue
+++ b/vue3/src/components/model_editors/UnitConversionEditor.vue
@@ -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)
 
 
diff --git a/vue3/src/components/model_editors/UnitEditor.vue b/vue3/src/components/model_editors/UnitEditor.vue
index 5e4d80580..f88d3bd47 100644
--- a/vue3/src/components/model_editors/UnitEditor.vue
+++ b/vue3/src/components/model_editors/UnitEditor.vue
@@ -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)
diff --git a/vue3/src/components/model_editors/UserFileEditor.vue b/vue3/src/components/model_editors/UserFileEditor.vue
index f69f737db..52b29ba55 100644
--- a/vue3/src/components/model_editors/UserFileEditor.vue
+++ b/vue3/src/components/model_editors/UserFileEditor.vue
@@ -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)
diff --git a/vue3/src/components/model_editors/UserSpaceEditor.vue b/vue3/src/components/model_editors/UserSpaceEditor.vue
index 7c1c9f93b..49ee546bd 100644
--- a/vue3/src/components/model_editors/UserSpaceEditor.vue
+++ b/vue3/src/components/model_editors/UserSpaceEditor.vue
@@ -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)
diff --git a/vue3/src/composables/useModelEditorFunctions.ts b/vue3/src/composables/useModelEditorFunctions.ts
index 9e5a3bc63..14691df52 100644
--- a/vue3/src/composables/useModelEditorFunctions.ts
+++ b/vue3/src/composables/useModelEditorFunctions.ts
@@ -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
      */