@wger-project/react-components 25.10.16

package/src/components/Nutrition/widgets/Fab.tsx

@@ -0,0 +1,65 @@
+import AddIcon from "@mui/icons-material/Add";
+import HistoryEduIcon from '@mui/icons-material/HistoryEdu';
+import { Fab } from "@mui/material";
+import { WgerModal } from "components/Core/Modals/WgerModal";
+import { NutritionalPlan } from "components/Nutrition/models/nutritionalPlan";
+import { NutritionDiaryEntryForm } from "components/Nutrition/widgets/forms/NutritionDiaryEntryForm";
+import { PlanForm } from "components/Nutrition/widgets/forms/PlanForm";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+export const AddNutritionalPlanFab = () => {
+    const [t] = useTranslation();
+    const [openModal, setOpenModal] = React.useState(false);
+    const handleOpenModal = () => setOpenModal(true);
+    const handleCloseModal = () => setOpenModal(false);
+
+
+    return (
+        <div>
+            <Fab
+                color="secondary"
+                aria-label="add"
+                onClick={handleOpenModal}
+                sx={{
+                    position: 'fixed',
+                    bottom: '5rem',
+                    right: (theme) => `max(${theme.spacing(2)}, calc((100vw - ${theme.breakpoints.values.lg}px) / 2 + ${theme.spacing(2)}))`,
+                    zIndex: 9,
+                }}>
+                <AddIcon />
+            </Fab>
+            <WgerModal title={t('add')} isOpen={openModal} closeFn={handleCloseModal}>
+                <PlanForm closeFn={handleCloseModal} />
+            </WgerModal>
+        </div>
+    );
+};
+
+export const AddNutritionDiaryEntryFab = (props: { plan: NutritionalPlan }) => {
+    const [t] = useTranslation();
+    const [openModal, setOpenModal] = React.useState(false);
+    const handleOpenModal = () => setOpenModal(true);
+    const handleCloseModal = () => setOpenModal(false);
+
+
+    return (
+        <div>
+            <Fab
+                color="secondary"
+                aria-label="add"
+                onClick={handleOpenModal}
+                sx={{
+                    position: 'fixed',
+                    bottom: '5rem',
+                    right: (theme) => `max(${theme.spacing(2)}, calc((100vw - ${theme.breakpoints.values.lg}px) / 2 + ${theme.spacing(2)}))`,
+                    zIndex: 9,
+                }}>
+                <HistoryEduIcon />
+            </Fab>
+            <WgerModal title={t('nutrition.addNutritionalDiary')} isOpen={openModal} closeFn={handleCloseModal}>
+                <NutritionDiaryEntryForm closeFn={handleCloseModal} planId={props.plan.id!} meals={props.plan.meals} />
+            </WgerModal>
+        </div>
+    );
+};

package/src/components/Nutrition/widgets/IngredientAutcompleter.tsx

