@wger-project/react-components 25.10.16

package/src/components/Exercises/forms/Category.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { EditExerciseCategory } from "components/Exercises/forms/Category";
+import { useCategoriesQuery } from "components/Exercises/queries";
+import { useProfileQuery } from "components/User/queries/profile";
+import React from "react";
+import { editExercise } from "services";
+import { testCategories } from "tests/exerciseTestdata";
+import { testProfileDataVerified } from "tests/userTestdata";
+
+jest.mock("components/User/queries/profile");
+jest.mock("components/Exercises/queries");
+jest.mock("services");
+
+describe("Test the edit widget to live edit the category", () => {
+
+    test('Clicking on a category immediately fires the request', async () => {
+
+        // Arrange
+        (useCategoriesQuery as jest.Mock).mockImplementation(() => (
+            { isSuccess: true, data: testCategories }
+        ));
+        (useProfileQuery as jest.Mock).mockImplementation(() => (
+            { isSuccess: true, data: testProfileDataVerified }
+        ));
+        (editExercise as jest.Mock).mockImplementation(() => (100));
+        const user = userEvent.setup();
+
+        // Act
+        render(
+            <EditExerciseCategory
+                exerciseId={100}
+                initial={2}
+            />
+        );
+
+        // Assert
+        const select = await screen.findByText(/legs/i);
+        expect(select).toBeInTheDocument();
+
+
+        await user.click(select);
+        const chest = await screen.findByText(/chest/i);
+        await user.click(chest);
+
+        // eslint-disable-next-line camelcase
+        expect(editExercise).toHaveBeenCalledWith(100, { category: 3, license_author: "admin" });
+    });
+});

package/src/components/Exercises/forms/Category.tsx

@@ -0,0 +1,41 @@
+import { FormControl, InputLabel, MenuItem, Select, SelectChangeEvent } from "@mui/material";
+import { useCategoriesQuery } from "components/Exercises/queries";
+import { useProfileQuery } from "components/User/queries/profile";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { editExercise } from "services";
+
+export function EditExerciseCategory(props: { exerciseId: number, initial: number }) {
+    const { t } = useTranslation();
+    const [value, setValue] = React.useState<string>(props.initial.toString());
+    const categoryQuery = useCategoriesQuery();
+    const profileQuery = useProfileQuery();
+
+    const handleOnChange = async (e: SelectChangeEvent) => {
+        setValue(e.target.value);
+        await editExercise(props.exerciseId, {
+            category: parseInt(e.target.value),
+
+            // eslint-disable-next-line camelcase
+            license_author: profileQuery.data!.username
+        });
+    };
+
+    return categoryQuery.isSuccess
+        ? <FormControl fullWidth>
+            <InputLabel id="label-category">{t("category")}</InputLabel><Select
+            labelId="label-category"
+            id="category"
+            label={t("category")}
+            value={value}
+            onChange={handleOnChange}
+        >
+            {categoryQuery.data!.map(category => (
+                <MenuItem key={category.id} value={category.id}>
+                    {category.translatedName}
+                </MenuItem>
+            ))}
+        </Select>
+        </FormControl>
+        : null;
+}

package/src/components/Exercises/forms/Equipment.test.tsx

