Start working on improved license form for images

package.json

@@ -12,6 +12,7 @@
     "@mui/x-date-pickers": "^5.0.20",
     "@tanstack/react-query": "^4.2.3",
     "@types/jest": "^29.5.0",
+    "@types/lodash": "^4.14.194",
     "@types/luxon": "^3.3.0",
     "@types/node": "^18.15.11",
     "@types/react": "^18.0.35",

public/locales/en/translation.json

@@ -7,6 +7,14 @@
   "add": "Add",
   "difference": "Difference",
   "days": "Days",
+  "licenses": {
+    "authors": "Author(s)",
+    "authorProfile": "Link to author profile, if available",
+    "derivativeSourceUrl": "Link to the original source, if this is a derivative work",
+    "derivativeSourceUrlHelper": "Note that a derivative work is one which is not only based on a previous work, but which also contains sufficient new, creative content to entitle it to its own copyright.",
+    "originalObjectUrl": "Link to the original object, if available",
+    "originalTitle": "Original name of this object"
+  },
   "loading": "Loading...",
   "nutritionalPlan": "Nutritional plan",
   "addEntry": "Add entry",
@@ -49,7 +57,12 @@
     "missingExerciseDescription": "Help out the community by contributing it!",
     "searchExerciseName": "Search by exercise name",
     "newNote": "New note",
-    "notesHelpText": "Notes are short comments on how to perform the exercise such as \"keep your body straight\""
+    "notesHelpText": "Notes are short comments on how to perform the exercise such as \"keep your body straight\"",
+    "imageStylePhoto": "Photo",
+    "imageStyle3D": "3D",
+    "imageStyleLine": "Line",
+    "imageStyleLowPoly": "Low-Poly",
+    "imageStyleOther": "Other"
   },
   "description": "Description",
   "translation": "Translation",
@@ -76,36 +89,36 @@
   "noResults": "No results",
   "noResultsDescription": "No results found for this query, consider reducing the number of filters.",
   "server": {
-    "until_failure": "Until failure",
+    "abs": "Abs",
+    "arms": "Arms",
+    "back": "Back",
+    "barbell": "Barbell",
+    "bench": "Bench",
+    "biceps": "Biceps",
     "calves": "Calves",
+    "cardio": "Cardio",
+    "chest": "Chest",
     "dumbbell": "Dumbbell",
-    "barbell": "Barbell",
-    "swiss_ball": "Swiss ball",
+    "glutes": "Glutes",
     "gym_mat": "Gym mat",
-    "miles": "Miles",
-    "minutes": "Minutes",
-    "chest": "Chest",
+    "hamstrings": "Hamstrings",
+    "incline_bench": "Incline bench",
+    "kettlebell": "Kettlebell",
     "kilometers": "Kilometers",
-    "shoulders": "Shoulders",
-    "cardio": "Cardio",
-    "biceps": "Biceps",
-    "arms": "Arms",
-    "triceps": "Triceps",
-    "glutes": "Glutes",
+    "lats": "Lats",
     "legs": "Legs",
-    "repetitions": "Repetitions",
-    "seconds": "Seconds",
+    "lower_back": "Lower back",
+    "miles": "Miles",
+    "minutes": "Minutes",
+    "pull_up_bar": "Pull up bar",
     "quads": "Quads",
+    "repetitions": "Repetitions",
     "sz_bar": "SZ bar",
-    "back": "Back",
-    "bench": "Bench",
-    "lats": "Lats",
-    "incline_bench": "Incline bench",
-    "pull_up_bar": "Pull up bar",
-    "abs": "Abs",
-    "hamstrings": "Hamstrings",
-    "none__bodyweight_exercise_": "none (bodyweight exercise)",
-    "lower_back": "Lower back",
-    "kettlebell": "Kettlebell"
+    "seconds": "Seconds",
+    "shoulders": "Shoulders",
+    "swiss_ball": "Swiss ball",
+    "triceps": "Triceps",
+    "until_failure": "Until failure",
+    "none__bodyweight_exercise_": "none (bodyweight exercise)"
   }
 }

src/components/Common/forms/LicenseAuthor.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 LicenseAuthor(props: { fieldName: string }) {
+    const [t] = useTranslation();
+    const [field, meta] = useField(props.fieldName);
+
+    return <TextField
+        fullWidth
+        id={props.fieldName}
+        label={t("licenses.authors")}
+        variant="standard"
+        error={meta.touched && Boolean(meta.error)}
+        helperText={meta.touched && meta.error}
+        {...field}
+    />;
+}

src/components/Common/forms/LicenseAuthorUrl.tsx

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

src/components/Common/forms/LicenseDerivativeSourceUrl.tsx

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

src/components/Common/forms/LicenseObjectUrl.tsx

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

src/components/Common/forms/LicenseTitle.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 LicenseTitle(props: { fieldName: string }) {
+    const [t] = useTranslation();
+    const [field, meta] = useField(props.fieldName);
+
+    return <TextField
+        fullWidth
+        id={props.fieldName}
+        label={t("licenses.originalTitle")}
+        variant="standard"
+        error={meta.touched && Boolean(meta.error)}
+        helperText={meta.touched && meta.error}
+        {...field}
+    />;
+}

src/components/Exercises/Add/AddExerciseStepper.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { Box, Container, Stack, Step, StepContent, StepLabel, Stepper, Typography, } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import { Step1Basics } from "components/Exercises/Add/Step1Basics";
 import { Step2Variations } from "components/Exercises/Add/Step2Variations";
 import { Step3Description } from "components/Exercises/Add/Step3Description";
 import { Step4Translations } from "components/Exercises/Add/Step4Translations";
