76 lines
3.4 KiB
TypeScript
76 lines
3.4 KiB
TypeScript
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 { MealGroup } from "../../../types";
|
||
import { formatDateString } from "../Utils";
|
||
import MealGroupForm from "./MealGroupForm";
|
||
import MealGroupDays from "./MealGroupDays";
|
||
|
||
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,
|
||
* a dny, kdy se jídlo jedlo, jako odkazy na přehled dne.
|
||
*/
|
||
const MealGroupRow = ({ group, expanded, onToggle, onFilled }: Readonly<Props>) => {
|
||
const [daysOpen, setDaysOpen] = useState(false);
|
||
return (
|
||
<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>
|
||
<div className="meal-group-actions">
|
||
{!expanded && (
|
||
<Button
|
||
variant="outline-secondary"
|
||
size="sm"
|
||
active={daysOpen}
|
||
onClick={() => setDaysOpen(open => !open)}
|
||
>
|
||
<FontAwesomeIcon icon={faCalendarDays} /> Dny
|
||
</Button>
|
||
)}
|
||
<Button variant={expanded ? 'outline-secondary' : 'primary'} size="sm" onClick={() => onToggle()}>
|
||
<FontAwesomeIcon icon={faPenToSquare} /> {expanded ? 'Zavřít' : 'Doplnit'}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
{(expanded || daysOpen) && <MealGroupDays days={group.days} />}
|
||
{expanded && <MealGroupForm group={group} onFilled={onFilled} onCancel={() => onToggle()} />}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default MealGroupRow;
|