@wger-project/react-components 25.10.16

package/src/components/Exercises/Detail/Head/head.module.scss

@@ -0,0 +1,111 @@
+.root {
+  background-color: rgb(248, 248, 248);
+  padding: 1rem 1rem;
+
+  .detail_language {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    @media screen and (min-width: 700px) {
+
+    }
+
+    .detail {
+      display: none;
+
+      a {
+        text-decoration: none;
+        color: #283c5c;
+
+        &:hover {
+          color: rgb(17, 17, 17);
+        }
+      }
+
+      @media screen and (min-width: 700px) {
+        display: block;
+      }
+    }
+
+    .detail_arrow {
+      width: 25px;
+      height: 25px;
+      cursor: pointer;
+      border-radius: 50%;
+      // padding: 0.5rem;
+
+      &:hover {
+        background-color: white;
+      }
+
+      @media screen and (min-width: 700px) {
+        display: none;
+      }
+    }
+
+    .languages {
+      position: relative;
+
+      .language {
+        display: flex;
+        align-items: flex-end;
+        gap: 2rem;
+        border-radius: 0.5rem;
+
+        @media screen and (min-width: 700px) {
+          background-color: rgb(228, 228, 228);
+          padding: 0.5rem 1rem;
+          border-radius: 0.5rem;
+        }
+      }
+
+      .language_menu {
+        position: absolute;
+        top: 3rem;
+        left: -3rem;
+        background-color: #fff;
+        padding: 0 1rem;
+        border-radius: 10px;
+        border: 1px solid rgb(151, 151, 151);
+        text-align: left;
+
+        span {
+          text-transform: uppercase;
+          color: #5e5e5e;
+        }
+      }
+    }
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+
+    .toolbar {
+      display: none;
+
+      @media screen and (min-width: 700px) {
+        display: flex;
+        align-self: flex-end;
+        align-items: center;
+        justify-content: center;
+        //gap: 1rem;
+      }
+
+      img {
+        width: 25px;
+        height: 25px;
+        cursor: pointer;
+      }
+
+    }
+  }
+}
+
+.dots {
+  height: 20px;
+  width: 20px;
+  cursor: pointer;
+
+}

package/src/components/Exercises/Detail/Head/index.tsx

