updated model editors to composable and base template

vue3/src/composables/useModelEditorFunctions.ts

@@ -1,27 +1,94 @@
 import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
-import {computed, onBeforeMount, ref} from "vue";
-import {GenericModel} from "@/types/Models";
+import {onBeforeMount, PropType, ref} from "vue";
+import {GenericModel, getGenericModelFromString} from "@/types/Models";
+import {useI18n} from "vue-i18n";
 
 // TODO type emit parameter (https://mokkapps.de/vue-tips/emit-event-from-composable)
-// TODO alternatively there seems to be a getContext method to get the calling context
+// TODO alternatively there seems to be a getContext method to get the calling context (good practice?)
 
-export function useModelEditorFunctions<T>(emit: any) {
+export function useModelEditorFunctions<T>(modelName: string, emit: any) {
 
     const loading = ref(false)
     const editingObj = ref({} as T)
+    const modelClass = ref({} as GenericModel)
 
+    const {t} = useI18n()
+
+    /**
+     * before mounting the component UI set the model class based on the given model name
+     */
     onBeforeMount(() => {
-        console.log('COMPOSABLE OF TYPE ', typeof editingObj)
+        modelClass.value = getGenericModelFromString(modelName, t)
     })
 
+    /**
+     * if given an object or id, sets up the editingObj with that item or loads the data from the API using the ID
+     * if both item and itemId are undefined return false to indicate that no editingObj has been initialized
+     * @param item item object to set as editingObj
+     * @param itemId id of object to be retrieved and set as editingObj
+     */
+    function setupState(item: T | null, itemId: number | undefined) {
+        if (item === null && itemId === undefined) {
+            if (modelClass.value.model.disableCreate) {
+                throw Error('Trying to use a ModelEditor without an item and a model that does not allow object creation!')
+            }
+            return false
+        } else if (item !== null) {
+            editingObj.value = item
+        } else if (itemId !== undefined) {
+            loading.value = true
+            modelClass.value.retrieve(itemId).then((r: T) => {
+                editingObj.value = r
+            }).catch((err: any) => {
+                useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
+            }).finally(() => {
+                loading.value = false
+            })
+        }
+
+        return true
+    }
+
+    /**
+     * checks if the object has the ID property, if yes its an update if not its a new object
+     */
+    function isUpdate() {
+        return !!editingObj.value.id;
+    }
+
+    /**
+     * return the display name for the editingObj instance by concatenating the attributes
+     * given in the model type together
+     */
+    function editingObjName(): string {
+        if (!isUpdate()) {
+            return t('New') + ' - ' + t(modelClass.value.model.localizationKey)
+        }
+
+        let name = ''
+        if (editingObj.value.id) {
+            modelClass.value.model.toStringKeys.forEach(key => {
+                name += ' ' + editingObj.value[key]
+            })
+        }
+
+        if (name == '') {
+            console.warn('No string keys given model type ', modelName)
+            return t(modelClass.value.model.localizationKey)
+        }
+
+        return name
+    }
+
     /**
      * saves the edited object in the database
      */
-    function saveObject(modelClass: GenericModel, obj: any) {
+    function saveObject() {
         loading.value = true
-        if (obj.id) {
-            modelClass.update(obj.id, obj).then((r: any) => {
+        if (isUpdate()) {
+            modelClass.value.update(editingObj.value.id, editingObj.value).then((r: T) => {
                 emit('save', r)
+                editingObj.value = r
                 useMessageStore().addPreparedMessage(PreparedMessage.UPDATE_SUCCESS)
             }).catch((err: any) => {
                 useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
@@ -29,8 +96,9 @@ export function useModelEditorFunctions<T>(emit: any) {
                 loading.value = false
             })
         } else {
-            modelClass.create(obj).then((r: any) => {
+            modelClass.value.create(editingObj.value).then((r: T) => {
                 emit('create', r)
+                editingObj.value = r
                 useMessageStore().addPreparedMessage(PreparedMessage.CREATE_SUCCESS)
             }).catch((err: any) => {
                 useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
@@ -43,13 +111,14 @@ export function useModelEditorFunctions<T>(emit: any) {
     /**
      * deletes the editing object from the database
      */
-    function deleteObject(modelClass: GenericModel, obj: any) {
-        modelClass.destroy(obj.id).then((r: any) => {
-            emit('delete', obj)
+    function deleteObject() {
+        modelClass.value.destroy(editingObj.value.id).then((r: any) => {
+            emit('delete', editingObj)
+            editingObj.value = {} as T
         }).catch((err: any) => {
             useMessageStore().addError(ErrorMessageType.DELETE_ERROR, err)
         })
     }
 
-    return {emit, saveObject, deleteObject, loading, editingObj}
+    return {setupState, saveObject, deleteObject, isUpdate, editingObjName, loading, editingObj, modelClass}
 }