warn before leaving model edit page

TandoorRecipes · Jan 1, 2025 · 8159838 · 8159838
1 parent 60f2494
commit 8159838
Show file tree

Hide file tree

Showing 52 changed files with 177 additions and 30 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,27 +1,49 @@
 <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>
             <v-btn color="save" prepend-icon="$create" @click="emit('save')" v-if="!isUpdate && !modelClass.model.disableCreate" :disabled="loading">{{ $t('Create') }}</v-btn>
             <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">
 
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)