@@ -25,7 +24,7 @@ export const AddExerciseStepper = () => {
     const handleBack = () => {
         setActiveStep(prevActiveStep => prevActiveStep - 1);
     };
-    
+
     return (
         <exerciseState.ExerciseStateProvider>
             <Container maxWidth="md">
@@ -39,8 +38,9 @@ export const AddExerciseStepper = () => {
                         <Step key={1}>
                             <StepLabel>{t("exercises.step1HeaderBasics")}</StepLabel>
                             <StepContent>
-                                <Step1Basics
+                                <Step5Images
                                     onContinue={handleNext}
+                                    onBack={handleBack}
                                 />
                             </StepContent>
                         </Step>

src/components/Exercises/Add/Step5Images.tsx

@@ -1,4 +1,14 @@
-import { Box, Button, Grid, IconButton, ImageListItem, ImageListItemBar, Stack, Typography } from "@mui/material";
+import {
+    Box,
+    Button,
+    Grid,
+    IconButton,
+    ImageListItem,
+    ImageListItemBar,
+    Modal,
+    Stack,
+    Typography
+} from "@mui/material";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
@@ -9,11 +19,23 @@ import { StepProps } from "components/Exercises/Add/AddExerciseStepper";
 import { ImageFormData } from "components/Exercises/models/exerciseBase";
 import { useExerciseStateValue } from "state";
 import { setImages } from "state/exerciseReducer";
+import { Form, Formik } from "formik";
+import { LicenseAuthor } from "components/Common/forms/LicenseAuthor";
+import { LicenseTitle } from "components/Common/forms/LicenseTitle";
+import { LicenseObjectUrl } from "components/Common/forms/LicenseObjectUrl";
+import { LicenseAuthorUrl } from "components/Common/forms/LicenseAuthorUrl";
+import { ImageStyleToggle } from "components/Exercises/forms/ImageStyle";
+import { LicenseDerivativeSourceUrl } from "components/Common/forms/LicenseDerivativeSourceUrl";
 
 export const Step5Images = ({ onContinue, onBack }: StepProps) => {
     const [t] = useTranslation();
     const [state, dispatch] = useExerciseStateValue();
     const [localImages, setLocalImages] = useState<ImageFormData[]>(state.images);
+    const [popupImage, setPopupImage] = useState<ImageFormData | undefined>(undefined);
+
+    const [openModal, setOpenModal] = React.useState(false);
+    const handleOpenModal = () => setOpenModal(true);
+    const handleCloseModal = () => setOpenModal(false);
 
     useEffect(() => {
         dispatch(setImages(localImages));
@@ -26,7 +48,10 @@ export const Step5Images = ({ onContinue, onBack }: StepProps) => {
         const [uploadedFile] = e.target.files;
         const objectURL = URL.createObjectURL(uploadedFile);
 
-        setLocalImages(localImages?.concat({ url: objectURL, file: uploadedFile }));
+        setOpenModal(true);
+
+        setPopupImage({ url: objectURL, file: uploadedFile });
+        //setLocalImages(localImages?.concat({ url: objectURL, file: uploadedFile }));
     };
 
     const handleDeleteImage = (imageURL: string) => {
@@ -38,8 +63,83 @@ export const Step5Images = ({ onContinue, onBack }: StepProps) => {
         onContinue!();
     };
 
+    const style = {
+        position: 'absolute' as 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: 600,
+        bgcolor: 'background.paper',
+        //border: '2px solid #000',
+        boxShadow: 24,
+        p: 4,
+    };
+
     return (
         <div>
+            <Modal
+                open={openModal}
+                onClose={handleCloseModal}
+                aria-labelledby="modal-modal-title"
+                aria-describedby="modal-modal-description"
+            >
+
+                <Box sx={style}>
+                    <Typography id="modal-modal-title" variant="h6" component="h2">
+                        Image details
+                    </Typography>
+
+                    <Grid container spacing={2}>
+                        <Grid item xs={4}>
+                            {popupImage && <img
+                                style={{ width: "100%", }}
+                                src={popupImage.url}
+                                alt=""
+                                loading="lazy"
+                            />}
+                        </Grid>
+                        <Grid item xs={8}>
+                            <Formik
+                                initialValues={{
+                                    nameEn: state.nameEn,
+                                    newAlternativeNameEn: state.alternativeNamesEn,
+                                    category: state.category !== null ? state.category : '',
+                                    muscles: state.muscles,
+                                    equipment: state.equipment,
+                                    musclesSecondary: state.musclesSecondary,
+                                }}
+                                onSubmit={values => {
+
+                                }}
+                            >
+                                {formik => {
+                                    return (
+                                        <Form>
+                                            <Stack spacing={2}>
+                                                <LicenseAuthor fieldName={'licenseAuthor'} />
+                                                <LicenseAuthorUrl fieldName={'licenseAuthorUrl'} />
+                                                <LicenseTitle fieldName={'licenseTitle'} />
+                                                <LicenseObjectUrl fieldName={'licenseObjectUrl'} />
+                                                <LicenseDerivativeSourceUrl fieldName={'licenseDerivativeSourceUrl'} />
+                                                <ImageStyleToggle fieldName={'imageStyle'} />
+                                            </Stack>
+                                        </Form>
+                                    );
+                                }}
+                            </Formik>
+                            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+                                Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+                            </Typography>
+                        </Grid>
+                    </Grid>
+
+
+                    <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+                        Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+                    </Typography>
+                </Box>
+            </Modal>
+
             <Typography>
                 {t("exercises.compatibleImagesCC")}