@wger-project/react-components 25.10.16 → 25.10.24

package/package.json

@@ -11,7 +11,7 @@
   "exports": {
     ".": "./build/index.js"
   },
-  "version": "25.10.16",
+  "version": "25.10.24",
   "repository": "https://github.com/wger-project/react",
   "type": "module",
   "publishConfig": {

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

@@ -22,7 +22,7 @@ import { searchIngredient } from "services";
 import { LANGUAGE_SHORT_ENGLISH } from "utils/consts";
 
 type IngredientAutocompleterProps = {
-    callback: () => void;
+    callback: (ingredient: Ingredient | null) => void;
     initialIngredient?: Ingredient | null;
 };
 

package/src/components/Nutrition/widgets/forms/NutritionDiaryEntryForm.tsx

@@ -39,6 +39,8 @@ export const NutritionDiaryEntryForm = ({ planId, entry, mealId, meals, closeFn
             .min(1, t('forms.minValue', { value: '1' })),
         ingredient: yup
             .number()
+            .nullable()
+            .moreThan(0, t('forms.fieldRequired'))
             .required(t('forms.fieldRequired')),
         datetime: yup
             .date()
@@ -51,7 +53,7 @@ export const NutritionDiaryEntryForm = ({ planId, entry, mealId, meals, closeFn
             initialValues={{
                 datetime: new Date(),
                 amount: 0,
-                ingredient: 0,
+                ingredient: null,
             }}
             validationSchema={validationSchema}
             onSubmit={async (values) => {
@@ -66,7 +68,7 @@ export const NutritionDiaryEntryForm = ({ planId, entry, mealId, meals, closeFn
                         planId: planId,
                         amount: newAmount,
                         datetime: values.datetime,
-                        ingredientId: values.ingredient
+                        ingredientId: values.ingredient!
                     });
                     editDiaryQuery.mutate(newDiaryEntry);
                 } else {
@@ -75,7 +77,7 @@ export const NutritionDiaryEntryForm = ({ planId, entry, mealId, meals, closeFn
                         planId: planId,
                         amount: newAmount,
                         datetime: values.datetime,
-                        ingredientId: values.ingredient,
+                        ingredientId: values.ingredient!,
                         mealId: selectedMeal,
                     }));
                 }
@@ -90,7 +92,16 @@ export const NutritionDiaryEntryForm = ({ planId, entry, mealId, meals, closeFn
                 <Form>
                     <Stack spacing={2}>
                         <IngredientAutocompleter
-                            callback={(value: Ingredient | null) => formik.setFieldValue('ingredient', value?.id)} />
+                            callback={(value: Ingredient | null) => {
+                                formik.setFieldTouched('ingredient', true);
+                                formik.setFieldValue('ingredient', value?.id ?? null);
+                            }}
+                            />
+                            {formik.touched.ingredient && formik.errors.ingredient && (
+                            <div style={{ color: 'crimson', fontSize: '0.7rem', marginLeft: '12px' }}>
+                                {formik.errors.ingredient}
+                            </div>
+                            )}
                         <TextField
                             fullWidth
                             id="amount"

package/src/components/WorkoutRoutines/Detail/RoutineDetailsTable.tsx

@@ -212,7 +212,7 @@ export const RoutineTable = (props: {
                 borderBottomWidth: showLogs ? 0 : null
             }}>{slotEntry.exercise?.getTranslation(language).name}</TableCell>
             {iterations.map((iteration) => {
-                const setConfig = props.routine.getSetConfigData(day.id, iteration, slotEntry.id);
+                const setConfig = props.routine.getSetConfigData(day.id!, iteration, slotEntry.id!);
 
                 return <React.Fragment key={iteration}>
                     <TableCell align={'center'} sx={sx}>
@@ -268,7 +268,7 @@ export const RoutineTable = (props: {
                 <small>{t('nutrition.logged')}</small>
             </TableCell>
             {iterations.map((iteration) => {
-                const setConfig = props.routine.getSetConfigData(day.id, iteration, slotEntry.id);
+                const setConfig = props.routine.getSetConfigData(day.id!, iteration, slotEntry.id!);
                 const iterationLogs = groupedLogs[iteration] ?? [];
 
                 const logs = iterationLogs.filter((log) => log.slotEntryId === slotEntry.id);
@@ -330,7 +330,7 @@ export const RoutineTable = (props: {
                             sx={{ backgroundColor: theme.palette.action.hover }}
                             className={classes.stickyColumn}
                         >
-                            <b>{day.getDisplayName()}</b>
+                            <b>{day.displayName}</b>
                         </TableCell>
                         <TableCell sx={{ backgroundColor: theme.palette.action.hover }} colSpan={5 * iterations.length}>
                         </TableCell>

package/src/components/WorkoutRoutines/models/Day.ts

@@ -4,6 +4,8 @@ import { Slot } from "components/WorkoutRoutines/models/Slot";
 import i18n from 'i18next';
 import { Adapter } from "utils/Adapter";
 
+export type DayType = 'custom' | 'enom' | 'amrap' | 'hiit' | 'tabata' | 'edt' | 'rft' | 'afap';
+
 interface DayConstructorParams {
     id?: number;
     routineId: number | null;
@@ -12,7 +14,7 @@ interface DayConstructorParams {
     description?: string;
     isRest?: boolean;
     needLogsToAdvance?: boolean;
-    type?: 'custom' | 'enom' | 'amrap' | 'hiit' | 'tabata' | 'edt' | 'rft' | 'afap';
+    type?: DayType;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     config?: any | null;
     slots?: Slot[];
@@ -30,7 +32,7 @@ export class Day {
     description: string;
     isRest: boolean;
     needLogsToAdvance: boolean;
-    type: 'custom' | 'enom' | 'amrap' | 'hiit' | 'tabata' | 'edt' | 'rft' | 'afap';
+    type: DayType;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     config: any | null;
 
@@ -53,6 +55,14 @@ export class Day {
         return this.type !== 'custom';
     }
 
+    public get displayNameWithType(): string {
+        return this.isSpecialType ? `${this.type.toUpperCase()} - ${this.displayName}` : this.displayName;
+    }
+
+    public get displayName(): string {
+        return this.isRest ? i18n.t('routines.restDay') : this.name;
+    }
+
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     static fromJson(json: any): Day {
         return adapter.fromJson(json);
@@ -73,9 +83,6 @@ export class Day {
         });
     }
 
-    public getDisplayName(): string {
-        return this.isRest ? i18n.t('routines.restDay') : this.name;
-    }
 
     toJson() {
         return adapter.toJson(this);
@@ -83,7 +90,10 @@ export class Day {
 
 }
 
-export const getDayName = (day: Day | null): string => day === null || day.isRest ? i18n.t('routines.restDay') : day.getDisplayName();
+/*
+ * Returns the display name of the day, or "Rest day" if it's a rest day or null
+ */
+export const getDayName = (day: Day | null): string => day === null || day.isRest ? i18n.t('routines.restDay') : day.displayNameWithType;
 
 
 class DayAdapter implements Adapter<Day> {

package/src/components/WorkoutRoutines/models/SlotEntry.ts

@@ -133,11 +133,16 @@ export class SlotEntry {
             order: overrides?.order ?? other.order,
             comment: overrides?.comment ?? other.comment,
 
-            repetitionUnit: overrides?.repetitionUnit ?? (other.repetitionUnit ?? undefined),
+            // NOTE: temporarily commented out to avoid issues. The constructor will see the
+            // unit objects and set the ids accordingly, ignoring the explicit IDs. This is
+            // probably OK since we always load the whole routine again after an edit, but
+            // it is a bit ugly.
+
+            // repetitionUnit: overrides?.repetitionUnit ?? (other.repetitionUnit ?? undefined),
             repetitionUnitId: overrides?.repetitionUnitId ?? other.repetitionUnitId,
             repetitionRounding: overrides?.repetitionRounding ?? other.repetitionRounding,
 
-            weightUnit: overrides?.weightUnit ?? (other.weightUnit ?? undefined),
+            // weightUnit: overrides?.weightUnit ?? (other.weightUnit ?? undefined),
             weightUnitId: overrides?.weightUnitId ?? other.weightUnitId,
             weightRounding: overrides?.weightRounding ?? other.weightRounding,
         });

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

@@ -135,7 +135,7 @@ export const DayDragAndDropGrid = (props: {
                                                         provided.draggableProps.style ?? {}
                                                     )}
 
-                                                    label={day.getDisplayName()}
+                                                    label={day.displayName}
                                                     value={day.id}
                                                     icon={<DragIndicatorIcon />}
                                                     iconPosition="start"

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

@@ -111,10 +111,7 @@ export function SetConfigDataDetails(props: {
 }
 
 
-function SlotDataList(props: {
-    slotData: SlotData,
-    index: number,
-}) {
+function SlotDataList(props: { slotData: SlotData }) {
     return (
         <Grid
             container
@@ -163,6 +160,9 @@ export const DayDetailsCard = (props: { dayData: RoutineDayData, routineId: numb
     const theme = useTheme();
     const [t, i18n] = useTranslation();
 
+    const isToday = isSameDay(props.dayData.date, new Date());
+    const subheader = <Typography sx={{ whiteSpace: 'pre-line' }}>{props.dayData.day?.description}</Typography>;
+
     return (
         <Card sx={{ minWidth: 275 }}>
             <CardHeader
@@ -178,19 +178,16 @@ export const DayDetailsCard = (props: { dayData: RoutineDayData, routineId: numb
                             <Addchart />
                         </IconButton>
                     </Tooltip>}
-                title={getDayName(props.dayData.day)}
-                avatar={isSameDay(props.dayData.date, new Date()) ? <TodayIcon /> : undefined}
-                subheader={<Typography sx={{ whiteSpace: 'pre-line' }}>{props.dayData.day?.description}</Typography>}
+                title={<Typography variant={"h5"}>{getDayName(props.dayData.day)}</Typography>}
+                avatar={isToday ? <TodayIcon /> : null}
+                subheader={subheader}
             />
             {props.dayData.slots.length > 0 && <CardContent sx={{ padding: 0, marginBottom: 0 }}>
                 <Stack>
                     {props.dayData.slots.map((slotData, index) => (
                         <div key={index}>
                             <Box padding={1}>
-                                <SlotDataList
-                                    slotData={slotData}
-                                    index={index}
-                                />
+                                <SlotDataList slotData={slotData} />
                             </Box>
                             <Divider />
                         </div>

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

@@ -15,8 +15,9 @@ import LoadingButton from "@mui/material/Button";
 import Grid from '@mui/material/Grid';
 import { WgerTextField } from "components/Common/forms/WgerTextField";
 import { DeleteConfirmationModal } from "components/Core/Modals/DeleteConfirmationModal";
-import { Day } from "components/WorkoutRoutines/models/Day";
+import { Day, DayType } from "components/WorkoutRoutines/models/Day";
 import { useDeleteDayQuery, useEditDayQuery } from "components/WorkoutRoutines/queries";
+import { DayTypeSelect } from "components/WorkoutRoutines/widgets/forms/DayTypeSelect";
 import { DefaultRoundingMenu } from "components/WorkoutRoutines/widgets/forms/RoutineForm";
 import { Form, Formik } from "formik";
 import React, { useState } from "react";
@@ -74,21 +75,25 @@ export const DayForm = (props: {
         description: Yup.string()
             .max(descriptionMaxLength, t('forms.maxLength', { chars: descriptionMaxLength })),
         isRest: Yup.boolean(),
-        needsLogsToAdvance: Yup.boolean()
+        needsLogsToAdvance: Yup.boolean(),
+        type: Yup.string(),
     });
 
     const handleSubmit = (values: Partial<{
         name: string,
         description: string,
         isRest: boolean,
-        needsLogsToAdvance: boolean
-    }>) => editDayQuery.mutate(Day.clone(
+        needsLogsToAdvance: boolean,
+        type: string
+    }>) =>
+        editDayQuery.mutate(Day.clone(
         props.day,
         {
             ...(values.name !== undefined && { name: values.name }),
             ...(values.description !== undefined && { description: values.description }),
             ...({ isRest: values.isRest }),
             ...(values.needsLogsToAdvance !== undefined && { needLogsToAdvance: values.needsLogsToAdvance }),
+                ...(values.type !== undefined && { type: values.type as DayType }),
         })
     );
 
@@ -98,7 +103,8 @@ export const DayForm = (props: {
                 name: props.day.name,
                 description: props.day.description,
                 isRest: props.day.isRest,
-                needsLogsToAdvance: props.day.needLogsToAdvance
+                needsLogsToAdvance: props.day.needLogsToAdvance,
+                type: props.day.type,
             }}
             validationSchema={validationSchema}
             onSubmit={(values, { setSubmitting }) => {
@@ -110,19 +116,25 @@ export const DayForm = (props: {
             {(formik) => (
                 <Form>
                     <Grid container spacing={2}>
-                        <Grid size={{ xs: 12, sm: 6 }}>
+                        <Grid size={{ xs: 12, sm: 6, md: 4 }}>
                             <WgerTextField
                                 fieldName="name"
                                 title="Name"
                                 fieldProps={{ disabled: isRestDay }}
                             />
                         </Grid>
-                        <Grid size={{ xs: 6, sm: 2 }}>
+                        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
+                            <DayTypeSelect
+                                fieldName="type"
+                                title="Type"
+                            />
+                        </Grid>
+                        <Grid size={{ xs: 12, sm: 6, md: 2 }}>
                             <FormControlLabel
                                 control={<Switch checked={isRestDay} onChange={handleRestDayChange} />}
                                 label={t('routines.restDay')} />
                         </Grid>
-                        <Grid size={{ xs: 6, sm: 4 }}>
+                        <Grid size={{ xs: 12, sm: 4, md: 3 }}>
                             <FormControlLabel
                                 disabled={isRestDay}
                                 control={<Switch
@@ -188,7 +200,7 @@ export const DayForm = (props: {
                     </Dialog>
 
                     <DeleteConfirmationModal
-                        title={t('deleteConfirmation', { name: props.day.getDisplayName() })}
+                        title={t('deleteConfirmation', { name: props.day.displayName })}
                         message={t('routines.deleteDayConfirmation')}
                         isOpen={openDeleteDialog}
                         closeFn={handleCancelDeleteDay}

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

@@ -0,0 +1,66 @@
+import MenuItem from "@mui/material/MenuItem";
+import TextField from "@mui/material/TextField";
+import { useField } from "formik";
+import { useTranslation } from "react-i18next";
+
+interface DayTypeSelectProps {
+    fieldName: string,
+    title: string,
+}
+
+export const DayTypeSelect = (props: DayTypeSelectProps) => {
+    const { t } = useTranslation();
+    const [field, meta] = useField(props.fieldName);
+
+    const options = [
+        {
+            value: 'custom',
+            label: t('routines.day.custom'),
+        },
+        {
+            value: 'enom',
+            label: t('routines.day.enom'),
+        },
+        {
+            value: 'amrap',
+            label: t('routines.day.amrap'),
+        },
+        {
+            value: 'hiit',
+            label: t('routines.day.hiit'),
+        },
+        {
+            value: 'tabata',
+            label: t('routines.day.tabata'),
+        },
+        {
+            value: 'edt',
+            label: t('routines.day.edt'),
+        },
+        {
+            value: 'rft',
+            label: t('routines.day.rft'),
+        },
+        {
+            value: 'afap',
+            label: t('routines.day.afap'),
+        }
+    ] as const;
+
+
+    return <>
+        <TextField
+            fullWidth
+            select
+            label={t('routines.set.type')}
+            variant="standard"
+            {...field}
+        >
+            {options!.map((option) => (
+                <MenuItem key={option.value} value={option.value}>
+                    {option.value.toUpperCase()} - <small>{option.label}</small>
+                </MenuItem>
+            ))}
+        </TextField>
+    </>;
+};

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

@@ -120,8 +120,6 @@ describe('SessionForm', () => {
             </BrowserRouter>
         );
 
-        screen.logTestingPlaygroundURL();
-
         // Assert
         await waitFor(() => {
             // screen.logTestingPlaygroundURL();

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

@@ -40,16 +40,18 @@ describe('SlotEntryTypeField', () => {
         const dropdown = screen.getByRole('combobox', { name: 'routines.set.type' });
         await user.click(dropdown);
 
-        expect(screen.queryAllByText('routines.set.normalSet')).toHaveLength(2); // One in the options menu, one in the selected value
-        expect(screen.getByText('routines.set.dropSet')).toBeInTheDocument();
-        expect(screen.getByText('routines.set.myo')).toBeInTheDocument();
-        expect(screen.getByText('routines.set.partial')).toBeInTheDocument();
-        expect(screen.getByText('routines.set.forced')).toBeInTheDocument();
-        expect(screen.getByText('routines.set.tut')).toBeInTheDocument();
-        expect(screen.getByText('routines.set.iso')).toBeInTheDocument();
-        expect(screen.getByText('routines.set.jump')).toBeInTheDocument();
-
-        const myoOption = screen.getByRole('option', { name: 'routines.set.myo' });
+        // One in the options menu, one in the selected value
+        expect(screen.queryAllByText(/routines\.set\.normalSet/)).toHaveLength(2);
+        expect(screen.getByText(/routines\.set\.dropSet/)).toBeInTheDocument();
+        expect(screen.getByText(/routines\.set\.myo/)).toBeInTheDocument();
+        expect(screen.getByText(/routines\.set\.partial/)).toBeInTheDocument();
+        expect(screen.getByText(/routines\.set\.forced/)).toBeInTheDocument();
+        expect(screen.getByText(/routines\.set\.tut/)).toBeInTheDocument();
+        expect(screen.getByText(/routines\.set\.iso/)).toBeInTheDocument();
+        expect(screen.getByText(/routines\.set\.jump/)).toBeInTheDocument();
+
+
+        const myoOption = screen.getByRole('option', { name: /routines\.set\.myo/ });
         await user.click(myoOption);
         expect(mockEditSlotEntry).toHaveBeenCalledWith(SlotEntry.clone(testDayLegs.slots[0].entries[0], { type: 'myo' }));
     });

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

@@ -55,6 +55,7 @@ export const SlotEntryTypeField = (props: { slotEntry: SlotEntry, routineId: num
         editQuery.mutate(SlotEntry.clone(props.slotEntry, { type: newValue as SlotEntryType }));
     };
 
+
     return <>
         <TextField
             fullWidth
@@ -67,7 +68,7 @@ export const SlotEntryTypeField = (props: { slotEntry: SlotEntry, routineId: num
         >
             {options!.map((option) => (
                 <MenuItem key={option.value} value={option.value}>
-                    {option.label}
+                    {option.value.toUpperCase()} - {option.label}
                 </MenuItem>
             ))}
         </TextField>

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

@@ -26,7 +26,7 @@ export const SlotForm = (props: { slot: Slot, routineId: number }) => {
             size={"small"}
             value={slotComment}
             disabled={editSlotQuery.isPending}
-            onChange={(e) => handleChange(e.target.value)}
+            onChange={(e) => setSlotComment(e.target.value)}
             onBlur={handleBlur}
             slotProps={{
                 input: { endAdornment: editSlotQuery.isPending && <LoadingProgressIcon /> }