24368033547

Committed 13 Apr 2026 09:33PM UTC coverage: 75.4% (-0.1%) from 75.526%

Build # 24368033547

Build Type

Pull #1234

github

Committed by

web-flow

Commit Message

Merge 3867b437a into 6bc55ff81

Pull Request Pull Request #1234: version 2.5

Coverage Stats

2028 of 3038 branches covered (66.75%)

Branch coverage included in aggregate %.

177 of 244 new or added lines in 29 files covered. (72.54%)

3 existing lines in 1 file now uncovered.

6079 of 7714 relevant lines covered (78.8%)

28.4 hits per line

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

87.5

/src/components/Exercises/forms/VariationSelect.tsx

import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import PhotoIcon from '@mui/icons-material/Photo';
import SearchIcon from '@mui/icons-material/Search';
import {
    Avatar,
    AvatarGroup,
    InputAdornment,
    List,
    ListItem,
    ListItemButton,
    ListItemIcon,
    ListItemText,
    Paper,
    Switch,
    TextField,
} from "@mui/material";
import Grid from '@mui/material/Grid';
import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
import { Exercise } from "components/Exercises/models/exercise";
import { useExercisesQuery } from "components/Exercises/queries";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";

/*
 * Groups a list of objects by a property
 */

function groupBy<T, K>(list: T[], keyGetter: (item: T) => K): Map<K, T[]> {
    const map = new Map<K, T[]>();
    list.forEach((item: T) => {
        const key = keyGetter(item);
        const collection = map.get(key);
        if (!collection) {
            map.set(key, [item]);
        } else {
            collection.push(item);
        }
    });
    return map;
}

interface ExerciseInfoListItemProps {
    exercises: Exercise[];
    selectedVariationId: string | null;
    selectedNewVariationExerciseId: number | null;
    onToggle: (variationId: string | null, newVariationId: number | null) => void;
    highlight?: boolean;
}

const ExerciseInfoListItem = ({
                                  exercises,
                                  selectedVariationId,
                                  selectedNewVariationExerciseId,
                                  onToggle,
                                  highlight = false,
                              }: ExerciseInfoListItemProps) => {
    const MAX_EXERCISE_IMAGES = 4;
    const MAX_EXERCISE_NAMES = 5;
    const variationId = exercises[0].variationGroup;
    const exerciseId = exercises[0].id;

    const [showMore, setShowMore] = useState<boolean>(false);

    const handleToggle = () => {
        let newVarId = variationId;
        let newExId: number | null = exerciseId;

        if (newVarId !== null) {
            newExId = null;
            if (newVarId === selectedVariationId) {
                newVarId = null;
            }
        } else {
            newVarId = null;
            if (newExId === selectedNewVariationExerciseId) {
                newExId = null;
            }
        }

        onToggle(newVarId, newExId);
    };

    let isChecked;
    if (variationId === null) {
        isChecked = selectedNewVariationExerciseId === exerciseId;
    } else {
        isChecked = variationId === selectedVariationId;
    }

    return (
        <ListItem disableGutters sx={highlight ? { backgroundColor: 'action.selected' } : undefined}>
            <ListItemButton onClick={handleToggle}>
                <ListItemIcon>
                    <AvatarGroup max={MAX_EXERCISE_IMAGES} spacing={"small"}>
                        {exercises.map((base) =>
                            base.mainImage
                                ? <Avatar key={base.id} src={base.mainImage.url} />
                                : <Avatar key={base.id} children={<PhotoIcon />} />
                        )}
                    </AvatarGroup>
                </ListItemIcon>
                <ListItemText
                    primary={exercises.slice(0, showMore ? exercises.length : MAX_EXERCISE_NAMES).map((exercise) =>
                        <p style={{ margin: 0 }} key={exercise.id}>{exercise.getTranslation().name}</p>
                    )} />

                <Switch
                    key={`variation-${variationId}`}
                    edge="start"
                    checked={isChecked}
                    tabIndex={-1}
                    disableRipple
                />

                {!showMore && exercises.length > MAX_EXERCISE_NAMES
                    ? <ExpandMoreIcon onMouseEnter={() => setShowMore(true)} />
                    : null
                }

            </ListItemButton>
        </ListItem>
    );
};


