@wger-project/react-components 25.10.16

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

@@ -0,0 +1,37 @@
+import { Stack, } from "@mui/material";
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { WgerContainerRightSidebar } from "components/Core/Widgets/Container";
+import { useMeasurementsQuery } from "components/Measurements/queries";
+import { CategoryDetailDataGrid } from "components/Measurements/widgets/CategoryDetailDataGrid";
+import { CategoryDetailDropdown } from "components/Measurements/widgets/CategoryDetailDropdown";
+import { AddMeasurementEntryFab } from "components/Measurements/widgets/fab";
+import { MeasurementChart } from "components/Measurements/widgets/MeasurementChart";
+import React from "react";
+import { useParams } from "react-router-dom";
+
+export const MeasurementCategoryDetail = () => {
+    const params = useParams<{ categoryId: string }>();
+    const categoryId = parseInt(params.categoryId ?? '');
+    if (Number.isNaN(categoryId)) {
+        return <p>Please pass an integer as the category id.</p>;
+    }
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const categoryQuery = useMeasurementsQuery(categoryId);
+
+    if (categoryQuery.isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+    return <WgerContainerRightSidebar
+        title={categoryQuery.data!.name}
+        optionsMenu={<CategoryDetailDropdown category={categoryQuery.data!} />}
+        mainContent={
+            <Stack spacing={2}>
+                <MeasurementChart category={categoryQuery.data!} />
+                <CategoryDetailDataGrid category={categoryQuery.data!} />
+            </Stack>
+        }
+        fab={<AddMeasurementEntryFab />}
+    />;
+};

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

@@ -0,0 +1,59 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, render, screen } from '@testing-library/react';
+import { useMeasurementsCategoryQuery } from "components/Measurements/queries";
+import { MeasurementCategoryOverview } from "components/Measurements/Screens/MeasurementCategoryOverview";
+import React from 'react';
+import { BrowserRouter } from "react-router-dom";
+import { TEST_MEASUREMENT_CATEGORY_1, TEST_MEASUREMENT_CATEGORY_2 } from "tests/measurementsTestData";
+
+jest.mock("components/Measurements/queries");
+
+const queryClient = new QueryClient();
+
+describe("Test the MeasurementCategoryOverview component", () => {
+
+    const { ResizeObserver } = window;
+
+    beforeEach(() => {
+        (useMeasurementsCategoryQuery as jest.Mock).mockImplementation(() => ({
+            isSuccess: true,
+            isLoading: false,
+            data: [TEST_MEASUREMENT_CATEGORY_1, TEST_MEASUREMENT_CATEGORY_2]
+        }));
+
+        // @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();
+    });
+
+
+    test('renders all measurement categories correctly', async () => {
+
+        // Act
+        render(
+            <BrowserRouter>
+                <QueryClientProvider client={queryClient}>
+                    <MeasurementCategoryOverview />
+                </QueryClientProvider>
+            </BrowserRouter>
+        );
+        await act(async () => {
+            await new Promise((r) => setTimeout(r, 20));
+        });
+
+        // Assert
+        expect(useMeasurementsCategoryQuery).toHaveBeenCalledTimes(1);
+        expect(screen.getByText('measurements.measurements')).toBeInTheDocument();
+        expect(screen.getByText('Biceps')).toBeInTheDocument();
+        expect(screen.getByText('Body fat')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,64 @@
+import React from "react";
+import { Button, Card, CardActions, CardContent, CardHeader, IconButton, Stack, } from "@mui/material";
+import AddIcon from '@mui/icons-material/Add';
+import { useTranslation } from "react-i18next";
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { useMeasurementsCategoryQuery } from "components/Measurements/queries";
+import { MeasurementCategory } from "components/Measurements/models/Category";
+import { MeasurementChart } from "components/Measurements/widgets/MeasurementChart";
+import { OverviewEmpty } from "components/Core/Widgets/OverviewEmpty";
+import { AddMeasurementCategoryFab } from "components/Measurements/widgets/fab";
+import { WgerContainerRightSidebar } from "components/Core/Widgets/Container";
+import { makeLink, WgerLink } from "utils/url";
+import { Link } from "react-router-dom";
+import { EntryForm } from "components/Measurements/widgets/EntryForm";
+import { WgerModal } from "components/Core/Modals/WgerModal";
+
+
+const CategoryList = (props: { category: MeasurementCategory }) => {
+
+    const [t, i18n] = useTranslation();
+    const [openModal, setOpenModal] = React.useState(false);
+    const handleOpenModal = () => setOpenModal(true);
+    const handleCloseModal = () => setOpenModal(false);
+
+    return <>
+        <Card>
+            <CardHeader title={props.category.name} subheader={props.category.unit} />
+            <CardContent>
+                <MeasurementChart category={props.category} />
+            </CardContent>
+            <CardActions disableSpacing sx={{ justifyContent: "space-between" }}>
+                <Button size="small">
+                    <Link to={makeLink(WgerLink.MEASUREMENT_DETAIL, i18n.language, { id: props.category.id })}>
+                        {t("seeDetails")}
+                    </Link>
+                </Button>
+
+                <IconButton onClick={handleOpenModal}>
+                    <AddIcon />
+                </IconButton>
+            </CardActions>
+        </Card>
+        <WgerModal title={t('add')} isOpen={openModal} closeFn={handleCloseModal}>
+            <EntryForm closeFn={handleCloseModal} categoryId={props.category.id} />
+        </WgerModal>
+    </>;
+};
+
+export const MeasurementCategoryOverview = () => {
+    const categoryQuery = useMeasurementsCategoryQuery();
+    const [t] = useTranslation();
+
+    return categoryQuery.isLoading
+        ? <LoadingPlaceholder />
+        : <WgerContainerRightSidebar
+            title={t("measurements.measurements")}
+            mainContent={<Stack spacing={2}>
+                {categoryQuery.data!.length === 0 && <OverviewEmpty />}
+                {categoryQuery.data!.map(c => <CategoryList category={c} key={c.id} />)}
+            </Stack>
+            }
+            fab={<AddMeasurementCategoryFab />}
+        />;
+};

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

@@ -0,0 +1,38 @@
+import { MeasurementEntry } from "components/Measurements/models/Entry";
+import { Adapter } from "utils/Adapter";
+
+export class MeasurementCategory {
+
+    entries: MeasurementEntry[] = [];
+
+    constructor(
+        public id: number,
+        public name: string,
+        public unit: string,
+        entries?: MeasurementEntry[]
+    ) {
+        if (entries) {
+            this.entries = entries;
+        }
+    }
+}
+
+
+export class MeasurementCategoryAdapter implements Adapter<MeasurementCategory> {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fromJson(item: any) {
+        return new MeasurementCategory(
+            item.id,
+            item.name,
+            item.unit
+        );
+    }
+
+    toJson(item: MeasurementCategory) {
+        return {
+            id: item.id,
+            name: item.name,
+            unit: item.unit,
+        };
+    }
+}

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

@@ -0,0 +1,37 @@
+import { Adapter } from "utils/Adapter";
+
+export class MeasurementEntry {
+
+    constructor(
+        public id: number | null,
+        public category: number,
+        public date: Date,
+        public value: number,
+        public notes: string
+    ) {
+    }
+}
+
+
+export class MeasurementEntryAdapter implements Adapter<MeasurementEntry> {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fromJson(item: any) {
+        return new MeasurementEntry(
+            item.id,
+            item.category,
+            new Date(item.date),
+            item.value,
+            item.notes
+        );
+    }
+
+    toJson(item: MeasurementEntry) {
+        return {
+            id: item.id,
+            category: item.category,
+            date: item.date,
+            value: item.value,
+            notes: item.notes
+        };
+    }
+}

package/src/components/Measurements/queries/index.ts

@@ -0,0 +1,121 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+    deleteMeasurementEntry,
+    editMeasurementEntry,
+    getMeasurementCategories,
+    getMeasurementCategory
+} from "services";
+import {
+    addMeasurementCategory,
+    AddMeasurementCategoryParams,
+    addMeasurementEntry,
+    AddMeasurementParams,
+    deleteMeasurementCategory,
+    editMeasurementCategory,
+    editMeasurementCategoryParams,
+    editMeasurementParams,
+    MeasurementQueryOptions
+} from "services/measurements";
+import { QUERY_MEASUREMENTS, QUERY_MEASUREMENTS_CATEGORIES, } from "utils/consts";
+
+
+export function useMeasurementsCategoryQuery(options?: MeasurementQueryOptions) {
+    return useQuery({
+        queryKey: [QUERY_MEASUREMENTS_CATEGORIES, JSON.stringify(options || {})],
+        queryFn: () => getMeasurementCategories(options)
+    });
+}
+
+export const useAddMeasurementCategoryQuery = () => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (data: AddMeasurementCategoryParams) => addMeasurementCategory(data),
+        onSuccess: () => queryClient.invalidateQueries({
+            queryKey: [QUERY_MEASUREMENTS_CATEGORIES,]
+        })
+    });
+};
+
+export const useEditMeasurementCategoryQuery = (id: number) => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (data: editMeasurementCategoryParams) => editMeasurementCategory(data),
+        onSuccess: () => {
+            queryClient.invalidateQueries({
+                queryKey: [QUERY_MEASUREMENTS, id]
+            });
+            queryClient.invalidateQueries({
+                queryKey: [QUERY_MEASUREMENTS_CATEGORIES,]
+            });
+        }
+    });
+};
+
+export const useDeleteMeasurementCategoryQuery = (id: number) => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (id: number) => deleteMeasurementCategory(id),
+        onSuccess: () => {
+            queryClient.invalidateQueries({
+                queryKey: [QUERY_MEASUREMENTS, id]
+            });
+            queryClient.invalidateQueries({
+                queryKey: [QUERY_MEASUREMENTS_CATEGORIES,]
+            });
+        }
+    });
+};
+
+
+export function useMeasurementsQuery(id: number) {
+    return useQuery({
+        queryKey: [QUERY_MEASUREMENTS, id],
+        queryFn: () => getMeasurementCategory(id)
+    });
+}
+
+export const useAddMeasurementEntryQuery = () => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (data: AddMeasurementParams) => addMeasurementEntry(data),
+        onSuccess: () => {
+            queryClient.invalidateQueries({
+                queryKey: [QUERY_MEASUREMENTS,]
+            });
+            queryClient.invalidateQueries({
+                queryKey: [QUERY_MEASUREMENTS_CATEGORIES,]
+            });
+        }
+    });
+};
+
+export const useEditMeasurementEntryQuery = () => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (data: editMeasurementParams) => editMeasurementEntry(data),
+        onSuccess: () => {
+            queryClient.invalidateQueries({
+                queryKey: [QUERY_MEASUREMENTS,]
+            });
+            queryClient.invalidateQueries({
+                queryKey: [QUERY_MEASUREMENTS_CATEGORIES,]
+            });
+        }
+    });
+};
+
+export const useDeleteMeasurementsQuery = (/*id: number*/) => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (id: number) => deleteMeasurementEntry(id),
+        onSuccess: () => queryClient.invalidateQueries({
+            queryKey: [QUERY_MEASUREMENTS,]
+        })
+    });
+};

