FIX

- Changement de table en gallery
- Ajout option de résolution
- Ajout warning
- Intégration de upload
- Ajout de snackbar

client/src/Types/ImageType.tsx

@@ -0,0 +1,17 @@
+export interface ImageType {
+    id: string;
+    file_content: string;
+    file_name: string;
+    mime_type: string;
+}
+
+export interface ImagesResponse {
+    images: ImageType[];
+    total: number;
+}
+
+export interface ImagesParams {
+    page: number;
+    limit: number;
+    uid?: string;
+}

client/src/components/ImageGallery/ImageGallery.tsx

@@ -1,169 +1,280 @@
 import React, { useState, useEffect } from "react";
 import {
+  Box,
+  CircularProgress,
+  Button,
+  IconButton,
+  Card,
+  CardContent,
   Dialog,
-  DialogTitle,
   DialogContent,
   DialogActions,
-  Button,
+  DialogTitle,
-  Table,
+  DialogContentText,
-  TableBody,
+  Tabs,
-  TableCell,
+  Tab,
-  TableContainer,
+  TextField, Snackbar,
-  TableRow,
+  Alert
-  IconButton,
-  Paper,
-  Box,
-  CircularProgress
 } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import CloseIcon from "@mui/icons-material/Close";
-import DeleteIcon from "@mui/icons-material/Delete";
+import { ImageType } from "../../Types/ImageType";
-import { Images } from "../../Types/Images";
+import ApiService from "../../services/ApiService";
-import ApiService from '../../services/ApiService';
+import { Upload } from "@mui/icons-material";
-import { ENV_VARIABLES } from '../../constants';
 