export interface VariationSelectProps {
    exerciseId?: number;
    selectedVariationId: string | null;
    selectedNewVariationExerciseId: number | null;
    onChangeVariationId: (id: string | null) => void;
    onChangeNewVariationExerciseId: (id: number | null) => void;
}

export function VariationSelect({
                                    exerciseId,
                                    selectedVariationId,
                                    selectedNewVariationExerciseId,
                                    onChangeVariationId,
                                    onChangeNewVariationExerciseId,
                                }: VariationSelectProps) {
    const [t] = useTranslation();
    const exercisesQuery = useExercisesQuery();
    const [searchTerm, setSearchTerms] = useState<string>('');

    // Group exercises by variationId
    let allExercises: Exercise[] = [];
    let exercises: Exercise[] = [];
    let groupedExercises = new Map<string, Exercise[]>();
    if (exercisesQuery.isSuccess) {
        allExercises = exercisesQuery.data;

        if (searchTerm !== '') {
            allExercises = allExercises.filter((base) => base.getTranslation().name.toLowerCase().includes(searchTerm.toLowerCase()));
        }

        // Group first (including current exercise, so groups show all members)
        groupedExercises = groupBy(allExercises.filter(b => b.variationGroup !== null), (b: Exercise) => b.variationGroup as string);

        // Filter out the current exercise only for the standalone list
        exercises = exerciseId
            ? allExercises.filter((e) => e.id !== exerciseId)
            : allExercises;
    }

    const handleToggle = (variationId: string | null, newVariationId: number | null) => {
        onChangeVariationId(variationId);
        onChangeNewVariationExerciseId(newVariationId);
    };

    return <>
        <Grid container>
            <Grid size={{ xs: 12, sm: 6 }}>
                <TextField
                    fullWidth
                    label={t('name')}
                    helperText={t('exercises.filterVariations')}
                    variant="standard"
                    onChange={(event) => setSearchTerms(event.target.value)}
                    slotProps={{
                        input: {
                            startAdornment: (
                                <InputAdornment position="start">
                                    <SearchIcon />
                                </InputAdornment>
                            ),
                        }
                    }}
                />
            </Grid>
        </Grid>

        {exercisesQuery.isLoading
            ? <LoadingPlaceholder />
            : <Paper elevation={2} sx={{ mt: 2 }}>
                <List style={{ height: "400px", overflowY: "scroll" }}>
                    {/* Show the current variation group first */}
                    {selectedVariationId !== null && groupedExercises.has(selectedVariationId) && (
                        <ExerciseInfoListItem
                            exercises={groupedExercises.get(selectedVariationId)!}
                            key={'variation-current-' + selectedVariationId}
                            selectedVariationId={selectedVariationId}
                            selectedNewVariationExerciseId={selectedNewVariationExerciseId}
                            onToggle={handleToggle}
                            highlight
                        />
                    )}

                    {/* Remaining variation groups */}
                    {[...groupedExercises.keys()]
                        .filter(id => id !== selectedVariationId)
                        .map(variationId =>
                            <ExerciseInfoListItem
                                exercises={groupedExercises.get(variationId)!}
                                key={'variation-' + variationId}
                                selectedVariationId={selectedVariationId}
                                selectedNewVariationExerciseId={selectedNewVariationExerciseId}
                                onToggle={handleToggle}
                            />
                        )}

                    {/* Standalone exercises (no variation group) */}
                    {exercises.filter(b => b.variationGroup === null).map(exercise =>
                        <ExerciseInfoListItem
                            exercises={[exercise]}
                            key={'exercise-' + exercise.id}
                            selectedVariationId={selectedVariationId}
                            selectedNewVariationExerciseId={selectedNewVariationExerciseId}
                            onToggle={handleToggle}
                        />
                    )}
                </List>
            </Paper>
        }
    </>;
}

