@wger-project/react-components 25.10.16

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

@@ -0,0 +1,244 @@
+import BarChartIcon from '@mui/icons-material/BarChart';
+import {
+    Box,
+    IconButton,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableRow,
+    Tooltip as MuiTooltip,
+    useTheme
+} from "@mui/material";
+import Grid from "@mui/material/Grid";
+import { SelectChangeEvent } from '@mui/material/Select';
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { WgerContainerFullWidth } from "components/Core/Widgets/Container";
+import { useLanguageQuery, useMusclesQuery } from "components/Exercises/queries";
+import { useRoutineDetailQuery } from "components/WorkoutRoutines/queries";
+import { useRoutineStatsQuery } from "components/WorkoutRoutines/queries/routines";
+import {
+    DropdownOption,
+    formatStatsData,
+    getFullStatsData,
+    StatGroupBy,
+    StatsOptionDropdown,
+    StatSubType,
+    StatType
+} from "components/WorkoutRoutines/widgets/RoutineStatistics";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { getLanguageByShortName } from "services";
+import { generateChartColors } from "utils/colors";
+import { makeLink, WgerLink } from "utils/url";
+
+
+export const WorkoutStats = () => {
+
+    const theme = useTheme();
+    const [t, i18n] = useTranslation();
+    const params = useParams<{ routineId: string }>();
+
+    const [selectedValueType, setSelectedValueType] = useState<StatType>(StatType.Volume);
+    const [selectedValueSubType, setSelectedValueSubType] = useState<StatSubType>(StatSubType.Daily);
+    const [selectedValueGroupBy, setSelectedValueGroupBy] = useState<StatGroupBy>(StatGroupBy.Exercises);
+
+    const routineId = parseInt(params.routineId ?? '');
+    if (Number.isNaN(routineId)) {
+        return <p>Please pass an integer as the routine id.</p>;
+    }
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const routineQuery = useRoutineDetailQuery(routineId);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const routineStatsQuery = useRoutineStatsQuery(routineId);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const musclesQuery = useMusclesQuery();
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const languageQuery = useLanguageQuery();
+
+
+    if (routineStatsQuery.isLoading || routineQuery.isLoading || musclesQuery.isLoading || languageQuery.isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+    // TODO: find a better solution for this...
+    const language = getLanguageByShortName(
+        i18n.language,
+        languageQuery.data!
+    )!;
+
+    const routine = routineQuery.data!;
+
+
+    const dropdownOptionsType: DropdownOption[] = [
+        { value: StatType.Volume, label: t('routines.volume') },
+        { value: StatType.Sets, label: t('routines.sets') },
+        { value: StatType.Intensity, label: t('routines.intensity') },
+    ];
+
+    const dropdownOptionsSubType: DropdownOption[] = [
+        { value: StatSubType.Mesocycle, label: t('routines.currentRoutine') },
+        { value: StatSubType.Weekly, label: t('routines.weekly') },
+        { value: StatSubType.Iteration, label: t('routines.iteration') },
+        { value: StatSubType.Daily, label: t('routines.daily') },
+    ];
+    const dropdownOptionsGroupBy: DropdownOption[] = [
+        { value: StatGroupBy.Exercises, label: t('exercises.exercises') },
+        { value: StatGroupBy.Muscles, label: t('exercises.muscles') },
+        { value: StatGroupBy.Total, label: t('total') },
+    ];
+
+    const handleChangeType = (event: SelectChangeEvent) => {
+        setSelectedValueType(event.target.value as StatType);
+    };
+
+    const handleChangeSubType = (event: SelectChangeEvent) => {
+        setSelectedValueSubType(event.target.value as StatSubType);
+    };
+
+    const handleChangeGroupBy = (event: SelectChangeEvent) => {
+        setSelectedValueGroupBy(event.target.value as StatGroupBy);
+    };
+
+    const statsData = getFullStatsData(
+        routineStatsQuery.data!,
+        selectedValueType,
+        selectedValueSubType,
+        selectedValueGroupBy,
+        routine.exercises,
+        musclesQuery.data!,
+        language,
+    );
+
+    const chartData = formatStatsData(statsData);
+
+    const renderStatistics = () => {
+
+        return (
+            <TableContainer>
+                <Table size={"small"}>
+                    <TableHead>
+                        <TableRow>
+                            <TableCell></TableCell>
+                            {statsData.headers.map(header => <TableCell
+                                key={header}
+                                sx={{ textAlign: 'right', }}
+                            >{header}</TableCell>)}
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {statsData.data.map((row) => (
+                            <TableRow key={row.key}>
+                                <TableCell>{row.key}</TableCell>
+                                {row.values.map((value, index) => (
+                                    <TableCell
+                                        key={index}
+                                        sx={{ textAlign: 'right', }}
+                                    >{value?.toFixed(selectedValueType === StatType.Intensity ? 2 : 0) || ""}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        ))}
+                        {selectedValueSubType !== StatSubType.Mesocycle && <TableRow>
+                            <TableCell sx={{
+                                fontWeight: 'bold',
+                                backgroundColor: theme.palette.grey.A200
+                            }}>{t("total")}</TableCell>
+                            {statsData.headers.map(header => (
+                                <TableCell key={header}
+                                           sx={{
+                                               fontWeight: 'bold',
+                                               backgroundColor: theme.palette.grey.A200,
+                                               textAlign: 'right',
+                                           }}>
+                                    {statsData.totals[header?.toString()]?.toFixed(selectedValueType === StatType.Intensity ? 2 : 0)}
+                                </TableCell>
+                            ))}
+                        </TableRow>}
+                    </TableBody>
+                </Table>
+            </TableContainer>
+        );
+
+    };
+
+    const colorGenerator = generateChartColors(chartData.length);
+
+    return (
+        <WgerContainerFullWidth
+            title={`${t("routines.statsOverview")} - ${routine.name}`}
+            backToUrl={makeLink(WgerLink.ROUTINE_DETAIL, i18n.language, { id: routineId })}
+            optionsMenu={
+                <MuiTooltip title={t('routines.logsOverview')}>
+                    <IconButton component="a"
+                                href={makeLink(WgerLink.ROUTINE_LOGS_OVERVIEW, i18n.language, { id: routineId })}>
+                        <BarChartIcon />
+                    </IconButton>
+                </MuiTooltip>
+            }
+        >
+            <Grid container spacing={1}>
+                <Grid size={2} offset={3}>
+                    <StatsOptionDropdown
+                        label={"type"}
+                        options={dropdownOptionsType}
+                        value={selectedValueType}
+                        onChange={handleChangeType}
+                    />
+                </Grid>
+                <Grid size={2}>
+                    <StatsOptionDropdown
+                        label={"sub type"}
+                        options={dropdownOptionsSubType}
+                        value={selectedValueSubType}
+                        onChange={handleChangeSubType}
+                    />
+                </Grid>
+                <Grid size={2}>
+                    <StatsOptionDropdown
+                        label={"group by"}
+                        options={dropdownOptionsGroupBy}
+                        value={selectedValueGroupBy}
+                        onChange={handleChangeGroupBy}
+                    />
+                </Grid>
+
+                <Grid size={12}>
+                    <Box width="100%" height={400}>
+                        <ResponsiveContainer width="100%" height="100%">
+                            <LineChart width={500} height={300}>
+                                <CartesianGrid strokeDasharray="3 3" />
+                                <XAxis dataKey="category" type="category" allowDuplicatedCategory={false} />
+                                <YAxis dataKey="value" />
+                                <Tooltip
+                                    formatter={(value: number) => Number.isInteger(value) ? value.toFixed(0) : value.toFixed(2)} />
+                                <Legend
+                                    layout={"vertical"}
+                                    verticalAlign="middle"
+                                    align="right"
+                                    wrapperStyle={{ paddingLeft: "20px" }}
+                                />
+                                {chartData.map((s) => (
+                                    <Line dataKey="value" data={s.data} name={s.name} key={s.name}
+                                          stroke={colorGenerator.next()!.value!} />
+                                ))}
+                            </LineChart>
+                        </ResponsiveContainer>
+                    </Box>
+                </Grid>
+
+                <Grid size={12}>
+                    <Box height={20} />
+                    {renderStatistics()}
+                </Grid>
+            </Grid>
+        </WgerContainerFullWidth>
+    );
+};
+
+
+

package/src/components/WorkoutRoutines/Overview/Fab.tsx

@@ -0,0 +1,91 @@
+import AddIcon from "@mui/icons-material/Add";
+import { Fab } from "@mui/material";
+import { WgerModal } from "components/Core/Modals/WgerModal";
+import { RoutineForm } from "components/WorkoutRoutines/widgets/forms/RoutineForm";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+export const AddRoutineFab = () => {
+
+    const [t] = useTranslation();
+    const [openModal, setOpenModal] = React.useState(false);
+    const handleOpenModal = () => setOpenModal(true);
+    const handleCloseModal = () => setOpenModal(false);
+
+
+    return (
+        <div>
+            <Fab
+                color="secondary"
+                aria-label="add"
+                onClick={handleOpenModal}
+                sx={{
+                    position: 'fixed',
+                    bottom: '5rem',
+                    right: (theme) => `max(${theme.spacing(2)}, calc((100vw - ${theme.breakpoints.values.lg}px) / 2 + ${theme.spacing(2)}))`,
+                    zIndex: 9,
+                }}>
+                <AddIcon />
+            </Fab>
+            <WgerModal title={t('add')} isOpen={openModal} closeFn={handleCloseModal}>
+                <RoutineForm closeFn={handleCloseModal} />
+            </WgerModal>
+        </div>
+    );
+};
+
+export const AddPublicTemplateFab = () => {
+
+    const [t] = useTranslation();
+    const [openModal, setOpenModal] = React.useState(false);
+    const handleOpenModal = () => setOpenModal(true);
+    const handleCloseModal = () => setOpenModal(false);
+
+    return (
+        <div>
+            <Fab
+                color="secondary"
+                aria-label="add"
+                onClick={handleOpenModal}
+                sx={{
+                    position: 'fixed',
+                    bottom: '5rem',
+                    right: (theme) => `max(${theme.spacing(2)}, calc((100vw - ${theme.breakpoints.values.lg}px) / 2 + ${theme.spacing(2)}))`,
+                    zIndex: 9,
+                }}>
+                <AddIcon />
+            </Fab>
+            <WgerModal title={t('add')} isOpen={openModal} closeFn={handleCloseModal}>
+                <RoutineForm closeFn={handleCloseModal} isTemplate={true} isPublicTemplate={true} />
+            </WgerModal>
+        </div>
+    );
+};
+
+export const AddPrivateTemplateFab = () => {
+
+    const [t] = useTranslation();
+    const [openModal, setOpenModal] = React.useState(false);
+    const handleOpenModal = () => setOpenModal(true);
+    const handleCloseModal = () => setOpenModal(false);
+
+    return (
+        <div>
+            <Fab
+                color="secondary"
+                aria-label="add"
+                onClick={handleOpenModal}
+                sx={{
+                    position: 'fixed',
+                    bottom: '5rem',
+                    right: (theme) => `max(${theme.spacing(2)}, calc((100vw - ${theme.breakpoints.values.lg}px) / 2 + ${theme.spacing(2)}))`,
+                    zIndex: 9,
+                }}>
+                <AddIcon />
+            </Fab>
+            <WgerModal title={t('add')} isOpen={openModal} closeFn={handleCloseModal}>
+                <RoutineForm closeFn={handleCloseModal} isTemplate={true} isPublicTemplate={false} />
+            </WgerModal>
+        </div>
+    );
+};

package/src/components/WorkoutRoutines/Overview/PrivateTemplateOverview.test.tsx

@@ -0,0 +1,36 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { act, render, screen } from '@testing-library/react';
+import { PrivateTemplateOverview } from "components/WorkoutRoutines/Overview/PrivateTemplateOverview";
+import { BrowserRouter } from "react-router-dom";
+import { getPrivateTemplatesShallow } from "services";
+import { testQueryClient } from "tests/queryClient";
+import { testPrivateTemplate1 } from "tests/workoutRoutinesTestData";
+
+jest.mock("services");
+
+describe("Smoke tests the PrivateTemplateOverview component", () => {
+
+    beforeEach(() => {
+        (getPrivateTemplatesShallow as jest.Mock).mockResolvedValue([testPrivateTemplate1]);
+    });
+
+    test('renders all private templates', async () => {
+
+        // Act
+        render(
+            <BrowserRouter>
+                <QueryClientProvider client={testQueryClient}>
+                    <PrivateTemplateOverview />
+                </QueryClientProvider>
+            </BrowserRouter>
+        );
+        await act(async () => {
+            await new Promise((r) => setTimeout(r, 20));
+        });
+
+        // Assert
+        expect(getPrivateTemplatesShallow).toHaveBeenCalledTimes(1);
+        expect(screen.getByText('private template 1')).toBeInTheDocument();
+        expect(screen.getByText('routines.templates')).toBeInTheDocument();
+    });
+});

package/src/components/WorkoutRoutines/Overview/PrivateTemplateOverview.tsx

@@ -0,0 +1,41 @@
+import { List, Paper, } from "@mui/material";
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { WgerContainerRightSidebar } from "components/Core/Widgets/Container";
+import { OverviewEmpty } from "components/Core/Widgets/OverviewEmpty";
+import { AddPrivateTemplateFab } from "components/WorkoutRoutines/Overview/Fab";
+import { RoutineList } from "components/WorkoutRoutines/Overview/RoutineOverview";
+import { usePrivateRoutinesShallowQuery } from "components/WorkoutRoutines/queries/routines";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { WgerLink } from "utils/url";
+
+
+export const PrivateTemplateOverview = () => {
+    const routineQuery = usePrivateRoutinesShallowQuery();
+    const [t] = useTranslation();
+
+    if (routineQuery.isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+
+    return <WgerContainerRightSidebar
+        title={t("routines.templates")}
+        mainContent={<>
+            {routineQuery.data!.length === 0
+                ? <OverviewEmpty />
+                : <Paper>
+                    <List sx={{ py: 0 }} key={'abc'}>
+                        {routineQuery.data!.map(r => <RoutineList
+                            routine={r}
+                            key={r.id}
+                            showTemplateChip={false}
+                            showTemplateVisibility={true}
+                            linkDestination={WgerLink.ROUTINE_DETAIL} />
+                        )}
+                    </List>
+                </Paper>}
+        </>}
+        fab={<AddPrivateTemplateFab />}
+    />;
+};

package/src/components/WorkoutRoutines/Overview/PublicTemplateOverview.test.tsx

@@ -0,0 +1,36 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { act, render, screen } from '@testing-library/react';
+import { PublicTemplateOverview } from "components/WorkoutRoutines/Overview/PublicTemplateOverview";
+import { BrowserRouter } from "react-router-dom";
+import { getPublicTemplatesShallow } from "services";
+import { testQueryClient } from "tests/queryClient";
+import { testPublicTemplate1 } from "tests/workoutRoutinesTestData";
+
+jest.mock("services");
+
+describe("Smoke tests the PublicTemplateOverview component", () => {
+
+    beforeEach(() => {
+        (getPublicTemplatesShallow as jest.Mock).mockResolvedValue([testPublicTemplate1]);
+    });
+
+    test('renders all public templates', async () => {
+
+        // Act
+        render(
+            <BrowserRouter>
+                <QueryClientProvider client={testQueryClient}>
+                    <PublicTemplateOverview />
+                </QueryClientProvider>
+            </BrowserRouter>
+        );
+        await act(async () => {
+            await new Promise((r) => setTimeout(r, 20));
+        });
+
+        // Assert
+        expect(getPublicTemplatesShallow).toHaveBeenCalledTimes(1);
+        expect(screen.getByText('public template 1')).toBeInTheDocument();
+        expect(screen.getByText('routines.publicTemplates')).toBeInTheDocument();
+    });
+});

package/src/components/WorkoutRoutines/Overview/PublicTemplateOverview.tsx

@@ -0,0 +1,40 @@
+import { List, Paper, } from "@mui/material";
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { WgerContainerRightSidebar } from "components/Core/Widgets/Container";
+import { OverviewEmpty } from "components/Core/Widgets/OverviewEmpty";
+import { AddPublicTemplateFab } from "components/WorkoutRoutines/Overview/Fab";
+import { RoutineList } from "components/WorkoutRoutines/Overview/RoutineOverview";
+import { usePublicRoutinesShallowQuery } from "components/WorkoutRoutines/queries";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { WgerLink } from "utils/url";
+
+
+export const PublicTemplateOverview = () => {
+    const routineQuery = usePublicRoutinesShallowQuery();
+    const [t] = useTranslation();
+
+    if (routineQuery.isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+
+    return <WgerContainerRightSidebar
+        title={t("routines.publicTemplates")}
+        mainContent={<>
+            {routineQuery.data!.length === 0
+                ? <OverviewEmpty />
+                : <Paper>
+                    <List sx={{ py: 0 }} key={'abc'}>
+                        {routineQuery.data!.map(r => <RoutineList
+                            routine={r}
+                            linkDestination={WgerLink.TEMPLATE_DETAIL}
+                            showTemplateChip={false}
+                            key={r.id} />
+                        )}
+                    </List>
+                </Paper>}
+        </>}
+        fab={<AddPublicTemplateFab />}
+    />;
+};

package/src/components/WorkoutRoutines/Overview/RoutineOverview.test.tsx

@@ -0,0 +1,38 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { act, render, screen } from '@testing-library/react';
+import { RoutineOverview } from "components/WorkoutRoutines/Overview/RoutineOverview";
+import React from 'react';
+import { BrowserRouter } from "react-router-dom";
+import { getRoutinesShallow } from "services";
+import { testQueryClient } from "tests/queryClient";
+import { TEST_ROUTINES } from "tests/workoutRoutinesTestData";
+
+jest.mock("services");
+
+describe("Smoke tests the RoutineOverview component", () => {
+
+    beforeEach(() => {
+        (getRoutinesShallow as jest.Mock).mockResolvedValue(TEST_ROUTINES);
+    });
+
+    test('renders all routines', async () => {
+
+        // Act
+        render(
+            <BrowserRouter>
+                <QueryClientProvider client={testQueryClient}>
+                    <RoutineOverview />
+                </QueryClientProvider>
+            </BrowserRouter>
+        );
+        await act(async () => {
+            await new Promise((r) => setTimeout(r, 20));
+        });
+
+        // Assert
+        expect(getRoutinesShallow).toHaveBeenCalledTimes(1);
+        expect(screen.getByText('Test routine 1')).toBeInTheDocument();
+        expect(screen.getByText('routines.routine')).toBeInTheDocument();
+        expect(screen.getByText('routines.routines')).toBeInTheDocument();
+    });
+});

package/src/components/WorkoutRoutines/Overview/RoutineOverview.tsx

@@ -0,0 +1,76 @@
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { Chip, Divider, List, ListItem, ListItemButton, ListItemText, Paper, } from "@mui/material";
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { WgerContainerRightSidebar } from "components/Core/Widgets/Container";
+import { OverviewEmpty } from "components/Core/Widgets/OverviewEmpty";
+import { Routine } from "components/WorkoutRoutines/models/Routine";
+import { AddRoutineFab } from "components/WorkoutRoutines/Overview/Fab";
+import { useRoutinesShallowQuery } from "components/WorkoutRoutines/queries";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { dateToLocale } from "utils/date";
+import { makeLink, WgerLink } from "utils/url";
+
+export const RoutineList = (props: {
+    routine: Routine,
+    linkDestination?: WgerLink,
+    showTemplateChip?: boolean,
+    showTemplateVisibility?: boolean
+}) => {
+    const [t, i18n] = useTranslation();
+
+    const showTemplateChip = props.showTemplateChip ?? true;
+    const showTemplateVisibility = props.showTemplateVisibility ?? false;
+
+    const destination = props.linkDestination ?? WgerLink.ROUTINE_DETAIL;
+    const detailUrl = makeLink(destination, i18n.language, { id: props.routine.id! });
+
+    const primaryText = props.routine.name !== '' ? props.routine.name : t('routines.routine');
+
+    const chipTemplate = props.routine.isTemplate && showTemplateChip
+        ? <Chip color="info" size="small" label={t('routines.template')} />
+        : null;
+
+    const chipVisibility = props.routine.isTemplate && showTemplateVisibility
+        ? <Chip color="info" size="small"
+                label={t(props.routine.isPublic ? 'public' : 'private')} />
+        : null;
+
+
+    return <>
+        <ListItem sx={{ p: 0 }}>
+            <ListItemButton component="a" href={detailUrl}>
+                <ListItemText
+                    primary={<>{primaryText} {chipTemplate} {chipVisibility}</>}
+                    secondary={`${props.routine.durationText} (${dateToLocale(props.routine.start)} - ${dateToLocale(props.routine.end)})`}
+                />
+                <ChevronRightIcon />
+            </ListItemButton>
+        </ListItem>
+        <Divider component="li" />
+    </>;
+};
+
+export const RoutineOverview = () => {
+    const routineQuery = useRoutinesShallowQuery();
+    const [t] = useTranslation();
+
+    if (routineQuery.isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+
+    return <WgerContainerRightSidebar
+        title={t("routines.routines")}
+        mainContent={<>
+            {routineQuery.data!.length === 0
+                ? <OverviewEmpty />
+                : <Paper>
+                    <List sx={{ py: 0 }} key={'abc'}>
+                        {routineQuery.data!.map(r => <RoutineList routine={r} key={r.id} />)}
+                    </List>
+                </Paper>}
+        </>}
+        fab={<AddRoutineFab />}
+    />;
+};