@@ -0,0 +1,140 @@
+import PhotoIcon from "@mui/icons-material/Photo";
+import SearchIcon from "@mui/icons-material/Search";
+import {
+    Autocomplete,
+    Avatar,
+    FormControlLabel,
+    FormGroup,
+    InputAdornment,
+    ListItem,
+    ListItemIcon,
+    ListItemText,
+    Stack,
+    Switch,
+    TextField,
+} from "@mui/material";
+import { Ingredient } from "components/Nutrition/models/Ingredient";
+import debounce from "lodash/debounce";
+import * as React from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from "react-i18next";
+import { searchIngredient } from "services";
+import { LANGUAGE_SHORT_ENGLISH } from "utils/consts";
+
+type IngredientAutocompleterProps = {
+    callback: () => void;
+    initialIngredient?: Ingredient | null;
+};
+
+export function IngredientAutocompleter({ callback, initialIngredient }: IngredientAutocompleterProps) {
+    const initialData = initialIngredient ?? null;
+
+    const [searchEnglish, setSearchEnglish] = useState<boolean>(true);
+    const [value, setValue] = useState<Ingredient | null>(initialData);
+    const [inputValue, setInputValue] = useState("");
+    const [options, setOptions] = useState<readonly Ingredient[]>([]);
+    const [t, i18n] = useTranslation();
+
+    const fetchName = useMemo(
+        () =>
+            debounce(
+                (request: string) =>
+                    searchIngredient(request, i18n.language, searchEnglish).then((res) => setOptions(res)),
+                200
+            ),
+        [i18n.language, searchEnglish]
+    );
+
+    useEffect(() => {
+        if (inputValue === "") {
+            setOptions(value ? [value] : []);
+            return undefined;
+        }
+
+        fetchName(inputValue);
+
+        return () => {
+            fetchName.cancel();
+        };
+    }, [value, inputValue, fetchName]);
+
+    return (
+        <Stack>
+            <Autocomplete
+                id="ingredient-autocomplete"
+                getOptionLabel={(option) => option.name}
+                data-testid="autocomplete"
+                filterOptions={(x) => x}
+                options={options}
+                autoComplete
+                includeInputInList
+                filterSelectedOptions
+                value={value}
+                noOptionsText={t("noResults")}
+                isOptionEqualToValue={(option, value) => option.id === value.id}
+                onChange={(event: unknown, newValue: Ingredient | null) => {
+                    setOptions(newValue ? [newValue, ...options] : options);
+                    setValue(newValue);
+                    callback(newValue);
+                }}
+                onInputChange={(event, newInputValue) => {
+                    setInputValue(newInputValue);
+                }}
+                renderInput={(params) => (
+                    <TextField
+                        {...params}
+                        label={t("nutrition.searchIngredientName")}
+                        fullWidth
+                        slotProps={{
+                            input: {
+                                ...params.InputProps,
+                                startAdornment: (
+                                    <>
+                                        <InputAdornment position="start">
+                                            <SearchIcon />
+                                        </InputAdornment>
+                                        {params.InputProps.startAdornment}
+                                    </>
+                                ),
+                            },
+                        }}
+                    />
+                )}
+                renderOption={(props, ingredient) => {
+                    return (
+                        <li {...props} key={`ingredient-${ingredient.id}`}>
+                            <ListItem disablePadding component="div">
+                                <ListItemIcon>
+                                    <Avatar alt="" src={ingredient.thumbnails?.medium ?? ''}
+                                            variant="rounded">
+                                        <PhotoIcon />
+                                    </Avatar>
+                                </ListItemIcon>
+                                <ListItemText
+                                    primary={ingredient.name}
+                                    slotProps={{
+                                        primary: {
+                                            whiteSpace: "nowrap",
+                                            overflow: "hidden",
+                                            textOverflow: "ellipsis",
+                                        },
+                                    }}
+                                />
+                            </ListItem>
+                        </li>
+                    );
+                }}
+            />
+            {i18n.language !== LANGUAGE_SHORT_ENGLISH && (
+                <FormGroup>
+                    <FormControlLabel
+                        control={
+                            <Switch checked={searchEnglish} onChange={(event, checked) => setSearchEnglish(checked)} />
+                        }
+                        label={t("alsoSearchEnglish")}
+                    />
+                </FormGroup>
+            )}
+        </Stack>
+    );
+}

package/src/components/Nutrition/widgets/IngredientAutocompleter.test.tsx

