mirror of
https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git
synced 2025-08-11 21:23:54 -04:00
309 lines
10 KiB
TypeScript
309 lines
10 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import {
|
|
Box,
|
|
CircularProgress,
|
|
Button,
|
|
IconButton,
|
|
Card,
|
|
CardContent,
|
|
Dialog,
|
|
DialogContent,
|
|
DialogActions,
|
|
DialogTitle,
|
|
DialogContentText,
|
|
Tabs,
|
|
Tab,
|
|
TextField, Snackbar,
|
|
Alert
|
|
} 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 { ImageType } from "../../Types/ImageType";
|
|
import ApiService from "../../services/ApiService";
|
|
import { Upload } from "@mui/icons-material";
|
|
import { escapeForGIFT } from "src/utils/giftUtils";
|
|
import { ENV_VARIABLES } from "src/constants";
|
|
|
|
interface ImagesProps {
|
|
handleCopy?: (id: string) => void;
|
|
handleDelete?: (id: string) => void;
|
|
}
|
|
|
|
const ImageGallery: React.FC<ImagesProps> = ({ handleCopy, handleDelete }) => {
|
|
const [images, setImages] = useState<ImageType[]>([]);
|
|
const [totalImg, setTotalImg] = useState(0);
|
|
const [imgPage, setImgPage] = useState(1);
|
|
const [imgLimit] = useState(6);
|
|
const [loading, setLoading] = useState(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 () => {
|
|
setLoading(true);
|
|
const data = await ApiService.getUserImages(imgPage, imgLimit);
|
|
setImages(data.images);
|
|
setTotalImg(data.total);
|
|
setLoading(false);
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchImages();
|
|
}, [imgPage]);
|
|
|
|
const defaultHandleDelete = async (id: string) => {
|
|
if (imageToDelete) {
|
|
setLoading(true);
|
|
const isDeleted = await ApiService.deleteImage(id);
|
|
setLoading(false);
|
|
|
|
if (isDeleted) {
|
|
setImgPage(1);
|
|
fetchImages();
|
|
setSnackbarMessage("Image supprimée avec succès!");
|
|
setSnackbarSeverity("success");
|
|
} else {
|
|
setSnackbarMessage("Erreur lors de la suppression de l'image. Veuillez réessayer.");
|
|
setSnackbarSeverity("error");
|
|
}
|
|
|
|
setSnackbarOpen(true);
|
|
setSelectedImage(null);
|
|
setImageToDelete(null);
|
|
setOpenDeleteDialog(false);
|
|
}
|
|
};
|
|
|
|
const defaultHandleCopy = (id: string) => {
|
|
if (navigator.clipboard) {
|
|
const link = `${ENV_VARIABLES.BACKEND_URL}/api/image/get/${id}`;
|
|
const imgTag = `[markdown] } "texte de l'infobulle (ne fonctionne pas sur écran tactile généralement)") `;
|
|
setSnackbarMessage("Le lien Markdown de l'image a été copié dans le presse-papiers");
|
|
setSnackbarSeverity("success");
|
|
setSnackbarOpen(true);
|
|
navigator.clipboard.writeText(imgTag);
|
|
}
|
|
if(handleCopy) {
|
|
handleCopy(id);
|
|
}
|
|
};
|
|
|
|
const handleDeleteFunction = handleDelete || defaultHandleDelete;
|
|
|
|
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 handleSaveImage = async () => {
|
|
try {
|
|
if (!importedImage) {
|
|
setSnackbarMessage("Veuillez 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);
|
|
|
|
setImportedImage(null);
|
|
setPreview(null);
|
|
setTabValue(0);
|
|
} catch (error) {
|
|
setSnackbarMessage(`Une erreur est survenue.\n${error}\nVeuillez réessayer plus tard.`);
|
|
setSnackbarSeverity("error");
|
|
setSnackbarOpen(true);
|
|
}
|
|
};
|
|
|
|
const handleCloseSnackbar = () => {
|
|
setSnackbarOpen(false);
|
|
};
|
|
|
|
|
|
return (
|
|
<Box p={3}>
|
|
<Tabs value={tabValue} onChange={(_, newValue) => setTabValue(newValue)}>
|
|
<Tab label="Galerie" />
|
|
<Tab label="Import" />
|
|
</Tabs>
|
|
{tabValue === 0 && (
|
|
<>
|
|
{loading ? (
|
|
<Box display="flex" justifyContent="center" alignItems="center" height={200}>
|
|
<CircularProgress />
|
|
</Box>
|
|
) : (
|
|
<>
|
|
<Box display="grid" gridTemplateColumns="repeat(3, 1fr)" gridTemplateRows="repeat(2, 1fr)" gap={2} maxWidth="900px" margin="auto">
|
|
{images.map((obj) => (
|
|
<Card key={obj.id} sx={{ cursor: "pointer", display: "flex", flexDirection: "column", alignItems: "center" }} onClick={() => setSelectedImage(obj)}>
|
|
<CardContent sx={{ p: 0 }}>
|
|
<img
|
|
src={`data:${obj.mime_type};base64,${obj.file_content}`}
|
|
alt={`Image ${obj.file_name}`}
|
|
style={{ width: "100%", height: 250, objectFit: "cover", borderRadius: 8 }}
|
|
/>
|
|
</CardContent>
|
|
<Box display="flex" justifyContent="center" mt={1}>
|
|
<IconButton onClick={(e) => {
|
|
e.stopPropagation();
|
|
defaultHandleCopy(obj.id);
|
|
}}
|
|
color="primary"
|
|
data-testid={`gallery-tab-copy-${obj.id}`} >
|
|
|
|
<ContentCopyIcon sx={{ fontSize: 18 }} />
|
|
</IconButton>
|
|
|
|
<IconButton
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setImageToDelete(obj);
|
|
setOpenDeleteDialog(true);
|
|
}}
|
|
color="error"
|
|
data-testid={`gallery-tab-delete-${obj.id}`} >
|
|
|
|
<DeleteIcon sx={{ fontSize: 18 }} />
|
|
</IconButton>
|
|
</Box>
|
|
</Card>
|
|
))}
|
|
</Box>
|
|
<Box display="flex" justifyContent="center" mt={2}>
|
|
<Button onClick={() => setImgPage((prev) => Math.max(prev - 1, 1))} disabled={imgPage === 1} color="primary">
|
|
Précédent
|
|
</Button>
|
|
<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"
|
|
data-testid="file-input"
|
|
onChange={handleImageUpload}
|
|
slotProps={{
|
|
htmlInput: {
|
|
"data-testid": "file-input",
|
|
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 }}
|
|
data-testid="close-button">
|
|
<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={() => imageToDelete && handleDeleteFunction(imageToDelete.id)} color="error">
|
|
Delete
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
|
|
<Snackbar
|
|
open={snackbarOpen}
|
|
autoHideDuration={4000}
|
|
onClose={handleCloseSnackbar}
|
|
>
|
|
<Alert
|
|
onClose={handleCloseSnackbar}
|
|
severity={snackbarSeverity}
|
|
sx={{ width: "100%" }}>
|
|
{snackbarMessage}
|
|
</Alert>
|
|
</Snackbar>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default ImageGallery;
|