shopping recipe scaling

vue3/src/components/display/ShoppingListView.vue

@@ -105,7 +105,7 @@
 
                                     <template v-for="[i, value] in category.foods" :key="value.food.id">
                                         <shopping-line-item :shopping-list-food="value" :entries="Array.from(value.entries.values())"
-                                                            @clicked="args => {shoppingLineItemDialog = true; shoppingLineItemDialogFood = value;}"></shopping-line-item>
+                                                            @clicked="() => {shoppingLineItemDialog = true; shoppingLineItemDialogFood = value;}"></shopping-line-item>
                                     </template>
 
                                 </template>
@@ -147,7 +147,10 @@
                             <v-card-title>Undo Debug</v-card-title>
                             <v-card-text>
                                 <v-list>
-                                    <v-list-item v-for="i in useShoppingStore().undoStack" :key="i">{{ i.type }} {{ i.entries.flatMap(e => e.food.name) }}</v-list-item>
+                                    <v-list-item v-for="i in useShoppingStore().undoStack" :key="i">{{ i.type }} {{
+                                            i.entries.flatMap((e: ShoppingListEntry) => e.food.name)
+                                        }}
+                                    </v-list-item>
                                 </v-list>
                             </v-card-text>
                         </v-card>
@@ -162,17 +165,21 @@
                         <v-card>
                             <v-card-title>{{ $t('Recipes') }}</v-card-title>
                             <v-card-text>
-
-                                <v-label>{{ $t('Add_to_Shopping') }}</v-label>
-                                <ModelSelect model="Recipe"></ModelSelect>
-
-                                <v-label>{{ $t('Recipes') }}</v-label>
                                 <v-list>
                                     <v-list-item v-for="r in useShoppingStore().getAssociatedRecipes()">
-                                        {{ r.recipeName }}
+                                        <template #prepend>
+                                            <v-btn color="edit" icon>
+                                                {{ r.servings }}
+                                                <number-scaler-dialog :number="r.servings"
+                                                                      @confirm="(servings: number) => {updateRecipeServings(r, servings)}"></number-scaler-dialog>
+                                            </v-btn>
+                                        </template>
+                                        <span class="ms-2">
+                                            {{ r.recipeName }}
+                                        </span>
                                         <template #append>
+
                                             <v-btn icon="$delete" color="delete"></v-btn>
-                                            <number-scaler-dialog></number-scaler-dialog>
                                         </template>
                                     </v-list-item>
                                 </v-list>
@@ -204,8 +211,8 @@
 
 import {computed, onMounted, ref} from "vue";
 import {useShoppingStore} from "@/stores/ShoppingStore";
-import {ApiApi, Food, IngredientString, ShoppingListEntry, Supermarket, SupermarketCategory, Unit} from "@/openapi";
+import {ApiApi, Food, IngredientString, ShoppingListEntry, ShoppingListRecipe, Supermarket, Unit} from "@/openapi";
-import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
+import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
 import ShoppingLineItem from "@/components/display/ShoppingLineItem.vue";
 import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
 import ModelSelect from "@/components/inputs/ModelSelect.vue";
@@ -292,6 +299,26 @@ function isCategoryVisible(category: IShoppingListCategory) {
     return entryCount > 0
 }
 
+/**
+ * update the number of servings for an embedded recipe and with it the ShoppingListEntry amounts
+ * @param recipe ShoppingListRecipe to update
+ * @param servings number of servings to set the recipe to
+ */
+function updateRecipeServings(recipe: ShoppingListRecipe, servings: number) {
+    let api = new ApiApi()
+    useShoppingStore().currentlyUpdating = true
+
+    recipe.servings = servings
+    api.apiShoppingListRecipeUpdate({id: recipe.id!, shoppingListRecipe: recipe}).then(r => {
+        useShoppingStore().currentlyUpdating = false
+        useShoppingStore().refreshFromAPI()
+        useMessageStore().addPreparedMessage(PreparedMessage.UPDATE_SUCCESS)
+    }).catch(err => {
+        useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
+        useShoppingStore().currentlyUpdating = false
+    })
+}
+
 /**
  * run the autosync function in a loop
  */

vue3/src/components/inputs/NumberScalerDialog.vue

@@ -1,13 +1,7 @@
 <template>
     <v-dialog width="500" activator="parent" v-model="dialog">
-        <template v-slot:activator="{ props }">
-            <slot name="activator">
-                <v-btn v-bind="props" text="Open Dialog"></v-btn>
-            </slot>
-        </template>
 
-        <template v-slot:default="{ isActive }">
+            <v-card>
-            <v-card >
                 <v-closable-card-title :title="title" v-model="dialog"></v-closable-card-title>
 
                 <v-card-text>
@@ -25,9 +19,12 @@
                     </v-btn-group>
 
                 </v-card-text>
+                <v-card-actions>
+                    <v-btn @click=" dialog=false">{{ $t('Close') }}</v-btn>
+                    <v-btn color="save" prepend-icon="$save" @click="emit('confirm', mutable_number); dialog=false">{{ $t('Save') }}</v-btn>
+                </v-card-actions>
             </v-card>
 
-        </template>
     </v-dialog>
 </template>
 
@@ -38,7 +35,10 @@ import {VNumberInput} from 'vuetify/labs/VNumberInput'
 import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue"; //TODO remove once component is out of labs
 
 const emit = defineEmits({
-    change(payload: { number: number }) {
+    change(payload: number) {
+        return payload
+    },
+    confirm(payload: number) {
         return payload
     }
 })
@@ -76,8 +76,8 @@ function updateNumber(operation: string) {
     if (operation === 'sub') {
         mutable_number.value = props.number - 1
     }
-    console.log(operation, mutable_number.value)
+
-    emit('change', {number: mutable_number.value})
+    emit('change', mutable_number.value)
 }
 </script>