feat: hromadné editace

2026-10-08 15:03:23 +02:00
1 parent 8fa7f601f2
commit bc85a37fc0
@@ -0,0 +1,56 @@
+import { Button } from "react-bootstrap";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPenToSquare } from "@fortawesome/free-solid-svg-icons";
+import { MealGroup } from "../../../types";
+import { formatDateString } from "../Utils";
+import MealGroupForm from "./MealGroupForm";
+
+type Props = {
+    group: MealGroup,
+    expanded: boolean,
+    onToggle: () => void,
+    onFilled: () => void,
+};
+
+/** Kolik jídel skupiny daný údaj nemá — "u všech", nebo "3 z 5". */
+const describeMissing = (missing: number, count: number): string =>
+    missing === count ? 'u všech' : `${missing} z ${count}`;
+
+/**
+ * Řá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.
+ */
+const MealGroupRow = ({ group, expanded, onToggle, onFilled }: Readonly<Props>) => (
+    <div className="card-panel meal-group">
+        <div className="meal-group-head">
+            <div className="meal-group-info">
+                <div className="meal-group-name">{group.name}</div>
+                <div className="meal-meta">
+                    {group.source && <span className="tag">{group.source}</span>}
+                    <span className="tag">{group.count}× · naposledy {formatDateString(group.lastDate)}</span>
+                    {group.missingCaloriesCount > 0 && (
+                        <span className="tag tag-missing">
+                            bez kalorií {describeMissing(group.missingCaloriesCount, group.count)}
+                        </span>
+                    )}
+                    {group.missingWeightCount > 0 && (
+                        <span className="tag tag-missing">
+                            bez gramáže {describeMissing(group.missingWeightCount, group.count)}
+                        </span>
+                    )}
+                    {group.missingNutrientsCount > 0 && (
+                        <span className="tag tag-missing">
+                            bez živin {describeMissing(group.missingNutrientsCount, group.count)}
+                        </span>
+                    )}
+                </div>
+            </div>
+            <Button variant={expanded ? 'outline-secondary' : 'primary'} size="sm" onClick={() => onToggle()}>
+                <FontAwesomeIcon icon={faPenToSquare} /> {expanded ? 'Zavřít' : 'Doplnit'}
+            </Button>
+        </div>
+        {expanded && <MealGroupForm group={group} onFilled={onFilled} onCancel={() => onToggle()} />}
+    </div>
+);
+
+export default MealGroupRow;