@@ -0,0 +1,175 @@
+import AddIcon from '@mui/icons-material/Add';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import RedoIcon from '@mui/icons-material/Redo';
+import {
+    Button,
+    Chip,
+    Dialog,
+    Divider,
+    ListItemIcon,
+    ListItemText,
+    Menu,
+    MenuItem,
+    Stack,
+    Typography
+} from '@mui/material';
+import Grid from '@mui/material/Grid';
+import { ExerciseDeleteDialog } from "components/Exercises/Detail/Head/ExerciseDeleteDialog";
+import { Exercise } from 'components/Exercises/models/exercise';
+import { Language } from 'components/Exercises/models/language';
+import { usePermissionQuery } from "components/User/queries/permission";
+import { useProfileQuery } from "components/User/queries/profile";
+import { WgerPermissions } from "permissions";
+import React, { useState } from 'react';
+import { useTranslation } from "react-i18next";
+import { Link } from 'react-router-dom';
+import styles from './head.module.css';
+
+export interface HeadProp {
+    exercise: Exercise
+    languages: Language[]
+    changeLanguage: (lang: Language) => void,
+    language: Language | undefined // language displayed in the head since it's not found in the translations
+    setEditMode: Function,
+    editMode: boolean
+}
+
+export const Head = ({
+                         exercise,
+                         languages,
+                         changeLanguage,
+                         language,
+                         setEditMode,
+                         editMode
+                     }: HeadProp) => {
+    const [anchorMenuEl, setAnchorMenuEl] = useState<null | HTMLElement>(null);
+    const [openDialog, setOpenDialog] = React.useState(false);
+    const openLanguageMenu = Boolean(anchorMenuEl);
+    const [t] = useTranslation();
+
+    const deletePermissionQuery = usePermissionQuery(WgerPermissions.DELETE_EXERCISE);
+    const editPermissionQuery = usePermissionQuery(WgerPermissions.EDIT_EXERCISE);
+    const profileQuery = useProfileQuery();
+    const userIsAnonymous = profileQuery.isSuccess && profileQuery.data === null;
+
+
+    let canUserContribute = false;
+    if (profileQuery.isSuccess && editPermissionQuery.isSuccess) {
+        canUserContribute = editPermissionQuery.data || (profileQuery.data !== null && profileQuery.data!.isTrustworthy);
+    }
+
+    const handleLanguageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorMenuEl(event.currentTarget);
+    };
+    const handleMenuClose = () => {
+        setAnchorMenuEl(null);
+    };
+    const handleLanguageClick = (lang: Language) => {
+        changeLanguage(lang);
+        handleMenuClose();
+    };
+
+    const languagesList = languages.map(l => {
+        return <MenuItem
+            key={l.nameShort}
+            onClick={() => handleLanguageClick(l)}
+            selected={language?.id === l.id}>
+            <ListItemText>{l.nameLong}</ListItemText>
+            <ListItemIcon>
+                {exercise.availableLanguages.includes(l.id)
+                    ? <RedoIcon />
+                    : <AddIcon />}
+            </ListItemIcon>
+        </MenuItem>;
+    });
+
+    return (
+        (<Grid container>
+            <Grid size={12}>
+                <div className={styles.root}>
+                    <Dialog
+                        open={openDialog}
+                        onClose={() => setOpenDialog(false)}>
+                        <ExerciseDeleteDialog
+                            onClose={() => setOpenDialog(false)}
+                            onChangeLanguage={() => changeLanguage(languages[0])}
+                            currentExercise={exercise}
+                            currentLanguage={language}
+                        />
+                    </Dialog>
+
+                    <div className={styles.detail_language}>
+                        <div className={styles.detail}>
+                            <Link
+                                to="../overview">{t('exercises.exercises')}</Link>  &gt; {exercise.getTranslation(language)?.name}
+                        </div>
+                        <div className={styles.languages}>
+                            <div className={styles.language}>
+                                <Button
+                                    size="small"
+                                    id="basic-button"
+                                    onClick={handleLanguageButtonClick}
+                                    startIcon={<MoreVertIcon />}
+                                >
+                                    {language?.nameLong}
+                                </Button>
+
+                                <Menu
+                                    id="basic-menu"
+                                    anchorEl={anchorMenuEl}
+                                    open={openLanguageMenu}
+                                    onClose={handleMenuClose}
+                                    MenuListProps={{
+                                        'aria-labelledby': 'basic-button',
+                                    }}
+                                    sx={{ padding: 20 }}
+                                >
+                                    <MenuItem disabled>{t('exercises.changeExerciseLanguage')}</MenuItem>
+                                    <Divider />
+                                    {languagesList}
+                                </Menu>
+                            </div>
+                        </div>
+                    </div>
+                    <div className={styles.header}>
+                        <Typography gutterBottom variant="h2" margin={0} sx={{ mt: 2 }}>
+                            {exercise.getTranslation(language)?.name}
+                        </Typography>
+                        {!userIsAnonymous &&
+                            <nav className={styles.toolbar}>
+                                {
+                                    deletePermissionQuery.isSuccess
+                                    && deletePermissionQuery.data
+                                    && language?.id === exercise.getTranslation(language)?.language
+                                    && <Button onClick={() => setOpenDialog(true)}>
+                                        {t('delete')}
+                                    </Button>
+                                }
+                                {
+                                    canUserContribute
+                                    && <Button onClick={() => setEditMode(true)}
+                                               disabled={editMode}>EDIT</Button>
+                                }
+                                <Button onClick={() => setEditMode(false)}
+                                        disabled={!editMode}>VIEW</Button>
+                            </nav>
+                        }
+                    </div>
+                    <Stack direction="row" spacing={1} mt={2}>
+                        <Chip
+                            label={exercise.category.translatedName}
+                            size="small" />
+                        {exercise.equipment.map(e => {
+                            return <Chip
+                                key={e.id}
+                                label={e.translatedName}
+                                variant="outlined"
+                                size="small"
+                            />;
+                        })}
+                    </Stack>
+                </div>
+            </Grid>
+        </Grid>)
+    );
+};

package/src/components/Exercises/Detail/OverviewCard.test.tsx

