From 8159838fc3fe8c0c505cb014f37796ce478b6f46 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Wed, 1 Jan 2025 10:07:27 +0100
Subject: [PATCH] warn before leaving model edit page

---
 .../components/dialogs/VClosableCardTitle.vue | 10 ++---
 .../model_editors/AccessTokenEditor.vue       |  3 +-
 .../model_editors/AutomationEditor.vue        |  3 +-
 .../components/model_editors/FoodEditor.vue   |  3 +-
 .../model_editors/InviteLinkEditor.vue        |  3 +-
 .../model_editors/KeywordEditor.vue           |  3 +-
 .../model_editors/MealPlanEditor.vue          |  3 +-
 .../model_editors/MealTypeEditor.vue          |  3 +-
 .../model_editors/ModelEditorBase.vue         | 41 +++++++++++++++++--
 .../model_editors/PropertyEditor.vue          |  3 +-
 .../model_editors/PropertyTypeEditor.vue      |  3 +-
 .../components/model_editors/RecipeEditor.vue |  3 +-
 .../model_editors/ShoppingListEntryEditor.vue |  3 +-
 .../SupermarketCategoryEditor.vue             |  3 +-
 .../model_editors/SupermarketEditor.vue       |  3 +-
 .../model_editors/UnitConversionEditor.vue    |  3 +-
 .../components/model_editors/UnitEditor.vue   |  5 +--
 .../model_editors/UserFileEditor.vue          |  3 +-
 .../model_editors/UserSpaceEditor.vue         |  3 +-
 .../composables/useModelEditorFunctions.ts    | 39 +++++++++++++++++-
 vue3/src/locales/ar.json                      |  2 +
 vue3/src/locales/bg.json                      |  2 +
 vue3/src/locales/ca.json                      |  2 +
 vue3/src/locales/cs.json                      |  2 +
 vue3/src/locales/da.json                      |  2 +
 vue3/src/locales/de.json                      |  2 +
 vue3/src/locales/el.json                      |  2 +
 vue3/src/locales/en.json                      |  2 +
 vue3/src/locales/es.json                      |  2 +
 vue3/src/locales/fi.json                      |  2 +
 vue3/src/locales/fr.json                      |  2 +
 vue3/src/locales/he.json                      |  2 +
 vue3/src/locales/hu.json                      |  2 +
 vue3/src/locales/hy.json                      |  2 +
 vue3/src/locales/id.json                      |  2 +
 vue3/src/locales/is.json                      |  2 +
 vue3/src/locales/it.json                      |  2 +
 vue3/src/locales/lt.json                      |  2 +
 vue3/src/locales/nb_NO.json                   |  2 +
 vue3/src/locales/nl.json                      |  2 +
 vue3/src/locales/pl.json                      |  2 +
 vue3/src/locales/pt.json                      |  2 +
 vue3/src/locales/pt_BR.json                   |  2 +
 vue3/src/locales/ro.json                      |  2 +
 vue3/src/locales/ru.json                      |  2 +
 vue3/src/locales/sl.json                      |  2 +
 vue3/src/locales/sv.json                      |  2 +
 vue3/src/locales/tr.json                      |  2 +
 vue3/src/locales/uk.json                      |  2 +
 vue3/src/locales/zh_Hans.json                 |  2 +
 vue3/src/locales/zh_Hant.json                 |  2 +
 vue3/src/pages/ModelEditPage.vue              |  2 +-
 52 files changed, 177 insertions(+), 30 deletions(-)

diff --git a/vue3/src/components/dialogs/VClosableCardTitle.vue b/vue3/src/components/dialogs/VClosableCardTitle.vue
index 9f5b59b49..edc83d68c 100644
--- a/vue3/src/components/dialogs/VClosableCardTitle.vue
+++ b/vue3/src/components/dialogs/VClosableCardTitle.vue
@@ -1,13 +1,13 @@
 <template>
     <v-card-title class="pb-0">
-        <v-row align="center" >
+        <v-row align="center">
             <v-col cols="10" md="11" class="text-truncate">
                 <i :class="props.icon" v-if="props.icon != ''"></i>
                 {{ props.title }}
-                <v-card-subtitle class="pa-0" v-if="props.subTitle != ''">{{ props.subTitle}}</v-card-subtitle>
+                <v-card-subtitle class="pa-0" v-if="props.subTitle != ''">{{ props.subTitle }}</v-card-subtitle>
             </v-col>
-            <v-col cols="2" md="1" v-if="!props.hideClose">
-                <v-btn class="float-right pr-2" icon="$close" variant="plain" @click="model = false; emit('close')"></v-btn>
+            <v-col cols="2" md="1">
+                <v-btn class="float-right pr-2" icon="$close" variant="plain" @click="model = false; emit('close')" v-if="!props.hideClose"></v-btn>
             </v-col>
         </v-row>
     </v-card-title>
@@ -26,7 +26,7 @@ const props = defineProps({
     title: {type: String, default: ''},
     icon: {type: String, default: ''},
     subTitle: {type: String, default: ''},
-    hideClose: {type:Boolean, default: false},
+    hideClose: {type: Boolean, default: false},
 })
 
 const model = defineModel<Boolean>()
diff --git a/vue3/src/components/model_editors/AccessTokenEditor.vue b/vue3/src/components/model_editors/AccessTokenEditor.vue
index 46c8e9715..68606b15a 100644
--- a/vue3/src/components/model_editors/AccessTokenEditor.vue
+++ b/vue3/src/components/model_editors/AccessTokenEditor.vue
@@ -6,6 +6,7 @@
         @delete="deleteObject"
         @close="emit('close')"
         :is-update="isUpdate()"
+        :is-changed="editingObjChanged"
         :model-class="modelClass"
         :object-name="editingObjName()">
         <v-card-text>
