23447758866

Committed 23 Mar 2026 04:18PM UTC coverage: 75.178% (+0.2%) from 74.929%

Build # 23447758866

Build Type

Pull #1215

github

Committed by

web-flow

Commit Message

Merge 10daf4df6 into 35347ac9c

Pull Request Pull Request #1215: Improve image edit form #1209

Coverage Stats

1898 of 2889 branches covered (65.7%)

Branch coverage included in aggregate %.

59 of 95 new or added lines in 8 files covered. (62.11%)

1 existing line in 1 file now uncovered.

5919 of 7509 relevant lines covered (78.83%)

28.63 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

90.0

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

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 [field, , helpers] = useField(props.fieldName);
    const selectedStyle = (field.value !== undefined && field.value !== null && field.value !== '')
        ? Number(field.value)
        : undefined;
    const [style, setStyle] = React.useState<number | undefined>(selectedStyle);

    const handleAlignment = (
        event: React.MouseEvent<HTMLElement>,
        newStyle: number | null,
    ) => {
        if (newStyle === null) {
          return;
        }
        helpers.setValue(newStyle);
        setStyle(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>
    );
}

1	import LandscapeIcon from '@mui/icons-material/Landscape';	7✔
2	import LandscapeOutlinedIcon from '@mui/icons-material/LandscapeOutlined';	7✔
3	import LandscapeTwoToneIcon from '@mui/icons-material/LandscapeTwoTone';	7✔
4	import MoreHorizIcon from '@mui/icons-material/MoreHoriz';	7✔
5	import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';	7✔
6	import { Stack, Typography } from "@mui/material";	7✔
7	import ToggleButton from '@mui/material/ToggleButton';	7✔
8	import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';	7✔
9	import { ImageStyle } from "components/Exercises/models/image";	7✔
10	import { useField } from "formik";	7✔
11	import * as React from 'react';	7✔
12	import { useTranslation } from "react-i18next";	7✔
13
14	export function ImageStyleToggle(props: { fieldName: string }) {	7✔
15	const [t] = useTranslation();	239✔
16
17	const [field, , helpers] = useField(props.fieldName);	239✔
18	const selectedStyle = (field.value !== undefined && field.value !== null && field.value !== '')	239!
19	? Number(field.value)
20	: undefined;
21	const [style, setStyle] = React.useState<number \| undefined>(selectedStyle);	239✔
22
23	const handleAlignment = (	239✔
24	event: React.MouseEvent<HTMLElement>,
25	newStyle: number \| null,
26	) => {
27	if (newStyle === null) {	1!
NEW 28	return;	×
29	}
30	helpers.setValue(newStyle);	1✔
31	setStyle(newStyle);	1✔
32	};
33
34	return (	239✔
35	<ToggleButtonGroup
36	value={style}
37	exclusive
38	fullWidth
39	onChange={handleAlignment}
40	aria-label="text alignment"
41	>
42	<ToggleButton value={ImageStyle.PHOTO}>
43	<Stack justifyContent="center" alignItems="center">
44	<PhotoCameraIcon />
45	<Typography variant="caption">{t('exercises.imageStylePhoto')}</Typography>
46	</Stack>
47	</ToggleButton>
48
49	<ToggleButton value={ImageStyle.THREE_D}>
50	<Stack justifyContent="center" alignItems="center">
51	<LandscapeIcon />
52	<Typography variant="caption">{t('exercises.imageStyle3D')}</Typography>
53	</Stack>
54	</ToggleButton>
55
56	<ToggleButton value={ImageStyle.LINE_ART}>
57	<Stack justifyContent="center" alignItems="center">
58	<LandscapeOutlinedIcon />
59	<Typography variant="caption">{t('exercises.imageStyleLine')}</Typography>
60	</Stack>
61	</ToggleButton>
62
63	<ToggleButton value={ImageStyle.LOW_POLY}>
64	<Stack justifyContent="center" alignItems="center">
65	<LandscapeTwoToneIcon />
66	<Typography variant="caption">{t('exercises.imageStyleLowPoly')}</Typography>
67	</Stack>
68	</ToggleButton>
69
70	<ToggleButton value={ImageStyle.OTHER}>
71	<Stack justifyContent="center" alignItems="center">
72	<MoreHorizIcon />
73	<Typography variant="caption">{t('exercises.imageStyleOther')}</Typography>
74	</Stack>
75	</ToggleButton>
76	</ToggleButtonGroup>
77	);
78	}

wger-project / react / 23447758866

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous