fix: Bulk Add Recipes to Shopping List (#5054)

frontend/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue

@@ -138,8 +138,8 @@ import RecipeIngredientListItem from "./RecipeIngredientListItem.vue";
 import { useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
 import { useShoppingListPreferences } from "~/composables/use-users/preferences";
-import { ShoppingListSummary } from "~/lib/api/types/household";
-import { Recipe, RecipeIngredient } from "~/lib/api/types/recipe";
+import { RecipeIngredient, ShoppingListAddRecipeParamsBulk, ShoppingListSummary } from "~/lib/api/types/household";
+import { Recipe } from "~/lib/api/types/recipe";
 
 export interface RecipeWithScale extends Recipe {
   scale: number;
@@ -342,12 +342,12 @@ export default defineComponent({
     }
 
     async function addRecipesToList() {
-      const promises: Promise<any>[] = [];
-      recipeIngredientSections.value.forEach((section) => {
-        if (!selectedShoppingList.value) {
-          return;
-        }
+      if (!selectedShoppingList.value) {
+        return;
+      }
 
+      const recipeData: ShoppingListAddRecipeParamsBulk[] = [];
+      recipeIngredientSections.value.forEach((section) => {
         const ingredients: RecipeIngredient[] = [];
         section.ingredientSections.forEach((ingSection) => {
           ingSection.ingredients.forEach((ing) => {
@@ -361,24 +361,18 @@ export default defineComponent({
           return;
         }
 
-        promises.push(api.shopping.lists.addRecipe(
-          selectedShoppingList.value.id,
-          section.recipeId,
-          section.recipeScale,
-          ingredients,
-        ));
+        recipeData.push(
+          {
+            recipeId: section.recipeId,
+            recipeIncrementQuantity: section.recipeScale,
+            recipeIngredients: ingredients,
+          }
+        );
       });
 
-      let success = true;
-      const results = await Promise.allSettled(promises);
-      results.forEach((result) => {
-        if (result.status === "rejected") {
-          success = false;
-        }
-      })
-
-      success ? alert.success(i18n.tc("recipe.successfully-added-to-list"))
-      : alert.error(i18n.tc("failed-to-add-recipes-to-list"))
+      const { error } = await api.shopping.lists.addRecipes(selectedShoppingList.value.id, recipeData);
+      error ? alert.error(i18n.tc("recipe.failed-to-add-recipes-to-list"))
+      : alert.success(i18n.tc("recipe.successfully-added-to-list"));
 
       state.shoppingListDialog = false;
       state.shoppingListIngredientDialog = false;

frontend/lib/api/types/household.ts

@@ -391,6 +391,11 @@ export interface CreateIngredientFoodAlias {
   name: string;
   [k: string]: unknown;
 }
+export interface ShoppingListAddRecipeParamsBulk {
+  recipeIncrementQuantity?: number;
+  recipeIngredients?: RecipeIngredient[] | null;
+  recipeId: string;
+}
 export interface ShoppingListCreate {
   name?: string | null;
   extras?: {

frontend/lib/api/types/recipe.ts

@@ -291,6 +291,7 @@ export interface UserBase {
   id: string;
   username?: string | null;
   admin: boolean;
+  fullName?: string | null;
 }
 export interface RecipeCategoryResponse {
   name: string;

frontend/lib/api/user/group-shopping-lists.ts

@@ -1,7 +1,7 @@
 import { BaseCRUDAPI } from "../base/base-clients";
-import { RecipeIngredient } from "../types/recipe";
 import { ApiRequestInstance } from "~/lib/api/types/non-generated";
 import {
+  ShoppingListAddRecipeParamsBulk,
   ShoppingListCreate,
   ShoppingListItemCreate,
   ShoppingListItemOut,
@@ -16,7 +16,7 @@ const prefix = "/api";
 const routes = {
   shoppingLists: `${prefix}/households/shopping/lists`,
   shoppingListsId: (id: string) => `${prefix}/households/shopping/lists/${id}`,
-  shoppingListIdAddRecipe: (id: string, recipeId: string) => `${prefix}/households/shopping/lists/${id}/recipe/${recipeId}`,
+  shoppingListIdAddRecipe: (id: string) => `${prefix}/households/shopping/lists/${id}/recipe`,
   shoppingListIdRemoveRecipe: (id: string, recipeId: string) => `${prefix}/households/shopping/lists/${id}/recipe/${recipeId}/delete`,
   shoppingListIdUpdateLabelSettings: (id: string) => `${prefix}/households/shopping/lists/${id}/label-settings`,
 
@@ -29,8 +29,8 @@ export class ShoppingListsApi extends BaseCRUDAPI<ShoppingListCreate, ShoppingLi
   baseRoute = routes.shoppingLists;
   itemRoute = routes.shoppingListsId;
 
-  async addRecipe(itemId: string, recipeId: string, recipeIncrementQuantity = 1, recipeIngredients: RecipeIngredient[] | null = null) {
-    return await this.requests.post(routes.shoppingListIdAddRecipe(itemId, recipeId), { recipeIncrementQuantity, recipeIngredients });
+  async addRecipes(itemId: string, data: ShoppingListAddRecipeParamsBulk[]) {
+    return await this.requests.post(routes.shoppingListIdAddRecipe(itemId), data);
   }
 
   async removeRecipe(itemId: string, recipeId: string, recipeDecrementQuantity = 1) {

frontend/pages/shopping-lists/_id.vue

@@ -834,7 +834,7 @@ export default defineComponent({
 
       loadingCounter.value += 1;
       recipeReferenceLoading.value = true;
-      const { data } = await userApi.shopping.lists.addRecipe(shoppingList.value.id, recipeId);
+      const { data } = await userApi.shopping.lists.addRecipes(shoppingList.value.id, [{ recipeId }]);
       recipeReferenceLoading.value = false;
       loadingCounter.value -= 1;