made ModelEditor setupState function properly handle async requests

vue3/src/components/model_editors/AccessTokenEditor.vue

@@ -49,11 +49,10 @@ const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading,
 
 
 onMounted(() => {
-    if (!setupState(props.item, props.itemId)) {
+    setupState(props.item, props.itemId, () => {
-        // functions to populate defaults
         editingObj.value.expires = DateTime.now().plus({year: 1}).toJSDate()
         editingObj.value.scope = 'read write'
-    }
+    })
 })
 
 </script>

vue3/src/components/model_editors/AutomationEditor.vue

@@ -36,6 +36,7 @@ import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
 import {useI18n} from "vue-i18n";
 import {VNumberInput} from "vuetify/labs/VNumberInput";
+import {DateTime} from "luxon";
 
 const {t} = useI18n()
 
@@ -64,10 +65,9 @@ const AUTOMATION_TYPES = [
 ]
 
 onMounted(() => {
-    if (!setupState(props.item, props.itemId)) {
+    setupState(props.item, props.itemId, () => {
-        // functions to populate defaults
         editingObj.value.order = 0
-    }
+    })
 })
 
 </script>

vue3/src/components/model_editors/FoodEditor.vue

@@ -189,11 +189,10 @@ const stopConversionsWatcher = watch(tab, (value, oldValue, onCleanup) => {
 
 
 onMounted(() => {
-    if (!setupState(props.item, props.itemId)) {
+    setupState(props.item, props.itemId, () => {
-        // functions to populate defaults
         editingObj.value.propertiesFoodAmount = 100
         editingObj.value.propertiesFoodUnit = {name: 'g'} as Unit // TODO properly fetch default unit
-    }
+    })
 })
 
 

vue3/src/components/model_editors/InviteLinkEditor.vue

@@ -50,11 +50,11 @@ onMounted(() => {
     api.apiGroupList().then(r => {
         groups.value = r
 
-        if (!setupState(props.item, props.itemId)) {
+        setupState(props.item, props.itemId, () => {
-            // functions to populate defaults
             editingObj.value.validUntil = DateTime.now().plus({month: 1}).toJSDate()
             editingObj.value.group = groups.value[0]
-        }
+        })
+
     }).catch(err => {
         useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
     })

vue3/src/components/model_editors/KeywordEditor.vue

@@ -27,6 +27,7 @@ import {Keyword} from "@/openapi";
 import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
 import {useI18n} from "vue-i18n";
+import {DateTime} from "luxon";
 
 const {t} = useI18n()
 
@@ -42,10 +43,7 @@ const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading,
 // object specific data (for selects/display)
 
 onMounted(() => {
-    if (!setupState(props.item, props.itemId)) {
+    setupState(props.item, props.itemId)
-        // functions to populate defaults
-
-    }
 })
 
 </script>

vue3/src/components/model_editors/MealTypeEditor.vue

@@ -43,6 +43,7 @@ import {MealType} from "@/openapi";
 import {VTimePicker} from 'vuetify/labs/VTimePicker'; // TODO remove once out of labs
 import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
+import {DateTime} from "luxon";
 
 
 const props = defineProps({
@@ -59,9 +60,7 @@ const timePickerMenu = ref(false)
 
 
 onMounted(() => {
-    if (!setupState(props.item, props.itemId)) {
+    setupState(props.item, props.itemId)
-        // functions to populate defaults
-    }
 })
 
 </script>

vue3/src/components/model_editors/PropertyEditor.vue

@@ -45,9 +45,7 @@ const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading,
 
 
 onMounted(() => {
-    if (!setupState(props.item, props.itemId)) {
+    setupState(props.item, props.itemId)
-        // functions to populate defaults
-    }
 })
 
 

vue3/src/components/model_editors/PropertyTypeEditor.vue

@@ -44,10 +44,7 @@ const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading,
 // object specific data (for selects/display)
 
 onMounted(() => {
-    if (!setupState(props.item, props.itemId)) {
+    setupState(props.item, props.itemId)
-        // functions to populate defaults
-
-    }
 })
 
 </script>

vue3/src/components/model_editors/SupermarketCategoryEditor.vue

@@ -42,10 +42,7 @@ const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading,
 // object specific data (for selects/display)
 
 onMounted(() => {
-    if (!setupState(props.item, props.itemId)) {
+    setupState(props.item, props.itemId)
-        // functions to populate defaults
-
-    }
 })
 
 </script>

vue3/src/components/model_editors/SupermarketEditor.vue

@@ -119,16 +119,13 @@ const unusedSupermarketCategories = computed(() => {
 onMounted(() => {
     const api = new ApiApi()
 
-    if (!setupState(props.item, props.itemId)) {
-        // functions to populate defaults
-    }
-
     api.apiSupermarketCategoryList({pageSize: 100}).then(r => {
         supermarketCategories.value = r.results
-        
+
-        //TODO fix performing this in a way that async setupState works
+        setupState(props.item, props.itemId, undefined, () => {
-        editingObj.value.categoryToSupermarket.forEach(cTS => {
+            editingObj.value.categoryToSupermarket.forEach(cTS => {
-            editingObjSupermarketCategories.value.push(cTS.category)
+                editingObjSupermarketCategories.value.push(cTS.category)
+            })
         })
     })
 })

vue3/src/components/model_editors/UnitConversionEditor.vue

@@ -65,9 +65,7 @@ const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading,
 
 
 onMounted(() => {
-    if (!setupState(props.item, props.itemId)) {
+    setupState(props.item, props.itemId)
-        // functions to populate defaults
-    }
 })
 
 </script>

vue3/src/components/model_editors/UnitEditor.vue

@@ -67,10 +67,7 @@ const BASE_UNITS = [
 ]
 
 onMounted(() => {
-    if (!setupState(props.item, props.itemId)) {
+    setupState(props.item, props.itemId)
-        // functions to populate defaults
-
-    }
 })
 
 </script>

vue3/src/components/model_editors/UserSpaceEditor.vue

@@ -48,9 +48,7 @@ onMounted(() => {
         useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
     })
 
-    if (!setupState(props.item, props.itemId)) {
+    setupState(props.item, props.itemId)
-        // functions to populate defaults
-    }
 })
 
 

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 given an item or itemId, 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
+     * 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
     }
 
     /**