@@ -0,0 +1,60 @@
+import { act, render, screen, within } from '@testing-library/react';
+import userEvent from "@testing-library/user-event";
+import { IngredientAutocompleter } from 'components/Nutrition/widgets/IngredientAutcompleter';
+import { searchIngredient } from 'services';
+import { TEST_INGREDIENT_1, TEST_INGREDIENT_2 } from "tests/ingredientTestdata";
+
+jest.mock("services");
+
+describe("Test the IngredientAutocompleter component", () => {
+
+    // Arrange
+    const mockCallback = jest.fn();
+    beforeEach(() => {
+        (searchIngredient as jest.Mock).mockImplementation(() => Promise.resolve([TEST_INGREDIENT_1, TEST_INGREDIENT_2]));
+    });
+
+    test('renders correct results', async () => {
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(<IngredientAutocompleter callback={mockCallback} />);
+        const autocomplete = screen.getByTestId('autocomplete');
+        const input = within(autocomplete).getByRole('combobox');
+        await user.click(autocomplete);
+        await user.type(input, 'Bag');
+
+        // There's a bounce period of 200ms between the input and the search
+        await act(async () => {
+            await new Promise((r) => setTimeout(r, 250));
+        });
+        expect(searchIngredient).toHaveBeenCalled();
+        expect(screen.getByText('0% fat Greek style yogurt')).toBeInTheDocument();
+        expect(screen.getByText('1001 Nacht Haferbrei')).toBeInTheDocument();
+    });
+
+    test('callback was correctly called', async () => {
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(<IngredientAutocompleter callback={mockCallback} />);
+        const autocomplete = screen.getByTestId('autocomplete');
+        const input = within(autocomplete).getByRole('combobox');
+        await user.click(autocomplete);
+        await user.type(input, 'Cru');
+
+        // There's a bounce period of 200ms between the input and the search
+        await act(async () => {
+            await new Promise((r) => setTimeout(r, 250));
+        });
+
+        // Select the first result
+        await user.click(input);
+        await user.keyboard('{ArrowDown}{Enter}');
+
+        // Assert
+        expect(mockCallback).toHaveBeenLastCalledWith(TEST_INGREDIENT_1);
+    });
+});

package/src/components/Nutrition/widgets/IngredientDetailTable.tsx