@@ -0,0 +1,84 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { EditExerciseEquipment } from "components/Exercises/forms/Equipment";
+import { useEquipmentQuery } from "components/Exercises/queries";
+import { useProfileQuery } from "components/User/queries/profile";
+import React from "react";
+import { editExercise } from "services";
+import { testEquipment } from "tests/exerciseTestdata";
+import { testProfileDataVerified } from "tests/userTestdata";
+
+jest.mock("components/User/queries/profile");
+jest.mock("components/Exercises/queries");
+jest.mock("services");
+
+describe("Test the edit widget to live edit the equipment", () => {
+
+    beforeEach(() => {
+        (useEquipmentQuery as jest.Mock).mockImplementation(() => (
+            { isSuccess: true, data: testEquipment }
+        ));
+        (useProfileQuery as jest.Mock).mockImplementation(() => (
+            { isSuccess: true, data: testProfileDataVerified }
+        ));
+        (editExercise as jest.Mock).mockImplementation(() => (100));
+    });
+
+
+    test('Clicking on the equipment immediately fires the request', async () => {
+
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(
+            <EditExerciseEquipment
+                exerciseId={100}
+                initial={[1, 2]}
+            />
+        );
+
+        // Assert
+        const barbell = await screen.findByText(/Barbell/i);
+        expect(barbell).toBeInTheDocument();
+        const dumbbell = await screen.findByText(/Dumbbell/i);
+        expect(dumbbell).toBeInTheDocument();
+
+        const textbox = screen.getByRole('combobox', {
+            name: /equipment/i
+        });
+
+        await user.click(textbox);
+        const rocks = await screen.findByText(/rocks/i);
+        await user.click(rocks);
+
+        // eslint-disable-next-line camelcase
+        expect(editExercise).toHaveBeenCalledWith(100, { equipment: [1, 2, 42], license_author: "admin" });
+    });
+
+    test('Clicking on an existing equipment, removes it', async () => {
+
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(
+            <EditExerciseEquipment
+                exerciseId={100}
+                initial={[1, 2]}
+            />
+        );
+
+        // Assert
+        const textbox = screen.getByRole('combobox', {
+            name: /equipment/i
+        });
+
+        await user.click(textbox);
+        const rocks = screen.getByRole('option', { name: /dumbbell/i });
+        await user.click(rocks);
+
+        // eslint-disable-next-line camelcase
+        expect(editExercise).toHaveBeenCalledWith(100, { equipment: [1], license_author: "admin" });
+    });
+});

package/src/components/Exercises/forms/Equipment.tsx

@@ -0,0 +1,38 @@
+import { Autocomplete, TextField } from "@mui/material";
+import { useEquipmentQuery } from "components/Exercises/queries";
+import { useProfileQuery } from "components/User/queries/profile";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { editExercise } from "services";
+
+export function EditExerciseEquipment(props: { exerciseId: number, initial: number[] }) {
+    const { t } = useTranslation();
+    const [value, setValue] = React.useState<number[]>(props.initial);
+    const equipmentQuery = useEquipmentQuery();
+    const profileQuery = useProfileQuery();
+
+    const handleOnChange = async (newValue: number[]) => {
+        setValue(newValue);
+
+        // eslint-disable-next-line camelcase
+        await editExercise(props.exerciseId, { equipment: newValue, license_author: profileQuery.data!.username });
+    };
+
+    return equipmentQuery.isSuccess
+        ? <Autocomplete
+            multiple
+            value={value}
+            options={equipmentQuery.data.map(e => e.id)}
+            getOptionLabel={option => equipmentQuery.data.find(e => e.id === option)!.translatedName}
+            onChange={(event, newValue) => handleOnChange(newValue)}
+            renderInput={params => (
+                <TextField
+                    variant="standard"
+                    label={t("exercises.equipment")}
+                    value={value}
+                    {...params}
+                />
+            )}
+        />
+        : null;
+}

package/src/components/Exercises/forms/ExerciseAliases.tsx

@@ -0,0 +1,37 @@
+import { Autocomplete, Chip, TextField } from "@mui/material";
+import { useField } from "formik";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+export function ExerciseAliases(props: { fieldName: string }) {
+    const [t] = useTranslation();
+    const [field, meta, helpers] = useField(props.fieldName);
+
+    return <Autocomplete
+        multiple
+        freeSolo
+        id={props.fieldName}
+        value={field.value}
+        options={field.value}
+        onChange={(event, newValue) => {
+            helpers.setValue(newValue);
+        }}
+        renderValue={(value: readonly string[], getTagProps) => {
+            return value.map((option: string, index: number) => (
+                <Chip label={option} {...getTagProps({ index })} key={index} />
+            ));
+        }}
+        onBlur={field.onBlur}
+        renderInput={params => (
+            <TextField
+                {...params}
+                id="exerciseAliases"
+                variant="standard"
+                label={t("exercises.alternativeNames")}
+                error={meta.touched && Boolean(meta.error)}
+                helperText={meta.touched && meta.error}
+                value={field.value}
+            />
+        )}
+    />;
+}

package/src/components/Exercises/forms/ExerciseDescription.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { useField } from "formik";
+import { FormHelperText } from "@mui/material";
+import {
+    BtnBold,
+    BtnBulletList,
+    BtnItalic,
+    BtnNumberedList,
+    BtnRedo,
+    BtnUnderline,
+    BtnUndo,
+    Editor,
+    EditorProps,
+    EditorProvider,
+    Separator,
+    Toolbar,
+} from "react-simple-wysiwyg";
+
+export function ExerciseEditor(props: EditorProps) {
+    return (
+        <EditorProvider>
+            <Editor {...props}>
+                <Toolbar>
+                    <BtnBold />
+                    <BtnItalic />
+                    <BtnUnderline />
+                    <Separator />
+                    <BtnBulletList />
+                    <BtnNumberedList />
+                    <Separator />
+                    <BtnUndo />
+                    <BtnRedo />
+                    { /* <HtmlButton /> */}
+                </Toolbar>
+            </Editor>
+        </EditorProvider>
+    );
+}
+
+
+export function ExerciseDescription(props: { fieldName: string }) {
+
+    const [field, meta, helpers] = useField(props.fieldName);
+
+    return <>
+        <div data-testid={'jodit-editor'}>
+            <ExerciseEditor
+                value={field.value}
+                onChange={(newValue) => helpers.setValue(newValue.target.value)}
+            />
+        </div>
+        {meta.touched
+            && Boolean(meta.error)
+            && <FormHelperText error>{meta.error}</FormHelperText>
+        }
+    </>;
+}

package/src/components/Exercises/forms/ExerciseEquipmentSelect.tsx

@@ -0,0 +1,29 @@
+import { Autocomplete, TextField } from "@mui/material";
+import { useField } from "formik";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function ExerciseEquipmentSelect(props: { fieldName: string, options: any[] }) {
+    const [t] = useTranslation();
+    const [field, , helpers] = useField(props.fieldName);
+
+    return <Autocomplete
+        multiple
+        id={props.fieldName}
+        options={props.options.map(e => e.id)}
+        getOptionLabel={option => props.options.find(e => e.id === option)!.translatedName}
+        {...field}
+        onChange={(event, newValue) => {
+            helpers.setValue(newValue);
+        }}
+        renderInput={params => (
+            <TextField
+                variant="standard"
+                label={t("exercises.equipment")}
+                value={field.value}
+                {...params}
+            />
+        )}
+    />;
+}

package/src/components/Exercises/forms/ExerciseName.tsx

@@ -0,0 +1,19 @@
+import { useTranslation } from "react-i18next";
+import { TextField } from "@mui/material";
+import React from "react";
+import { useField } from "formik";
+
+export function ExerciseName(props: { fieldName: string }) {
+    const [t] = useTranslation();
+    const [field, meta] = useField(props.fieldName);
+
+    return <TextField
+        fullWidth
+        id={props.fieldName}
+        label={t("name")}
+        variant="standard"
+        error={meta.touched && Boolean(meta.error)}
+        helperText={meta.touched && meta.error}
+        {...field}
+    />;
+}

package/src/components/Exercises/forms/ExerciseNotes.tsx

