feat: Added option for notes when queueing cocktails

components/StatisticActions.tsx

@@ -0,0 +1,101 @@
+import { addCocktailToQueue, addCocktailToStatistic } from '../lib/network/cocktailTracking';
+import { MdPlaylistAdd } from 'react-icons/md';
+import { FaCheck } from 'react-icons/fa';
+import React, { useContext, useState } from 'react';
+import { ModalContext } from '../lib/context/ModalContextProvider';
+import AddCocktailToQueueModal from './modals/AddCocktailToQueueModal';
+import SelectSpecifyCocktailForStatisticModal from './modals/SelectSpecifyCocktailForStatisticModal';
+
+interface StatisticActionsProps {
+  workspaceId: string;
+  cocktailId: string;
+  cocktailName: string;
+
+  cardId?: string;
+  actionSource: 'SEARCH_MODAL' | 'CARD' | 'DETAIL_MODAL' | 'QUEUE';
+  notes?: string;
+
+  onAddToQueue?: () => void;
+  onMarkedAsDone?: () => void;
+}
+
+export default function StatisticActions({
+  workspaceId,
+  cocktailId,
+  cardId,
+  actionSource,
+  notes,
+  onMarkedAsDone,
+  onAddToQueue,
+  cocktailName,
+}: StatisticActionsProps) {
+  const [submittingQueue, setSubmittingQueue] = useState(false);
+  const [submittingStatistic, setSubmittingStatistic] = useState(false);
+
+  const modalContext = useContext(ModalContext);
+
+  return (
+    <div className={'grid grid-cols-2 gap-2 md:grid-cols-3'}>
+      <button
+        className={'btn btn-outline flex-1'}
+        onClick={() =>
+          addCocktailToQueue({
+            workspaceId: workspaceId,
+            cocktailId: cocktailId,
+            setSubmitting: setSubmittingQueue,
+          })
+        }
+        disabled={submittingQueue}
+      >
+        <MdPlaylistAdd />
+        Liste
+        {submittingQueue ? <span className={'loading loading-spinner'}></span> : <></>}
+      </button>
+
+      <button
+        className={'btn btn-outline flex-1'}
+        onClick={() =>
+          modalContext.openModal(
+            <AddCocktailToQueueModal workspaceId={workspaceId} cocktailId={cocktailId} actionSource={actionSource} cocktailName={cocktailName} />,
+          )
+        }
+        disabled={submittingQueue}
+      >
+        <MdPlaylistAdd />
+        mit Notiz
+        {submittingQueue ? <span className={'loading loading-spinner'}></span> : <></>}
+      </button>
+      <button
+        className={'col-span-auto btn btn-outline btn-primary'}
+        onClick={() =>
+          addCocktailToStatistic({
+            workspaceId: workspaceId,
+            cocktailId: cocktailId,
+            cardId: cardId,
+            actionSource: actionSource,
+            notes: notes,
+            setSubmitting: setSubmittingStatistic,
+            onSuccess: () => onMarkedAsDone?.(),
+            onNotDecidableError: (options) => {
+              modalContext.openModal(
+                <SelectSpecifyCocktailForStatisticModal
+                  workspaceId={workspaceId}
+                  cocktailId={cocktailId}
+                  cardId={cardId}
+                  actionSource={actionSource}
+                  cocktailName={cocktailName}
+                  options={options}
+                />,
+              );
+            },
+          })
+        }
+        disabled={submittingStatistic}
+      >
+        <FaCheck />
+        Gemacht
+        {submittingStatistic ? <span className={'loading loading-spinner'}></span> : <></>}
+      </button>
+    </div>
+  );
+}

components/cocktails/CocktailRecipeCardItem.tsx

@@ -3,13 +3,12 @@ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useStat
 import { CompactCocktailRecipeInstruction } from './CompactCocktailRecipeInstruction';
 import { ShowCocktailInfoButton } from './ShowCocktailInfoButton';
 import { useRouter } from 'next/router';
