@wger-project/react-components 25.10.16

package/src/components/WorkoutRoutines/widgets/forms/RoutineForm.tsx

@@ -0,0 +1,309 @@
+import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
+import { Button, FormControlLabel, IconButton, Menu, MenuItem, Stack, Switch } from "@mui/material";
+import Grid from '@mui/material/Grid';
+import Tooltip from "@mui/material/Tooltip";
+import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+import { WgerTextField } from "components/Common/forms/WgerTextField";
+import { useProfileQuery } from "components/User/queries/profile";
+import {
+    DESCRIPTION_MAX_LENGTH,
+    MAX_WORKOUT_DURATION,
+    MIN_WORKOUT_DURATION,
+    NAME_MAX_LENGTH,
+    NAME_MIN_LENGTH,
+    Routine
+} from "components/WorkoutRoutines/models/Routine";
+import { useAddRoutineQuery, useEditRoutineQuery } from "components/WorkoutRoutines/queries/routines";
+import { SlotEntryRoundingField } from "components/WorkoutRoutines/widgets/forms/SlotEntryForm";
+import { Form, Formik } from "formik";
+import { DateTime } from "luxon";
+import React, { useState } from 'react';
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { makeLink, WgerLink } from "utils/url";
+import * as yup from 'yup';
+
+interface RoutineFormProps {
+    existingRoutine?: Routine,
+    isTemplate?: boolean,
+    isPublicTemplate?: boolean,
+    closeFn?: () => void,
+}
+
+export const RoutineForm = ({
+                                existingRoutine,
+                                isTemplate = false,
+                                isPublicTemplate = false,
+                                closeFn
+                            }: RoutineFormProps) => {
+
+    const [t, i18n] = useTranslation();
+    const addRoutineQuery = useAddRoutineQuery();
+    const editRoutineQuery = useEditRoutineQuery(existingRoutine?.id ?? -1);
+    const navigate = useNavigate();
+
+    const routine = existingRoutine
+        ? Routine.clone(existingRoutine)
+        : new Routine({
+            isTemplate: isTemplate,
+            isPublic: isPublicTemplate
+        });
+
+    /*
+     * Note: Controlling the state of the dates manually, otherwise some undebuggable errors
+     *       about missing properties occur deep within formik.
+     */
+    const [startDate, setStartDate] = useState<DateTime>(DateTime.fromJSDate(routine.start));
+    const [endDate, setEndDate] = useState<DateTime>(DateTime.fromJSDate(routine.end));
+
+    const duration = endDate.diff(startDate, ['weeks', 'days']);
+    const durationWeeks = Math.floor(duration.weeks);
+    const durationDays = Math.floor(duration.days);
+
+    const validationSchema = yup.object({
+        name: yup
+            .string()
+            .required()
+            .max(NAME_MAX_LENGTH, t('forms.maxLength', { chars: NAME_MAX_LENGTH }))
+            .min(NAME_MIN_LENGTH, t('forms.minLength', { chars: NAME_MIN_LENGTH })),
+        description: yup
+            .string()
+            .max(DESCRIPTION_MAX_LENGTH, t('forms.maxLength', { chars: DESCRIPTION_MAX_LENGTH })),
+        start: yup
+            .date()
+            .required(),
+        end: yup
+            .date()
+            .required()
+            .min(
+                yup.ref('start'),
+                t('forms.endBeforeStart')
+            )
+            .test(
+                'hasMinimumDuration',
+                t('routines.minLengthRoutine', { number: MIN_WORKOUT_DURATION }),
+                function (value) {
+                    const startDate = this.parent.start;
+                    if (startDate && value) {
+                        const startDateTime = DateTime.fromJSDate(startDate);
+                        const endDateTime = DateTime.fromJSDate(value);
+
+                        return endDateTime.diff(startDateTime, 'weeks').weeks >= MIN_WORKOUT_DURATION;
+                    }
+                    return true;
+                }
+            )
+            .test(
+                'hasMaximumDuration',
+                t('routines.maxLengthRoutine', { number: MAX_WORKOUT_DURATION }),
+                function (value) {
+                    const startDate = this.parent.start;
+                    if (startDate && value) {
+                        const startDateTime = DateTime.fromJSDate(startDate);
+                        const endDateTime = DateTime.fromJSDate(value);
+
+                        return endDateTime.diff(startDateTime, 'weeks').weeks <= MAX_WORKOUT_DURATION;
+                    }
+                    return true;
+                }
+            ),
+        fitInWeek: yup.boolean()
+    });
+
+
+    return (
+        (<Formik
+            initialValues={{
+                name: routine.name,
+                description: routine.description,
+                start: startDate,
+                end: endDate,
+                fitInWeek: routine.fitInWeek
+            }}
+
+            validationSchema={validationSchema}
+            onSubmit={async (values) => {
+                routine.name = values.name;
+                routine.description = values.description;
+                routine.fitInWeek = values.fitInWeek;
+                routine.start = values.start!.toJSDate();
+                routine.end = values.end!.toJSDate();
+
+                if (routine.id !== null) {
+                    editRoutineQuery.mutate(routine);
+                } else {
+                    const result = await addRoutineQuery.mutateAsync(routine);
+                    navigate(makeLink(WgerLink.ROUTINE_EDIT, i18n.language, { id: result.id! }));
+
+                    if (closeFn) {
+                        closeFn();
+                    }
+                }
+            }}
+        >
+            {formik => (
+                <Form>
+                    <Grid container spacing={2}>
+
+                        <Grid size={{ xs: 12 }}>
+                            <WgerTextField fieldName="name" title={t('name')} />
+                        </Grid>
+                        <Grid size={12}>
+                            <WgerTextField
+                                fieldName="description"
+                                title={t('description')}
+                                fieldProps={{ multiline: true, rows: 4 }}
+                            />
+                        </Grid>
+                        <Grid size={{ xs: 6 }}>
+                            <LocalizationProvider dateAdapter={AdapterLuxon} adapterLocale={i18n.language}>
+                                <DatePicker
+                                    defaultValue={DateTime.now()}
+                                    label={t('start')}
+                                    value={startDate}
+                                    onChange={(newValue) => {
+                                        if (newValue) {
+                                            formik.setFieldValue('start', newValue);
+                                            setStartDate(newValue);
+                                        }
+                                    }}
+                                    slotProps={{
+                                        textField: {
+                                            variant: "standard",
+                                            fullWidth: true,
+                                            error: formik.touched.start && Boolean(formik.errors.start),
+                                            helperText: formik.touched.start && formik.errors.start ? String(formik.errors.start) : ''
+                                        }
+                                    }}
+                                />
+                            </LocalizationProvider>
+                        </Grid>
+                        <Grid size={{ xs: 5 }}>
+                            <LocalizationProvider dateAdapter={AdapterLuxon} adapterLocale={i18n.language}>
+                                <DatePicker
+                                    defaultValue={DateTime.now()}
+                                    label={t('end')}
+                                    value={endDate}
+                                    onChange={(newValue) => {
+                                        if (newValue) {
+                                            formik.setFieldValue('end', newValue);
+                                            setEndDate(newValue);
+                                        }
+                                    }}
+                                    slotProps={{
+                                        textField: {
+                                            variant: "standard",
+                                            fullWidth: true,
+                                            error: formik.touched.end && Boolean(formik.errors.end),
+                                            helperText: formik.touched.end && formik.errors.end ? String(formik.errors.end) : ''
+                                        }
+                                    }}
+                                />
+                            </LocalizationProvider>
+                        </Grid>
+                        <Grid
+                            size={{ xs: 1 }}
+                            sx={{
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                textAlign: "center"
+                            }}
+                        >
+                            {durationDays === 0 ? t('durationWeeks', { number: durationWeeks }) : t('durationWeeksDays', {
+                                nrWeeks: durationWeeks,
+                                nrDays: durationDays
+                            })}
+                        </Grid>
+                        <Grid size={12}>
+                            <FormControlLabel
+                                control={
+                                    <Switch checked={formik.values.fitInWeek} {...formik.getFieldProps('fitInWeek')} />
+                                }
+                                label={t('routines.fitDaysInWeek')} />
+                            <Tooltip title={t('routines.fitDaysInWeekHelpText')}>
+                                <IconButton size="small">
+                                    <HelpOutlineIcon fontSize="inherit" />
+                                </IconButton>
+                            </Tooltip>
+                        </Grid>
+                        <Grid size={12}>
+                            <Button
+                                disabled={formik.isSubmitting}
+                                color="primary"
+                                variant="contained"
+                                type="submit"
+                                sx={{ mt: 2 }}>
+                                {t('save')}
+                            </Button>
+                        </Grid>
+                    </Grid>
+                </Form>
+            )}
+        </Formik>)
+    );
+};
+
+
+export const DefaultRoundingMenu = (props: { routineId: number }) => {
+    const userProfileQuery = useProfileQuery();
+    const { t } = useTranslation();
+
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    return (
+        <Stack direction={"row"}>
+            <Button
+                variant="text"
+                id="basic-button"
+                aria-controls={open ? 'basic-menu' : undefined}
+                aria-haspopup="true"
+                aria-expanded={open ? 'true' : undefined}
+                onClick={handleClick}
+            >
+                {t('routines.defaultRounding')}
+            </Button>
+            <Menu
+                id="basic-menu"
+                anchorEl={anchorEl}
+                open={open}
+                onClose={handleClose}
+                MenuListProps={{
+                    'aria-labelledby': 'basic-button',
+                }}
+            >
+
+                <MenuItem>
+                    <SlotEntryRoundingField
+                        routineId={props.routineId}
+                        rounding="weight"
+                        editProfile={true}
+                        initialValue={userProfileQuery.data!.weightRounding}
+                    />
+                </MenuItem>
+                <MenuItem>
+                    <SlotEntryRoundingField
+                        routineId={props.routineId}
+                        rounding="reps"
+                        editProfile={true}
+                        initialValue={userProfileQuery.data!.repetitionsRounding}
+                    />
+                </MenuItem>
+            </Menu>
+            <Tooltip title={t('routines.roundingHelp')}>
+                <IconButton onClick={() => {
+                }}>
+                    <HelpOutlineIcon fontSize="small" />
+                </IconButton>
+            </Tooltip>
+        </Stack>
+    );
+};

