made food editor generic as well

vue3/src/apps/tandoor/Tandoor.vue

@@ -4,12 +4,9 @@
             <router-link :to="{ name: 'view_home', params: {} }">
                 <v-img src="../../assets/brand_logo.svg" width="140px" class="ms-2"></v-img>
             </router-link>
-            <router-link :to="{name: 'view_shopping',  params: {}}"></router-link>
-            <router-link :to="{name: 'view_mealplan',  params: {}}"></router-link>
             <v-spacer></v-spacer>
             <global-search-dialog></global-search-dialog>
 
-
             <v-avatar color="cyan" class="me-2">V
                 <v-menu activator="parent">
 

vue3/src/components/model_editors/FoodEditor.vue

@@ -1,9 +1,14 @@
 <template>
-    <v-card :loading="loading">
+    <model-editor-base
-        <v-card-title>
+        :loading="loading"
-            {{ $t(OBJ_LOCALIZATION_KEY) }} <span class="text-disabled">{{ editingObj.name }}</span>
+        :dialog="dialog"
-            <v-btn class="float-right" icon="$close" variant="plain" @click="emit('close')" v-if="dialog"></v-btn>
+        @save="saveObject(); saveObjectConversions()"
-        </v-card-title>
+        @delete="deleteObject"
+        @close="emit('close')"
+        :is-update="isUpdate()"
+        :model-name="$t(modelClass.model.localizationKey)"
+        :object-name="editingObjName()">
+
         <v-tabs v-model="tab" :disabled="loading">
             <v-tab value="food">{{ $t('Food') }}</v-tab>
             <v-tab value="properties">{{ $t('Properties') }}</v-tab>
@@ -11,6 +16,7 @@
             <v-tab value="misc">{{ $t('Miscellaneous') }}</v-tab>
         </v-tabs>
 
+
         <v-card-text>
             <v-tabs-window v-model="tab">
                 <v-tabs-window-item value="food">
@@ -25,7 +31,7 @@
 
                 <v-tabs-window-item value="properties">
                     <v-alert icon="$help">{{ $t('PropertiesFoodHelp') }}</v-alert>
-                    <v-form class="mt-5">
+                    <v-form :disabled="loading" class="mt-5">
                         <v-number-input :label="$t('Properties_Food_Amount')" v-model="editingObj.propertiesFoodAmount"></v-number-input>
                         <model-select :label="$t('Properties_Food_Unit')" v-model="editingObj.propertiesFoodUnit" model="Unit"></model-select>
 
@@ -74,7 +80,7 @@
 
                 <v-tabs-window-item value="conversions">
                     <v-alert icon="$help">{{ $t('ConversionsHelp') }}</v-alert>
-                    <v-form class="mt-5">
+                    <v-form :disabled="loading" class="mt-5">
 
                         <v-btn color="create" @click="unitConversions.push({food: editingObj} as UnitConversion)" prepend-icon="$create">{{ $t('Add') }}</v-btn>
 
@@ -117,7 +123,7 @@
                 </v-tabs-window-item>
 
                 <v-tabs-window-item value="misc">
-                    <v-form class="mt-5">
+                    <v-form :disabled="loading" class="mt-5">
                         <ModelSelect model="Recipe" v-model="editingObj.recipe" :label="$t('Recipe')"></ModelSelect>
                         <v-text-field :label="$t('Website')" v-model="editingObj.url"></v-text-field>
                         <v-checkbox :label="$t('OnHand')" :hint="$t('OnHand_help')" v-model="editingObj.foodOnhand" persistent-hint></v-checkbox>
@@ -128,8 +134,10 @@
                         <v-checkbox :label="$t('substitute_siblings')" :hint="$t('substitute_siblings_help')" v-model="editingObj.substituteSiblings" persistent-hint></v-checkbox>
                         <v-checkbox :label="$t('substitute_children')" :hint="$t('substitute_children_help')" v-model="editingObj.substituteChildren" persistent-hint></v-checkbox>
 
