made ModelEditor setupState function properly handle async requests

vue3/src/composables/useModelEditorFunctions.ts

@@ -8,7 +8,7 @@ import {useI18n} from "vue-i18n";
 
 export function useModelEditorFunctions<T>(modelName: string, emit: any) {
 
-    const loading = ref(false)
+    const loading = ref(true)
     const editingObj = ref({} as T)
     const modelClass = ref({} as GenericModel)
 
@@ -22,34 +22,54 @@ export function useModelEditorFunctions<T>(modelName: string, emit: any) {
     })
 
     /**
-     * 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
+     * if given an item or itemId, sets up the editingObj with that item or loads the data from the API using the ID
+     * once finished loading updates the loading state to false, indicating finished initialization
+     *
+     * @throws Error if an error if neither item or itemId are given and create is disabled
      * @param item item object to set as editingObj
      * @param itemId id of object to be retrieved and set as editingObj
+     * @param newItemFunction optional function to execute if no object is given (by either item or itemId)
+     * @param existingItemFunction optional function to execute once the existing item was loaded (instantly with item, async with itemId)
+     * @return promise resolving to either the editingObj or undefined if errored
      */
-    function setupState(item: T | null, itemId: number|string | undefined) {
+    function setupState(item: T | null, itemId: number | string | undefined,
+                        newItemFunction: () => void = () => {},
+                        existingItemFunction: () => void = () => {}): Promise<T | undefined> {
         if (item === null && itemId === undefined) {
+            // neither item nor itemId given => new item
+
             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
+
+            newItemFunction()
+            loading.value = false
+            return Promise.resolve(editingObj.value)
         } else if (item !== null) {
+            // item is given so return that
             editingObj.value = item
+            existingItemFunction()
+            loading.value = false
+            return Promise.resolve(editingObj.value)
         } else if (itemId !== undefined) {
+            // itemId is given => fetch from server and return item
             loading.value = true
-            if(typeof itemId == "string"){
+
+            // itemId might be a string (router parameter) or number (component prop)
+            if (typeof itemId == "string") {
                 itemId = Number(itemId)
             }
-            modelClass.value.retrieve(itemId).then((r: T) => {
+            return modelClass.value.retrieve(itemId).then((r: T) => {
                 editingObj.value = r
+                existingItemFunction()
+                return editingObj.value
             }).catch((err: any) => {
                 useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
+                return undefined
             }).finally(() => {
                 loading.value = false
             })
         }
-
-        return true
     }
 
     /**