updated model editors to composable and base template

vue3/src/components/model_editors/PropertyEditor.vue

@@ -1,10 +1,13 @@
 <template>
-    <v-card>
-        <v-card-title>
-            {{ $t(OBJ_LOCALIZATION_KEY) }}
-            <v-btn class="float-right" icon="$close" variant="plain" @click="emit('close')" v-if="dialog"></v-btn>
-        </v-card-title>
-
+    <model-editor-base
+        :loading="loading"
+        :dialog="dialog"
+        @save="saveObject"
+        @delete="deleteObject"
+        @close="emit('close')"
+        :is-update="isUpdate()"
+        :model-name="$t(modelClass.model.localizationKey)"
+        :object-name="editingObjName()">
         <v-card-text>
             <v-form>
                 <v-number-input :step="10" v-model="editingObj.propertyAmount" control-variant="stacked">
@@ -15,116 +18,38 @@
                 <model-select :label="$t('Property')" v-model="editingObj.propertyType" model="PropertyType"></model-select>
             </v-form>
         </v-card-text>
-        <v-card-actions>
-            <v-btn color="delete" prepend-icon="$delete" v-if="isUpdate">{{ $t('Delete') }}
-                <delete-confirm-dialog :object-name="objectName" @delete="deleteObject"></delete-confirm-dialog>
-            </v-btn>
-            <v-btn color="save" prepend-icon="$save" @click="saveObject">{{ isUpdate ? $t('Save') : $t('Create') }}</v-btn>
-        </v-card-actions>
-    </v-card>
+    </model-editor-base>
+
 </template>
 
 <script setup lang="ts">
 
-import {computed, onMounted, ref} from "vue";
-import {ApiApi, Property} from "@/openapi";
-import DeleteConfirmDialog from "@/components/dialogs/DeleteConfirmDialog.vue";
-import {useI18n} from "vue-i18n";
-import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
+import {onMounted, PropType} from "vue";
+import {Property} from "@/openapi";
+
 import ModelSelect from "@/components/inputs/ModelSelect.vue";
 import {VNumberInput} from 'vuetify/labs/VNumberInput' //TODO remove once component is out of labs
 
-const {t} = useI18n()
+import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
+import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
 
-const emit = defineEmits(['create', 'save', 'delete', 'close'])
 
 const props = defineProps({
-    item: {type: {} as Property, required: false},
-    itemId: {type: String, required: false},
+    item: {type: {} as PropType<Property>, required: false, default: null},
+    itemId: {type: Number, required: false, default: undefined},
     dialog: {type: Boolean, default: false}
 })
 
-const OBJ_LOCALIZATION_KEY = 'Food'
-const editingObj = ref({} as Property)
-const loading = ref(false)
+const emit = defineEmits(['create', 'save', 'delete', 'close'])
+const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<Property>('Property', emit)
 
-// object specific data (for selects/display)
-
-/**
- * checks if given object has ID property to determine if it needs to be updated or created
- */
-const isUpdate = computed(() => {
-    return Object.keys(editingObj.value).length > 0
-})
-
-/**
- * display name for object in headers/delete dialog/...
- */
-const objectName = computed(() => {
-    return isUpdate ? `${t(OBJ_LOCALIZATION_KEY)} ${editingObj.value.token}` : `${t(OBJ_LOCALIZATION_KEY)} (${t('New')})`
-})
 
 onMounted(() => {
-    if (props.item != null) {
-        editingObj.value = props.item
-    } else if (props.itemId != null) {
-        const api = new ApiApi()
-        api.apiPropertyRetrieve({id: props.itemId}).then(r => {
-            editingObj.value = r
-        }).catch(err => {
-            useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
-        })
-    } else {
-        // functions to populate defaults for new item
-
+    if (!setupState(props.item, props.itemId)) {
+        // functions to populate defaults
     }
 })
 
-/**
- * saves the edited object in the database
- */
-async function saveObject() {
-    let api = new ApiApi()
-    if (isUpdate.value) {
-        api.apiPropertyUpdate({id: editingObj.value.id, property: 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.apiPropertyCreate({property: editingObj.value}).then(r => {
-            editingObj.value = r
-            emit('create', r)
-            useMessageStore().addPreparedMessage(PreparedMessage.CREATE_SUCCESS)
-        }).catch(err => {
-            useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
-        })
-    }
-}
-
-/**
- * deletes the editing object from the database
- */
-async function deleteObject() {
-    if (editingObj.value.id !== undefined) {
-        let api = new ApiApi()
-        api.apiPropertyDestroy({id: editingObj.value.id}).then(r => {
-            editingObj.value = {} as Property
-            emit('delete', editingObj.value)
-        }).catch(err => {
-            useMessageStore().addError(ErrorMessageType.DELETE_ERROR, err)
-        })
-    } else {
-        editingObj.value = {} as Property
-        emit('delete', editingObj.value)
-    }
-}
-
-// ------------------------------------------------------
-// object specific functions
-// ------------------------------------------------------
 
 </script>