Merge branch 'main' into 234-registration-numbers

ai-cfia · Feb 10, 2025 · 4e2c302 · 4e2c302
2 parents 60379ad + 8c9c67c
commit 4e2c302
Show file tree

Hide file tree

Showing 19 changed files with 211 additions and 224 deletions.
diff --git a/public/locales/en/homePage.json b/public/locales/en/homePage.json
@@ -3,7 +3,8 @@
   "submitButtonDisabledHint": "You need to add a minimum of 1 file to start the analysis",
   "fileList": {
     "uploadedfiles": "Uploaded Files",
-    "noUploadedfiles": "No uploaded files"
+    "noUploadedfiles": "No uploaded files",
+    "deleteAll": "Delete All"
   },
   "fileElement": {
     "altText": {

diff --git a/public/locales/fr/homePage.json b/public/locales/fr/homePage.json
@@ -3,7 +3,8 @@
   "submitButtonDisabledHint": "Vous devez ajouter au moins 1 fichier pour commencer l'analyse",
   "fileList": {
     "uploadedfiles": "Fichiers téléversés",
-    "noUploadedfiles": "Aucun fichier téléversé"
+    "noUploadedfiles": "Aucun fichier téléversé",
+    "deleteAll": "Tout supprimer"
   },
   "fileElement": {
     "altText": {

diff --git a/src/app/label-data-confirmation/page.tsx b/src/app/label-data-confirmation/page.tsx
@@ -73,8 +73,6 @@ const LabelDataConfirmationPage = () => {
           `Label data saving failed: ${processAxiosError(error)}`,
           "error",
         );
-      })
-      .finally(() => {
         setConfirmLoading(false);
       });
   };
@@ -96,9 +94,10 @@ const LabelDataConfirmationPage = () => {
         if (!response.data.inspectionId) {
           throw new Error("ID missing in initial label data saving response.");
         }
-        const _labelData = {
+        const _labelData: LabelData = {
           ...labelData,
           inspectionId: response.data.inspectionId,
+          pictureSetId: response.data.pictureSetId,
         };
         setLabelData(_labelData);
         putLabelData(_labelData, signal);

diff --git a/src/components/FileElement.tsx b/src/components/FileElement.tsx
@@ -1,3 +1,9 @@
+import FileUploaded from "@/classe/File";
+import useUploadedFilesStore from "@/stores/fileStore";
+import { DropzoneState } from "@/types/types";
+import CheckIcon from "@mui/icons-material/Check";
+import CreateIcon from "@mui/icons-material/Create";
+import DeleteIcon from "@mui/icons-material/Delete";
 import {
   Divider,
   Grid2,
@@ -6,53 +12,46 @@ import {
   Typography,
   useTheme,
 } from "@mui/material";
-import DeleteIcon from "@mui/icons-material/Delete";
-import CreateIcon from "@mui/icons-material/Create";
-import CheckIcon from "@mui/icons-material/Check";
-import { DropzoneState } from "@/types/types";
 import Image from "next/image";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import useUploadedFilesStore from "@/stores/fileStore";
 
 /**
  * FileElementProps interface to define the props for the FileElement component
  */
 interface FileElementProps {
   setDropzoneState: React.Dispatch<React.SetStateAction<DropzoneState>>;
-  fileName: string;
-  fileUrl: string;
+  imageFile: FileUploaded;
 }
 
 /**
  *
  * FileElement component to display the uploaded file
  * @param setDropZoneState: function to set the dropzone state
- * @param fileName: name of the file
- * @param fileUrl: url of the file
+ * @param imageName: name of the file
+ * @param imageUrl: url of the file
  * @param handleDelete: function to handle the deletion of the file
  *
  * @returns
  */
-const FileElement: React.FC<FileElementProps> = ({ setDropzoneState, fileName, fileUrl }) => {
+const FileElement: React.FC<FileElementProps> = ({
+  setDropzoneState,
+  imageFile,
+}) => {
   const theme = useTheme();
   const { t } = useTranslation("homePage");
   const [hovered, setHovered] = useState(false);
   const { removeUploadedFile, renameUploadedFile } = useUploadedFilesStore();
   const [isRenaming, setIsRenaming] = useState(false);
-  const extension = fileName.split(".").pop() || "";
-  const baseName = fileName.replace(`.${extension}`, "");
+  const { name: imageName, path: imageUrl } = imageFile.getInfo();
+  const extension = imageName.split(".").pop() || "";
+  const baseName =
+    imageName.substring(0, imageName.lastIndexOf(".")) || imageName;
   const [newName, setNewName] = useState(baseName);
 
-  const isValidObjectURL = (url: string) => {
-    const pattern =
-      /^(blob:+http:\/\/|https:\/\/)[a-zA-Z0-9\-_.]+(?:\.[a-zA-Z0-9\-_.]+)*(?::\d+)?\/[a-zA-Z0-9\-_.]+$/;
-    return pattern.test(url);
-  };
-
   const handleRenameSubmit = (event: React.KeyboardEvent) => {
     if (event.key === "Enter" && newName.trim() !== "") {
-      renameUploadedFile(fileUrl, `${newName.trim()}.${extension}`);
+      renameUploadedFile(imageUrl, `${newName.trim()}.${extension}`);
     }
   };
 
@@ -61,29 +60,27 @@ const FileElement: React.FC<FileElementProps> = ({ setDropzoneState, fileName, f
       <Grid2
         onMouseEnter={() => {
           setHovered(true);
-          setDropzoneState({ visible: true, imageUrl: fileUrl });
+          setDropzoneState({ visible: true, imageUrl: imageUrl });
         }}
         onMouseLeave={() => {
           setHovered(false);
           setDropzoneState({ visible: false, imageUrl: "" });
         }}
         className="relative h-full w-full min-h-[90px] flex items-center
         justify-center overflow-hidden rounded border-2 border-neutral-600 bg-neutral-200"
-        data-testid={`file-element-${fileName}`}
+        data-testid={`file-element-${imageName}`}
       >
         <Grid2 size={20} className="relative flex justify-center items-center">
-          {isValidObjectURL(fileUrl) && (
-            <div>
-              <Image
-                className="!relative max-h-[90px] max-w-full p-1"
-                src={fileUrl}
-                alt={t("fileElement.altText.uploadedFileAlt")}
-                fill={true}
-                priority
-                data-testid="logo-image"
-              />
-            </div>
-          )}
+          <div>
+            <Image
+              className="!relative max-h-[90px] max-w-full p-1"
+              src={imageUrl}
+              alt={t("fileElement.altText.uploadedFileAlt")}
+              fill={true}
+              priority
+              data-testid="logo-image"
+            />
+          </div>
         </Grid2>
         <Divider
           orientation="vertical"
@@ -92,119 +89,135 @@ const FileElement: React.FC<FileElementProps> = ({ setDropzoneState, fileName, f
           sx={{ borderRightWidth: 3 }} // className="border-r-2" dont work
         />
         <Grid2 size={80} className="relative flex items-center justify-between">
-        {isRenaming ? (
-          <div className="flex items-center w-full">
-            <TextField
-              value={newName}
-              onChange={(e) => setNewName(e.target.value)}
-              onKeyPress={handleRenameSubmit}
-              autoFocus
-              placeholder="Enter file name"
-              inputProps={{ autoComplete: "off" }}
-              style={{
-                marginLeft: "5px",
-                marginRight: "5px",
-                width: "calc(100% - 45px)",
-              }}
-              data-testid="rename-input"
-            />
+          {isRenaming ? (
+            <div className="flex items-center w-full">
+              <TextField
+                value={newName}
+                onChange={(e) => setNewName(e.target.value)}
+                onKeyPress={handleRenameSubmit}
+                autoFocus
+                placeholder="Enter file name"
+                slotProps={{
+                  htmlInput: {
+                    autoComplete: "off",
+                  },
+                }}
+                style={{
+                  marginLeft: "5px",
+                  marginRight: "5px",
+                  width: "calc(100% - 45px)",
+                }}
+                data-testid="rename-input"
+              />
+              <Typography
+                variant="body1"
+                color={theme.palette.text.primary}
+                style={{
+                  whiteSpace: "nowrap",
+                  marginRight: "5px",
+                  flexShrink: 0,
+                  width: "auto",
+                }}
+              >
+                .{extension}
+              </Typography>
+              <IconButton
+                edge="end"
+                size="small"
+                aria-label={t("fileElement.altText.renameFileAlt")}
+                sx={{
+                  color: "black",
+                  backgroundColor: "#D3D3D3",
+                  borderRadius: "5px",
+                  marginRight: "0.5rem",
+                  "&:hover": {
+                    backgroundColor: "#A9A9A9",
+                  },
+                }}
+                onClick={() => {
+                  setIsRenaming(false);
+                  renameUploadedFile(
+                    imageUrl,
+                    `${newName.trim()}.${extension}`,
+                  );
+                }}
+                data-testid={`rename-submit`}
+              >
+                <CheckIcon style={{ fontSize: "1.7rem" }} />
+              </IconButton>
+            </div>
+          ) : (
             <Typography
-              variant="body1"
+              variant="h6"
               color={theme.palette.text.primary}
-              style={{
-                whiteSpace: "nowrap",
-                marginRight: "5px",
-                flexShrink: 0,
-                width: "auto",
-              }}
+              className="overflow-hidden text-ellipsis whitespace-nowrap text-start pl-2"
+              sx={{ maxWidth: { xs: "80%", md: "calc(100% - 75px)" } }}
+              data-testid="file-name"
             >
-              .{extension}
+              {imageName}
             </Typography>
+          )}
+        </Grid2>
+        {!isRenaming && hovered && (
+          <>
             <IconButton
               edge="end"
+              aria-label={t("fileElement.altText.deleteFileAlt")}
               size="small"
-              aria-label={t("fileElement.altText.renameFileAlt")}
               sx={{
+                alignSelf: "center",
+                display: "flex",
+                maxHeight: "50%",
                 color: "black",
-                backgroundColor: "#D3D3D3",
+                position: "absolute",
                 borderRadius: "5px",
-                marginRight: "0.5rem",
+                right: { xs: 5, sm: 5 },
+                top: { xs: 0, sm: "0" },
+                bottom: { xs: "auto", sm: 10 },
                 "&:hover": {
                   backgroundColor: "#A9A9A9",
                 },
               }}
-              onClick={() =>{
-                setIsRenaming(false);
-                renameUploadedFile(fileUrl, `${newName.trim()}.${extension}`)
+              onClick={() => {
+                removeUploadedFile(imageUrl);
+                setDropzoneState({ visible: false, imageUrl: "" });
               }}
-              data-testid={`rename-submit`}
-              >
-              <CheckIcon style={{ fontSize: "1.7rem" }} />
+              data-testid={`delete-${imageName}`}
+            >
+              <DeleteIcon
+                data-testid="delete-icon"
+                style={{ fontSize: "1.7rem" }}
+              />
             </IconButton>
-          </div>
-        ) : (
-          <Typography
-            variant="h6"
-            color={theme.palette.text.primary}
-            className="overflow-hidden text-ellipsis whitespace-nowrap text-start pl-2"
-            sx={{ maxWidth: { xs: "80%", md: "calc(100% - 75px)" } }}
-            data-testid="file-name"
-          >
-            {fileName}
-          </Typography>
+            <IconButton
+              edge="end"
+              size="small"
+              aria-label={t("fileElement.altText.renameFileAlt")}
+              sx={{
+                alignSelf: "center",
+                display: "flex",
+                maxHeight: "50%",
+                color: "black",
+                position: "absolute",
+                borderRadius: "5px",
+                right: { xs: 6, sm: 45 },
+                top: { xs: 50, sm: "0" },
+                bottom: { xs: "auto", sm: 10 },
+                "&:hover": {
+                  backgroundColor: "#A9A9A9",
+                },
+              }}
+              onClick={() => setIsRenaming(true)}
+              data-testid={`rename-${imageName}`}
+            >
+              <CreateIcon
+                data-testid={`rename-icon`}
+                style={{ fontSize: "1.7rem" }}
+              />
+            </IconButton>
+          </>
         )}
       </Grid2>
-      {!isRenaming && hovered && (
-        <>
-          <IconButton
-            edge="end"
-            aria-label={t("fileElement.altText.deleteFileAlt")}
-            size="small"
-            sx={{
-              alignSelf: "center",
-              display: "flex",
-              maxHeight: "50%",
-              color: "black",
-              position: "absolute",
-              borderRadius: "5px",
-              right: { xs: 5, sm: 5 },
-              top: { xs: 0, sm: "0" },
-              bottom: { xs: "auto", sm: 10 },
-              "&:hover": {
-                backgroundColor: "#A9A9A9",
-              },
-            }}
-            onClick={() => {removeUploadedFile(fileUrl); setDropzoneState({ visible: false, imageUrl: "" });}}
-            data-testid={`delete-${fileName}`}
-          >
-            <DeleteIcon data-testid="delete-icon" style={{ fontSize: "1.7rem" }} />
-          </IconButton>
-          <IconButton
-            edge="end"
-            size="small"
-            aria-label={t("fileElement.altText.renameFileAlt")}
-            sx={{
-              alignSelf: "center",
-              display: "flex",
-              maxHeight: "50%",
-              color: "black",
-              position: "absolute",
-              borderRadius: "5px",
-              right: { xs: 6, sm: 45 },
-              top: { xs: 50, sm: "0" },
-              bottom: { xs: "auto", sm: 10 },
-              "&:hover": {
-                backgroundColor: "#A9A9A9",
-              },
-            }}
-            onClick={() => setIsRenaming(true)}
-            data-testid={`rename-${fileName}`}
-          >
-            <CreateIcon data-testid={`rename-icon`} style={{ fontSize: "1.7rem" }} />
-          </IconButton>
-        </>
-      )}
-    </Grid2>
     </>
   );
 };