@@ -45,7 +46,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['create', 'save', 'delete', 'close'])
-const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<AccessToken>('AccessToken', emit)
+const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<AccessToken>('AccessToken', emit)
 
 
 onMounted(() => {
diff --git a/vue3/src/components/model_editors/AutomationEditor.vue b/vue3/src/components/model_editors/AutomationEditor.vue
index 6c4198445..a961be3a9 100644
--- a/vue3/src/components/model_editors/AutomationEditor.vue
+++ b/vue3/src/components/model_editors/AutomationEditor.vue
@@ -6,6 +6,7 @@
         @delete="deleteObject"
         @close="emit('close')"
         :is-update="isUpdate()"
+        :is-changed="editingObjChanged"
         :model-class="modelClass"
         :object-name="editingObjName()">
         <v-card-text>
@@ -47,7 +48,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['create', 'save', 'delete', 'close'])
-const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<Automation>('Automation', emit)
+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/FoodEditor.vue b/vue3/src/components/model_editors/FoodEditor.vue
index 420cd8a92..8be3a2605 100644
--- a/vue3/src/components/model_editors/FoodEditor.vue
+++ b/vue3/src/components/model_editors/FoodEditor.vue
@@ -6,6 +6,7 @@
         @delete="deleteObject"
         @close="emit('close')"
         :is-update="isUpdate()"
+        :is-changed="editingObjChanged"
         :model-class="modelClass"
         :object-name="editingObjName()">
 
@@ -133,7 +134,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['create', 'save', 'delete', 'close'])
-const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<Food>('Food', emit)
+const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<Food>('Food', emit)
 
 
 // object specific data (for selects/display)
diff --git a/vue3/src/components/model_editors/InviteLinkEditor.vue b/vue3/src/components/model_editors/InviteLinkEditor.vue
index 8bf525e00..c1dce204d 100644
--- a/vue3/src/components/model_editors/InviteLinkEditor.vue
+++ b/vue3/src/components/model_editors/InviteLinkEditor.vue
@@ -6,6 +6,7 @@
         @delete="deleteObject"
         @close="emit('close')"
         :is-update="isUpdate()"
+        :is-changed="editingObjChanged"
         :model-class="modelClass"
         :object-name="editingObjName()">
         <v-card-text>
@@ -39,7 +40,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['create', 'save', 'delete', 'close'])
-const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<InviteLink>('InviteLink', emit)
+const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<InviteLink>('InviteLink', emit)
 
 // object specific data (for selects/display)
 const groups = ref([] as Group[])
diff --git a/vue3/src/components/model_editors/KeywordEditor.vue b/vue3/src/components/model_editors/KeywordEditor.vue
index 3d80f0424..86be0e34a 100644
--- a/vue3/src/components/model_editors/KeywordEditor.vue
+++ b/vue3/src/components/model_editors/KeywordEditor.vue
@@ -6,6 +6,7 @@
         @delete="deleteObject"
         @close="emit('close')"
         :is-update="isUpdate()"
+        :is-changed="editingObjChanged"
         :model-class="modelClass"
         :object-name="editingObjName()">
         <v-card-text>
@@ -38,7 +39,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['create', 'save', 'delete', 'close'])
-const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<Keyword>('Keyword', emit)
+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 7c776f4c6..31b6885b5 100644
--- a/vue3/src/components/model_editors/MealPlanEditor.vue
+++ b/vue3/src/components/model_editors/MealPlanEditor.vue
@@ -6,6 +6,7 @@
         @delete="deleteObject"
         @close="emit('close')"
         :is-update="isUpdate()"
+        :is-changed="editingObjChanged"
         :model-class="modelClass"
         :object-name="editingObjName()">
 
@@ -120,7 +121,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['create', 'save', 'delete', 'close'])
-const {setupState, deleteObject, saveObject, isUpdate, editingObjName, applyItemDefaults, loading, editingObj, modelClass} = useModelEditorFunctions<MealPlan>('MealPlan', emit)
+const {setupState, deleteObject, saveObject, isUpdate, editingObjName, applyItemDefaults, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<MealPlan>('MealPlan', emit)
 
 // object specific data (for selects/display)
 const tab = ref('plan')
diff --git a/vue3/src/components/model_editors/MealTypeEditor.vue b/vue3/src/components/model_editors/MealTypeEditor.vue
index 9ed23450e..67718dd0d 100644
--- a/vue3/src/components/model_editors/MealTypeEditor.vue
+++ b/vue3/src/components/model_editors/MealTypeEditor.vue
@@ -6,6 +6,7 @@
         @delete="deleteObject"
         @close="emit('close')"
         :is-update="isUpdate()"
+        :is-changed="editingObjChanged"
         :model-class="modelClass"
         :object-name="editingObjName()">
         <v-card-text>
@@ -55,7 +56,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['create', 'save', 'delete', 'close'])
-const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<MealType>('MealType', emit)
+const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<MealType>('MealType', emit)
 
 // object specific data (for selects/display)
 const timePickerMenu = ref(false)
diff --git a/vue3/src/components/model_editors/ModelEditorBase.vue b/vue3/src/components/model_editors/ModelEditorBase.vue
index 6a1e88494..f85a5158d 100644
--- a/vue3/src/components/model_editors/ModelEditorBase.vue
+++ b/vue3/src/components/model_editors/ModelEditorBase.vue
@@ -1,13 +1,19 @@
 <template>
     <v-card :loading="loading">
-        <v-closable-card-title :title="$t(modelClass.model.localizationKey)" :sub-title="objectName" :icon="modelClass.model.icon" @close="emit('close');" :hide-close="!dialog"></v-closable-card-title>
+        <v-closable-card-title
+            :title="$t(modelClass.model.localizationKey) + ((isChanged) ? '*' : '')"
+            :sub-title="objectName"
+            :icon="modelClass.model.icon"
+            @close="emit('close');"
+            :hide-close="!dialog"
+        ></v-closable-card-title>
 
         <v-divider></v-divider>
         <slot name="default">
 
         </slot>
         <v-divider></v-divider>
-        <v-card-actions >
+        <v-card-actions>
             <v-btn color="delete" prepend-icon="$delete" v-if="isUpdate && !modelClass.model.disableDelete" :disabled="loading">{{ $t('Delete') }}
                 <delete-confirm-dialog :object-name="objectName" :model-name="$t(modelClass.model.localizationKey)" @delete="emit('delete')"></delete-confirm-dialog>
             </v-btn>
@@ -15,6 +21,20 @@
             <v-btn color="save" prepend-icon="$save" @click="emit('save')" v-if="isUpdate && !modelClass.model.disableUpdate" :disabled="loading">{{ $t('Save') }}</v-btn>
         </v-card-actions>
     </v-card>
+
+    <v-dialog width="600px" v-model="leaveConfirmDialog">
+        <v-card>
+            <v-closable-card-title v-model="leaveConfirmDialog" :title="$t('Confirm')"></v-closable-card-title>
+            <v-card-text>
+                {{$t('WarnPageLeave')}}
+            </v-card-text>
+            <v-card-actions>
+                <v-btn @click="leaveConfirmDialog = false; leaveGoTo = null">{{ $t('Cancel') }}</v-btn>
+                <v-btn :to="leaveGoTo" color="warning">{{ $t('Confirm') }}</v-btn>
+            </v-card-actions>
+        </v-card>
+
+    </v-dialog>
 </template>
 
 <script setup lang="ts">