package/src/components/Measurements/widgets/CategoryDetailDataGrid.tsx

@@ -0,0 +1,209 @@
+import CancelIcon from "@mui/icons-material/Close";
+import DeleteIcon from "@mui/icons-material/DeleteOutlined";
+import EditIcon from "@mui/icons-material/Edit";
+import SaveIcon from "@mui/icons-material/Save";
+import { Box } from "@mui/material";
+import {
+    DataGrid,
+    GridActionsCellItem,
+    GridColDef,
+    GridEventListener,
+    GridRowEditStopReasons,
+    GridRowId,
+    GridRowModel,
+    GridRowModes,
+    GridRowModesModel,
+    GridRowsProp,
+} from "@mui/x-data-grid";
+import { MeasurementCategory } from "components/Measurements/models/Category";
+import { MeasurementEntry } from "components/Measurements/models/Entry";
+import { useDeleteMeasurementsQuery, useEditMeasurementEntryQuery } from "components/Measurements/queries";
+import { DateTime } from "luxon";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { PAGINATION_OPTIONS } from "utils/consts";
+import { luxonDateTimeToLocale } from "utils/date";
+
+const convertEntriesToObj = (entries: MeasurementEntry[]): GridRowsProp => {
+    return entries.map((entry) => {
+        return {
+            id: entry.id,
+            category: entry.category,
+            date: entry.date,
+            value: entry.value,
+            notes: entry.notes
+        };
+    });
+};
+
+
+export const CategoryDetailDataGrid = (props: { category: MeasurementCategory }) => {
+
+    const [t] = useTranslation();
+    const data: GridRowsProp = convertEntriesToObj(props.category.entries);
+    const updateEntryQuery = useEditMeasurementEntryQuery();
+    const deleteEntryQuery = useDeleteMeasurementsQuery();
+    const [rows, setRows] = useState(data);
+    const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({});
+
+
+    const handleRowEditStop: GridEventListener<'rowEditStop'> = (params, event) => {
+        if (params.reason === GridRowEditStopReasons.rowFocusOut) {
+            event.defaultMuiPrevented = true;
+        }
+    };
+
+    const handleEditClick = (id: GridRowId) => () => {
+        setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } });
+    };
+
+    const handleSaveClick = (id: GridRowId) => () => {
+        setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } });
+    };
+
+    const handleDeleteClick = (id: GridRowId) => async () => {
+        console.log('deleting entry', id);
+        deleteEntryQuery.mutate(parseInt(id.toString()));
+        setRows(rows.filter((row) => row.id !== id));
+    };
+
+    const handleCancelClick = (id: GridRowId) => () => {
+        setRowModesModel({
+            ...rowModesModel,
+            [id]: { mode: GridRowModes.View, ignoreModifications: true },
+        });
+
+        const editedRow = rows.find((row) => row.id === id);
+        //if (editedRow!.isNew) {
+        if (editedRow?.id === null) {
+            setRows(rows.filter((row) => row.id !== id));
+        }
+    };
+
+
+    const processRowUpdate = async (newRow: GridRowModel) => {
+
+        updateEntryQuery.mutate({
+            id: newRow.id,
+            categoryId: newRow.category,
+            date: newRow.date,
+            value: newRow.value,
+            notes: newRow.notes
+        });
+
+        const updatedRow = { ...newRow, isNew: false };
+        setRows(rows.map((row) => (row.id === newRow.id ? updatedRow : row)));
+        return updatedRow;
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const onProcessRowUpdateError = (error: any) => {
+        console.log(error);
+        //setRows(rows.map((row) => (row.id === newRow.id ? newRow : row)));
+    };
+
+    const handleRowModesModelChange = (newRowModesModel: GridRowModesModel) => {
+        setRowModesModel(newRowModesModel);
+    };
+
+    const columns: GridColDef[] = [
+        {
+            field: 'value',
+            headerName: t('value'),
+            width: 80,
+            editable: true,
+            valueFormatter: (value?: number) => {
+                if (value == null) {
+                    return '';
+                }
+                return value + props.category.unit;
+            },
+        },
+        {
+            field: 'date',
+            headerName: t('date'),
+            type: 'date',
+            width: 120,
+            editable: true,
+            valueFormatter: (value?: Date) => {
+                if (value == null) {
+                    return '';
+                }
+                return luxonDateTimeToLocale(DateTime.fromJSDate(value));
+            },
+        },
+        {
+            field: 'notes',
+            headerName: t('notes'),
+            type: 'string',
+            flex: 1,
+            editable: true,
+        },
+        {
+            field: 'actions',
+            type: 'actions',
+            headerName: t('actions'),
+            width: 100,
+            cellClassName: 'actions',
+            getActions: ({ id }) => {
+                const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit;
+
+                if (isInEditMode) {
+                    return [
+                        <GridActionsCellItem
+                            icon={<SaveIcon />}
+                            label="Save"
+                            onClick={handleSaveClick(id)}
+                        />,
+                        <GridActionsCellItem
+                            icon={<CancelIcon />}
+                            label="Cancel"
+                            className="textPrimary"
+                            onClick={handleCancelClick(id)}
+                            color="inherit"
+                        />,
+                    ];
+                }
+
+                return [
+                    <GridActionsCellItem
+                        icon={<EditIcon />}
+                        label="Edit"
+                        className="textPrimary"
+                        onClick={handleEditClick(id)}
+                        color="inherit"
+                    />,
+                    <GridActionsCellItem
+                        icon={<DeleteIcon />}
+                        label="Delete"
+                        onClick={handleDeleteClick(id)}
+                        color="inherit"
+                    />,
+                ];
+            },
+        },
+    ];
+
+
+    return <Box sx={{ width: '100%' }}>
+        <DataGrid
+            editMode="row"
+            rows={data}
+            columns={columns}
+            initialState={{
+                pagination: {
+                    paginationModel: {
+                        pageSize: PAGINATION_OPTIONS.pageSize,
+                    },
+                },
+            }}
+            pageSizeOptions={PAGINATION_OPTIONS.pageSizeOptions}
+            disableRowSelectionOnClick
+            rowModesModel={rowModesModel}
+            onRowModesModelChange={handleRowModesModelChange}
+            onRowEditStop={handleRowEditStop}
+            processRowUpdate={processRowUpdate}
+            onProcessRowUpdateError={onProcessRowUpdateError}
+        />
+    </Box>;
+};

