mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-01 12:18:45 -05:00
improved model dialog los changes warning
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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)
|
||||
|
||||
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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)
|
||||
|
||||
|
||||
|
||||
@@ -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)
|
||||
|
||||
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user