package/src/components/WorkoutRoutines/widgets/forms/RoutineTemplateForm.test.tsx

@@ -0,0 +1,70 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { RoutineTemplateForm } from "components/WorkoutRoutines/widgets/forms/RoutineTemplateForm";
+import { editRoutine } from 'services';
+import { testQueryClient } from "tests/queryClient";
+import { testRoutine1 } from "tests/workoutRoutinesTestData";
+
+
+jest.mock("services");
+const mockEditRoutine = editRoutine as jest.Mock;
+
+describe('RoutineTemplateForm', () => {
+    let user: ReturnType<typeof userEvent.setup>;
+
+    beforeEach(() => {
+        user = userEvent.setup();
+        jest.resetAllMocks();
+    });
+
+    test('calls editRoutine when setting the template flag', async () => {
+
+        // Act
+        render(
+            <QueryClientProvider client={testQueryClient}>
+                <RoutineTemplateForm routine={testRoutine1} />
+            </QueryClientProvider>
+        );
+
+        // Assert
+        const templateToggle = screen.getByRole('switch', { name: 'routines.template' });
+        expect(templateToggle).not.toBeChecked();
+        await user.click(templateToggle);
+        expect(mockEditRoutine).toHaveBeenCalledTimes(1);
+        expect(mockEditRoutine).toHaveBeenCalledWith(expect.objectContaining({
+            "id": 1,
+            "isPublic": false,
+            "isTemplate": true
+        }));
+    });
+
+    test('calls editRoutine when setting the public template flag', async () => {
+
+        // Act
+        render(
+            <QueryClientProvider client={testQueryClient}>
+                <RoutineTemplateForm routine={testRoutine1} />
+            </QueryClientProvider>
+        );
+
+        // Assert
+        const templateToggle = screen.getByRole('switch', { name: 'routines.template' });
+        const publicTemplateToggle = screen.getByRole('switch', { name: 'routines.publicTemplate' });
+        expect(templateToggle).not.toBeChecked();
+        expect(publicTemplateToggle).not.toBeChecked();
+
+        // Disabled until template is set
+        expect(publicTemplateToggle).toBeDisabled();
+
+        await user.click(templateToggle);
+        await user.click(publicTemplateToggle);
+        expect(publicTemplateToggle).not.toBeDisabled();
+        expect(mockEditRoutine).toHaveBeenCalledTimes(2);
+        expect(mockEditRoutine).toHaveBeenNthCalledWith(2, expect.objectContaining({
+            "id": 1,
+            "isPublic": true,
+            "isTemplate": true
+        }));
+    });
+});