package/src/components/Measurements/widgets/CategoryDetailDropdown.tsx

@@ -0,0 +1,83 @@
+import MenuIcon from '@mui/icons-material/Menu';
+import { Button, Menu, MenuItem } from "@mui/material";
+import { DeleteConfirmationModal } from "components/Core/Modals/DeleteConfirmationModal";
+import { WgerModal } from "components/Core/Modals/WgerModal";
+import { MeasurementCategory } from "components/Measurements/models/Category";
+import { useDeleteMeasurementCategoryQuery } from "components/Measurements/queries";
+import { CategoryForm } from "components/Measurements/widgets/CategoryForm";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { makeLink, WgerLink } from "utils/url";
+
+export const CategoryDetailDropdown = (props: { category: MeasurementCategory }) => {
+
+    const deleteCategoryQuery = useDeleteMeasurementCategoryQuery(props.category.id);
+    const navigate = useNavigate();
+
+    const [t] = useTranslation();
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const [openEditModal, setOpenEditModal] = React.useState(false);
+    const [openDeleteModal, setOpenDeleteModal] = React.useState(false);
+    const open = Boolean(anchorEl);
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleEdit = () => {
+        handleClose();
+        handleOpenEditModal();
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const handleDelete = () => {
+        handleOpenDeleteModal();
+        setAnchorEl(null);
+    };
+
+    const performDelete = () => {
+        deleteCategoryQuery.mutate(props.category.id);
+        navigate((makeLink(WgerLink.MEASUREMENT_OVERVIEW)));
+    };
+
+
+    const handleOpenEditModal = () => setOpenEditModal(true);
+    const handleCloseEditModal = () => setOpenEditModal(false);
+    const handleOpenDeleteModal = () => setOpenDeleteModal(true);
+    const handleCloseDeleteModal = () => setOpenDeleteModal(false);
+
+
+    return (
+        <div>
+            <Button onClick={handleClick}>
+                <MenuIcon />
+            </Button>
+            <Menu
+                anchorEl={anchorEl}
+                open={open}
+                onClose={handleClose}
+                MenuListProps={{
+                    'aria-labelledby': 'basic-button',
+                }}
+            >
+                <MenuItem onClick={handleEdit}>{t("edit")}</MenuItem>
+                <MenuItem onClick={handleDelete}>{t("delete")}</MenuItem>
+            </Menu>
+
+            <WgerModal title={t('edit')} isOpen={openEditModal} closeFn={handleCloseEditModal}>
+                <CategoryForm category={props.category} closeFn={handleCloseEditModal} />
+            </WgerModal>
+
+            <DeleteConfirmationModal
+                title={t('deleteConfirmation', { name: props.category.name })}
+                message={t('measurements.deleteInfo')}
+                isOpen={openDeleteModal}
+                closeFn={handleCloseDeleteModal}
+                deleteFn={performDelete}
+            />
+        </div>
+    );
+};