-                        <ModelSelect model="FoodInheritField" v-model="editingObj.inheritFields" :label="$t('InheritFields')" :hint="$t('InheritFields_help')" mode="tags"></ModelSelect>
+                        <ModelSelect model="FoodInheritField" v-model="editingObj.inheritFields" :label="$t('InheritFields')" :hint="$t('InheritFields_help')"
-                        <ModelSelect model="FoodInheritField" v-model="editingObj.childInheritFields" :label="$t('ChildInheritFields')" :hint="$t('ChildInheritFields_help')" mode="tags"></ModelSelect>
+                                     mode="tags"></ModelSelect>
+                        <ModelSelect model="FoodInheritField" v-model="editingObj.childInheritFields" :label="$t('ChildInheritFields')" :hint="$t('ChildInheritFields_help')"
+                                     mode="tags"></ModelSelect>
 
                         <!-- TODO re-add reset inheritance button/api call /function (previously annotated field on food -->
                         <v-text-field :label="$t('Open_Data_Slug')" :hint="$t('open_data_help_text')" persistent-hint v-model="editingObj.openDataSlug" disabled></v-text-field>
@@ -138,39 +146,34 @@
             </v-tabs-window>
 
         </v-card-text>
-        <v-card-actions class="float-right">
+
-            <v-btn color="delete" prepend-icon="$delete" v-if="isUpdate">{{ $t('Delete') }}
+
-                <delete-confirm-dialog :object-name="objectName" @delete="deleteObject"></delete-confirm-dialog>
+    </model-editor-base>
-            </v-btn>
+
-            <v-btn color="save" prepend-icon="$save" @click="saveObject">{{ isUpdate ? $t('Save') : $t('Create') }}</v-btn>
-        </v-card-actions>
-    </v-card>
 </template>
 
 <script setup lang="ts">
 
-import {computed, onMounted, Prop, ref, watch} from "vue";
+import {onMounted, PropType, ref, watch} from "vue";
 import {ApiApi, Food, Property, Unit, UnitConversion} from "@/openapi";
-import DeleteConfirmDialog from "@/components/dialogs/DeleteConfirmDialog.vue";
 import {useI18n} from "vue-i18n";
-import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
+import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
 import ModelSelect from "@/components/inputs/ModelSelect.vue";
 import {VNumberInput} from 'vuetify/labs/VNumberInput'
 import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
+import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
+import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
 
-const {t} = useI18n()
-
-const emit = defineEmits(['create', 'save', 'delete', 'close'])
 
 const props = defineProps({
-    item: {type: {} as Food, required: false},
+    item: {type: {} as PropType<Food>, required: false, default: null},
-    itemId: {type: String, required: false},
+    itemId: {type: Number, required: false, default: undefined},
     dialog: {type: Boolean, default: false}
 })
 
-const OBJ_LOCALIZATION_KEY = 'Food'
+const emit = defineEmits(['create', 'save', 'delete', 'close'])
-const editingObj = ref({} as Food)
+const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<Food>('Food', emit)
-const loading = ref(false)
+
 
 // object specific data (for selects/display)
 const tab = ref("food")
@@ -185,63 +188,21 @@ const stopConversionsWatcher = watch(tab, (value, oldValue, onCleanup) => {
     }
 })
 
-/**
- * checks if given object has ID property to determine if it needs to be updated or created
- */
-const isUpdate = computed(() => {
-    return editingObj.value.id !== undefined
-})
-
-/**
- * display name for object in headers/delete dialog/...
- */
-const objectName = computed(() => {
-    return isUpdate ? `${t(OBJ_LOCALIZATION_KEY)} ${editingObj.value.name}` : `${t(OBJ_LOCALIZATION_KEY)} (${t('New')})`
-})
 
 onMounted(() => {
-    if (props.item != null) {
+    if (!setupState(props.item, props.itemId)) {
-        editingObj.value = props.item
+        // functions to populate defaults
-    } else if (props.itemId != null) {
-        const api = new ApiApi()
-        loading.value = true
-        api.apiFoodRetrieve({id: props.itemId}).then(r => {
-            editingObj.value = r
-        }).catch(err => {
-            useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
-        }).finally(() => {
-            loading.value = false
-        })
-    } else {
-        // functions to populate defaults for new item
         editingObj.value.propertiesFoodAmount = 100
         editingObj.value.propertiesFoodUnit = {name: 'g'} as Unit // TODO properly fetch default unit
     }
 })
 
+
 /**
  * saves the edited object in the database
  */
-async function saveObject() {
+async function saveObjectConversions() {
-    let api = new ApiApi()
+    const api = new ApiApi()
-    if (isUpdate.value) {
-        api.apiFoodUpdate({id: editingObj.value.id, food: editingObj.value}).then(r => {
-            editingObj.value = r
-            emit('save', r)
-            useMessageStore().addPreparedMessage(PreparedMessage.UPDATE_SUCCESS)
-        }).catch(err => {
-            useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
-        })
-    } else {
-        api.apiFoodCreate({food: editingObj.value}).then(r => {
-            editingObj.value = r
-            emit('create', r)
-            useMessageStore().addPreparedMessage(PreparedMessage.CREATE_SUCCESS)
-        }).catch(err => {
-            useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
-        })
-    }
-
     unitConversions.value.forEach((uc) => {
         if (uc.id) {
             api.apiUnitConversionUpdate({id: uc.id, unitConversion: uc}).catch(err => {
@@ -255,19 +216,6 @@ async function saveObject() {
     })
 }
 
-/**
- * deletes the editing object from the database
- */
-async function deleteObject() {
-    let api = new ApiApi()
-    api.apiFoodDestroy({id: editingObj.value.id}).then(r => {
-        editingObj.value = {} as Food
-        emit('delete', editingObj.value)
-    }).catch(err => {
-        useMessageStore().addError(ErrorMessageType.DELETE_ERROR, err)
-    })
-}
-
 // ------------------------------------------------------
 // object specific functions
 // ------------------------------------------------------