@@ -22,6 +42,8 @@
 import DeleteConfirmDialog from "@/components/dialogs/DeleteConfirmDialog.vue";
 import {GenericModel} from "@/types/Models";
 import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue";
+import {onBeforeRouteLeave, RouteLocationNormalized} from "vue-router";
+import {ref} from "vue";
 
 const emit = defineEmits(['save', 'delete', 'close'])
 
@@ -30,7 +52,20 @@ const props = defineProps({
     dialog: {type: Boolean, default: false},
     objectName: {type: String, default: ''},
     modelClass: {type: GenericModel, default: null},
-    isUpdate: {type: Boolean, default: false}
+    isUpdate: {type: Boolean, default: false},
+    isChanged: {type: Boolean, default: false},
+})
+
+const leaveConfirmDialog = ref(false)
+const leaveGoTo = ref<RouteLocationNormalized | null>(null)
+
+onBeforeRouteLeave((to, from) => {
+    if (props.isChanged && !leaveConfirmDialog.value) {
+        leaveConfirmDialog.value = true
+        leaveGoTo.value = to
+        return false
+    }
+    return true
 })
 
 </script>
diff --git a/vue3/src/components/model_editors/PropertyEditor.vue b/vue3/src/components/model_editors/PropertyEditor.vue
index 031a9af78..665b7c5ea 100644
--- a/vue3/src/components/model_editors/PropertyEditor.vue
+++ b/vue3/src/components/model_editors/PropertyEditor.vue
@@ -6,6 +6,7 @@
         @delete="deleteObject"
         @close="emit('close')"
         :is-update="isUpdate()"
+        :is-changed="editingObjChanged"
         :model-class="modelClass"
         :object-name="editingObjName()">
         <v-card-text>
@@ -41,7 +42,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['create', 'save', 'delete', 'close'])
-const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<Property>('Property', emit)
+const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<Property>('Property', emit)
 
 
 onMounted(() => {
diff --git a/vue3/src/components/model_editors/PropertyTypeEditor.vue b/vue3/src/components/model_editors/PropertyTypeEditor.vue
index 11aefc05e..eb2f61d21 100644
--- a/vue3/src/components/model_editors/PropertyTypeEditor.vue
+++ b/vue3/src/components/model_editors/PropertyTypeEditor.vue
@@ -6,6 +6,7 @@
         @delete="deleteObject"
         @close="emit('close')"
         :is-update="isUpdate()"
+        :is-changed="editingObjChanged"
         :model-class="modelClass"
         :object-name="editingObjName()">
         <v-card-text>
@@ -39,7 +40,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['create', 'save', 'delete', 'close'])
-const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<PropertyType>('PropertyType', emit)
+const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<PropertyType>('PropertyType', emit)
 
 // object specific data (for selects/display)
 
diff --git a/vue3/src/components/model_editors/RecipeEditor.vue b/vue3/src/components/model_editors/RecipeEditor.vue
index d28a21643..c03ae4601 100644
--- a/vue3/src/components/model_editors/RecipeEditor.vue
+++ b/vue3/src/components/model_editors/RecipeEditor.vue
@@ -6,6 +6,7 @@
         @delete="deleteObject"
         @close="emit('close')"
         :is-update="isUpdate()"
+        :is-changed="editingObjChanged"
         :model-class="modelClass"
         :object-name="editingObjName()">
 
@@ -145,7 +146,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['create', 'save', 'delete', 'close'])
-const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<Recipe>('Recipe', emit)
+const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<Recipe>('Recipe', emit)
 
 // object specific data (for selects/display)
 const tab = ref("recipe")
diff --git a/vue3/src/components/model_editors/ShoppingListEntryEditor.vue b/vue3/src/components/model_editors/ShoppingListEntryEditor.vue
index 9e4e5a56a..4ac9dad8f 100644
--- a/vue3/src/components/model_editors/ShoppingListEntryEditor.vue
+++ b/vue3/src/components/model_editors/ShoppingListEntryEditor.vue
@@ -6,6 +6,7 @@
         @delete="deleteObject"
         @close="emit('close')"
         :is-update="isUpdate()"
+        :is-changed="editingObjChanged"
         :model-class="modelClass"
         :object-name="editingObjName()">
         <v-card-text>
@@ -47,7 +48,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['create', 'save', 'delete', 'close'])
-const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<ShoppingListEntry>('ShoppingListEntry', emit)
+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/SupermarketCategoryEditor.vue b/vue3/src/components/model_editors/SupermarketCategoryEditor.vue
index 60b604062..d02ccaae4 100644
--- a/vue3/src/components/model_editors/SupermarketCategoryEditor.vue
+++ b/vue3/src/components/model_editors/SupermarketCategoryEditor.vue
@@ -6,6 +6,7 @@
         @delete="deleteObject"
         @close="emit('close')"
         :is-update="isUpdate()"
+        :is-changed="editingObjChanged"
         :model-class="modelClass"
         :object-name="editingObjName()">
         <v-card-text>
@@ -37,7 +38,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['create', 'save', 'delete', 'close'])
-const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<SupermarketCategory>('SupermarketCategory', emit)
+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 cca537b13..ddb9903df 100644
--- a/vue3/src/components/model_editors/SupermarketEditor.vue
+++ b/vue3/src/components/model_editors/SupermarketEditor.vue
@@ -6,6 +6,7 @@
         @delete="deleteObject"
         @close="emit('close')"
         :is-update="isUpdate()"
+        :is-changed="editingObjChanged"
         :model-class="modelClass"
         :object-name="editingObjName()">
 
@@ -115,7 +116,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['create', 'save', 'delete', 'close'])
-const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<Supermarket>('Supermarket', emit)
+const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<Supermarket>('Supermarket', emit)
 
 // object specific data (for selects/display)
 const tab = ref("supermarket")
diff --git a/vue3/src/components/model_editors/UnitConversionEditor.vue b/vue3/src/components/model_editors/UnitConversionEditor.vue
index 7cbe2c01a..2b7811f88 100644
--- a/vue3/src/components/model_editors/UnitConversionEditor.vue
+++ b/vue3/src/components/model_editors/UnitConversionEditor.vue
@@ -6,6 +6,7 @@
         @delete="deleteObject"
         @close="emit('close')"
         :is-update="isUpdate()"
