chore: Fixed all missing parts

Signed-off-by: Johannes Groß <mail@gross-johannes.de>
jo-gross · Sep 12, 2024 · 539ac38 · 539ac38
1 parent 947a2c2
commit 539ac38
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 140 deletions.
diff --git a/components/cocktails/CocktailRecipeCardItem.tsx b/components/cocktails/CocktailRecipeCardItem.tsx
@@ -10,7 +10,7 @@ import { Loading } from '../Loading';
 import { fetchCocktail } from '../../lib/network/cocktails';
 
 interface CocktailRecipeOverviewItemProps {
-  cocktailRecipe: CocktailRecipeFull;
+  cocktailRecipe: CocktailRecipeFull | string;
   showImage?: boolean;
   specialPrice?: number;
   showPrice?: boolean;
@@ -29,17 +29,19 @@ export default function CocktailRecipeCardItem(props: CocktailRecipeOverviewItem
   const [submittingStatistic, setSubmittingStatistic] = useState(false);
   const [submittingQueue, setSubmittingQueue] = useState(false);
 
-  const [cocktailRecipe, setCocktailRecipe] = useState<CocktailRecipeFull | undefined>(
+  const [loadedCocktailRecipe, setLoadedCocktailRecipe] = useState<CocktailRecipeFull | undefined>(
     typeof props.cocktailRecipe === 'string' ? undefined : props.cocktailRecipe,
   );
   const [cocktailRecipeLoading, setCocktailRecipeLoading] = useState(false);
 
   useEffect(() => {
     if (typeof props.cocktailRecipe === 'string') {
-      fetchCocktail(workspaceId, props.cocktailRecipe, setCocktailRecipe, setCocktailRecipeLoading);
+      fetchCocktail(workspaceId, props.cocktailRecipe, setLoadedCocktailRecipe, setCocktailRecipeLoading);
     }
   }, [workspaceId, props.cocktailRecipe]);
 
+  const cocktailRecipe = typeof props.cocktailRecipe === 'string' ? loadedCocktailRecipe : props.cocktailRecipe;
+
   return (
     <div className={'col-span-1'}>
       <div className={'card card-side h-full'}>

diff --git a/lib/network/cocktails.ts b/lib/network/cocktails.ts
@@ -1,5 +1,6 @@
 import { alertService } from '../alertService';
 import { CocktailRecipeFull } from '../../models/CocktailRecipeFull';
+import { CocktailRecipeFullWithImage } from '../../models/CocktailRecipeFullWithImage';
 
 export function fetchCocktail(
   workspaceId: string | string[] | undefined,
@@ -27,3 +28,30 @@ export function fetchCocktail(
       setCocktailLoading(false);
     });
 }
+
+export function fetchCocktailWithImage(
+  workspaceId: string | string[] | undefined,
+  cocktailId: string,
+  setCocktail: (cocktail: CocktailRecipeFullWithImage) => void,
+  setCocktailLoading: (loading: boolean) => void,
+) {
+  if (!workspaceId) return;
+  setCocktailLoading(true);
+  fetch(`/api/workspaces/${workspaceId}/cocktails/${cocktailId}?include=image`)
+    .then(async (response) => {
+      const body = await response.json();
+      if (response.ok) {
+        setCocktail(body.data);
+      } else {
+        console.error('fetchCocktail', response);
+        alertService.error(body.message ?? 'Fehler beim Laden des Cocktails', response.status, response.statusText);
+      }
+    })
+    .catch((error) => {
+      console.error('fetchCocktail', error);
+      alertService.error('Fehler beim Laden des Cocktails');
+    })
+    .finally(() => {
+      setCocktailLoading(false);
+    });
+}
diff --git a/models/CocktailCardFull.tsx b/models/CocktailCardFull.tsx
@@ -4,36 +4,7 @@ export type CocktailCardFull = Prisma.CocktailCardGetPayload<{
   include: {
     groups: {
       include: {
-        items: {
-          include: {
-            cocktail: {
-              include: {
-                ice: true;
-                glass: { include: { _count: { select: { GlassImage: true } } } };
-                garnishes: {
-                  include: {
-                    garnish: { include: { _count: { select: { GarnishImage: true } } } };
-                  };
-                };
-                _count: { select: { CocktailRecipeImage: true } };
-                steps: {
-                  include: {
-                    action: true;
-                    ingredients: {
-                      include: {
-                        ingredient: {
-                          include: { _count: { select: { IngredientImage: true } } };
-                          unit: true;
-                        };
-                      };
-                    };
-                  };
-                };
-                ratings: true;
-              };
-            };
-          };
-        };
+        items: true;
       };
     };
   };

diff --git a/pages/api/workspaces/[workspaceId]/cards/[cardId]/index.tsx b/pages/api/workspaces/[workspaceId]/cards/[cardId]/index.tsx
@@ -22,33 +22,7 @@ export default withHttpMethods({
       include: {
         groups: {
           include: {
-            items: {
-              include: {
-                cocktail: {
-                  include: {
-                    _count: { select: { CocktailRecipeImage: true } },
-                    ice: true,
-                    glass: { include: { _count: { select: { GlassImage: true } } } },
-                    garnishes: {
-                      include: {
-                        garnish: true,
-                      },
-                    },
-                    steps: {
-                      include: {
-                        action: true,
-                        ingredients: {
-                          include: {
-                            ingredient: true,
-                            unit: true,
-                          },
-                        },
-                      },
-                    },
-                  },
-                },
-              },
-            },
+            items: true,
           },
         },
       },

diff --git a/pages/api/workspaces/[workspaceId]/cards/index.tsx b/pages/api/workspaces/[workspaceId]/cards/index.tsx
@@ -32,33 +32,7 @@ export default withHttpMethods({
       include: {
         groups: {
           include: {
-            items: {
-              include: {
-                cocktail: {
-                  include: {
-                    _count: { select: { CocktailRecipeImage: true } },
-                    ice: true,
-                    glass: true,
-                    garnishes: {
-                      include: {
-                        garnish: true,
-                      },
-                    },
-                    steps: {
-                      include: {
-                        action: true,
-                        ingredients: {
-                          include: {
-                            ingredient: true,
-                            unit: true,
-                          },
-                        },
-                      },
-                    },
-                  },
-                },
-              },
-            },
+            items: true,
           },
         },
       },

diff --git a/pages/api/workspaces/[workspaceId]/cocktails/[cocktailId]/index.tsx b/pages/api/workspaces/[workspaceId]/cocktails/[cocktailId]/index.tsx
@@ -7,48 +7,83 @@ import { withHttpMethods } from '../../../../../../middleware/api/handleMethods'
 import { CocktailRecipeStepFull } from '../../../../../../models/CocktailRecipeStepFull';
 import { CocktailRecipeGarnishFull } from '../../../../../../models/CocktailRecipeGarnishFull';
 import { CocktailRecipeFullWithImage } from '../../../../../../models/CocktailRecipeFullWithImage';
+import { CocktailRecipeFull } from '../../../../../../models/CocktailRecipeFull';
 import CocktailRecipeUpdateInput = Prisma.CocktailRecipeUpdateInput;
 
 export default withHttpMethods({
   [HTTPMethod.GET]: withWorkspacePermission([Role.USER], async (req: NextApiRequest, res: NextApiResponse, user, workspace) => {
     const cocktailId = req.query.cocktailId as string | undefined;
     if (!cocktailId) return res.status(400).json({ message: 'No cocktail id' });
 
-    const result: CocktailRecipeFullWithImage | null = await prisma.cocktailRecipe.findFirst({
-      where: {
-        id: cocktailId,
-        workspaceId: workspace.id,
-      },
-      include: {
-        _count: { select: { CocktailRecipeImage: true } },
-        ice: true,
-        glass: { include: { _count: { select: { GlassImage: true } } } },
-        CocktailRecipeImage: {
-          select: {
-            image: true,
-          },
+    const { include } = req.query;
+    if (include == 'image' || include?.includes('image')) {
+      const result: CocktailRecipeFullWithImage | null = await prisma.cocktailRecipe.findFirst({
+        where: {
+          id: cocktailId,
+          workspaceId: workspace.id,
         },
-        garnishes: {
-          include: {
-            garnish: { include: { _count: { select: { GarnishImage: true } } } },
+        include: {
+          _count: { select: { CocktailRecipeImage: true } },
+          ice: true,
+          glass: { include: { _count: { select: { GlassImage: true } } } },
+          CocktailRecipeImage: {
+            select: {
+              image: true,
+            },
           },
+          garnishes: {
+            include: {
+              garnish: { include: { _count: { select: { GarnishImage: true } } } },
+            },
+          },
+          steps: {
+            include: {
+              action: true,
+              ingredients: {
+                include: {
+                  ingredient: { include: { _count: { select: { IngredientImage: true } } } },
+                  unit: true,
+                },
+              },
+            },
+          },
+          ratings: true,
         },
-        steps: {
-          include: {
-            action: true,
-            ingredients: {
-              include: {
-                ingredient: { include: { _count: { select: { IngredientImage: true } } } },
-                unit: true,
+      });
+      return res.json({ data: result });
+    } else {
+      const result: CocktailRecipeFull | null = await prisma.cocktailRecipe.findFirst({
+        where: {
+          id: cocktailId,
+          workspaceId: workspace.id,
+        },
+        include: {
+          _count: { select: { CocktailRecipeImage: true } },
+          ice: true,
+          glass: { include: { _count: { select: { GlassImage: true } } } },
+          garnishes: {
+            include: {
+              garnish: { include: { _count: { select: { GarnishImage: true } } } },
+            },
+          },
+          steps: {
+            include: {
+              action: true,
+              ingredients: {
+                include: {
+                  ingredient: {
+                    include: { _count: { select: { IngredientImage: true } } },
+                  },
+                  unit: true,
+                },
               },
             },
           },
+          ratings: true,
         },
-        ratings: true,
-      },
-    });
-
-    return res.json({ data: result });
+      });
+      return res.json({ data: result });
+    }
   }),
   [HTTPMethod.PUT]: withWorkspacePermission([Role.MANAGER], async (req: NextApiRequest, res: NextApiResponse, user, workspace) => {
     const cocktailId = req.query.cocktailId as string | undefined;

diff --git a/pages/workspaces/[workspaceId]/index.tsx b/pages/workspaces/[workspaceId]/index.tsx
@@ -428,7 +428,7 @@ export default function OverviewPage() {
                           group.items
                             ?.sort((a, b) => a.itemNumber - b.itemNumber)
                             .map((groupItem, index) => {
-                              if (groupItem.cocktail != undefined) {
+                              if (groupItem.cocktailId != undefined) {
                                 return (
                                   <CocktailRecipeCardItem
                                     key={`card-${selectedCard.id}-group-${group.id}-cocktail-${groupItem.cocktailId}-${index}`}
@@ -437,7 +437,7 @@ export default function OverviewPage() {
                                     showInfo={true}
                                     showPrice={groupItem.specialPrice == undefined && group.groupPrice == undefined}
                                     specialPrice={groupItem.specialPrice ?? group.groupPrice ?? undefined}
-                                    cocktailRecipe={groupItem.cocktail.id}
+                                    cocktailRecipe={groupItem.cocktailId}
                                     showStatisticActions={showStatisticActions}
                                     showDescription={showDescription}
                                     showNotes={showNotes}

diff --git a/pages/workspaces/[workspaceId]/manage/cards/[id].tsx b/pages/workspaces/[workspaceId]/manage/cards/[id].tsx
@@ -369,7 +369,7 @@ function EditCocktailCard() {
                           <div className={'pt-2'}>
                             <FieldArray name={`groups.${groupIndex}.items`}>
                               {({ push: pushItem, remove: removeItem }) => (
-                                <div className={'grid grid-cols-1 gap-2 md:grid-cols-3'}>
+                                <div className={'grid grid-cols-1 gap-2 md:grid-cols-5 lg:grid-cols-7'}>
                                   {values.groups[groupIndex].items
                                     .sort((a, b) => a.itemNumber - b.itemNumber)
                                     .map((item, itemIndex) => (
@@ -450,7 +450,7 @@ function EditCocktailCard() {
                                         </div>
                                       </div>
                                     ))}
-                                  <div className={'col-span-1 flex flex-row justify-end md:col-span-3'}>
+                                  <div className={'col-span-full flex flex-row justify-end'}>
                                     {!card?.archived ? (
                                       <button
                                         type="button"

diff --git a/pages/workspaces/[workspaceId]/manage/cocktails/[id].tsx b/pages/workspaces/[workspaceId]/manage/cocktails/[id].tsx
@@ -12,6 +12,7 @@ import { PageCenter } from '../../../../../components/layout/PageCenter';
 import { UserContext } from '../../../../../lib/context/UserContextProvider';
 import { ModalContext } from '../../../../../lib/context/ModalContextProvider';
 import { NotSavedArchiveConfirmation } from '../../../../../components/modals/NotSavedArchiveConfirmation';
+import { fetchCocktailWithImage } from '../../../../../lib/network/cocktails';
 
 function EditCocktailRecipe() {
   const router = useRouter();
@@ -27,27 +28,8 @@ function EditCocktailRecipe() {
   const formRef: any = useRef<FormikProps<any>>(null);
 
   useEffect(() => {
-    if (!id) return;
-    if (!workspaceId) return;
-    setLoading(true);
-    fetch(`/api/workspaces/${workspaceId}/cocktails/${id}`)
-      .then(async (response) => {
-        const body = await response.json();
-        if (response.ok) {
-          setCocktailRecipe(body.data);
-        } else {
-          console.error('CocktailId -> fetchCocktail', response);
-          alertService.error(body.message ?? 'Fehler beim Laden des Cocktails', response.status, response.statusText);
-        }
-      })
-      .catch((error) => {
-        console.error('CocktailId -> fetchCocktail', error);
-        alertService.error('Fehler beim Laden des Cocktails');
-      })
-      .finally(() => {
-        setLoading(false);
-      });
-  }, [id, workspaceId]);
+    fetchCocktailWithImage(workspaceId as string, id as string, setCocktailRecipe, setLoading);
+  }, []);
 
   return loading ? (
     <PageCenter>