@@ -0,0 +1,72 @@
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { IconButton, InputAdornment, TextField } from "@mui/material";
+import Grid from '@mui/material/Grid';
+import { useField } from "formik";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export function ExerciseNotes(props: { fieldName: string }) {
+    const [t] = useTranslation();
+    const [field, meta, helpers] = useField(props.fieldName);
+    const [newNoteValue, setNewNoteValue] = useState<string>('');
+
+    const deleteAtIndex = (index: number) => {
+        helpers.setValue(field.value.filter((_: string, b: number) => b !== index));
+    };
+
+    const setNoteValueIndex = (index: number, note: string) => {
+        field.value[index] = note;
+        helpers.setValue(field.value);
+    };
+    const addEntry = () => {
+        field.value.push(newNoteValue);
+        helpers.setValue(field.value);
+        setNewNoteValue('');
+    };
+
+    return <>
+        <Grid size={12}>
+            <TextField
+                fullWidth
+                label={t('exercises.newNote')}
+                sx={{ mb: 3 }}
+                variant="standard"
+                value={newNoteValue}
+                onChange={event => setNewNoteValue(event.target.value)}
+                error={meta.touched && Boolean(meta.error)}
+                helperText={meta.touched && meta.error ? meta.error : t('exercises.notesHelpText')}
+                InputProps={{
+                    endAdornment: (
+                        <InputAdornment position="end">
+                            <IconButton onClick={addEntry}>
+                                <AddIcon />
+                            </IconButton>
+                        </InputAdornment>
+                    ),
+                }}
+            />
+        </Grid>
+        {field.value.map((note: string, index: number) =>
+            <TextField
+                key={index}
+                fullWidth
+                value={note}
+                onChange={(event) => setNoteValueIndex(index, event.target.value)}
+                sx={{ mt: 2 }}
+                variant="standard"
+                error={meta.touched && Boolean(meta.error)}
+                InputProps={{
+                    endAdornment: (
+                        <InputAdornment position="end">
+                            <IconButton onClick={() => deleteAtIndex(index)}>
+                                <DeleteIcon />
+                            </IconButton>
+                        </InputAdornment>
+                    ),
+                }}
+
+            />
+        )}
+    </>;
+}

package/src/components/Exercises/forms/ExerciseSelect.tsx

@@ -0,0 +1,28 @@
+import { FormControl, FormHelperText, InputLabel, Select } from "@mui/material";
+import { useField } from "formik";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function ExerciseSelect(props: { fieldName: string, options: any }) {
+    const [t] = useTranslation();
+    const [field, meta] = useField(props.fieldName);
+
+    return <FormControl fullWidth>
+        <InputLabel id="label-category">{t("category")}</InputLabel>
+        <Select
+            labelId="label-category"
+            id="category"
+            label={t("category")}
+            error={meta.touched && Boolean(meta.error)}
+            {...field}
+        >
+            {props.options}
+        </Select>
+        {
+            meta.touched
+            && Boolean(meta.error)
+            && <FormHelperText error>{meta.error}</FormHelperText>
+        }
+    </FormControl>;
+}

package/src/components/Exercises/forms/ImageCard.tsx

@@ -0,0 +1,101 @@
+import AddCircleIcon from '@mui/icons-material/AddCircle';
+import { Box, Button, Card, CardActions, CardMedia } from "@mui/material";
+import { FormQueryErrorsSnackbar } from "components/Core/Widgets/FormError";
+import { ExerciseImage } from "components/Exercises/models/image";
+import { useAddExerciseImageQuery, useDeleteExerciseImageQuery } from "components/Exercises/queries";
+import { useProfileQuery } from "components/User/queries/profile";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+type ImageCardProps = {
+    exerciseId: number;
+    image: ExerciseImage;
+    canDelete: boolean
+};
+
+export const ImageEditCard = ({ exerciseId, image, canDelete }: ImageCardProps) => {
+    const [t] = useTranslation();
+    const deleteImageQuery = useDeleteExerciseImageQuery(exerciseId);
+
+    return <Card>
+        <CardMedia
+            component="img"
+            image={image.url}
+            sx={{ height: 120 }}
+            alt=""
+        />
+        <CardActions>
+            {canDelete &&
+                <Button
+                    color="primary"
+                    onClick={() => deleteImageQuery.mutate(image.id)}
+                >
+                    {t('delete')}
+                </Button>}
+        </CardActions>
+    </Card>;
+};
+
+type AddImageCardProps = {
+    exerciseId: number;
+};
+
+export const AddImageCard = ({ exerciseId }: AddImageCardProps) => {
+
+    const [t] = useTranslation();
+    const profileQuery = useProfileQuery();
+    const addImageQuery = useAddExerciseImageQuery(exerciseId);
+
+    const handleFileInputChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (!e.target.files?.length) {
+            return;
+        }
+        const [uploadedFile] = e.target.files;
+        if (profileQuery.isSuccess) {
+
+            addImageQuery.mutate({
+                exerciseId: exerciseId,
+                image: uploadedFile,
+                imageData: {
+                    url: '',
+                    file: uploadedFile,
+                    author: '',
+                    authorUrl: '',
+                    title: '',
+                    objectUrl: '',
+                    derivativeSourceUrl: '',
+                    style: ''
+                },
+            });
+        }
+    };
+
+    return <>
+        <Card>
+            <CardMedia>
+                <Box sx={{ backgroundColor: "lightgray", height: 120 }}
+                     display="flex"
+                     alignItems="center"
+                     justifyContent="center">
+                    <AddCircleIcon sx={{ fontSize: 80, color: "gray" }} />
+                </Box>
+            </CardMedia>
+            <CardActions>
+                <Button component="label">
+                    {t('add')}
+                    <input
+                        style={{ display: "none" }}
+                        id="camera-input"
+                        type="file"
+                        accept="image/*"
+                        capture="environment"
+                        onChange={handleFileInputChange}
+                    />
+                </Button>
+            </CardActions>
+        </Card>
+        {addImageQuery.isError &&
+            <FormQueryErrorsSnackbar mutationQuery={addImageQuery} />
+        }
+    </>;
+};