+        :is-changed="editingObjChanged"
         :model-class="modelClass"
         :object-name="editingObjName()">
         <v-card-text>
@@ -61,7 +62,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['create', 'save', 'delete', 'close'])
-const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<UnitConversion>('UnitConversion', emit)
+const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<UnitConversion>('UnitConversion', emit)
 
 
 onMounted(() => {
diff --git a/vue3/src/components/model_editors/UnitEditor.vue b/vue3/src/components/model_editors/UnitEditor.vue
index 0d4e0f767..b7c5fdd40 100644
--- a/vue3/src/components/model_editors/UnitEditor.vue
+++ b/vue3/src/components/model_editors/UnitEditor.vue
@@ -6,17 +6,16 @@
         @delete="deleteObject"
         @close="emit('close')"
         :is-update="isUpdate()"
+        :is-changed="editingObjChanged"
         :model-class="modelClass"
         :object-name="editingObjName()">
         <v-card-text>
             <v-form :disabled="loading">
-
                 <v-text-field :label="$t('Name')" v-model="editingObj.name"></v-text-field>
                 <v-text-field :label="$t('Plural')" v-model="editingObj.pluralName"></v-text-field>
                 <v-textarea :label="$t('Description')" v-model="editingObj.description"></v-textarea>
                 <v-select :label="$t('BaseUnit')" :hint="$t('BaseUnitHelp')" :items="BASE_UNITS" v-model="editingObj.baseUnit"></v-select>
                 <v-text-field :label="$t('Open_Data_Slug')" :hint="$t('open_data_help_text')" persistent-hint v-model="editingObj.openDataSlug" disabled></v-text-field>
-
             </v-form>
         </v-card-text>
     </model-editor-base>
@@ -40,7 +39,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['create', 'save', 'delete', 'close'])
-const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<Unit>('Unit', emit)
+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 c6e3ba609..ae876b56b 100644
--- a/vue3/src/components/model_editors/UserFileEditor.vue
+++ b/vue3/src/components/model_editors/UserFileEditor.vue
@@ -6,6 +6,7 @@
         @delete="deleteObject"
         @close="emit('close')"
         :is-update="isUpdate()"
+        :is-changed="editingObjChanged"
         :model-class="modelClass"
         :object-name="editingObjName()">
         <v-card-text>
@@ -62,7 +63,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['create', 'save', 'delete', 'close'])
-const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<UserFile>('UserFile', emit)
+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 df11d0c79..a3d5377cb 100644
--- a/vue3/src/components/model_editors/UserSpaceEditor.vue
+++ b/vue3/src/components/model_editors/UserSpaceEditor.vue
@@ -6,6 +6,7 @@
         @delete="deleteObject"
         @close="emit('close')"
         :is-update="isUpdate()"
+        :is-changed="editingObjChanged"
         :model-class="modelClass"
         :object-name="editingObjName()">
         <v-card-text>
@@ -35,7 +36,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['create', 'save', 'delete', 'close'])
-const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<UserSpace>('UserSpace', emit)
+const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<UserSpace>('UserSpace', emit)
 
 // object specific data (for selects/display)
 const groups = ref([] as Group[])
diff --git a/vue3/src/composables/useModelEditorFunctions.ts b/vue3/src/composables/useModelEditorFunctions.ts
index 9f62c5ca2..c13af0f0e 100644
--- a/vue3/src/composables/useModelEditorFunctions.ts
+++ b/vue3/src/composables/useModelEditorFunctions.ts
@@ -1,5 +1,5 @@
 import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
-import {onBeforeMount, ref} from "vue";
+import {onBeforeMount, onMounted, ref, watch} from "vue";
 import {EditorSupportedModels, GenericModel, getGenericModelFromString} from "@/types/Models";
 import {useI18n} from "vue-i18n";
 import {ResponseError} from "@/openapi";
@@ -15,8 +15,16 @@ export function useModelEditorFunctions<T>(modelName: EditorSupportedModels, emi
     const editingObj = ref({} as T)
     const modelClass = ref({} as GenericModel)
 
+    const editingObjChanged = ref(false)
+
     const {t} = useI18n()
 
+    watch(() => editingObj.value, (newValue, oldValue) => {
+        if (Object.keys(oldValue).length > 0) {
+            editingObjChanged.value = true
+        }
+    }, {deep: true})
+
     /**
      * before mounting the component UI set the model class based on the given model name
      */
@@ -24,6 +32,26 @@ export function useModelEditorFunctions<T>(modelName: EditorSupportedModels, emi
         modelClass.value = getGenericModelFromString(modelName, t)
     })
 