1	import ExpandMoreIcon from '@mui/icons-material/ExpandMore';	7✔
2	import PhotoIcon from '@mui/icons-material/Photo';	7✔
3	import SearchIcon from '@mui/icons-material/Search';	7✔
4	import {	7✔
5	Avatar,
6	AvatarGroup,
7	InputAdornment,
8	List,
9	ListItem,
10	ListItemButton,
11	ListItemIcon,
12	ListItemText,
13	Paper,
14	Switch,
15	TextField,
16	} from "@mui/material";
17	import Grid from '@mui/material/Grid';	7✔
18	import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";	7✔
19	import { Exercise } from "components/Exercises/models/exercise";
20	import { useExercisesQuery } from "components/Exercises/queries";	7✔
21	import React, { useState } from "react";	7✔
22	import { useTranslation } from "react-i18next";	7✔
23
24	/*
25	* Groups a list of objects by a property
26	*/
27
28	function groupBy<T, K>(list: T[], keyGetter: (item: T) => K): Map<K, T[]> {
29	const map = new Map<K, T[]>();	16✔
30	list.forEach((item: T) => {	16✔
31	const key = keyGetter(item);	23✔
32	const collection = map.get(key);	23✔
33	if (!collection) {	23✔
34	map.set(key, [item]);	14✔
35	} else {
36	collection.push(item);	9✔
37	}
38	});
39	return map;	16✔
40	}
41
42	interface ExerciseInfoListItemProps {
43	exercises: Exercise[];
44	selectedVariationId: string \| null;
45	selectedNewVariationExerciseId: number \| null;
46	onToggle: (variationId: string \| null, newVariationId: number \| null) => void;
47	highlight?: boolean;
48	}
49
50	const ExerciseInfoListItem = ({	7✔
51	exercises,
52	selectedVariationId,
53	selectedNewVariationExerciseId,
54	onToggle,
55	highlight = false,	24✔
56	}: ExerciseInfoListItemProps) => {
57	const MAX_EXERCISE_IMAGES = 4;	25✔
58	const MAX_EXERCISE_NAMES = 5;	25✔
59	const variationId = exercises[0].variationGroup;	25✔
60	const exerciseId = exercises[0].id;	25✔
61
62	const [showMore, setShowMore] = useState<boolean>(false);	25✔
63
64	const handleToggle = () => {	25✔
65	let newVarId = variationId;	6✔
66	let newExId: number \| null = exerciseId;	6✔
67
68	if (newVarId !== null) {	6✔
69	newExId = null;	3✔
70	if (newVarId === selectedVariationId) {	3!
NEW 71	newVarId = null;	×
72	}
73	} else {
74	newVarId = null;	3✔
75	if (newExId === selectedNewVariationExerciseId) {	3!
NEW 76	newExId = null;	×
77	}
78	}
79
80	onToggle(newVarId, newExId);	6✔
81	};
82
83	let isChecked;
84	if (variationId === null) {	25✔
85	isChecked = selectedNewVariationExerciseId === exerciseId;	11✔
86	} else {
87	isChecked = variationId === selectedVariationId;	14✔
88	}
89
90	return (	25✔
91	<ListItem disableGutters sx={highlight ? { backgroundColor: 'action.selected' } : undefined}>	25✔
92	<ListItemButton onClick={handleToggle}>
93	<ListItemIcon>
94	<AvatarGroup max={MAX_EXERCISE_IMAGES} spacing={"small"}>
95	{exercises.map((base) =>
96	base.mainImage	34!
97	? <Avatar key={base.id} src={base.mainImage.url} />
98	: <Avatar key={base.id} children={<PhotoIcon />} />
99	)}
100	</AvatarGroup>
101	</ListItemIcon>
102	<ListItemText
103	primary={exercises.slice(0, showMore ? exercises.length : MAX_EXERCISE_NAMES).map((exercise) =>	25!
104	<p style={{ margin: 0 }} key={exercise.id}>{exercise.getTranslation().name}</p>	34✔
105	)} />
106
107	<Switch
108	key={`variation-${variationId}`}
109	edge="start"
110	checked={isChecked}
111	tabIndex={-1}
112	disableRipple
113	/>
114
115	{!showMore && exercises.length > MAX_EXERCISE_NAMES	75!
NEW 116	? <ExpandMoreIcon onMouseEnter={() => setShowMore(true)} />	×
117	: null
118	}
119
120	</ListItemButton>
121	</ListItem>
122	);
123	};
124
125
126	export interface VariationSelectProps {
127	exerciseId?: number;
128	selectedVariationId: string \| null;
129	selectedNewVariationExerciseId: number \| null;
130	onChangeVariationId: (id: string \| null) => void;
131	onChangeNewVariationExerciseId: (id: number \| null) => void;
132	}
133
134	export function VariationSelect({	7✔
135	exerciseId,
136	selectedVariationId,
137	selectedNewVariationExerciseId,
138	onChangeVariationId,
139	onChangeNewVariationExerciseId,
140	}: VariationSelectProps) {
141	const [t] = useTranslation();	16✔
142	const exercisesQuery = useExercisesQuery();	16✔
143	const [searchTerm, setSearchTerms] = useState<string>('');	16✔
144
145	// Group exercises by variationId
146	let allExercises: Exercise[] = [];	16✔
147	let exercises: Exercise[] = [];	16✔
148	let groupedExercises = new Map<string, Exercise[]>();	16✔
149	if (exercisesQuery.isSuccess) {	16!
150	allExercises = exercisesQuery.data;	16✔
151
152	if (searchTerm !== '') {	16✔
153	allExercises = allExercises.filter((base) => base.getTranslation().name.toLowerCase().includes(searchTerm.toLowerCase()));	24✔
154	}
155
156	// Group first (including current exercise, so groups show all members)
157	groupedExercises = groupBy(allExercises.filter(b => b.variationGroup !== null), (b: Exercise) => b.variationGroup as string);	34✔
158
159	// Filter out the current exercise only for the standalone list
160	exercises = exerciseId	16!
NEW 161	? allExercises.filter((e) => e.id !== exerciseId)	×
162	: allExercises;
163	}
164
165	const handleToggle = (variationId: string \| null, newVariationId: number \| null) => {	16✔
166	onChangeVariationId(variationId);	6✔
167	onChangeNewVariationExerciseId(newVariationId);	6✔
168	};
169
170	return <>	16✔
171	<Grid container>
172	<Grid size={{ xs: 12, sm: 6 }}>
173	<TextField
174	fullWidth
175	label={t('name')}
176	helperText={t('exercises.filterVariations')}
177	variant="standard"
178	onChange={(event) => setSearchTerms(event.target.value)}	9✔
179	slotProps={{
180	input: {
181	startAdornment: (
182	<InputAdornment position="start">
183	<SearchIcon />
184	</InputAdornment>
185	),
186	}
187	}}
188	/>
189	</Grid>
190	</Grid>
191
192	{exercisesQuery.isLoading	16!
193	? <LoadingPlaceholder />
194	: <Paper elevation={2} sx={{ mt: 2 }}>
195	<List style={{ height: "400px", overflowY: "scroll" }}>
196	{/* Show the current variation group first */}
197	{selectedVariationId !== null && groupedExercises.has(selectedVariationId) && (	18✔
198	<ExerciseInfoListItem
199	exercises={groupedExercises.get(selectedVariationId)!}
200	key={'variation-current-' + selectedVariationId}
201	selectedVariationId={selectedVariationId}
202	selectedNewVariationExerciseId={selectedNewVariationExerciseId}
203	onToggle={handleToggle}
204	highlight
205	/>
206	)}
207
208	{/* Remaining variation groups */}
209	{[...groupedExercises.keys()]
210	.filter(id => id !== selectedVariationId)	14✔
211	.map(variationId =>
212	<ExerciseInfoListItem	13✔
213	exercises={groupedExercises.get(variationId)!}
214	key={'variation-' + variationId}
215	selectedVariationId={selectedVariationId}
216	selectedNewVariationExerciseId={selectedNewVariationExerciseId}
217	onToggle={handleToggle}
218	/>
219	)}
220
221	{/* Standalone exercises (no variation group) */}
222	{exercises.filter(b => b.variationGroup === null).map(exercise =>	34✔
223	<ExerciseInfoListItem	11✔
224	exercises={[exercise]}
225	key={'exercise-' + exercise.id}
226	selectedVariationId={selectedVariationId}
227	selectedNewVariationExerciseId={selectedNewVariationExerciseId}
228	onToggle={handleToggle}
229	/>
230	)}
231	</List>
232	</Paper>
233	}
234	</>;
235	}

wger-project / react / 24368033547

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