@@ -0,0 +1,98 @@
+import { render, screen } from "@testing-library/react";
+import { OverviewCard } from "components/Exercises/Detail/OverviewCard";
+import { Category } from "components/Exercises/models/category";
+import { Equipment } from "components/Exercises/models/equipment";
+import { Exercise } from "components/Exercises/models/exercise";
+import { Language } from "components/Exercises/models/language";
+import { Translation } from "components/Exercises/models/translation";
+import React from "react";
+import { BrowserRouter } from "react-router-dom";
+
+describe("Test the exercise overview card component", () => {
+    // Arrange
+    const exerciseTranslation1 = new Translation(
+        111,
+        "583281c7-2362-48e7-95d5-8fd6c455e0fb",
+        "Squats",
+        "Do a squat",
+        2
+    );
+    const exerciseTranslation2 = new Translation(
+        9,
+        "dae6f6ed-9408-4e62-a59a-1a33f4e8ab36",
+        "Kniebeuge",
+        "Kniebeuge machen",
+        1
+    );
+    const category = new Category(10, "Abs");
+    const equipment1 = new Equipment(10, "Kettlebell");
+    const equipment2 = new Equipment(1, "Test 123");
+    const exercise = new Exercise(
+        345,
+        "c788d643-150a-4ac7-97ef-84643c6419bf",
+        category,
+        [equipment1, equipment2],
+        [],
+        [],
+        [],
+        null,
+        [exerciseTranslation1, exerciseTranslation2]
+    );
+
+    test("Render the overview card, no language selected -> use english", () => {
+        // Act
+        // since  OverviewCard renders a Link, we need to wrap in a BrowserRouter
+        render(
+            <BrowserRouter>
+                <OverviewCard exercise={exercise} />
+            </BrowserRouter>
+        );
+
+        // Assert
+        expect(screen.getByText("Squats")).toBeInTheDocument();
+        expect(screen.getByText("Abs")).toBeInTheDocument();
+        expect(screen.getByText("Kettlebell")).toBeInTheDocument();
+        expect(screen.getByText("Test 123")).toBeInTheDocument();
+    });
+
+    test("Render the overview card with an existing translation", async () => {
+        // Arrange
+        const language = new Language(1, "de", "Deutsch");
+
+        // Act
+        // since  OverviewCard renders a Link, we need to wrap in a BrowserRouter
+        render(
+            <BrowserRouter>
+                <OverviewCard exercise={exercise} language={language} />
+            </BrowserRouter>
+        );
+
+        // Assert
+        expect(screen.queryByText("Squats")).not.toBeInTheDocument();
+        expect(screen.getByText("Kniebeuge")).toBeInTheDocument();
+
+        expect(screen.getByText("Abs")).toBeInTheDocument();
+        expect(screen.getByText("Kettlebell")).toBeInTheDocument();
+        expect(screen.getByText("Test 123")).toBeInTheDocument();
+    });
+
+    test("Render the overview card with a non existing translation -> fallback to english", async () => {
+        // Arrange
+        const language = new Language(3, "fr", "Français");
+
+        // Act
+        // since  OverviewCard renders a Link, we need to wrap in a BrowserRouter
+        render(
+            <BrowserRouter>
+                <OverviewCard exercise={exercise} language={language} />
+            </BrowserRouter>
+        );
+
+        // Assert
+        expect(screen.queryByText("Kniebeuge")).not.toBeInTheDocument();
+        expect(screen.getByText("Squats")).toBeInTheDocument();
+        expect(screen.getByText("Abs")).toBeInTheDocument();
+        expect(screen.getByText("Kettlebell")).toBeInTheDocument();
+        expect(screen.getByText("Test 123")).toBeInTheDocument();
+    });
+});

package/src/components/Exercises/Detail/OverviewCard.tsx

@@ -0,0 +1,68 @@
+import { Card, CardActionArea, CardContent, CardMedia, Chip, Typography, } from "@mui/material";
+import Tooltip from "@mui/material/Tooltip";
+import { ExerciseImagePlaceholder } from "components/Exercises/Detail/ExerciseImagePlaceholder";
+import { Exercise } from "components/Exercises/models/exercise";
+import { Language } from "components/Exercises/models/language";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { ENGLISH_LANGUAGE_ID } from "utils/consts";
+import { makeLink, WgerLink } from "utils/url";
+
+type OverviewCardProps = {
+    exercise: Exercise;
+    language?: Language;
+};
+
+export const OverviewCard = ({ exercise, language }: OverviewCardProps) => {
+    const translation = language
+        ? exercise.getTranslation(language)
+        : exercise.getTranslation(
+            new Language(ENGLISH_LANGUAGE_ID, "en", "English")
+        );
+    const [t, i18n] = useTranslation();
+
+    return (
+        <Card key={exercise.id} sx={{ width: '100%' }}>
+            <CardActionArea href={makeLink(WgerLink.EXERCISE_DETAIL, i18n.language, {
+                id: exercise.id!,
+                slug: translation.nameSlug
+            })}
+                            sx={{ minHeight: 330 }}>
+                {exercise.mainImage
+                    ? <CardMedia
+                        component="img"
+                        image={exercise.mainImage.url}
+                        sx={{ height: 200 }}
+                        alt="" />
+                    : <CardMedia>
+                        <ExerciseImagePlaceholder />
+                    </CardMedia>}
+                <CardContent>
+                    <Tooltip title={translation.name} placement="top" arrow>
+                        <Typography gutterBottom variant="h6" component="div" noWrap>
+                            {translation.name}
+                        </Typography>
+                    </Tooltip>
+
+                    <Chip
+                        label={exercise.category.translatedName}
+                        key={exercise.category.id}
+                        sx={{ position: "absolute", top: 8, left: 8 }}
+                        color="primary"
+                        size="small"
+                    />
+                    {exercise.equipment.map(equipment => (
+                        <Typography display="inline" mr={1} key={equipment.id}>
+                            {equipment.translatedName}
+                        </Typography>
+                    ))}
+                    {exercise.equipment.length === 0 && (
+                        <Typography color="text.secondary" display="inline" mr={1}>
+                            {t("exercises.noEquipment")}
+                        </Typography>
+                    )}
+                </CardContent>
+            </CardActionArea>
+        </Card>
+    );
+};

