@wger-project/react-components 25.10.16

package/src/components/WorkoutRoutines/widgets/LogWidgets.test.tsx

@@ -0,0 +1,91 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from "@testing-library/user-event";
+import { useDeleteRoutineLogQuery, useEditRoutineLogQuery } from 'components/WorkoutRoutines/queries';
+import { ExerciseLog } from "components/WorkoutRoutines/widgets/LogWidgets";
+import { testExerciseBenchPress } from "tests/exerciseTestdata";
+import { testWorkoutLogs } from "tests/workoutLogsRoutinesTestData";
+
+
+const { ResizeObserver } = window;
+
+jest.mock('components/WorkoutRoutines/queries', () => ({
+    useDeleteRoutineLogQuery: jest.fn(),
+    useEditRoutineLogQuery: jest.fn()
+}));
+
+describe('ExerciseLog', () => {
+    let mockDeleteMutate: jest.Mock;
+    let mockEditMutate: jest.Mock;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+
+        mockDeleteMutate = jest.fn();
+        mockEditMutate = jest.fn();
+
+        // @ts-ignore
+        delete window.ResizeObserver;
+        window.ResizeObserver = jest.fn().mockImplementation(() => ({
+            observe: jest.fn(),
+            unobserve: jest.fn(),
+            disconnect: jest.fn()
+        }));
+
+        (useDeleteRoutineLogQuery as jest.Mock).mockReturnValue({ mutate: mockDeleteMutate });
+        (useEditRoutineLogQuery as jest.Mock).mockReturnValue({ mutate: mockEditMutate });
+    });
+
+    afterEach(() => {
+        window.ResizeObserver = ResizeObserver;
+        jest.restoreAllMocks();
+    });
+    const mockRoutineId = 123;
+    const user = userEvent.setup();
+
+
+    test('renders the DataGrid table correctly', () => {
+        render(
+            <ExerciseLog
+                exercise={testExerciseBenchPress}
+                routineId={mockRoutineId}
+                logEntries={testWorkoutLogs}
+            />
+        );
+
+        expect(screen.getByRole('grid')).toBeInTheDocument();
+        expect(screen.getByText('Benchpress')).toBeInTheDocument();
+        expect(mockDeleteMutate).not.toHaveBeenCalled();
+        expect(mockEditMutate).not.toHaveBeenCalled();
+    });
+
+    test('calls deleteLogQuery when DeleteIcon is clicked', async () => {
+        render(
+            <ExerciseLog
+                exercise={testExerciseBenchPress}
+                routineId={mockRoutineId}
+                logEntries={testWorkoutLogs}
+            />
+        );
+
+        await user.click(screen.getAllByRole('menuitem', { name: /delete/i })[0]);
+        expect(mockDeleteMutate).toHaveBeenCalledWith(5);
+        expect(mockEditMutate).not.toHaveBeenCalled();
+
+    });
+
+    test('calls editLogQuery when SaveIcon is clicked', async () => {
+        render(
+            <ExerciseLog
+                exercise={testExerciseBenchPress}
+                routineId={mockRoutineId}
+                logEntries={testWorkoutLogs}
+            />
+        );
+
+        await user.click(screen.getAllByRole('menuitem', { name: /edit/i })[0]);
+        await user.click(screen.getAllByRole('menuitem', { name: /save/i })[0]);
+
+        expect(mockDeleteMutate).not.toHaveBeenCalled();
+        expect(mockEditMutate).toHaveBeenCalled();
+    });
+});

package/src/components/WorkoutRoutines/widgets/LogWidgets.tsx

