fix: graf cena per zdroj nahrazen koláčem

feat: stránka doplnit údaje předělána na samostatnou stránku jídel + přidáno přejmenování

client/src/components/MealGroupRow.tsx

@@ -1,17 +1,23 @@
 import { useState } from "react";
 import { Button } from "react-bootstrap";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCalendarDays, faPenToSquare } from "@fortawesome/free-solid-svg-icons";
+import { faCalendarDays, faPen, faPenToSquare } from "@fortawesome/free-solid-svg-icons";
 import { MealGroup } from "../../../types";
+import { MealGroupAction } from "../enums";
 import { formatDateString } from "../Utils";
 import MealGroupForm from "./MealGroupForm";
+import MealGroupRenameForm from "./MealGroupRenameForm";
 import MealGroupDays from "./MealGroupDays";
 
 type Props = {
     group: MealGroup,
-    expanded: boolean,
-    onToggle: () => void,
-    onFilled: () => void,
+    /** Všechny skupiny — přejmenování podle nich pozná sloučení s jinou. */
+    groupList: MealGroup[],
+    /** Rozbalená akce; nejvýš jeden řádek seznamu má nějakou otevřenou. */
+    action?: MealGroupAction,
+    onAction: (action?: MealGroupAction) => void,
+    /** Zavolá se po doplnění nebo přejmenování, aby se seznam načetl znovu. */
+    onChanged: () => void,
 };
 
 /** Kolik jídel skupiny daný údaj nemá — "u všech", nebo "3 z 5". */
@@ -20,11 +26,12 @@ const describeMissing = (missing: number, count: number): string =>
 
 /**
  * Řádek skupiny jídel (stejný název a zdroj) s přehledem chybějících údajů.
- * Po rozbalení nabídne formulář, kterým se údaje doplní všem jídlům skupiny,
- * a dny, kdy se jídlo jedlo, jako odkazy na přehled dne.
+ * Nabízí doplnění údajů a změnu názvu a zdroje všem jídlům skupiny a dny,
+ * kdy se jídlo jedlo, jako odkazy na přehled dne.
  */
-const MealGroupRow = ({ group, expanded, onToggle, onFilled }: Readonly<Props>) => {
+const MealGroupRow = ({ group, groupList, action, onAction, onChanged }: Readonly<Props>) => {
     const [daysOpen, setDaysOpen] = useState(false);
+    const toggle = (value: MealGroupAction) => onAction(action === value ? undefined : value);
     return (
         <div className="card-panel meal-group">
             <div className="meal-group-head">
@@ -51,7 +58,7 @@ const MealGroupRow = ({ group, expanded, onToggle, onFilled }: Readonly<Props>)
                     </div>
                 </div>
                 <div className="meal-group-actions">
-                    {!expanded && (
+                    {!action && (
                         <Button
                             variant="outline-secondary"
                             size="sm"
@@ -61,13 +68,36 @@ const MealGroupRow = ({ group, expanded, onToggle, onFilled }: Readonly<Props>)
                             <FontAwesomeIcon icon={faCalendarDays} /> Dny
                         </Button>
                     )}
-                    <Button variant={expanded ? 'outline-secondary' : 'primary'} size="sm" onClick={() => onToggle()}>
-                        <FontAwesomeIcon icon={faPenToSquare} /> {expanded ? 'Zavřít' : 'Doplnit'}
+                    <Button
+                        variant="outline-secondary"
+                        size="sm"
+                        active={action === MealGroupAction.PREJMENOVAT}
+                        title="Změnit název a zdroj u všech jídel skupiny"
+                        onClick={() => toggle(MealGroupAction.PREJMENOVAT)}
+                    >
+                        <FontAwesomeIcon icon={faPen} /> Přejmenovat
+                    </Button>
+                    <Button
+                        variant={action === MealGroupAction.DOPLNIT ? 'outline-secondary' : 'primary'}
+                        size="sm"
+                        onClick={() => toggle(MealGroupAction.DOPLNIT)}
+                    >
+                        <FontAwesomeIcon icon={faPenToSquare} /> {action === MealGroupAction.DOPLNIT ? 'Zavřít' : 'Doplnit'}
                     </Button>
                 </div>
             </div>
-            {(expanded || daysOpen) && <MealGroupDays days={group.days} />}
-            {expanded && <MealGroupForm group={group} onFilled={onFilled} onCancel={() => onToggle()} />}
+            {(action === MealGroupAction.DOPLNIT || (!action && daysOpen)) && <MealGroupDays days={group.days} />}
+            {action === MealGroupAction.DOPLNIT && (
+                <MealGroupForm group={group} onFilled={onChanged} onCancel={() => onAction(undefined)} />
+            )}
+            {action === MealGroupAction.PREJMENOVAT && (
+                <MealGroupRenameForm
+                    group={group}
+                    groupList={groupList}
+                    onRenamed={onChanged}
+                    onCancel={() => onAction(undefined)}
+                />
+            )}
         </div>
     );
 };