fixed default unit for first ingredient

vue3/src/components/inputs/StepEditor.vue

@@ -261,24 +261,6 @@ const dialogIngredientSorter = ref(false)
 const editingIngredientIndex = ref(0)
 const ingredientTextInput = ref("")
 
-const defaultUnit = ref<null | Unit>(null)
-
-onMounted(() => {
-    let api = new ApiApi()
-
-    if (useUserPreferenceStore().userSettings.defaultUnit) {
-        api.apiUnitList({query: useUserPreferenceStore().userSettings.defaultUnit}).then(r => {
-            r.results.forEach(u => {
-                if (u.name == useUserPreferenceStore().userSettings.defaultUnit) {
-                    defaultUnit.value = u
-                }
-            })
-        }).catch(err => {
-            useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
-        })
-    }
-})
-
 /**
  * sort function called by draggable when ingredient table is sorted
  */
@@ -334,14 +316,10 @@ function handleIngredientNoteTab(event: KeyboardEvent, index: number) {
 function insertAndFocusIngredient() {
     let ingredient = {
         amount: 0,
-        unit: null,
+        unit: useUserPreferenceStore().defaultUnitObj,
         food: null,
     } as Ingredient
 
-    if (defaultUnit.value != null) {
-        ingredient.unit = defaultUnit.value
-    }
-
     step.value.ingredients.push(ingredient)
     nextTick(() => {
         sortIngredients()

vue3/src/components/model_editors/RecipeEditor.vue

@@ -229,7 +229,7 @@ function initializeEditor() {
             addStep()
             editingObj.value.steps[0].ingredients.push({
                 food: null,
-                unit: null,
+                unit: useUserPreferenceStore().defaultUnitObj,
                 amount: 0,
             } as Ingredient)
             editingObj.value.internal = true //TODO make database default after v2

vue3/src/stores/UserPreferenceStore.ts

@@ -1,7 +1,7 @@
 import {acceptHMRUpdate, defineStore} from 'pinia'
 import {useStorage} from "@vueuse/core";
 import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
-import {ApiApi, ServerSettings, Space, UserPreference, UserSpace} from "@/openapi";
+import {ApiApi, ServerSettings, Space, Unit, UserPreference, UserSpace} from "@/openapi";
 import {ShoppingGroupingOptions} from "@/types/Shopping";
 import {computed, ComputedRef, ref} from "vue";
 import {DeviceSettings} from "@/types/settings";
@@ -50,6 +50,11 @@ export const useUserPreferenceStore = defineStore('user_preference_store', () =>
      */
     const initCompleted = ref(false)
 
+    /**
+     * load the default unit to the store for easy use in editors and more
+     */
+    const defaultUnitObj = ref<Unit | null>(null)
+
     const theme = useTheme()
     const router = useRouter()
 
@@ -77,6 +82,7 @@ export const useUserPreferenceStore = defineStore('user_preference_store', () =>
                 userSettings.value = r[0]
                 isAuthenticated.value = true
                 updateTheme()
+                loadDefaultUnit()
             } else {
                 useMessageStore().addError(ErrorMessageType.FETCH_ERROR, r)
             }
@@ -87,6 +93,28 @@ export const useUserPreferenceStore = defineStore('user_preference_store', () =>
         })
     }
 
+    /**
+     * load the default unit from the backend
+     * TODO migrate to nested serializer but requires actually creating the unit as currently its possible the default unit does not exist yet
+     */
+    function loadDefaultUnit() {
+        let api = new ApiApi()
+
+        if (userSettings.value.defaultUnit) {
+            api.apiUnitList({query: userSettings.value.defaultUnit}).then(r => {
+                r.results.forEach(u => {
+                    if (u.name == userSettings.value.defaultUnit) {
+                        defaultUnitObj.value = u
+                    }
+                })
+            }).catch(err => {
+                if (err.response.status != 403) {
+                    useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
+                }
+            })
+        }
+    }
+
     /**
      * persist changes to user settings to DB
      */
@@ -254,6 +282,7 @@ export const useUserPreferenceStore = defineStore('user_preference_store', () =>
         activeUserSpace,
         isAuthenticated,
         initCompleted,
+        defaultUnitObj,
         loadUserSettings,
         loadServerSettings,
         updateUserSettings,