@@ -0,0 +1,334 @@
+import CancelIcon from "@mui/icons-material/Cancel";
+import DeleteIcon from "@mui/icons-material/DeleteOutlined";
+import EditIcon from "@mui/icons-material/Edit";
+import SaveIcon from "@mui/icons-material/Save";
+import { Box, Card, CardContent, Typography } from '@mui/material';
+import Grid from "@mui/material/Grid";
+import {
+    DataGrid,
+    GridActionsCellItem,
+    GridColDef,
+    GridEventListener,
+    GridRowEditStopReasons,
+    GridRowId,
+    GridRowModel,
+    GridRowModes,
+    GridRowModesModel,
+    GridRowsProp
+} from "@mui/x-data-grid";
+import { FormQueryErrors } from "components/Core/Widgets/FormError";
+import { Exercise } from "components/Exercises/models/exercise";
+import { RIR_VALUES_SELECT_LIST } from "components/WorkoutRoutines/models/BaseConfig";
+import { WorkoutLog } from "components/WorkoutRoutines/models/WorkoutLog";
+import { useDeleteRoutineLogQuery, useEditRoutineLogQuery } from "components/WorkoutRoutines/queries";
+import { DateTime } from "luxon";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import {
+    CartesianGrid,
+    Legend,
+    ResponsiveContainer,
+    Scatter,
+    ScatterChart,
+    Tooltip,
+    TooltipProps,
+    XAxis,
+    YAxis
+} from "recharts";
+import { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent";
+import { generateChartColors } from "utils/colors";
+import { PAGINATION_OPTIONS } from "utils/consts";
+import { dateToLocale, luxonDateTimeToLocale } from "utils/date";
+
+
+export const ExerciseLog = (props: { exercise: Exercise, routineId: number, logEntries: WorkoutLog[] | undefined }) => {
+    const { t } = useTranslation();
+    const logEntries = props.logEntries ?? [];
+    const deleteLogQuery = useDeleteRoutineLogQuery(props.routineId);
+    const editLogQuery = useEditRoutineLogQuery(props.routineId);
+
+    const initialRows: GridRowsProp = logEntries.map((logEntry: WorkoutLog) => ({
+        id: logEntry.id,
+        date: logEntry.date,
+        repetitions: logEntry.repetitions,
+        weight: logEntry.weight,
+        rir: logEntry.rir,
+        entry: logEntry
+    }));
+
+
+    const [rows, setRows] = React.useState(initialRows);
+    const [rowModesModel, setRowModesModel] = React.useState<GridRowModesModel>({});
+
+    const handleRowEditStop: GridEventListener<'rowEditStop'> = (params, event) => {
+        if (params.reason === GridRowEditStopReasons.rowFocusOut) {
+            event.defaultMuiPrevented = true;
+        }
+    };
+
+    const handleEditClick = (id: GridRowId) => () => {
+        setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } });
+    };
+
+    const handleSaveClick = (id: GridRowId) => () => {
+        setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } });
+    };
+
+    const handleDeleteClick = (id: GridRowId) => () => {
+        deleteLogQuery.mutate(id as number);
+        setRows(rows.filter((row) => row.id !== id));
+    };
+
+    const handleCancelClick = (id: GridRowId) => () => {
+        setRowModesModel({
+            ...rowModesModel,
+            [id]: { mode: GridRowModes.View, ignoreModifications: true },
+        });
+
+        const editedRow = rows.find((row) => row.id === id);
+        if (editedRow!.isNew) {
+            setRows(rows.filter((row) => row.id !== id));
+        }
+    };
+
+    const processRowUpdate = (newRow: GridRowModel) => {
+
+        const log = newRow.entry;
+        if (log !== undefined) {
+            log.date = newRow.date;
+            log.repetitions = newRow.repetitions;
+            log.weight = newRow.weight;
+            log.rir = newRow.rir;
+
+            editLogQuery.mutate(log);
+        }
+
+        const updatedRow = { ...newRow, isNew: false };
+        setRows(rows.map((row) => (row.id === newRow.id ? updatedRow : row)));
+        return updatedRow;
+    };
+
+    const handleRowModesModelChange = (newRowModesModel: GridRowModesModel) => {
+        setRowModesModel(newRowModesModel);
+    };
+
+    const columns: GridColDef[] = [
+        {
+            field: 'date',
+            type: 'dateTime',
+            flex: 1,
+            editable: true,
+            disableColumnMenu: true,
+            headerName: t('date'),
+            valueFormatter: (value?: Date) => {
+                if (value == null) {
+                    return '';
+                }
+                return `${dateToLocale(value)}`;
+            },
+        },
+        {
+            field: 'repetitions',
+            type: 'number',
+            disableColumnMenu: true,
+            editable: true,
+            headerName: t('routines.reps'),
+        },
+        {
+            field: 'weight',
+            type: 'number',
+            disableColumnMenu: true,
+            editable: true,
+            headerName: t('weight'),
+        },
+        {
+            field: 'rir',
+            type: 'singleSelect',
+            disableColumnMenu: true,
+
+            editable: true,
+            headerName: t('routines.rir'),
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            getOptionValue: (value: any) => value.value,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            getOptionLabel: (value: any) => value.label,
+            valueOptions: RIR_VALUES_SELECT_LIST,
+        },
+        {
+            field: 'actions',
+            type: 'actions',
+            headerName: 'Actions',
+            width: 100,
+            cellClassName: 'actions',
+            getActions: ({ id }) => {
+                const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit;
+
+                if (isInEditMode) {
+                    return [
+                        <GridActionsCellItem
+                            icon={<SaveIcon />}
+                            sx={{ color: 'primary.main' }}
+                            label={t('save')}
+                            onClick={handleSaveClick(id)}
+                        />,
+                        <GridActionsCellItem
+                            icon={<CancelIcon />}
+                            label={t('cancel')}
+                            className="textPrimary"
+                            onClick={handleCancelClick(id)}
+                            color="inherit"
+                        />,
+                    ];
+                }
+
+                return [
+                    <GridActionsCellItem
+                        icon={<EditIcon />}
+                        label={t('edit')}
+                        className="textPrimary"
+                        onClick={handleEditClick(id)}
+                        color="inherit"
+                    />,
+                    <GridActionsCellItem
+                        icon={<DeleteIcon />}
+                        label={t('delete')}
+                        onClick={handleDeleteClick(id)}
+                        color="inherit"
+                    />,
+                ];
+            },
+        },
+    ];
+
+    const initialState = {
+        pagination: {
+            paginationModel: {
+                pageSize: 5,
+            },
+        },
+    };
+
+    return <>
+        <Typography variant={"h6"} sx={{ mt: 4 }}>
+            {props.exercise.getTranslation().name}
+        </Typography>
+
+        <Grid container spacing={2}>
+            <Grid size={{ xs: 12, md: 6 }}>
+                <FormQueryErrors mutationQuery={editLogQuery} />
+
+                <DataGrid
+                    initialState={initialState}
+                    pageSizeOptions={PAGINATION_OPTIONS.pageSizeOptions}
+                    disableRowSelectionOnClick
+                    rows={rows}
+                    columns={columns}
+                    editMode="row"
+                    rowModesModel={rowModesModel}
+                    onRowModesModelChange={handleRowModesModelChange}
+                    onRowEditStop={handleRowEditStop}
+                    processRowUpdate={processRowUpdate}
+                />
+
+            </Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+                <TimeSeriesChart data={logEntries} key={props.exercise.id} />
+            </Grid>
+        </Grid>
+    </>;
+};
+/*
+ * Format the log entries so that they can be passed to the chart
+ *
+ * This is mostly due to the time, which needs to be a number to be shown
+ * in the scatter plot
+ */
+const formatData = (data: WorkoutLog[]) =>
+    data.map((log) => {
+        return {
+            id: log.id,
+            value: log.weight,
+            time: log.date.getTime(),
+            entry: log,
+        };
+    });
+
+const ExerciseLogTooltip = ({ active, payload }: TooltipProps<ValueType, NameType>) => {
+    if (active) {
+        // TODO: translate rir
+        let rir = '';
+        if (payload?.[1].payload?.entry.rir) {
+            rir = `, ${payload?.[1].payload?.entry.rir} RiR`;
+        }
+
+        return <Card>
+            <CardContent>
+                <Typography variant="body1">
+                    {luxonDateTimeToLocale(DateTime.fromMillis(payload?.[0].value as number))}
+                </Typography>
+
+                <Typography variant="body2">
+                    {payload?.[1].payload?.entry.repetitions} × {payload?.[1].value}{payload?.[1].unit}{rir}
+                </Typography>
+            </CardContent>
+        </Card>;
+    }
+    return null;
+};
+
+export const TimeSeriesChart = (props: { data: WorkoutLog[] }) => {
+
+    // Group by rep count
+    //
+    // We draw series based on the same reps, as otherwise the chart wouldn't
+    // make much sense
+    const result: Map<number, WorkoutLog[]> = props.data.reduce(function (r, a) {
+        r.set(a.repetitions, r.get(a.repetitions) || []);
+        r.get(a.repetitions)!.push(a);
+        return r;
+    }, new Map());
+
+    const colorGenerator = generateChartColors(result.size);
+
+    return (
+        <Box>
+            <ResponsiveContainer width={"100%"} height={250}>
+                <ScatterChart>
+                    <XAxis
+                        dataKey="time"
+                        domain={["auto", "auto"]}
+                        name="Time"
+                        tickFormatter={unixTime => luxonDateTimeToLocale(DateTime.fromMillis(unixTime))}
+                        type="number"
+                    />
+                    <YAxis
+                        domain={["auto", "auto"]}
+                        dataKey="value"
+                        name="Value"
+                        unit="kg"
+                    />
+
+                    {Array.from(result).map(([key, value]) => {
+                            const color = colorGenerator.next().value!;
+                            const formattedData = formatData(value);
+
+                            return <Scatter
+                                key={key}
+                                data={formattedData}
+                                fill={color}
+                                line={{ stroke: color }}
+                                lineType="joint"
+                                lineJointType="monotoneX"
+                                name={key?.toString()}
+                            />;
+                        }
+                    )}
+
+                    <Tooltip content={<ExerciseLogTooltip />} />
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <Legend />
+                </ScatterChart>
+            </ResponsiveContainer>
+        </Box>
+    );
+};