-import { FaExclamationTriangle, FaPlus } from 'react-icons/fa';
-import { MdPlaylistAdd } from 'react-icons/md';
-import { addCocktailToQueue, addCocktailToStatistic } from '../../lib/network/cocktailTracking';
+import { FaExclamationTriangle } from 'react-icons/fa';
 import { Loading } from '../Loading';
 import { fetchCocktail } from '../../lib/network/cocktails';
 import { CocktailRating } from '@prisma/client';
 import { fetchCocktailRatings } from '../../lib/network/cocktailRatings';
+import StatisticActions from '../StatisticActions';
 
 export type CocktailRecipeOverviewItemRef = {
   refresh: () => void;
@@ -33,9 +32,6 @@ const CocktailRecipeCardItem = forwardRef<CocktailRecipeOverviewItemRef, Cocktai
   const router = useRouter();
   const workspaceId = router.query.workspaceId as string;
 
-  const [submittingStatistic, setSubmittingStatistic] = useState(false);
-  const [submittingQueue, setSubmittingQueue] = useState(false);
-
   const [loadedCocktailRecipe, setLoadedCocktailRecipe] = useState<CocktailRecipeFull | undefined>(
     typeof props.cocktailRecipe === 'string' ? undefined : props.cocktailRecipe,
   );
@@ -120,41 +116,14 @@ const CocktailRecipeCardItem = forwardRef<CocktailRecipeOverviewItemRef, Cocktai
                 )}
 
                 {props.showStatisticActions ? (
-                  <div className={''}>
-                    <div className={'mt-1 flex flex-row gap-2'}>
-                      <button
-                        className={'btn btn-outline flex-1'}
-                        onClick={() =>
-                          addCocktailToQueue({
-                            workspaceId: router.query.workspaceId as string,
-                            cocktailId: cocktailRecipe.id,
-                            setSubmitting: setSubmittingQueue,
-                          })
-                        }
-                        disabled={submittingQueue}
-                      >
-                        <MdPlaylistAdd />
-                        Liste
-                        {submittingQueue ? <span className={'loading loading-spinner'}></span> : <></>}
-                      </button>
-                      <button
-                        className={'btn btn-outline btn-primary flex-1'}
-                        onClick={() =>
-                          addCocktailToStatistic({
-                            workspaceId: router.query.workspaceId as string,
-                            cocktailId: cocktailRecipe.id,
-                            cardId: router.query.cardId,
-                            actionSource: 'CARD',
-                            setSubmitting: setSubmittingStatistic,
-                          })
-                        }
-                        disabled={submittingStatistic}
-                      >
-                        <FaPlus />
-                        Gemacht
-                        {submittingStatistic ? <span className={'loading loading-spinner'}></span> : <></>}
-                      </button>
-                    </div>
+                  <div className={'mt-1'}>
+                    <StatisticActions
+                      workspaceId={router.query.workspaceId as string}
+                      cocktailId={cocktailRecipe.id}
+                      cocktailName={cocktailRecipe.name}
+                      actionSource={'CARD'}
+                      cardId={router.query.cardId as string | undefined}
+                    />
                   </div>
                 ) : (
                   <></>

components/cocktails/CocktailRecipeForm.tsx

@@ -616,7 +616,7 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
                               form={
                                 <GlassForm
                                   onSaved={async (id) => {
-                                    modalContext.closeModal();
+                                    modalContext.closeAllModals();
                                     await setFieldValue('glassId', id);
                                     fetchGlasses(workspaceId, setGlasses, setGlassesLoading);
                                   }}
@@ -1102,7 +1102,7 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
                                                     <IngredientForm
                                                       formRef={createRef<FormikProps<any>>()}
                                                       onSaved={async (id) => {
-                                                        modalContext.closeModal();
+                                                        modalContext.closeAllModals();
                                                         await setFieldValue(`steps.${indexStep}.ingredients.${indexIngredient}.ingredientId`, id);
                                                         fetchIngredients(workspaceId, setIngredients, setIngredientsLoading);
                                                       }}
@@ -1329,7 +1329,7 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
                                           <GarnishForm
                                             formRef={createRef<FormikProps<any>>()}
                                             onSaved={async (id) => {
-                                              modalContext.closeModal();
+                                              modalContext.closeAllModals();
                                               await setFieldValue(`garnishes.${indexGarnish}.garnishId`, id);
                                               fetchGarnishes(workspaceId, setGarnishes, setGarnishesLoading);
                                             }}

components/cocktails/ShowCocktailInfoButton.tsx

@@ -16,7 +16,10 @@ export function ShowCocktailInfoButton(props: ShowCocktailInfoButtonProps) {
     <div
       className={'btn btn-circle btn-ghost btn-sm absolute right-1 top-1 bg-info/50 print:hidden'}
       onClick={async () => {
-        modalContext.openModal(<CocktailDetailModal cocktailId={props.cocktailId} onRefreshRatings={() => props.onRatingChange()} />, true);
+        modalContext.openModal(
+          <CocktailDetailModal cocktailId={props.cocktailId} onRefreshRatings={() => props.onRatingChange()} openReferer={'DETAIL'} />,
+          true,
+        );
       }}
     >
       <FaInfoCircle />

components/modals/AddCocktailToQueueModal.tsx

@@ -0,0 +1,85 @@
+import { addCocktailToQueue } from '../../lib/network/cocktailTracking';
+import { MdPlaylistAdd } from 'react-icons/md';
+import React, { useContext, useState } from 'react';
+import { ModalContext } from '../../lib/context/ModalContextProvider';
+import { FaMinus, FaPlus } from 'react-icons/fa';
+
+interface AddCocktailToQueueModalProps {
+  workspaceId: string;
+  cocktailId: string;
+  cocktailName: string;
+  actionSource: 'SEARCH_MODAL' | 'CARD' | 'DETAIL_MODAL' | 'QUEUE';
+}
+
+export default function AddCocktailToQueueModal({ workspaceId, cocktailId, actionSource, cocktailName }: AddCocktailToQueueModalProps) {
+  const [submittingQueue, setSubmittingQueue] = useState(false);
+
+  const [notes, setNotes] = useState('');
+  const [amount, setAmount] = useState(1);
+
+  const modalContext = useContext(ModalContext);
+  return (
+    <div className={'space-y-2 pt-4'}>
+      <div className={'text-2xl font-bold'}>
+        <strong>{cocktailName}</strong> hinzufügen
+      </div>
+      <div className={'flex'}>
+        <div className={'join'}>
+          <label className="input join-item input-bordered flex flex-1 items-center gap-2">
+            <strong>Anzahl</strong>
+            <input
+              type="number"
+              className={'grow'}
+              value={amount}
+              min={1}
+              onChange={(e) => {
+                setAmount(parseInt(e.target.value));
+              }}
+            />
+          </label>
+          <button
+            className={'btn btn-outline btn-primary join-item'}
+            onClick={() => {
+              setAmount(amount + 1);
+            }}
+          >
+            <FaPlus />
+          </button>
+          <button
+            className={'btn btn-outline btn-secondary join-item'}
+            disabled={amount <= 1}
+            onClick={() => {
+              if (amount > 1) {
+                setAmount(amount - 1);
+              }
+            }}
+          >
+            <FaMinus />
+          </button>
+        </div>
+      </div>
+      <textarea className={'textarea textarea-bordered w-full'} value={notes} onChange={(e) => setNotes(e.target.value)} placeholder={'Notiz'}></textarea>
+      <button
+        className={'btn btn-outline btn-primary w-full flex-1'}
+        onClick={() =>
+          addCocktailToQueue({
+            workspaceId: workspaceId,
+            cocktailId: cocktailId,
+            notes: notes,
+            amount: amount,
+            setSubmitting: setSubmittingQueue,
+            onSuccess: () => {
+              modalContext.closeModal();
+              setNotes('');
+            },
+          })
+        }
+        disabled={submittingQueue}
+      >
+        <MdPlaylistAdd />
+        Hinzufügen
+        {submittingQueue ? <span className={'loading loading-spinner'}></span> : <></>}
+      </button>
+    </div>
+  );
+}