@wger-project/react-components 25.12.5 → 26.2.26

package/src/components/Dashboard/MeasurementCard.tsx

@@ -0,0 +1,101 @@
+import Button from "@mui/material/Button";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Typography from "@mui/material/Typography";
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { DashboardCard } from "components/Dashboard/DashboardCard";
+import { EmptyCard } from "components/Dashboard/EmptyCard";
+import { MeasurementCategory } from "components/Measurements/models/Category";
+import { useMeasurementsCategoryQuery } from "components/Measurements/queries";
+import { CategoryForm } from "components/Measurements/widgets/CategoryForm";
+import { MeasurementChart } from "components/Measurements/widgets/MeasurementChart";
+import i18n from "i18n";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import Slider, { Settings } from "react-slick";
+import { makeLink, WgerLink } from "utils/url";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+
+
+export const MeasurementCard = () => {
+    const { t } = useTranslation();
+    const categoryQuery = useMeasurementsCategoryQuery();
+
+    if (categoryQuery.isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+    return categoryQuery.data === null
+        ? <EmptyCard
+            title={t("measurements.measurements")}
+            modalContent={<CategoryForm />}
+            modalTitle={t("add")} />
+        : <MeasurementCardContent categories={categoryQuery.data!} />;
+};
+
+const MeasurementCardContent = (props: { categories: MeasurementCategory[] }) => {
+    const { t } = useTranslation();
+
+    const settings: Settings = {
+        dots: true,
+        infinite: true,
+        speed: 500,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+    };
+
+    return (<>
+        <DashboardCard
+            title={t("measurements.measurements")}
+            actions={
+                <>
+                    <Button
+                        size="small"
+                        href={makeLink(WgerLink.MEASUREMENT_OVERVIEW, i18n.language)}
+                    >
+                        {t("seeDetails")}
+                    </Button>
+                </>
+            }
+        >
+            <div className="slider-container">
+                <Slider {...settings}>
+                    {props.categories.map(c => <MeasurementCardTableContent category={c} />)}
+                </Slider>
+            </div>
+        </DashboardCard>
+    </>);
+};
+
+
+const MeasurementCardTableContent = (props: { category: MeasurementCategory }) => {
+    const { t } = useTranslation();
+
+    return (<>
+        <Typography variant="h6" gutterBottom>
+            {props.category.name}
+        </Typography>
+        <MeasurementChart category={props.category} />
+        <Table size="small">
+            <TableHead>
+                <TableRow>
+                    <TableCell>{t('date')}</TableCell>
+                    <TableCell>{t('value')}</TableCell>
+                </TableRow>
+            </TableHead>
+            <TableBody>
+                {[...props.category.entries].slice(0, 5).map(entry => (
+                    <TableRow key={`measurement-entry-${entry.id}`}>
+                        <TableCell>{entry.date.toLocaleDateString()}</TableCell>
+                        <TableCell>{entry.value} {props.category.unit}</TableCell>
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+    </>);
+};

package/src/components/Dashboard/RoutineCard.tsx

@@ -44,7 +44,7 @@ const RoutineCardContent = (props: { routine: Routine }) => {
             }
         >
             <List>
-                {props.routine.dayDataCurrentIterationNoNulls.map((dayData) => (
+                {props.routine.dayDataCurrentIterationFiltered.map((dayData) => (
                     <DayListItem dayData={dayData} key={`dayDetails-${dayData.date.toISOString()}`} />
                 ))}
             </List>

package/src/components/Dashboard/TrophiesCard.test.tsx

@@ -0,0 +1,63 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from '@testing-library/react';
+import { TrophiesCard } from "components/Dashboard/TrophiesCard";
+import { useUserTrophiesQuery } from "components/Trophies/queries/trophies";
+import { testQueryClient } from "tests/queryClient";
+import { testUserTrophies } from "tests/trophies/trophiesTestData";
+
+jest.mock("components/Trophies/queries/trophies");
+
+describe("test the TrophiesCard component", () => {
+
+    describe("Trophies available", () => {
+        beforeEach(() => {
+            (useUserTrophiesQuery as jest.Mock).mockImplementation(() => ({
+                isSuccess: true,
+                isLoading: false,
+                data: testUserTrophies()
+            }));
+        });
+
+        test('renders the trophies correctly', async () => {
+            // Act
+            render(
+                <QueryClientProvider client={testQueryClient}>
+                    <TrophiesCard />
+                </QueryClientProvider>
+            );
+
+            // Assert
+            expect(useUserTrophiesQuery).toHaveBeenCalled();
+            expect(screen.getByText('Beginner')).toBeInTheDocument();
+            expect(screen.getByText('Unstoppable')).toBeInTheDocument();
+        });
+    });
+
+
+    describe("No trophies available", () => {
+
+        beforeEach(() => {
+            (useUserTrophiesQuery as jest.Mock).mockImplementation(() => ({
+                isSuccess: true,
+                isLoading: false,
+                data: null
+            }));
+        });
+
+        test('correctly shows custom empty card, without call to action button', async () => {
+
+            // Act
+            render(
+                <QueryClientProvider client={testQueryClient}>
+                    <TrophiesCard />
+                </QueryClientProvider>
+            );
+
+            // Assert
+            expect(useUserTrophiesQuery).toHaveBeenCalled();
+            expect(screen.getByText('nothingHereYet')).toBeInTheDocument();
+            expect(screen.queryByText('nothingHereYetAction')).not.toBeInTheDocument();
+            expect(screen.queryByText('add')).not.toBeInTheDocument();
+        });
+    });
+});

package/src/components/Dashboard/TrophiesCard.tsx

@@ -0,0 +1,84 @@
+import { Button, Card, CardContent, CardHeader, CardMedia, Tooltip, Typography, } from "@mui/material";
+import Box from "@mui/system/Box";
+import Stack from "@mui/system/Stack";
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { UserTrophy } from "components/Trophies/models/userTrophy";
+import { useUserTrophiesQuery } from "components/Trophies/queries/trophies";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { makeLink, WgerLink } from "utils/url";
+import { DashboardCard } from "./DashboardCard";
+
+export const TrophiesCard = () => {
+    const trophiesQuery = useUserTrophiesQuery();
+
+    if (trophiesQuery.isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+    return trophiesQuery.data !== null
+        ? <TrophiesCardContent trophies={trophiesQuery.data!} />
+        : <EmptyTrophiesCardContent />;
+};
+
+function TrophiesCardContent(props: { trophies: UserTrophy[] }) {
+    const { t, i18n } = useTranslation();
+
+    const tooltipWidget = (tooltip: string) => <Typography variant="body2" textAlign={'center'}>
+        {tooltip}
+    </Typography>;
+
+    return (<DashboardCard
+        title={''}
+        scrollable={false}
+        actions={
+            <>
+                <Button
+                    size="small"
+                    href={makeLink(WgerLink.TROPHIES, i18n.language)}
+                >
+                    {t("seeDetails")}
+                </Button>
+            </>
+        }
+    >
+        <Box sx={{ overflowX: 'auto', width: '100%' }}>
+            <Stack direction="row" spacing={3} sx={{ display: 'flex' }}>
+                {props.trophies.map((userTrophy) => (
+                    <Tooltip title={tooltipWidget(userTrophy.trophy.description)} arrow key={userTrophy.trophy.uuid}>
+                        <Card sx={{ width: 80, flex: '0 0 auto', boxShadow: 'none' }}>
+                            <CardMedia
+                                component="img"
+                                image={userTrophy.trophy.image}
+                                title={userTrophy.trophy.name}
+                            />
+                            <CardContent>
+                                <Typography gutterBottom variant="body2" component="div" textAlign="center">
+                                    {userTrophy.trophy.name}
+                                </Typography>
+                            </CardContent>
+                        </Card>
+                    </Tooltip>
+                ))}
+            </Stack>
+        </Box>
+    </DashboardCard>);
+}
+
+export const EmptyTrophiesCardContent = () => {
+    const [t] = useTranslation();
+
+    return (<>
+        <Card sx={{ paddingTop: 0, height: "100%", }}>
+            <CardHeader
+                title={t("trophies.trophies")}
+                sx={{ paddingBottom: 0 }}
+            />
+            <CardContent>
+                <Typography variant="h6" mr={3}>
+                    {t('nothingHereYet')}
+                </Typography>
+            </CardContent>
+        </Card>
+    </>);
+};

package/src/components/Dashboard/WeightCard.test.tsx

@@ -6,7 +6,6 @@ import { testQueryClient } from "tests/queryClient";
 import { testWeightEntries } from "tests/weight/testData";
 
 jest.mock("components/BodyWeight/queries");
-const { ResizeObserver } = window;
 
 describe("test the WeightCard component", () => {
 
@@ -17,18 +16,9 @@ describe("test the WeightCard component", () => {
                 isLoading: false,
                 data: testWeightEntries
             }));
-
-            // @ts-ignore
-            delete window.ResizeObserver;
-            window.ResizeObserver = jest.fn().mockImplementation(() => ({
-                observe: jest.fn(),
-                unobserve: jest.fn(),
-                disconnect: jest.fn()
-            }));
         });
 
         afterEach(() => {
-            window.ResizeObserver = ResizeObserver;
             jest.restoreAllMocks();
             jest.useRealTimers();
         });

package/src/components/Measurements/Screens/MeasurementCategoryOverview.tsx

@@ -15,7 +15,7 @@ import { EntryForm } from "components/Measurements/widgets/EntryForm";
 import { WgerModal } from "components/Core/Modals/WgerModal";
 
 
-const CategoryList = (props: { category: MeasurementCategory }) => {
+export const CategoryList = (props: { category: MeasurementCategory }) => {
 
     const [t, i18n] = useTranslation();
     const [openModal, setOpenModal] = React.useState(false);

package/src/components/Measurements/models/Category.ts

@@ -15,10 +15,19 @@ export class MeasurementCategory {
             this.entries = entries;
         }
     }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    static fromJson(json: any): MeasurementCategory {
+        return adapter.fromJson(json);
+    }
+
+    toJson() {
+        return adapter.toJson(this);
+    }
 }
 
 
-export class MeasurementCategoryAdapter implements Adapter<MeasurementCategory> {
+class MeasurementCategoryAdapter implements Adapter<MeasurementCategory> {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     fromJson(item: any) {
         return new MeasurementCategory(
@@ -35,4 +44,6 @@ export class MeasurementCategoryAdapter implements Adapter<MeasurementCategory>
             unit: item.unit,
         };
     }
-}
+}
+
+const adapter = new MeasurementCategoryAdapter();

package/src/components/Measurements/models/Entry.ts

@@ -10,10 +10,19 @@ export class MeasurementEntry {
         public notes: string
     ) {
     }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    static fromJson(json: any): MeasurementEntry {
+        return adapter.fromJson(json);
+    }
+
+    toJson() {
+        return adapter.toJson(this);
+    }
 }
 
 
-export class MeasurementEntryAdapter implements Adapter<MeasurementEntry> {
+class MeasurementEntryAdapter implements Adapter<MeasurementEntry> {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     fromJson(item: any) {
         return new MeasurementEntry(
@@ -34,4 +43,6 @@ export class MeasurementEntryAdapter implements Adapter<MeasurementEntry> {
             notes: item.notes
         };
     }
-}
+}
+
+const adapter = new MeasurementEntryAdapter();

package/src/components/Trophies/components/TrophiesDetail.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+import { testUserProgressionTrophies } from "tests/trophies/trophiesTestData";
+import { TrophiesDetail } from './TrophiesDetail';
+
+
+// Mock the trophies query hook
+jest.mock('components/Trophies/queries/trophies', () => ({
+    useUserTrophyProgressionQuery: () => ({
+        isLoading: false,
+        data: testUserProgressionTrophies(),
+    }),
+}));
+
+describe('TrophiesDetail', () => {
+    test('renders trophy names and progression values', () => {
+
+        // Act
+        render(<TrophiesDetail />);
+
+        // Assert
+        expect(screen.getByText('Beginner')).toBeInTheDocument();
+        expect(screen.getByText('Unstoppable')).toBeInTheDocument();
+        expect(screen.getByText('Complete your first workout')).toBeInTheDocument();
+        expect(screen.getByText('Maintain a 30-day workout streak')).toBeInTheDocument();
+
+        // Progression value for the progressive trophy should be shown
+        expect(screen.getByText('4/30')).toBeInTheDocument();
+
+        // There should be at least one progressbar in the document
+        expect(screen.getAllByRole('progressbar').length).toBeGreaterThanOrEqual(1);
+    });
+});

package/src/components/Trophies/components/TrophiesDetail.tsx

@@ -0,0 +1,88 @@
+import { Card, CardContent, CardMedia, LinearProgress, LinearProgressProps, Typography } from "@mui/material";
+import Box from "@mui/system/Box";
+import Grid from "@mui/system/Grid";
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { WgerContainerFullWidth } from "components/Core/Widgets/Container";
+import { UserTrophyProgression } from "components/Trophies/models/userTrophyProgression";
+import { useUserTrophyProgressionQuery } from "components/Trophies/queries/trophies";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+
+export const TrophiesDetail = () => {
+    const [t] = useTranslation();
+
+    const planQuery = useUserTrophyProgressionQuery();
+
+    if (planQuery.isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+    return <WgerContainerFullWidth title={t('trophies.trophies')}>
+        <Grid container spacing={2}>
+            {planQuery.data!.map((trophyProgression) => (
+                <Grid size={{ xs: 12, sm: 4, md: 3, lg: 3, xl: 2 }} key={trophyProgression.trophy.uuid}>
+                    <TrophyProgressCard key={trophyProgression.trophy.uuid} trophyProgression={trophyProgression} />
+                </Grid>
+            ))}
+        </Grid>
+    </WgerContainerFullWidth>;
+};
+
+
+function TrophyProgressCard(props: { trophyProgression: UserTrophyProgression }) {
+    return <Card sx={{ height: "100%" }}>
+        <CardMedia
+            sx={{
+                opacity: props.trophyProgression.isEarned ? 1 : 0.3,
+                p: 1,
+                width: 'auto',
+                mx: 'auto',
+                maxHeight: 130,
+            }}
+            component="img"
+            image={props.trophyProgression.trophy.image}
+            title={props.trophyProgression.trophy.name}
+        />
+        <CardContent sx={{ opacity: props.trophyProgression.isEarned ? 1 : 0.6 }}>
+
+            <Typography gutterBottom variant="h6" component="div" textAlign="center">
+                {props.trophyProgression.trophy.name}
+            </Typography>
+
+            <Box sx={{ mb: 2, mt: 0 }}>
+                {(props.trophyProgression.trophy.isProgressive && !props.trophyProgression.isEarned) &&
+                    <LinearProgressWithLabel value={props.trophyProgression.progress} />
+                }
+                <Typography variant="body2" sx={{ color: "text.secondary", textAlign: 'center' }}>
+                    {props.trophyProgression.progressDisplay}
+                </Typography>
+
+            </Box>
+
+            <Typography variant="body2" sx={{ color: "text.secondary" }}>
+                {props.trophyProgression.trophy.description}
+            </Typography>
+
+        </CardContent>
+    </Card>;
+}
+
+
+const LinearProgressWithLabel = (props: LinearProgressProps & { value: number, progressLabel?: string | null }) => {
+    // Extract custom prop so it doesn't get passed to the progress bar via the spread operator
+    const { progressLabel, ...linearProps } = props;
+
+    return (
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Box sx={{ width: '100%', mr: 1 }}>
+                <LinearProgress variant="determinate" {...linearProps} />
+            </Box>
+            <Box sx={{ minWidth: 35 }}>
+                <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                    {progressLabel ?? `${Math.round(props.value)}%`}
+                </Typography>
+            </Box>
+        </Box>
+    );
+};

package/src/components/Trophies/models/trophy.test.ts

@@ -0,0 +1,33 @@
+import { Trophy } from "components/Trophies/models/trophy";
+
+
+describe('Test the trophy model', () => {
+
+    test('correctly creates an object from the API response', () => {
+        // Arrange
+        const apiResponse = {
+            id: 1,
+            uuid: "5362e55b-eaf1-4e34-9ef8-661538a3bdd9",
+            name: "Beginner",
+            description: "Complete your first workout",
+            image: "http://localhost:8000/static/trophies/count/5362e55b-eaf1-4e34-9ef8-661538a3bdd9.png",
+            "trophy_type": "count",
+            "is_hidden": false,
+            "is_progressive": false,
+            order: 1
+        };
+
+        // Act
+        const trophy = Trophy.fromJson(apiResponse);
+
+        // Assert
+        expect(trophy.id).toBe(1);
+        expect(trophy.uuid).toBe("5362e55b-eaf1-4e34-9ef8-661538a3bdd9");
+        expect(trophy.name).toBe("Beginner");
+        expect(trophy.description).toBe("Complete your first workout");
+        expect(trophy.image).toBe("http://localhost:8000/static/trophies/count/5362e55b-eaf1-4e34-9ef8-661538a3bdd9.png");
+        expect(trophy.type).toBe("count");
+        expect(trophy.isHidden).toBe(false);
+        expect(trophy.isProgressive).toBe(false);
+    });
+});

package/src/components/Trophies/models/trophy.ts

@@ -0,0 +1,75 @@
+import { Adapter } from "utils/Adapter";
+
+export type trophyType = 'time' | 'volume' | 'count' | 'sequence' | 'date' | 'pr' | 'other';
+
+export interface ApiTrophyType {
+    id: number,
+    uuid: string,
+    name: string,
+    description: string,
+    image: string,
+    "trophy_type": trophyType,
+    "is_hidden": boolean,
+    "is_progressive": boolean,
+}
+
+export type TrophyConstructorParams = {
+    id: number;
+    uuid: string;
+    name: string;
+    description: string;
+    image: string;
+    type: trophyType;
+    isHidden: boolean;
+    isProgressive: boolean;
+};
+
+export class Trophy {
+
+    public id: number;
+    public uuid: string;
+    public name: string;
+    public description: string;
+    public image: string;
+    public type: string;
+    public isHidden: boolean;
+    public isProgressive: boolean;
+
+
+    constructor(params: TrophyConstructorParams) {
+        this.id = params.id;
+        this.uuid = params.uuid;
+        this.name = params.name;
+        this.description = params.description;
+        this.image = params.image;
+        this.type = params.type;
+        this.isHidden = params.isHidden;
+        this.isProgressive = params.isProgressive;
+    }
+
+    static fromJson(json: ApiTrophyType): Trophy {
+        return adapter.fromJson(json);
+    }
+}
+
+class TrophyAdapter implements Adapter<Trophy> {
+    fromJson(item: ApiTrophyType) {
+        return new Trophy({
+            id: item.id,
+            uuid: item.uuid,
+            name: item.name,
+            description: item.description,
+            image: item.image,
+            type: item.trophy_type,
+            isHidden: item.is_hidden,
+            isProgressive: item.is_progressive,
+        });
+    }
+
+    toJson(_: Trophy) {
+        return {};
+    }
+}
+
+
+const adapter = new TrophyAdapter();

package/src/components/Trophies/models/userTrophy.test.ts

@@ -0,0 +1,38 @@
+import { UserTrophy } from "components/Trophies/models/userTrophy";
+
+
+describe('Test the user UserTrophy model', () => {
+
+    test('correctly creates an object from the API response', () => {
+        // Arrange
+        const apiResponse = {
+            id: 4,
+            trophy: {
+                id: 9,
+                uuid: "32bb12da-b25f-4e18-81e4-b695eb65283e",
+                name: "Phoenix",
+                description: "Return to training after being inactive for 30 days",
+                image: "http://localhost:8000/static/trophies/other/32bb12da-b25f-4e18-81e4-b695eb65283e.png",
+                "trophy_type": "other",
+                "is_hidden": true,
+                "is_progressive": false,
+                order: 9
+            },
+            "earned_at": "2025-12-19T13:48:07.519497+01:00",
+            progress: 100.0,
+            "is_notified": false
+        };
+
+        // Act
+        const userTrophy = UserTrophy.fromJson(apiResponse);
+
+        // Assert
+        expect(userTrophy.id).toBe(4);
+        expect(userTrophy.earnedAt).toStrictEqual(new Date("2025-12-19T13:48:07.519497+01:00"));
+        expect(userTrophy.progress).toBe(100.0);
+        expect(userTrophy.isNotified).toBe(false);
+
+        expect(userTrophy.trophy.uuid).toBe("32bb12da-b25f-4e18-81e4-b695eb65283e");
+
+    });
+});