@@ -0,0 +1,91 @@
+import PhotoIcon from "@mui/icons-material/Photo";
+import { Avatar, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
+import { NutritionalValues } from "components/Nutrition/helpers/nutritionalValues";
+import { DiaryEntry } from "components/Nutrition/models/diaryEntry";
+import { MealItem } from "components/Nutrition/models/mealItem";
+import { useTranslation } from "react-i18next";
+import { numberGramLocale, numberLocale } from "utils/numbers";
+
+const IngredientTableRow = (props: { item: MealItem | DiaryEntry }) => {
+    const [t, i18n] = useTranslation();
+
+    return <TableRow key={props.item.id}>
+        <TableCell sx={{ paddingX: 1 }}>
+            <Avatar
+                alt={props.item.ingredient?.name}
+                src={props.item.ingredient?.image?.url}
+                sx={{ width: 45, height: 45 }}
+            >
+                <PhotoIcon />
+            </Avatar>
+
+        </TableCell>
+        <TableCell sx={{ paddingX: 1 }}>
+            {props.item.amountString} {props.item.ingredient?.name}
+        </TableCell>
+        <TableCell align={'right'} sx={{ paddingX: 1 }}>
+            {t('nutrition.valueEnergyKcalKj', {
+                kcal: numberLocale(props.item.nutritionalValues.energy, i18n.language),
+                kj: numberLocale(props.item.nutritionalValues.energyKj, i18n.language)
+            })}
+        </TableCell>
+        <TableCell align="right" sx={{ paddingX: 1 }}>
+            {numberGramLocale(props.item.nutritionalValues.protein, i18n.language)}
+        </TableCell>
+        <TableCell align="right" sx={{ paddingX: 1 }}>
+            {numberGramLocale(props.item.nutritionalValues.carbohydrates, i18n.language)}
+        </TableCell>
+        <TableCell align="right" sx={{ paddingX: 1 }}>
+            {numberGramLocale(props.item.nutritionalValues.fat, i18n.language)}
+        </TableCell>
+    </TableRow>;
+};
+
+export const IngredientDetailTable = (props: {
+    items: MealItem[] | DiaryEntry[],
+    values: NutritionalValues,
+    showSum: boolean
+}) => {
+    const [t, i18n] = useTranslation();
+
+    return <TableContainer>
+        <Table>
+            <TableHead>
+                <TableRow>
+                    <TableCell></TableCell>
+                    <TableCell></TableCell>
+                    <TableCell align={'right'} sx={{ paddingX: 1 }}>{t('nutrition.energy')}</TableCell>
+                    <TableCell align={'right'} sx={{ paddingX: 1 }}>{t('nutrition.protein')}</TableCell>
+                    <TableCell align={'right'} sx={{ paddingX: 1 }}>{t('nutrition.carbohydrates')}</TableCell>
+                    <TableCell align={'right'} sx={{ paddingX: 1 }}>{t('nutrition.fat')}</TableCell>
+                </TableRow>
+            </TableHead>
+            <TableBody>
+                {props.items.map((item) => (
+                    <IngredientTableRow item={item} key={item.id} />
+                ))}
+                {props.showSum && <TableRow>
+                    <TableCell sx={{ paddingX: 1 }}> </TableCell>
+                    <TableCell sx={{ paddingX: 1 }}>
+                        {t('total')}
+                    </TableCell>
+                    <TableCell align={'right'} sx={{ paddingX: 1 }}>
+                        {t('nutrition.valueEnergyKcalKj', {
+                            kcal: numberLocale(props.values.energy, i18n.language),
+                            kj: numberLocale(props.values.energyKj, i18n.language)
+                        })}
+                    </TableCell>
+                    <TableCell align={'right'} sx={{ paddingX: 1 }}>
+                        {numberGramLocale(props.values.protein, i18n.language)}
+                    </TableCell>
+                    <TableCell align={'right'} sx={{ paddingX: 1 }}>
+                        {numberGramLocale(props.values.carbohydrates, i18n.language)}
+                    </TableCell>
+                    <TableCell align={'right'} sx={{ paddingX: 1 }}>
+                        {numberGramLocale(props.values.fat, i18n.language)}
+                    </TableCell>
+                </TableRow>}
+            </TableBody>
+        </Table>
+    </TableContainer>;
+};

package/src/components/Nutrition/widgets/LoggedPlannedNutritionalValuesTable.tsx

@@ -0,0 +1,138 @@
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
+import { NutritionalValues } from "components/Nutrition/helpers/nutritionalValues";
+import { useTranslation } from "react-i18next";
+import { numberGramLocale, numberLocale } from "utils/numbers";
+
+export const LoggedPlannedNutritionalValuesTable = (props: {
+    planned: NutritionalValues,
+    logged: NutritionalValues
+}) => {
+    const [t, i18n] = useTranslation();
+
+    return <TableContainer>
+        <Table size="small">
+            <TableHead>
+                <TableRow>
+                    <TableCell>{t('nutrition.macronutrient')}</TableCell>
+                    <TableCell align="right">{t('nutrition.planned')}</TableCell>
+                    <TableCell align="right">{t('nutrition.logged')}</TableCell>
+                    <TableCell align="right">{t('nutrition.difference')}</TableCell>
+                </TableRow>
+            </TableHead>
+            <TableBody>
+                <TableRow>
+                    <TableCell>{t('nutrition.energy')}</TableCell>
+                    <TableCell align="right">
+                        {t('nutrition.valueEnergyKcalKj', {
+                            kcal: numberLocale(props.planned.energy, i18n.language),
+                            kj: numberLocale(props.planned.energyKj, i18n.language)
+                        })}
+                    </TableCell>
+                    <TableCell align="right">
+                        {t('nutrition.valueEnergyKcalKj', {
+                            kcal: numberLocale(props.logged.energy, i18n.language),
+                            kj: numberLocale(props.logged.energyKj, i18n.language)
+                        })}
+                    </TableCell>
+                    <TableCell align="right">
+                        {t('nutrition.valueEnergyKcalKj', {
+                            kcal: numberLocale(props.logged.energy - props.planned.energy, i18n.language),
+                            kj: numberLocale(props.logged.energyKj - props.planned.energyKj, i18n.language)
+                        })}
+                    </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>{t('nutrition.protein')}</TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.planned.protein, i18n.language)}
+                    </TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.logged.protein, i18n.language)}
+                    </TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.logged.protein - props.planned.protein, i18n.language)}
+                    </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>{t('nutrition.carbohydrates')}</TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.planned.carbohydrates, i18n.language)}
+                    </TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.logged.carbohydrates, i18n.language)}
+                    </TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.logged.carbohydrates - props.planned.carbohydrates, i18n.language)}
+                    </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell sx={{ pl: 5 }}>{t('nutrition.ofWhichSugars')}</TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.planned.carbohydratesSugar, i18n.language)}
+                    </TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.logged.carbohydratesSugar, i18n.language)}
+                    </TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.logged.carbohydratesSugar - props.planned.carbohydratesSugar, i18n.language)}
+                    </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>{t('nutrition.fat')}</TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.planned.fat, i18n.language)}
+                    </TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.logged.fat, i18n.language)}
+                    </TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.logged.fat - props.planned.fat, i18n.language)}
+                    </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell sx={{ paddingLeft: 5 }}>{t('nutrition.ofWhichSaturated')}</TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.planned.fatSaturated, i18n.language)}
+                    </TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.logged.fatSaturated, i18n.language)}
+                    </TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.logged.fatSaturated - props.planned.fatSaturated, i18n.language)}
+                    </TableCell>
+                </TableRow>
+
+                <TableRow>
+                    <TableCell>{t('nutrition.others')}</TableCell>
+                    <TableCell></TableCell>
+                    <TableCell></TableCell>
+                    <TableCell></TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>{t('nutrition.fibres')}</TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.planned.fiber, i18n.language)}
+                    </TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.logged.fiber, i18n.language)}
+                    </TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.logged.fiber - props.planned.fiber, i18n.language)}
+                    </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>{t('nutrition.sodium')}</TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.planned.sodium, i18n.language)}
+                    </TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.logged.sodium, i18n.language)}
+                    </TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.logged.sodium - props.planned.sodium, i18n.language)}
+                    </TableCell>
+                </TableRow>
+            </TableBody>
+        </Table>
+    </TableContainer>;
+};