package/src/components/WorkoutRoutines/widgets/RoutineDetailDropdown.test.tsx

@@ -0,0 +1,36 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from '@testing-library/react';
+import userEvent from "@testing-library/user-event";
+import { RoutineDetailDropdown } from "components/WorkoutRoutines/widgets/RoutineDetailDropdown";
+import React from 'react';
+import { MemoryRouter } from "react-router-dom";
+import { testQueryClient } from "tests/queryClient";
+import { testRoutine1 } from "tests/workoutRoutinesTestData";
+
+describe("Test the RoutineDetailDropdown component", () => {
+
+    let user: ReturnType<typeof userEvent.setup>;
+
+    beforeEach(() => {
+        user = userEvent.setup();
+        jest.resetAllMocks();
+    });
+
+    test('Edit entry is enabled for routines', async () => {
+
+        // Act
+        render(
+            <QueryClientProvider client={testQueryClient}>
+                <MemoryRouter>
+                    <RoutineDetailDropdown routine={testRoutine1} />
+                </MemoryRouter>
+            </QueryClientProvider>
+        );
+        const menuButton = screen.getByRole('button');
+        await user.click(menuButton);
+
+        // Assert
+        const editMenuItem = screen.getByText('edit').closest('li');
+        expect(editMenuItem).not.toHaveAttribute('aria-disabled');
+    });
+});

