warn before leaving model edit page

2026-01-03 05:11:31 -05:00 · 2025-01-01 10:07:27 +01:00
parent 60f2494eae
commit 8159838fc3
52 changed files with 177 additions and 30 deletions
--- 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(() => {
--- 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)

--- 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)
--- 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[])
--- 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)

--- 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')
--- 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)
--- 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>
--- 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(() => {
--- 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)

--- 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")
--- 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)

--- 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)

--- 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")
--- 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(() => {
--- 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)

--- 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)

--- 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[])