package/src/components/Nutrition/widgets/MealDetail.tsx

@@ -0,0 +1,170 @@
+import { Add } from "@mui/icons-material";
+import HistoryEduIcon from "@mui/icons-material/HistoryEdu";
+import PhotoIcon from "@mui/icons-material/Photo";
+import {
+    Avatar,
+    Card,
+    CardActions,
+    CardContent,
+    CardHeader,
+    Collapse,
+    IconButton,
+    List,
+    ListItem,
+    ListItemAvatar,
+    ListItemText,
+    Typography,
+    useTheme
+} from "@mui/material";
+import Tooltip from "@mui/material/Tooltip";
+import { Meal } from "components/Nutrition/models/meal";
+import { MealItem } from "components/Nutrition/models/mealItem";
+import {
+    NutritionalValuesPlannedLoggedChart
+} from "components/Nutrition/widgets/charts/NutritionalValuesPlannedLoggedChart";
+import { MealItemForm } from "components/Nutrition/widgets/forms/MealItemForm";
+import { NutritionDiaryEntryForm } from "components/Nutrition/widgets/forms/NutritionDiaryEntryForm";
+import { IngredientDetailTable } from "components/Nutrition/widgets/IngredientDetailTable";
+import { MealDetailDropdown } from "components/Nutrition/widgets/MealDetailDropdown";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+const MealItemListItem = (props: { mealItem: MealItem, planId: number, mealId: number }) => {
+    const [expandForm, setExpandForm] = useState(false);
+    const handleToggleForm = () => setExpandForm(!expandForm);
+
+
+    return <>
+        <ListItem>
+            <ListItemAvatar onClick={handleToggleForm} sx={{ '&:hover': { cursor: 'pointer' } }}>
+                <Avatar
+                    alt={props.mealItem.ingredient?.name}
+                    src={props.mealItem.ingredient?.image?.url}
+                    sx={{ width: 45, height: 45 }}
+                >
+                    <PhotoIcon />
+                </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary={`${props.mealItem.amountString} ${props.mealItem.ingredient?.name}`} />
+
+        </ListItem>
+        <Collapse in={expandForm} timeout="auto" unmountOnExit sx={{ width: '100%' }}>
+            <ListItem>
+                <ListItemText>
+                    <MealItemForm
+                        planId={props.planId}
+                        mealId={props.mealId}
+                        item={props.mealItem}
+                        closeFn={handleToggleForm}
+                    />
+                </ListItemText>
+            </ListItem>
+        </Collapse>
+    </>;
+};
+
+export const MealDetail = (props: { meal: Meal, planId: number, onlyLogging: boolean }) => {
+    const theme = useTheme();
+    const [t] = useTranslation();
+    const [expandViewStats, setExpandViewStats] = useState(false);
+    const handleToggleExpandStats = () => setExpandViewStats(!expandViewStats);
+
+    const [expandItemForm, setExpandItemForm] = useState(false);
+    const handleToggleExpandItemForm = () => {
+        setExpandItemForm(!expandItemForm);
+        setExpandDiaryForm(false);
+    };
+
+    const [expandDiaryForm, setExpandDiaryForm] = useState(false);
+    const handleToggleExpandDiaryForm = () => {
+        setExpandDiaryForm(!expandDiaryForm);
+        setExpandItemForm(false);
+    };
+
+    return <Card>
+        <CardHeader
+            sx={{ bgcolor: theme.palette.grey["300"] }}
+            action={<MealDetailDropdown
+                meal={props.meal}
+                planId={props.planId}
+                onlyLogging={props.onlyLogging}
+                isExpanded={expandViewStats}
+                handleExpanded={handleToggleExpandStats}
+            />}
+            title={props.meal.name}
+            subheader={props.meal.timeHHMMLocale}
+        />
+        <CardContent sx={{ paddingY: 0 }}>
+            <Collapse in={expandViewStats} timeout="auto" unmountOnExit>
+                {!props.onlyLogging && <IngredientDetailTable
+                    showSum={props.meal.isRealMeal}
+                    items={props.meal.items}
+                    values={props.meal.plannedNutritionalValues}
+                />}
+
+                <Typography gutterBottom variant="h6" sx={{ my: 2 }}>
+                    {t('nutrition.loggedToday')}
+                </Typography>
+
+                {!props.meal.plannedNutritionalValues.isEmpty &&
+                    <NutritionalValuesPlannedLoggedChart
+                        logged={props.meal.loggedNutritionalValuesToday}
+                        planned={props.meal.plannedNutritionalValues}
+                    />}
+
+                <IngredientDetailTable
+                    showSum={props.meal.isRealMeal}
+                    items={props.meal.diaryEntriesToday}
+                    values={props.meal.loggedNutritionalValuesToday}
+                />
+
+            </Collapse>
+
+            {!expandViewStats &&
+                <List>
+                    {props.meal.items.map((item) => (
+                        <MealItemListItem
+                            mealItem={item}
+                            planId={props.planId}
+                            mealId={props.meal.id!}
+                            key={item.id}
+                        />
+                    ))}
+                </List>}
+
+        </CardContent>
+        <CardActions>
+            {!props.onlyLogging && <Tooltip title={t('nutrition.addMealItem')}>
+                <IconButton onClick={handleToggleExpandItemForm}>
+                    <Add />
+                </IconButton>
+            </Tooltip>}
+
+            <Tooltip title={t('nutrition.addNutritionalDiary')}>
+                <IconButton onClick={handleToggleExpandDiaryForm}>
+                    <HistoryEduIcon />
+                </IconButton>
+            </Tooltip>
+        </CardActions>
+
+        <Collapse in={expandItemForm} timeout="auto" unmountOnExit>
+            <CardContent sx={{ paddingY: 0 }}>
+                <p><b>{t('nutrition.addMealItem')}</b></p>
+                <MealItemForm
+                    planId={props.planId}
+                    mealId={props.meal.id!}
+                    closeFn={handleToggleExpandItemForm} />
+            </CardContent>
+        </Collapse>
+        <Collapse in={expandDiaryForm} timeout="auto" unmountOnExit>
+            <CardContent sx={{ paddingY: 0 }}>
+                <p><b>{t('nutrition.addNutritionalDiary')}</b></p>
+                <NutritionDiaryEntryForm
+                    closeFn={handleToggleExpandDiaryForm}
+                    planId={props.planId}
+                    mealId={props.meal.isRealMeal ? props.meal.id : null} />
+            </CardContent>
+        </Collapse>
+
+    </Card>;
+};