-type Props = {
+interface ImagesProps {
-  galleryOpen: boolean;
+  handleCopy?: (id: string) => void;
-  setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
-  setImageLinks: React.Dispatch<React.SetStateAction<string[]>>;
-};
 
-const ImageDialog: React.FC<Props> = ({ galleryOpen, setDialogOpen, setImageLinks }) => {
+const ImageGallery: React.FC<ImagesProps> = ({ handleCopy }) => {
-  const [copiedId, setCopiedId] = useState<string | null>(null);
+  const [images, setImages] = useState<ImageType[]>([]);
-  const [images, setImages] = useState<Images[]>([]);
   const [totalImg, setTotalImg] = useState(0);
   const [imgPage, setImgPage] = useState(1);
-  const [imgLimit] = useState(3);
+  const [imgLimit] = useState(6);
   const [loading, setLoading] = useState(false);
-  const [deleteConfirm, setDeleteConfirm] = useState<{ id: string | null; linked: boolean }>({ id: null, linked: false });
+  const [selectedImage, setSelectedImage] = useState<ImageType | null>(null);
+  const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
+  const [imageToDelete, setImageToDelete] = useState<ImageType | null>(null);
+  const [tabValue, setTabValue] = useState(0);
+  const [importedImage, setImportedImage] = useState<File | null>(null);
+  const [preview, setPreview] = useState<string | null>(null);
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState("");
+  const [snackbarSeverity, setSnackbarSeverity] = useState<"success" | "error">("success");
 
-  const fetchImages = async (page: number, limit: number) => {
+  const fetchImages = async () => {
-    const data = await ApiService.getImages(page, limit);
+    setLoading(true);
+    const data = await ApiService.getImages(imgPage, imgLimit);
     setImages(data.images);
     setTotalImg(data.total);
+    setLoading(false);
   };
 
   useEffect(() => {
-    fetchImages(imgPage, imgLimit);
+    fetchImages();
   }, [imgPage]);
 
-  const onCopy = (id: string) => {
+  const handleDelete = async () => {
-    const escLink = `${ENV_VARIABLES.IMG_URL}/api/image/get/${id}`;
+    if (imageToDelete) {
-    setCopiedId(id);
-    setImageLinks(prevLinks => [...prevLinks, escLink]);
-  };
-
-  const handleDelete = async (id: string) => {
       setLoading(true);
-    const isDeleted = await ApiService.deleteImage(id);
+      const isDeleted = await ApiService.deleteImage(imageToDelete.id);
       setLoading(false);
-    if (!isDeleted) {
+
-      setDeleteConfirm({ id, linked: true });
+      if (isDeleted) {
+        setImages(images.filter((image) => image.id !== imageToDelete.id));
+        setSnackbarMessage("Image supprimée avec succès !");
+        setSnackbarSeverity("success");
       } else {
-      setImages(images.filter(image => image.id !== id));
+        setSnackbarMessage("Erreur lors de la suppression de l'image. Veuillez réessayer.");
-      setDeleteConfirm({ id: null, linked: false });
+        setSnackbarSeverity("error");
+      }
+
+      setSnackbarOpen(true);
+      setSelectedImage(null);
+      setImageToDelete(null);
+      setOpenDeleteDialog(false);
     }
   };
 
-  const confirmDelete = async () => {
+  const defaultHandleCopy = (id: string) => {
-    if (deleteConfirm.id) {
+    if (navigator.clipboard) {
-      setLoading(true);
+      navigator.clipboard.writeText(id);
-      await ApiService.deleteImage(deleteConfirm.id);
-      setImages(images.filter(image => image.id !== deleteConfirm.id));
-      setDeleteConfirm({ id: null, linked: false });
-      setLoading(false);
     }
   };
 
-  const handleNextPage = () => {
+  const handleCopyFunction = handleCopy || defaultHandleCopy;
-    if ((imgPage * imgLimit) < totalImg) {
+
-      setImgPage(prev => prev + 1);
+  const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files ? event.target.files[0] : null;
+    setImportedImage(file);
+    if (file) {
+      const objectUrl = URL.createObjectURL(file);
+      setPreview(objectUrl);
     }
   };
 
-  const handlePrevPage = () => {
+  const handleSaveImage = async () => {
-    if (imgPage > 1) {
+    try {
-      setImgPage(prev => prev - 1);
+      if (!importedImage) {
+        setSnackbarMessage("Veuillez d'abord choisir une image à téléverser.");
+        setSnackbarSeverity("error");
+        setSnackbarOpen(true);
+        return;
+      }
+
+      const imageUrl = await ApiService.uploadImage(importedImage);
+
+      if (imageUrl.includes("ERROR")) {
+        setSnackbarMessage("Une erreur est survenue. Veuillez réessayer plus tard.");
+        setSnackbarSeverity("error");
+        setSnackbarOpen(true);
+        return;
+      }
+      fetchImages();
+
+      setSnackbarMessage("Téléversée avec succès !");
+      setSnackbarSeverity("success");
+      setSnackbarOpen(true);
+
+      // Reset the input field and preview after successful upload
+      setImportedImage(null);
+      setPreview(null);
+    } catch (error) {
+      setSnackbarMessage(`Une erreur est survenue.\n${error}\nVeuillez réessayer plus tard.`);
+      setSnackbarSeverity("error");
+      setSnackbarOpen(true);
     }
   };
 
   return (
-    <Dialog open={galleryOpen} onClose={() => setDialogOpen(false)} maxWidth="xl">
+    <Box p={3}>
-      <DialogTitle>
+      <Tabs value={tabValue} onChange={(_, newValue) => setTabValue(newValue)}>
-        Images disponibles
+        <Tab label="Gallery" />
-        <IconButton
+        <Tab label="Import" />
-          aria-label="close"
+      </Tabs>
-          color="primary"
+      {tabValue === 0 && (
-          onClick={() => setDialogOpen(false)}
+        <>
-          style={{ position: "absolute", right: 8, top: 8 }}
-        >
-          <CloseIcon />
-        </IconButton>
-      </DialogTitle>
-      <DialogContent>
           {loading ? (
             <Box display="flex" justifyContent="center" alignItems="center" height={200}>
               <CircularProgress />
             </Box>
           ) : (
-          <TableContainer component={Paper}>
+            <>
-            <Table>
+              <Box display="grid" gridTemplateColumns="repeat(3, 1fr)" gridTemplateRows="repeat(2, 1fr)" gap={2} maxWidth="900px" margin="auto">
-              <TableBody>
+                {images.map((obj) => (
-                {images.map((obj: Images) => (
+                  <Card key={obj.id} sx={{ cursor: "pointer", display: "flex", flexDirection: "column", alignItems: "center" }} onClick={() => setSelectedImage(obj)}>
-                  <TableRow key={obj.id}>
+                    <CardContent sx={{ p: 0 }}>
-                    <TableCell>
                       <img
                         src={`data:${obj.mime_type};base64,${obj.file_content}`}
                         alt={`Image ${obj.file_name}`}
-                        style={{ width: 350, height: "auto", borderRadius: 8 }}
+                        style={{ width: "100%", height: 250, objectFit: "cover", borderRadius: 8 }}
                       />
-                    </TableCell>
+                    </CardContent>
-                    <TableCell>{obj.file_name}</TableCell>
+                    <Box display="flex" justifyContent="center" mt={1}>
-                    <TableCell style={{ minWidth: 150 }}>
+                      <IconButton onClick={(e) => {
-                      {obj.id}
+                        e.stopPropagation();
-                      <IconButton onClick={() => onCopy(obj.id)} size="small" data-testid={`copy-button-${obj.id}`}>
+                        handleCopyFunction(obj.id);
-                        <ContentCopyIcon fontSize="small" />
+                        }} 
+                        color="primary" >
+                        
+                        <ContentCopyIcon sx={{ fontSize: 18 }} />
                       </IconButton>
-                      <IconButton onClick={() => handleDelete(obj.id)} size="small" color="primary" data-testid={`delete-button-${obj.id}`}>
+
-                        <DeleteIcon fontSize="small" />
+                      <IconButton
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setImageToDelete(obj);
+                          setOpenDeleteDialog(true);
+                        }}
+                        color="error" >
+
+                        <DeleteIcon sx={{ fontSize: 18 }} />
                       </IconButton>
-                      {copiedId === obj.id && <span style={{ marginLeft: 8, color: "green" }}>Copié!</span>}
+                    </Box>
-                    </TableCell>
+                  </Card>
-                  </TableRow>
                 ))}
-              </TableBody>
+              </Box>
-            </Table>
+              <Box display="flex" justifyContent="center" mt={2}>
-          </TableContainer>
+                <Button onClick={() => setImgPage((prev) => Math.max(prev - 1, 1))} disabled={imgPage === 1} color="primary">
-        )}
-      </DialogContent>
-      {deleteConfirm.linked && (
-        <Dialog open={Boolean(deleteConfirm.id)} onClose={() => setDeleteConfirm({ id: null, linked: false })}>
-          <DialogTitle>Confirmer la suppression</DialogTitle>
-          <DialogContent>
-            Cette image est liée à d'autres objets. Êtes-vous sûr de vouloir la supprimer ?
-          </DialogContent>
-          <DialogActions>
-            <Button onClick={() => setDeleteConfirm({ id: null, linked: false })} color="primary">
-              Annuler
-            </Button>
-            <Button onClick={confirmDelete} color="secondary">
-              Supprimer
-            </Button>
-          </DialogActions>
-        </Dialog>
-      )}
-      <DialogActions style={{ justifyContent: "center", width: "100%" }}>
-        <Box display="flex" justifyContent="center" width="100%">
-          <Button onClick={handlePrevPage} disabled={imgPage === 1} color="primary">
                   Précédent
                 </Button>
-          <Button onClick={handleNextPage} disabled={(imgPage * imgLimit) >= totalImg} color="primary">
+                <Button onClick={() => setImgPage((prev) => (prev * imgLimit < totalImg ? prev + 1 : prev))} disabled={imgPage * imgLimit >= totalImg} color="primary">
                   Suivant
                 </Button>
               </Box>
+            </>
+          )}
+        </>
+      )}
+      {tabValue === 1 && (
+        <Box display="flex" flexDirection="column" alignItems="center" width="100%" mt={3}>
+          {/* Image Preview at the top */}
+          {preview && (
+            <Box
+              mt={2}
+              mb={2}
+              sx={{
+                width: "100%",
+                maxWidth: 600,
+                textAlign: "center",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <img
+                src={preview}
+                alt="Preview"
+                style={{
+                  width: "100%",
+                  height: "auto",
+                  borderRadius: 8,
+                  maxHeight: "600px", 
+                }}
+              />
+            </Box>
+          )}
+          <Box display="flex" flexDirection="row" alignItems="center" width="100%" maxWidth={400}>
+            <TextField
+              type="file"
+              onChange={handleImageUpload}  
+              slotProps={{
+                htmlInput: {
+                  accept: "image/*",
+                },
+              }}
+              sx={{ flexGrow: 1 }}
+            />
+            <Button
+              variant="outlined"
+              aria-label="Téléverser"
+              onClick={() => { handleSaveImage() }}
+              sx={{ ml: 2, height: "100%" }} 
+            >
+              Téléverser <Upload sx={{ ml: 1 }} />
+            </Button>
+          </Box>    
+        </Box>
+      )}
+      <Dialog open={!!selectedImage} onClose={() => setSelectedImage(null)} maxWidth="md">
+        <IconButton color="primary" onClick={() => setSelectedImage(null)} sx={{ position: "absolute", right: 8, top: 8, zIndex: 1 }}>
+          <CloseIcon />
+        </IconButton>
+        <DialogContent>
+          {selectedImage && (
+            <img
+              src={`data:${selectedImage.mime_type};base64,${selectedImage.file_content}`}
+              alt="Enlarged view"
+              style={{ width: "100%", height: "auto", borderRadius: 8, maxHeight: "500px" }}
+            />
+          )}
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={openDeleteDialog} onClose={() => setOpenDeleteDialog(false)}>
+        <DialogTitle>Supprimer</DialogTitle>
+        <DialogContent>
+          <DialogContentText>Voulez-vous supprimer cette image?</DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpenDeleteDialog(false)} color="primary">
+            Annuler
+          </Button>
+          <Button onClick={handleDelete} color="error">
+            Delete
+          </Button>
         </DialogActions>
       </Dialog>
+
+      <Snackbar open={snackbarOpen} autoHideDuration={4000} onClose={() => setSnackbarOpen(false)}>
+        <Alert onClose={() => setSnackbarOpen(false)} severity={snackbarSeverity} sx={{ width: "100%" }}>
+          {snackbarMessage}
+        </Alert>
+      </Snackbar>
+    </Box>
   );
 };
 
-export default ImageDialog;
+export default ImageGallery;

client/src/components/ImageGallery/ImageGalleryModal/ImageGalleryModal.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+import {
+  Button,
+  IconButton,
+  Dialog,
+  DialogContent,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import ImageGallery from "../ImageGallery";
+import { ImageSearch } from "@mui/icons-material";
+
+
+interface ImageGalleryModalProps {
+  handleCopy?: (id: string) => void;
+}
+
+
+const ImageGalleryModal: React.FC<ImageGalleryModalProps> = ({ handleCopy }) => {
+  const [open, setOpen] = useState<boolean>(false);
+
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <>
+      <Button
+        variant="outlined"
+        aria-label='Téléverser'
+        onClick={() => handleOpen()}>
+        Images <ImageSearch /> 
+      </Button>    
+      <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
+        <DialogContent sx={{ display: "flex", flexDirection: "column", alignItems: "center", py: 3 }}>
+          <IconButton
+            onClick={handleClose}
+            color="primary"
+            sx={{
+              position: "absolute",
+              right: 8,
+              top: 8,
+              zIndex: 1,
+            }}
+          >
+            <CloseIcon />
+          </IconButton>
+
+          <ImageGallery handleCopy={handleCopy}/>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export default ImageGalleryModal;

client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx

@@ -1,5 +1,5 @@
 // EditorQuiz.tsx
-import React, { useState, useEffect, useRef, CSSProperties } from 'react';
+import React, { useState, useEffect, CSSProperties } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 
 import { FolderType } from '../../../Types/FolderType';
@@ -11,13 +11,13 @@ import GIFTTemplatePreview from 'src/components/GiftTemplate/GIFTTemplatePreview
 import { QuizType } from '../../../Types/QuizType';
 
 import './editorQuiz.css';
-import { Button, TextField, NativeSelect, Divider, Dialog, DialogTitle, DialogActions, DialogContent } from '@mui/material';
+import { Button, TextField, NativeSelect, Divider } from '@mui/material';
 import ReturnButton from 'src/components/ReturnButton/ReturnButton';
-import ImageGallery from 'src/components/ImageGallery/ImageGallery';
+import ImageGalleryModal from 'src/components/ImageGallery/ImageGalleryModal/ImageGalleryModal';
 
 import ApiService from '../../../services/ApiService';
 import { escapeForGIFT } from '../../../utils/giftUtils';
-import { Upload, ImageSearch } from '@mui/icons-material';
+import { ENV_VARIABLES } from '../../../constants';
 
 interface EditQuizParams {
     id: string;
@@ -39,9 +39,6 @@ const QuizForm: React.FC = () => {
     const handleSelectFolder = (event: React.ChangeEvent<HTMLSelectElement>) => {
         setSelectedFolder(event.target.value);
     };
-    const fileInputRef = useRef<HTMLInputElement>(null);
-    const [dialogOpen, setDialogOpen] = useState(false);
-    const [galleryOpen, setGalleryOpen] = useState(false);
     const [showScrollButton, setShowScrollButton] = useState(false);
 
     const scrollToTop = () => {
@@ -168,44 +165,16 @@ const QuizForm: React.FC = () => {
         return <div>Chargement...</div>;
     }
 
-    const handleSaveImage = async () => {
-        try {
-            const inputElement = document.getElementById('file-input') as HTMLInputElement;
-
-            if (!inputElement?.files || inputElement.files.length === 0) {
-                setDialogOpen(true);
-                return;
-            }
-
-            if (!inputElement.files || inputElement.files.length === 0) {
-                window.alert("Veuillez d'abord choisir une image à téléverser.")
-                return;
-            }
-
-            const imageUrl = await ApiService.uploadImage(inputElement.files[0]);
-
-            // Check for errors
-            if(imageUrl.indexOf("ERROR") >= 0) {
-                window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
-                return;
-            }
-
-            setImageLinks(prevLinks => [...prevLinks, imageUrl]);
-
-            // Reset the file input element
-            if (fileInputRef.current) {
-                fileInputRef.current.value = '';
-            }
-        } catch (error) {
-            window.alert(`Une erreur est survenue.\n${error}\nVeuillez réessayer plus tard.`)
-
-        }
-    };
-
     const handleCopyToClipboard = async (link: string) => {
         navigator.clipboard.writeText(link);
     }
 
+    const handleCopyImage = (id: string) => {
+        const escLink = `${ENV_VARIABLES.IMG_URL}/api/image/get/${id}`;
+        navigator.clipboard.writeText(id);
+        setImageLinks(prevLinks => [...prevLinks, escLink]);
+    }
+
     return (
         <div className='quizEditor'>
 
@@ -260,51 +229,10 @@ const QuizForm: React.FC = () => {
                         onEditorChange={handleUpdatePreview} />
 
                     <div className='images'>
-                        <div className='upload'>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-                            <label className="dropArea">
-                                <input type="file" id="file-input" className="file-input"
-                                accept="image/jpeg, image/png"
-                                multiple 
-                                ref={fileInputRef} />
-
-                                <Button
-                                variant="outlined"
-                                aria-label='Téléverser'
-                                onClick={handleSaveImage}>
-                                    Téléverser <Upload /> 
-                                </Button>
-
-                            </label>
-                            <Dialog
-                                open={dialogOpen}
-                                onClose={() => setDialogOpen(false)} >
-                                <DialogTitle>Erreur</DialogTitle>
-                                <DialogContent>
-                                    Veuillez d&apos;abord choisir une image à téléverser.
-                                </DialogContent>
-                                <DialogActions>
-                                    <Button onClick={() => setDialogOpen(false)} color="primary">
-                                        OK
-                                    </Button>
-                                </DialogActions>
-                            </Dialog>
-                        </div>
-
                             <h4>Mes images :</h4>
-
+                                <ImageGalleryModal handleCopy={handleCopyImage} />
-                                <Button
+                        </div>
-                                variant="outlined"
-                                aria-label='Téléverser'
-                                onClick={() => setGalleryOpen(true)}>
-                                    Images <ImageSearch /> 
-                                </Button>
-
-                                <ImageGallery 
-                                    galleryOpen={galleryOpen}
-                                    setDialogOpen={setGalleryOpen}
-                                    setImageLinks={setImageLinks}
-                                    >
-                                </ImageGallery>
                                 
                         <div>
                                 <div>
@@ -319,7 +247,7 @@ const QuizForm: React.FC = () => {
                                 </div>                            
                                 <ul>
                                 {imageLinks.map((link, index) => {
-                                    const imgTag = `![alt_text](${escapeForGIFT(link)} "texte de l'infobulle")`;
+                                    const imgTag = `[markdown]![alt_text](${escapeForGIFT(link)} "texte de l'infobulle") {T}`;
                                     return (
                                         <li key={index}>
                                             <code