+    onMounted(() => {
+        setupPageLeaveWarning()
+    })
+
+    /**
+     * add event listener to page unload event (also triggered by router) to prevent accidentally closing with unsaved changes
+     */
+    function setupPageLeaveWarning() {
+        window.onbeforeunload = (event) => {
+            if (editingObjChanged.value) {
+                event.returnValue = "this_string_cant_be_empty_because_of_firefox"
+                return "this_string_cant_be_empty_because_of_firefox"
+            }
+        }
+    }
+
+    /**
+     * apply the defaults to the item given in the itemsDefaults value of the setupState function
+     * @param itemDefaults
+     */
     function applyItemDefaults(itemDefaults: T) {
         if (Object.keys(itemDefaults).length > 0) {
             Object.keys(itemDefaults).forEach(k => {
@@ -156,6 +184,7 @@ export function useModelEditorFunctions<T>(modelName: EditorSupportedModels, emi
                 console.error(err)
                 useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
             }).finally(() => {
+                editingObjChanged.value = false
                 loading.value = false
             })
         } else {
@@ -168,6 +197,7 @@ export function useModelEditorFunctions<T>(modelName: EditorSupportedModels, emi
                 console.error(err)
                 useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
             }).finally(() => {
+                editingObjChanged.value = false
                 loading.value = false
             })
         }
@@ -177,13 +207,18 @@ export function useModelEditorFunctions<T>(modelName: EditorSupportedModels, emi
      * deletes the editing object from the database
      */
     function deleteObject() {
+        loading.value = true
+
         modelClass.value.destroy(editingObj.value.id).then((r: any) => {
             emit('delete', editingObj.value)
             editingObj.value = {} as T
         }).catch((err: any) => {
             useMessageStore().addError(ErrorMessageType.DELETE_ERROR, err)
+        }).finally(() => {
+            editingObjChanged.value = false
+            loading.value = false
         })
     }
 
-    return {setupState, saveObject, deleteObject, isUpdate, editingObjName, applyItemDefaults, loading, editingObj, modelClass}
+    return {setupState, saveObject, deleteObject, isUpdate, editingObjName, applyItemDefaults, loading, editingObj, editingObjChanged, modelClass}
 }
\ No newline at end of file
diff --git a/vue3/src/locales/ar.json b/vue3/src/locales/ar.json
index 145c42522..7dbcf3f6b 100644
--- a/vue3/src/locales/ar.json
+++ b/vue3/src/locales/ar.json
@@ -44,6 +44,7 @@
   "Color": "",
   "Coming_Soon": "",
   "Completed": "",
+  "Confirm": "",
   "Continue": "",
   "ConversionsHelp": "",
   "CookLog": "",
@@ -352,6 +353,7 @@
   "View_Recipes": "",
   "Waiting": "",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "",
   "Warning_Delete_Supermarket_Category": "",
   "Website": "",
diff --git a/vue3/src/locales/bg.json b/vue3/src/locales/bg.json
index 713de7860..c75a12935 100644
--- a/vue3/src/locales/bg.json
+++ b/vue3/src/locales/bg.json
@@ -44,6 +44,7 @@
   "Color": "Цвят",
   "Coming_Soon": "Очаквайте скоро",
   "Completed": "Завършено",
+  "Confirm": "",
   "Continue": "",
   "ConversionsHelp": "",
   "CookLog": "",
@@ -343,6 +344,7 @@
   "View_Recipes": "Вижте рецепти",
   "Waiting": "Очакване",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "Внимание",
   "Warning_Delete_Supermarket_Category": "Изтриването на категория супермаркет ще изтрие и всички връзки с храни. Сигурен ли си?",
   "Website": "уебсайт",
diff --git a/vue3/src/locales/ca.json b/vue3/src/locales/ca.json
index f8eca6e8e..b85d0c58e 100644
--- a/vue3/src/locales/ca.json
+++ b/vue3/src/locales/ca.json
@@ -56,6 +56,7 @@
   "Coming_Soon": "",
   "Comments_setting": "",
   "Completed": "",
+  "Confirm": "",
   "Continue": "",
   "Conversion": "",
   "ConversionsHelp": "",
@@ -448,6 +449,7 @@
   "View_Recipes": "Mostreu les receptes",
   "Waiting": "",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "",
   "Warning_Delete_Supermarket_Category": "",
   "Website": "",
diff --git a/vue3/src/locales/cs.json b/vue3/src/locales/cs.json
index 4dab752a8..ea7d84088 100644
--- a/vue3/src/locales/cs.json
+++ b/vue3/src/locales/cs.json
@@ -56,6 +56,7 @@
   "Coming_Soon": "Již brzy",
   "Comments_setting": "Zobrazit komentáře",
   "Completed": "Dokončeno",
+  "Confirm": "",
   "Continue": "",
   "Conversion": "Převod",
   "ConversionsHelp": "",
@@ -441,6 +442,7 @@
   "View_Recipes": "Zobrazit recepty",
   "Waiting": "Čekající",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "Varování",
   "Warning_Delete_Supermarket_Category": "Vymazáním kategorie obchodu dojde k odstranění všech vazeb na potraviny. Jste si jistí?",
   "Website": "Web",
diff --git a/vue3/src/locales/da.json b/vue3/src/locales/da.json
index 97544ea8e..ae2e810f8 100644
--- a/vue3/src/locales/da.json
+++ b/vue3/src/locales/da.json
@@ -55,6 +55,7 @@
   "Coming_Soon": "Kommer snart",
   "Comments_setting": "Vis kommentarer",
   "Completed": "Afsluttet",
+  "Confirm": "",
   "Continue": "",
   "Conversion": "Konversion",
   "ConversionsHelp": "",
@@ -419,6 +420,7 @@
   "View_Recipes": "Vis opskrifter",
   "Waiting": "Vente",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "Advarsel",
   "Warning_Delete_Supermarket_Category": "At slette en supermarkedskategori vil også slette alle relationer til mad. Er du sikker?",
   "Website": "Hjemmeside",
diff --git a/vue3/src/locales/de.json b/vue3/src/locales/de.json
index 6a7e16b8a..13977867b 100644
--- a/vue3/src/locales/de.json
+++ b/vue3/src/locales/de.json
@@ -57,6 +57,7 @@
   "Coming_Soon": "Bald verfügbar",
   "Comments_setting": "Kommentare anzeigen",
   "Completed": "Fertig",
+  "Confirm": "Bestätigen",
   "Continue": "Weiter",
   "Conversion": "Umrechnung",
   "ConversionsHelp": "Mit Umrechnungen kann die Menge einens Lebensmittels in verschiedenen Einheiten ausgerechnet werden. Aktuell wird dies nur zur berechnung von Eigenschaften verwendet, später jedoch sollen auch andere Funktionen von Tandoor davon profitieren.",
@@ -451,6 +452,7 @@
   "View_Recipes": "Rezepte Ansehen",
   "Waiting": "Wartezeit",
   "WaitingTime": "Wartezeit",
+  "WarnPageLeave": "Deine Änderungen wurden noch nicht gespeichert und gehen verloren. Seite wirklich verlassen?",
   "Warning": "Warnung",
   "Warning_Delete_Supermarket_Category": "Die Löschung einer Supermarktkategorie werden auch alle Beziehungen zu Lebensmitteln gelöscht. Bist du dir sicher?",
   "Website": "Webseite",
diff --git a/vue3/src/locales/el.json b/vue3/src/locales/el.json
index 911841fb8..2e8c15d5c 100644
--- a/vue3/src/locales/el.json
+++ b/vue3/src/locales/el.json
@@ -54,6 +54,7 @@
   "Coming_Soon": "Σύντομα διαθέσιμο",
   "Comments_setting": "Εμφάνιση σχολίων",
   "Completed": "Ολοκληρωμένο",
+  "Confirm": "",
   "Continue": "",
   "Conversion": "Μετατροπή",
   "ConversionsHelp": "",
@@ -408,6 +409,7 @@
   "View_Recipes": "Προβολή συνταγών",
   "Waiting": "Αναμονή",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "Προειδοποίηση",
   "Warning_Delete_Supermarket_Category": "Η διαγραφή μιας κατηγορίας supermarket θα διαγράψει και όλες τις σχέσεις της με φαγητά. Είστε σίγουροι;",
   "Website": "Ιστοσελίδα",
diff --git a/vue3/src/locales/en.json b/vue3/src/locales/en.json
index aa38f460b..c29b519bd 100644
--- a/vue3/src/locales/en.json
+++ b/vue3/src/locales/en.json
@@ -56,6 +56,7 @@
   "Coming_Soon": "Coming-Soon",
   "Comments_setting": "Show Comments",
   "Completed": "Completed",
+  "Confirm": "Confirm",
   "Continue": "Continue",
   "Conversion": "Conversion",
   "ConversionsHelp": "With conversions you can calculate the amount of a food in different units. Currently this is only used for property calculation, later it might also be used in other parts of tandoor. ",
@@ -450,6 +451,7 @@
   "View_Recipes": "View Recipes",
   "Waiting": "Waiting",
   "WaitingTime": "Waiting Time",
+  "WarnPageLeave": "There are unsaved changes that will get lost. Leave page anyway?",
   "Warning": "Warning",
   "Warning_Delete_Supermarket_Category": "Deleting a supermarket category will also delete all relations to foods. Are you sure?",
   "Website": "Website",
diff --git a/vue3/src/locales/es.json b/vue3/src/locales/es.json
index dc23e5fba..2112c0307 100644
--- a/vue3/src/locales/es.json
+++ b/vue3/src/locales/es.json
@@ -56,6 +56,7 @@
   "Coming_Soon": "Próximamente",
   "Comments_setting": "Mostrar Comentarios",
   "Completed": "Completado",
+  "Confirm": "",
   "Continue": "",
   "Conversion": "Conversión",
   "ConversionsHelp": "",
@@ -447,6 +448,7 @@
   "View_Recipes": "Mostrar recetas",
   "Waiting": "esperando",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "Advertencia",
   "Warning_Delete_Supermarket_Category": "Borrar una categoría de supermercado borrará también todas las relaciones con alimentos. ¿Está seguro?",
   "Website": "Sitio Web",
diff --git a/vue3/src/locales/fi.json b/vue3/src/locales/fi.json
index adbd98424..415347206 100644
--- a/vue3/src/locales/fi.json
+++ b/vue3/src/locales/fi.json
@@ -30,6 +30,7 @@
   "Close": "Sulje",
   "Color": "Väri",
   "Coming_Soon": "Tulossa pian",
+  "Confirm": "",
   "Continue": "",
   "ConversionsHelp": "",
   "CookLog": "",
@@ -263,6 +264,7 @@
   "View_Recipes": "Näytä Reseptit",
   "Waiting": "Odottaa",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Wednesday": "",
   "Week": "Viikko",
   "Week_Numbers": "Viikkonumerot",
diff --git a/vue3/src/locales/fr.json b/vue3/src/locales/fr.json
index 1433c6362..9649a34f5 100644
--- a/vue3/src/locales/fr.json
+++ b/vue3/src/locales/fr.json
@@ -55,6 +55,7 @@
   "Coming_Soon": "Bientôt disponible",
   "Comments_setting": "Montrer les commentaires",
   "Completed": "Achevé",
+  "Confirm": "",
   "Continue": "",
   "Conversion": "Conversion",
   "ConversionsHelp": "",
@@ -447,6 +448,7 @@
   "View_Recipes": "Voir les recettes",
   "Waiting": "Attente",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "Avertissement",
   "Warning_Delete_Supermarket_Category": "Supprimer une catégorie de supermarché supprimera également toutes les relations avec les aliments. Êtes-vous sûr ?",
   "Website": "Site",
diff --git a/vue3/src/locales/he.json b/vue3/src/locales/he.json
index 152e5f821..6e4e1a1de 100644
--- a/vue3/src/locales/he.json
+++ b/vue3/src/locales/he.json
@@ -56,6 +56,7 @@
   "Coming_Soon": "בקרוב",
   "Comments_setting": "הצג תגובות",
   "Completed": "הושלם",
+  "Confirm": "",
   "Continue": "",
   "Conversion": "עברית",
   "ConversionsHelp": "",
@@ -449,6 +450,7 @@
   "View_Recipes": "הצג מתכונים",
   "Waiting": "המתנה",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "אזהרה",
   "Warning_Delete_Supermarket_Category": "מחיקת קטגורית סופרמרקט תמחוק גם את המאכלים הקשורים. האם אתה בטוח ?",
   "Website": "אתר",
diff --git a/vue3/src/locales/hu.json b/vue3/src/locales/hu.json
index c166d76f3..a11b2be8b 100644
--- a/vue3/src/locales/hu.json
+++ b/vue3/src/locales/hu.json
@@ -55,6 +55,7 @@
   "Coming_Soon": "Hamarosan",
   "Comments_setting": "Hozzászólások megjelenítése",
   "Completed": "Kész",
+  "Confirm": "",
   "Continue": "",
   "Conversion": "Konverzió",
   "ConversionsHelp": "",
@@ -410,6 +411,7 @@
   "View_Recipes": "Receptek megjelenítése",
   "Waiting": "Várakozás",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "Figyelmeztetés",
   "Warning_Delete_Supermarket_Category": "Egy szupermarket-kategória törlése az alapanyagokkal való összes kapcsolatot is törli. Biztos vagy benne?",
   "Website": "Weboldal",
diff --git a/vue3/src/locales/hy.json b/vue3/src/locales/hy.json
index 7a7962ecf..9d40d58ad 100644
--- a/vue3/src/locales/hy.json
+++ b/vue3/src/locales/hy.json
@@ -22,6 +22,7 @@
   "Categories": "",
   "Category": "",
   "Close": "",
+  "Confirm": "",
   "Continue": "",
   "ConversionsHelp": "",
   "CookLog": "",
@@ -193,6 +194,7 @@
   "View_Recipes": "Դիտել բաղադրատոմսերը",
   "Waiting": "",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Wednesday": "",
   "WorkingTime": "",
   "YourSpaces": "",
diff --git a/vue3/src/locales/id.json b/vue3/src/locales/id.json
index 5c4eeb17d..5ef595419 100644
--- a/vue3/src/locales/id.json
+++ b/vue3/src/locales/id.json
@@ -48,6 +48,7 @@
   "Coming_Soon": "",
   "Comments_setting": "",
   "Completed": "",
+  "Confirm": "",
   "Continue": "",
   "ConversionsHelp": "",
   "CookLog": "",
@@ -377,6 +378,7 @@
   "View_Recipes": "Lihat Resep",
   "Waiting": "Menunggu",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "",
   "Warning_Delete_Supermarket_Category": "",
   "Website": "",
diff --git a/vue3/src/locales/is.json b/vue3/src/locales/is.json
index 60af4db4e..46b8342e5 100644
--- a/vue3/src/locales/is.json
+++ b/vue3/src/locales/is.json
@@ -56,6 +56,7 @@
   "Coming_Soon": "",
   "Comments_setting": "",
   "Completed": "",
+  "Confirm": "",
   "Continue": "",
   "Conversion": "",
   "ConversionsHelp": "",
@@ -447,6 +448,7 @@
   "View_Recipes": "",
   "Waiting": "",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "",
   "Warning_Delete_Supermarket_Category": "",
   "Website": "",
diff --git a/vue3/src/locales/it.json b/vue3/src/locales/it.json
index 22adfc290..8b4184829 100644
--- a/vue3/src/locales/it.json
+++ b/vue3/src/locales/it.json
@@ -52,6 +52,7 @@
   "Coming_Soon": "In-Arrivo",
   "Comments_setting": "Mostra commenti",
   "Completed": "Completato",
+  "Confirm": "",
   "Continue": "",
   "ConversionsHelp": "",
   "CookLog": "",
@@ -392,6 +393,7 @@
   "View_Recipes": "Mostra ricette",
   "Waiting": "Attesa",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "Attenzione",
   "Warning_Delete_Supermarket_Category": "L'eliminazione di una categoria di supermercato comporta anche l'eliminazione di tutte le relazioni con gli alimenti. Sei sicuro?",
   "Website": "Sito web",
diff --git a/vue3/src/locales/lt.json b/vue3/src/locales/lt.json
index 29c4997ef..782ffc515 100644
--- a/vue3/src/locales/lt.json
+++ b/vue3/src/locales/lt.json
@@ -55,6 +55,7 @@
   "Coming_Soon": "",
   "Comments_setting": "",
   "Completed": "",
+  "Confirm": "",
   "Continue": "",
   "Conversion": "",
   "ConversionsHelp": "",
@@ -417,6 +418,7 @@
   "View_Recipes": "Žiūrėti receptus",
   "Waiting": "",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "",
   "Warning_Delete_Supermarket_Category": "",
   "Website": "",
diff --git a/vue3/src/locales/nb_NO.json b/vue3/src/locales/nb_NO.json
index e9eb6376e..6d0b0534a 100644
--- a/vue3/src/locales/nb_NO.json
+++ b/vue3/src/locales/nb_NO.json
@@ -53,6 +53,7 @@
   "Coming_Soon": "Kommer snart",
   "Comments_setting": "",
   "Completed": "Fullført",
+  "Confirm": "",
   "Continue": "",
   "Conversion": "Omregn enhet",
   "ConversionsHelp": "",
@@ -406,6 +407,7 @@
   "View_Recipes": "Vis oppskrifter",
   "Waiting": "Venter",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "Advarsel",
   "Warning_Delete_Supermarket_Category": "",
   "Website": "Nettside",
diff --git a/vue3/src/locales/nl.json b/vue3/src/locales/nl.json
index 1ce15ec88..c824c6a82 100644
--- a/vue3/src/locales/nl.json
+++ b/vue3/src/locales/nl.json
@@ -56,6 +56,7 @@
   "Coming_Soon": "Binnenkort beschikbaar",
   "Comments_setting": "Commentaar weergeven",
   "Completed": "Voltooid",
+  "Confirm": "",
   "Continue": "",
   "Conversion": "Omrekening",
   "ConversionsHelp": "",
@@ -410,6 +411,7 @@
   "View_Recipes": "Bekijk Recepten",
   "Waiting": "Wachten",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "Waarschuwing",
   "Warning_Delete_Supermarket_Category": "Een supermarktcategorie verwijderen verwijdert ook alle relaties naar ingrediënten. Weet je het zeker?",
   "Website": "Website",
diff --git a/vue3/src/locales/pl.json b/vue3/src/locales/pl.json
index 313b84361..a3e576bee 100644
--- a/vue3/src/locales/pl.json
+++ b/vue3/src/locales/pl.json
@@ -57,6 +57,7 @@
   "Coming_Soon": "Dostępne wkrótce",
   "Comments_setting": "Pokaż komentarze",
   "Completed": "Zakończone",
+  "Confirm": "",
   "Continue": "",
   "Conversion": "Konwersja",
   "ConversionsHelp": "",
@@ -450,6 +451,7 @@
   "View_Recipes": "Przeglądaj przepisy",
   "Waiting": "Oczekiwanie",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "Ostrzeżenie",
   "Warning_Delete_Supermarket_Category": "Usunięcie kategorii supermarketu spowoduje również usunięcie wszystkich relacji z żywnością. Jesteś pewny?",
   "Website": "Strona internetowa",
diff --git a/vue3/src/locales/pt.json b/vue3/src/locales/pt.json
index 786262bb2..b162c73f7 100644
--- a/vue3/src/locales/pt.json
+++ b/vue3/src/locales/pt.json
@@ -43,6 +43,7 @@
   "Color": "Cor",
   "Coming_Soon": "",
   "Completed": "Completo",
+  "Confirm": "",
   "Continue": "",
   "ConversionsHelp": "",
   "CookLog": "",
@@ -339,6 +340,7 @@
   "View_Recipes": "Ver Receitas",
   "Waiting": "Em espera",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "Aviso",
   "Wednesday": "",
   "Week": "Semana",
diff --git a/vue3/src/locales/pt_BR.json b/vue3/src/locales/pt_BR.json
index 8b45a9071..7b8583d9f 100644
--- a/vue3/src/locales/pt_BR.json
+++ b/vue3/src/locales/pt_BR.json
@@ -55,6 +55,7 @@
   "Coming_Soon": "Em breve",
   "Comments_setting": "Mostrar Comentários",
   "Completed": "Finalizado",
+  "Confirm": "",
   "Continue": "",
   "Conversion": "Conversão",
   "ConversionsHelp": "",
@@ -426,6 +427,7 @@
   "View_Recipes": "Ver Receitas",
   "Waiting": "Espera",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "Alerta",
   "Website": "Website",
   "Wednesday": "",
diff --git a/vue3/src/locales/ro.json b/vue3/src/locales/ro.json
index e65fd5661..3fb23c642 100644
--- a/vue3/src/locales/ro.json
+++ b/vue3/src/locales/ro.json
@@ -53,6 +53,7 @@
   "Coming_Soon": "În curând",
   "Comments_setting": "Afișează comentarii",
   "Completed": "Completat",
+  "Confirm": "",
   "Continue": "",
   "ConversionsHelp": "",
   "CookLog": "",
@@ -396,6 +397,7 @@
   "View_Recipes": "Vizionare rețete",
   "Waiting": "Așteptare",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "Atenționare",
   "Warning_Delete_Supermarket_Category": "Ștergerea unei categorii de supermarketuri va șterge, de asemenea, toate relațiile cu alimentele. Sunteți sigur?",
   "Website": "Site web",
diff --git a/vue3/src/locales/ru.json b/vue3/src/locales/ru.json
index 7142cb505..2729ea840 100644
--- a/vue3/src/locales/ru.json
+++ b/vue3/src/locales/ru.json
@@ -38,6 +38,7 @@
   "Color": "Цвет",
   "Coming_Soon": "Скоро",
   "Completed": "Завершено",
+  "Confirm": "",
   "Continue": "",
   "ConversionsHelp": "",
   "CookLog": "",
@@ -314,6 +315,7 @@
   "View_Recipes": "Просмотр рецепта",
   "Waiting": "Ожидание",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "Предупреждение",
   "Warning_Delete_Supermarket_Category": "Удаление категории супермаркета также приведет к удалению всех связей с продуктами. Вы уверены?",
   "Wednesday": "",
diff --git a/vue3/src/locales/sl.json b/vue3/src/locales/sl.json
index bef252de9..869bc4afd 100644
--- a/vue3/src/locales/sl.json
+++ b/vue3/src/locales/sl.json
@@ -39,6 +39,7 @@
   "Color": "Barva",
   "Coming_Soon": "Kmalu",
   "Completed": "Končano",
+  "Confirm": "",
   "Continue": "",
   "ConversionsHelp": "",
   "CookLog": "",
@@ -309,6 +310,7 @@
   "View_Recipes": "Preglej recepte",
   "Waiting": "Čakanje",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "Opozorilo",
   "Wednesday": "",
   "Week": "Teden",
diff --git a/vue3/src/locales/sv.json b/vue3/src/locales/sv.json
index 1e1605413..42a2a7b88 100644
--- a/vue3/src/locales/sv.json
+++ b/vue3/src/locales/sv.json
@@ -57,6 +57,7 @@
   "Coming_Soon": "Kommer snart",
   "Comments_setting": "Visa Kommentarer",
   "Completed": "Avslutad",
+  "Confirm": "",
   "Continue": "",
   "Conversion": "Omvandling",
   "ConversionsHelp": "",
@@ -450,6 +451,7 @@
   "View_Recipes": "Visa recept",
   "Waiting": "Väntan",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "Varning",
   "Warning_Delete_Supermarket_Category": "Om du tar bort en mataffärskategori raderas också alla relationer till livsmedel. Är du säker?",
   "Website": "Hemsida",
diff --git a/vue3/src/locales/tr.json b/vue3/src/locales/tr.json
index 343822ff0..6f4017e9a 100644
--- a/vue3/src/locales/tr.json
+++ b/vue3/src/locales/tr.json
@@ -56,6 +56,7 @@
   "Coming_Soon": "Yakında Gelecek",
   "Comments_setting": "Yorumları Göster",
   "Completed": "Tamamlandı",
+  "Confirm": "",
   "Continue": "",
   "Conversion": "Dönüşüm",
   "ConversionsHelp": "",
@@ -449,6 +450,7 @@
   "View_Recipes": "Tarifleri Görüntüle",
   "Waiting": "Bekleniyor",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "Uyarı",
   "Warning_Delete_Supermarket_Category": "Bir market kategorisinin silinmesi, gıdalarla olan tüm ilişkileri de silecektir. Emin misiniz?",
   "Website": "Website",
diff --git a/vue3/src/locales/uk.json b/vue3/src/locales/uk.json
index 4dd71241f..a086e58ad 100644
--- a/vue3/src/locales/uk.json
+++ b/vue3/src/locales/uk.json
@@ -47,6 +47,7 @@
   "Color": "Колір",
   "Coming_Soon": "",
   "Completed": "Виконано",
+  "Confirm": "",
   "Continue": "",
   "ConversionsHelp": "",
   "CookLog": "",
@@ -361,6 +362,7 @@
   "View_Recipes": "Подивитися Рецепт",
   "Waiting": "Очікування",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "Увага",
   "Warning_Delete_Supermarket_Category": "",
   "Website": "",
diff --git a/vue3/src/locales/zh_Hans.json b/vue3/src/locales/zh_Hans.json
index 37a30b404..abb4b8507 100644
--- a/vue3/src/locales/zh_Hans.json
+++ b/vue3/src/locales/zh_Hans.json
@@ -55,6 +55,7 @@
   "Coming_Soon": "即将到来",
   "Comments_setting": "显示评论",
   "Completed": "完成",
+  "Confirm": "",
   "Continue": "",
   "Conversion": "转换",
   "ConversionsHelp": "",
@@ -440,6 +441,7 @@
   "View_Recipes": "查看食谱",
   "Waiting": "等待",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Warning": "警告",
   "Warning_Delete_Supermarket_Category": "删除超市类别也会删除与食品的所有关系。 你确定吗？",
   "Website": "网站",
diff --git a/vue3/src/locales/zh_Hant.json b/vue3/src/locales/zh_Hant.json
index 580ae5c50..3638a965e 100644
--- a/vue3/src/locales/zh_Hant.json
+++ b/vue3/src/locales/zh_Hant.json
@@ -19,6 +19,7 @@
   "Categories": "",
   "Category": "",
   "Close": "",
+  "Confirm": "",
   "Continue": "",
   "ConversionsHelp": "",
   "CookLog": "",
@@ -162,6 +163,7 @@
   "View_Recipes": "",
   "Waiting": "",
   "WaitingTime": "",
+  "WarnPageLeave": "",
   "Wednesday": "",
   "WorkingTime": "",
   "YourSpaces": "",
diff --git a/vue3/src/pages/ModelEditPage.vue b/vue3/src/pages/ModelEditPage.vue
index 05cad2f32..0cf2e1a48 100644
--- a/vue3/src/pages/ModelEditPage.vue
+++ b/vue3/src/pages/ModelEditPage.vue
@@ -21,7 +21,7 @@
 
 import {useRouter} from "vue-router";
 import {EditorSupportedModels, getGenericModelFromString} from "@/types/Models";
-import {defineAsyncComponent, PropType, shallowRef} from "vue";
+import {defineAsyncComponent, onMounted, PropType, shallowRef} from "vue";
 import {useI18n} from "vue-i18n";
 
 const {t} = useI18n()