package/src/components/WorkoutRoutines/widgets/forms/RoutineTemplateForm.tsx

@@ -0,0 +1,68 @@
+import { FormControlLabel, Stack, Switch, Typography } from "@mui/material";
+import Grid from '@mui/material/Grid';
+import { Routine } from "components/WorkoutRoutines/models/Routine";
+import { useEditRoutineQuery } from "components/WorkoutRoutines/queries/routines";
+import React, { useState } from 'react';
+import { useTranslation } from "react-i18next";
+
+
+export const RoutineTemplateForm = (props: { routine: Routine }) => {
+
+    const { t } = useTranslation();
+    const editRoutineQuery = useEditRoutineQuery(props.routine.id!);
+
+    const [isTemplate, setIsTemplate] = useState<boolean>(props.routine.isTemplate);
+    const [isPublic, setIsPublic] = useState<boolean>(props.routine.isPublic);
+
+    const handleSetTemplate = (isTemplate: boolean) => {
+        const newIsPublic = isTemplate && isPublic;
+        setIsTemplate(isTemplate);
+        setIsPublic(newIsPublic);
+
+        handleSave(isTemplate, newIsPublic);
+    };
+
+    const handleSetPublic = (isPublic: boolean) => {
+        const newIsPublic = isPublic && isTemplate;
+        setIsPublic(newIsPublic);
+        handleSave(isTemplate, newIsPublic);
+    };
+
+    const handleSave = (isTemplate: boolean, isPublic: boolean) => {
+
+        const routine = Routine.clone(props.routine);
+        routine.isTemplate = isTemplate;
+        routine.isPublic = isPublic;
+
+        editRoutineQuery.mutate(routine);
+    };
+
+    return (
+        <Grid container spacing={2}>
+            <Grid size={12}>
+                <Stack>
+                    <FormControlLabel
+                        disabled={editRoutineQuery.isPending}
+                        control={<Switch checked={isTemplate} onChange={async () => handleSetTemplate(!isTemplate)} />}
+                        label={t('routines.template')}
+                    />
+                    <Typography variant="caption">
+                        {t('routines.templatesHelpText')}
+                    </Typography>
+                </Stack>
+            </Grid>
+            <Grid size={12}>
+                <Stack>
+                    <FormControlLabel
+                        disabled={editRoutineQuery.isPending || !isTemplate}
+                        control={<Switch checked={isPublic} onChange={async () => handleSetPublic(!isPublic)} />}
+                        label={t('routines.publicTemplate')}
+                    />
+                    <Typography variant="caption">
+                        {t('routines.publicTemplateHelpText')}
+                    </Typography>
+                </Stack>
+            </Grid>
+        </Grid>
+    );
+};