package/src/components/Exercises/Detail/SideGallery/index.tsx

@@ -0,0 +1,65 @@
+import { Card, CardMedia } from '@mui/material';
+import Grid from '@mui/material/Grid';
+import { ExerciseImage } from "components/Exercises/models/image";
+import { ExerciseVideo } from "components/Exercises/models/video";
+import React from 'react';
+
+type SideGalleryProps = {
+    mainImage: ExerciseImage | undefined;
+    sideImages: ExerciseImage[];
+}
+
+export const SideGallery = ({ mainImage, sideImages }: SideGalleryProps) => {
+
+    return (
+        (<Grid container spacing={1}>
+            {mainImage && <Grid size={12}>
+                <Card>
+                    <CardMedia
+                        component="img"
+                        image={mainImage.url}
+                        alt=""
+                    />
+                </Card>
+            </Grid>}
+            {sideImages.map(img => (
+                <Grid key={img.id} size={6}>
+                    <Card>
+                        <CardMedia
+                            component="img"
+                            image={img.url}
+                            sx={{ height: 120 }}
+                            alt=""
+                        />
+                    </Card>
+                </Grid>
+            ))}
+        </Grid>)
+    );
+};
+
+type VideoGalleryProps = {
+    videos: ExerciseVideo[]
+}
+
+export const SideVideoGallery = ({ videos }: VideoGalleryProps) => {
+
+    return (
+        (<Grid container spacing={1}>
+            {videos.map(video => (
+                <Grid key={video.id} size={6}>
+                    <Card>
+                        <CardMedia
+                            component={'video'}
+                            src={video.url}
+                            sx={{ height: 120 }}
+                            controls
+                            muted
+                            preload="metadata"
+                        />
+                    </Card>
+                </Grid>
+            ))}
+        </Grid>)
+    );
+};

package/src/components/Exercises/Detail/SideGallery/side_gallery.module.css

@@ -0,0 +1,26 @@
+.side_gallery {
+  box-sizing: border-box;
+  margin-top: 5rem;
+  width: 500px; }
+  @media screen and (max-width: 700px) {
+    .side_gallery {
+      display: none; } }
+  .side_gallery .main_image {
+    height: 40vh;
+    overflow: hidden;
+    border-radius: 0.2rem; }
+  .side_gallery .secondary_images {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-auto-rows: 150px;
+    gap: 1rem;
+    margin-top: 2rem; }
+    .side_gallery .secondary_images .image_thumb {
+      border-radius: 0.5rem;
+      overflow: hidden; }
+  .side_gallery img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; }
+
+/*# sourceMappingURL=side_gallery.module.css.map */

package/src/components/Exercises/Detail/SideGallery/side_gallery.module.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAAA,aAAc;EACV,UAAU,EAAE,UAAU;EACtB,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,KAAK;EAEZ,oCAAqC;IALzC,aAAc;MAMN,OAAO,EAAE,IAAI;EAGjB,yBAAY;IACR,MAAM,EAAE,IAAI;IACZ,QAAQ,EAAE,MAAM;IAChB,aAAa,EAAE,MAAM;EAGzB,+BAAkB;IACd,OAAO,EAAE,IAAI;IACb,qBAAqB,EAAE,cAAc;IACrC,cAAc,EAAE,KAAK;IACrB,GAAG,EAAE,IAAI;IACT,UAAU,EAAE,IAAI;IAEhB,4CAAa;MACT,aAAa,EAAE,MAAM;MACrB,QAAQ,EAAE,MAAM;EAIxB,iBAAI;IACA,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,KAAK",
+"sources": ["side_gallery.module.scss"],
+"names": [],
+"file": "side_gallery.module.css"
+}

package/src/components/Exercises/Detail/SideGallery/side_gallery.module.scss

@@ -0,0 +1,34 @@
+.side_gallery {
+    box-sizing: border-box;
+    margin-top: 5rem;
+    width: 500px;
+
+    @media screen and (max-width: 700px) {
+        display: none;
+    }
+
+    .main_image {
+        height: 40vh;
+        overflow: hidden;
+        border-radius: 0.2rem;
+    }
+
+    .secondary_images {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-auto-rows: 150px;
+        gap: 1rem;
+        margin-top: 2rem;
+
+        .image_thumb {
+            border-radius: 0.5rem;
+            overflow: hidden;
+        }
+    }
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}