package/src/components/Exercises/forms/ImageStyle.tsx

@@ -0,0 +1,74 @@
+import LandscapeIcon from '@mui/icons-material/Landscape';
+import LandscapeOutlinedIcon from '@mui/icons-material/LandscapeOutlined';
+import LandscapeTwoToneIcon from '@mui/icons-material/LandscapeTwoTone';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
+import { Stack, Typography } from "@mui/material";
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import { ImageStyle } from "components/Exercises/models/image";
+import { useField } from "formik";
+import * as React from 'react';
+import { useTranslation } from "react-i18next";
+
+export function ImageStyleToggle(props: { fieldName: string }) {
+    const [t] = useTranslation();
+
+    const [style, setStyle] = React.useState<number | null>(ImageStyle.PHOTO);
+
+    const [, , helpers] = useField(props.fieldName);
+
+
+    const handleAlignment = (
+        event: React.MouseEvent<HTMLElement>,
+        newStyle: number | null,
+    ) => {
+        setStyle(newStyle);
+        helpers.setValue(newStyle);
+    };
+
+    return (
+        <ToggleButtonGroup
+            value={style}
+            exclusive
+            fullWidth
+            onChange={handleAlignment}
+            aria-label="text alignment"
+        >
+            <ToggleButton value={ImageStyle.PHOTO}>
+                <Stack justifyContent="center" alignItems="center">
+                    <PhotoCameraIcon />
+                    <Typography variant="caption">{t('exercises.imageStylePhoto')}</Typography>
+                </Stack>
+            </ToggleButton>
+
+            <ToggleButton value={ImageStyle.THREE_D}>
+                <Stack justifyContent="center" alignItems="center">
+                    <LandscapeIcon />
+                    <Typography variant="caption">{t('exercises.imageStyle3D')}</Typography>
+                </Stack>
+            </ToggleButton>
+
+            <ToggleButton value={ImageStyle.LINE_ART}>
+                <Stack justifyContent="center" alignItems="center">
+                    <LandscapeOutlinedIcon />
+                    <Typography variant="caption">{t('exercises.imageStyleLine')}</Typography>
+                </Stack>
+            </ToggleButton>
+
+            <ToggleButton value={ImageStyle.LOW_POLY}>
+                <Stack justifyContent="center" alignItems="center">
+                    <LandscapeTwoToneIcon />
+                    <Typography variant="caption">{t('exercises.imageStyleLowPoly')}</Typography>
+                </Stack>
+            </ToggleButton>
+
+            <ToggleButton value={ImageStyle.OTHER}>
+                <Stack justifyContent="center" alignItems="center">
+                    <MoreHorizIcon />
+                    <Typography variant="caption">{t('exercises.imageStyleOther')}</Typography>
+                </Stack>
+            </ToggleButton>
+        </ToggleButtonGroup>
+    );
+}