package/src/components/WorkoutRoutines/widgets/forms/SessionForm.test.tsx

@@ -0,0 +1,164 @@
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { WorkoutSession } from "components/WorkoutRoutines/models/WorkoutSession";
+import { useAddSessionQuery, useEditSessionQuery, useFindSessionQuery } from "components/WorkoutRoutines/queries";
+import { DateTime } from 'luxon';
+import { BrowserRouter } from "react-router-dom";
+import { SessionForm } from './SessionForm';
+
+
+jest.mock("components/WorkoutRoutines/queries");
+const mockUseFindSessionQuery = useFindSessionQuery as jest.Mock;
+const mockUseAddSessionQuery = useAddSessionQuery as jest.Mock;
+const mockUseEditSessionQuery = useEditSessionQuery as jest.Mock;
+
+describe('SessionForm', () => {
+    const routineId = 1;
+    const dayId = 2;
+
+    beforeEach(() => {
+        mockUseFindSessionQuery.mockClear();
+        mockUseAddSessionQuery.mockReturnValue({
+            data: null,
+            isPending: false,
+        });
+        mockUseEditSessionQuery.mockReturnValue({
+            data: null,
+            isPending: false,
+        });
+    });
+
+    test('calls useFindSessionQuery with the correct parameters when the date changes', async () => {
+        // Arrange
+        const user = userEvent.setup();
+        const mockSession = new WorkoutSession({
+            id: 0,
+            dayId: 0,
+            routineId: 0,
+            date: new Date(),
+            notes: '',
+            impression: "1",
+            timeStart: null,
+            timeEnd: null
+        });
+        mockUseFindSessionQuery.mockReturnValue({
+            data: mockSession,
+            isLoading: false,
+            isSuccess: true
+        });
+
+        // Act
+        render(
+            <BrowserRouter>
+                <SessionForm
+                    dayId={dayId}
+                    routineId={routineId}
+                    selectedDate={DateTime.now()}
+                    setSelectedDate={() => {
+                    }} />
+            </BrowserRouter>
+        );
+
+        // Assert
+        const datePicker = screen.getByRole('group', { name: /date/i });
+        const newDate = DateTime.now();
+
+        await user.type(datePicker, newDate.toFormat('yyyy-MM-dd'));
+        await user.tab();
+
+        expect(mockUseFindSessionQuery).toHaveBeenCalledWith(
+            1,
+            {
+                routine: routineId,
+                date: newDate.toFormat('yyyy-MM-dd'),
+                day: 2
+            }
+        );
+    });
+
+    test('updates the form values when a session is found', async () => {
+
+        // Arrange
+        const date = DateTime.now();
+        const formattedDate = new Date().toLocaleDateString(
+            'en-us',
+            { year: 'numeric', month: '2-digit', day: '2-digit' }
+        );
+
+        const timeStart = DateTime.now().set({ hour: 10, minute: 30 });
+        const timeStartFormatted = timeStart.toLocaleString(DateTime.TIME_SIMPLE, { locale: 'en-us' });
+
+        const timeEnd = DateTime.now().set({ hour: 11, minute: 0 });
+        const timeEndFormatted = timeEnd.toLocaleString(DateTime.TIME_SIMPLE, { locale: 'en-us' });
+
+        const mockSession = new WorkoutSession({
+            id: 1,
+            dayId: dayId,
+            routineId: routineId,
+            date: date.toJSDate(),
+            notes: 'Test notes',
+            impression: '3',
+            timeStart: timeStart.toJSDate(),
+            timeEnd: timeEnd.toJSDate()
+        });
+
+        mockUseFindSessionQuery.mockReturnValue({
+            data: mockSession,
+            isLoading: false,
+            isSuccess: true
+        });
+
+        // Act
+        render(
+            <BrowserRouter>
+                <SessionForm
+                    dayId={dayId}
+                    routineId={routineId}
+                    selectedDate={DateTime.now()}
+                    setSelectedDate={() => {
+                    }} />
+            </BrowserRouter>
+        );
+
+        screen.logTestingPlaygroundURL();
+
+        // Assert
+        await waitFor(() => {
+            // screen.logTestingPlaygroundURL();
+            expect((screen.getByRole('textbox', { name: /notes/i }) as HTMLTextAreaElement).value).toBe('Test notes');
+
+            // The date and time pickers are localized
+            const dateGroup = screen.getByRole('group', { name: /date/i });
+            expect(within(dateGroup).getByRole('textbox', { hidden: true })).toHaveValue(formattedDate);
+
+            const startGroup = screen.getByRole('group', { name: /start/i });
+            expect(within(startGroup).getByRole('textbox', { hidden: true })).toHaveValue(timeStartFormatted);
+
+            const endGroup = screen.getByRole('group', { name: /end/i });
+            expect(within(endGroup).getByRole('textbox', { hidden: true })).toHaveValue(timeEndFormatted);
+        });
+    });
+
+    test('sets default values when no session is found', async () => {
+        mockUseFindSessionQuery.mockReturnValue({
+            data: null,
+            isLoading: false,
+            isSuccess: true,
+        });
+
+        render(
+            <BrowserRouter>
+                <SessionForm
+                    dayId={dayId}
+                    routineId={routineId}
+                    selectedDate={DateTime.now()}
+                    setSelectedDate={() => {
+                    }} />
+            </BrowserRouter>
+        );
+
+        await waitFor(() => {
+            expect((screen.getByRole('textbox', { name: /notes/i }) as HTMLTextAreaElement).value).toBe('');
+        });
+    });
+});