package/src/components/WorkoutRoutines/widgets/RoutineDetailDropdown.tsx

@@ -0,0 +1,184 @@
+import MenuIcon from '@mui/icons-material/Menu';
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    Divider,
+    Menu,
+    MenuItem
+} from "@mui/material";
+import { Routine } from "components/WorkoutRoutines/models/Routine";
+import { useDeleteRoutineQuery } from "components/WorkoutRoutines/queries";
+import { RoutineTemplateForm } from "components/WorkoutRoutines/widgets/forms/RoutineTemplateForm";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useNavigate } from "react-router-dom";
+import { makeLink, WgerLink } from "utils/url";
+
+
+export enum DialogToOpen {
+    NONE,
+    DELETE_CONFIRMATION,
+    EDIT_TEMPLATE
+}
+
+export const RoutineDetailDropdown = (props: { routine: Routine }) => {
+
+    const navigate = useNavigate();
+    const useDeleteQuery = useDeleteRoutineQuery(props.routine.id!);
+
+    const [t, i18n] = useTranslation();
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+    const [deleteConfirmationOpen, setConfirmationOpen] = useState<DialogToOpen>(DialogToOpen.NONE);
+
+    const open = Boolean(anchorEl);
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleDelete = () => {
+        setConfirmationOpen(DialogToOpen.DELETE_CONFIRMATION);
+        handleClose(); // Close the dropdown menu
+    };
+
+    const handleTemplate = () => {
+        setConfirmationOpen(DialogToOpen.EDIT_TEMPLATE);
+        handleClose();
+    };
+
+    const handleConfirmDelete = async () => {
+        await useDeleteQuery.mutateAsync();
+        navigate(makeLink(WgerLink.ROUTINE_OVERVIEW, i18n.language));
+    };
+
+    const handleCloseDialogs = () => {
+        setConfirmationOpen(DialogToOpen.NONE);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    /*
+     *  Note: this is a workaround. Instead of just using the navigate function we need to
+     *        force a reload of the page, otherwise the drag-and-drop doesn't work properly
+     *        when loaded from within the django application. This has probably to do with
+     *        the way we add the components there. If we find a solution for that one day,
+     *        this can be removed.
+     *
+     *        See also: https://github.com/wger-project/wger/issues/1943
+     */
+    const navigateEdit = () => window.location.href = makeLink(
+        WgerLink.ROUTINE_EDIT,
+        i18n.language,
+        { id: props.routine.id! }
+    );
+
+
+    return (
+        <div>
+            <Button onClick={handleClick}>
+                <MenuIcon />
+            </Button>
+            <Menu
+                anchorEl={anchorEl}
+                open={open}
+                onClose={handleClose}
+            >
+                <MenuItem
+                    // disabled={props.routine.isTemplate}
+                    onClick={navigateEdit}>
+                    {t("edit")}
+                </MenuItem>
+                <MenuItem
+                    component={Link}
+                    to={makeLink(WgerLink.ROUTINE_DETAIL_TABLE, i18n.language, { id: props.routine.id! })}>
+                    Table view
+                </MenuItem>
+                {props.routine.isNotTemplate && <MenuItem
+                    component={Link}
+                    to={makeLink(WgerLink.ROUTINE_LOGS_OVERVIEW, i18n.language, { id: props.routine.id! })}>
+                    {t("routines.logsOverview")}
+                </MenuItem>}
+                {props.routine.isNotTemplate && <MenuItem
+                    component={Link}
+                    to={makeLink(WgerLink.ROUTINE_STATS_OVERVIEW, i18n.language, { id: props.routine.id! })}>
+                    {t("routines.statsOverview")}
+                </MenuItem>}
+                <MenuItem
+                    component="a"
+                    href={makeLink(WgerLink.ROUTINE_COPY, i18n.language, { id: props.routine.id! })}
+                >
+                    {t("routines.duplicate")}
+                </MenuItem>
+                <MenuItem onClick={handleTemplate}>
+                    {t("routines.markAsTemplate")}
+                </MenuItem>
+                <MenuItem
+                    component="a"
+                    href={makeLink(WgerLink.ROUTINE_PDF_TABLE, i18n.language, { id: props.routine.id! })}
+                    download={`Routine-${props.routine.id}-table.pdf`}>
+                    {t("routines.downloadPdfTable")}
+                </MenuItem>
+                <MenuItem
+                    component="a"
+                    href={makeLink(WgerLink.ROUTINE_PDF_LOGS, i18n.language, { id: props.routine.id! })}
+                    download={`Routine-${props.routine.id}-logs.pdf`}>
+                    {t("routines.downloadPdfLogs")}
+                </MenuItem>
+                <MenuItem
+                    component="a"
+                    href={makeLink(WgerLink.ROUTINE_ICAL, i18n.language, { id: props.routine.id! })}
+                    download={`Routine-${props.routine.id}-calendar.ics`}>
+                    {t("routines.downloadIcal")}
+                </MenuItem>
+                <Divider />
+                <MenuItem onClick={handleDelete}>{t("delete")}</MenuItem>
+            </Menu>
+
+            <Dialog
+                open={deleteConfirmationOpen === DialogToOpen.DELETE_CONFIRMATION}
+                onClose={handleCloseDialogs}
+            >
+                <DialogTitle id="alert-dialog-title">
+                    {t('delete')}
+                </DialogTitle>
+                <DialogContent>
+                    <DialogContentText id="alert-dialog-description">
+                        {t('deleteConfirmation', { name: props.routine.name })}
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={handleCloseDialogs}>
+                        {t("cancel")}
+                    </Button>
+                    <Button onClick={handleConfirmDelete} color="error" autoFocus>
+                        {t("delete")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+
+            <Dialog
+                open={deleteConfirmationOpen === DialogToOpen.EDIT_TEMPLATE}
+                onClose={handleCloseDialogs}
+            >
+                <DialogTitle>
+                    {t("routines.markAsTemplate")}
+                </DialogTitle>
+                <DialogContent>
+                    <DialogContentText>
+                        <RoutineTemplateForm routine={props.routine} />
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={handleCloseDialogs}>
+                        {t("close")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </div>
+    );
+};

package/src/components/WorkoutRoutines/widgets/RoutineDetailsCard.test.tsx

@@ -0,0 +1,42 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from '@testing-library/react';
+import { useRoutineDetailQuery } from "components/WorkoutRoutines/queries";
+import { RoutineDetailsCard } from "components/WorkoutRoutines/widgets/RoutineDetailsCard";
+import React from 'react';
+import { MemoryRouter, Route, Routes } from "react-router";
+import { testRoutine1 } from "tests/workoutRoutinesTestData";
+
+jest.mock("components/WorkoutRoutines/queries");
+
+const queryClient = new QueryClient();
+
+describe("Test the RoutineDetail component", () => {
+
+    beforeEach(() => {
+        (useRoutineDetailQuery as jest.Mock).mockImplementation(() => ({
+            isSuccess: true,
+            isLoading: false,
+            data: testRoutine1
+        }));
+    });
+
+    test('renders a specific routine', async () => {
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <MemoryRouter initialEntries={['/routine/101']}>
+                    <Routes>
+                        <Route path="routine/:routineId" element={<RoutineDetailsCard />} />
+                    </Routes>
+                </MemoryRouter>
+            </QueryClientProvider>
+        );
+
+        // Assert
+        expect(useRoutineDetailQuery).toHaveBeenCalledWith(101);
+        expect(screen.getByText('Full body routine')).toBeInTheDocument();
+        expect(screen.getByText('Every day is leg day 🦵🏻')).toBeInTheDocument();
+        expect(screen.getByText('Squats')).toBeInTheDocument();
+    });
+});