Disable dropzone when other filetype is selected for import

swisstopo · Dec 19, 2024 · d4a336c · d4a336c
1 parent 4a81b32
commit d4a336c
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 16 deletions.
diff --git a/src/client/src/pages/detail/attachments/fileDropzone.jsx b/src/client/src/pages/detail/attachments/fileDropzone.jsx
@@ -16,6 +16,7 @@ import { theme } from "../../../AppTheme.ts";
  * @param {Array<string>} props.acceptedFileTypes - The list of accepted file types.
  * @param {boolean} props.isDisabled - Whether the dropzone is disabled.
  * @param {string} props.dataCy - The data-cy attribute for testing.
+ * @param {Function} props.setFileType - A callback function to set the file type.
  * @returns {JSX.Element} The rendered FileDropzone component.
  */
 export const FileDropzone = props => {
@@ -27,18 +28,17 @@ export const FileDropzone = props => {
     acceptedFileTypes,
     isDisabled,
     dataCy,
+    setFileType,
   } = props;
   const { t } = useTranslation();
   const [files, setFiles] = useState([]);
-  const [dropZoneText, setDropZoneText] = useState(null);
+  const [dropZoneText, setDropZoneText] = useState(t(defaultText));
   const [dropZoneTextColor, setDropZoneTextColor] = useState(null);
   const defaultDropzoneTextColor = isDisabled ? "#9f9f9f" : "#2185d0";
-  const initialDropzoneText = isDisabled ? t("dropZoneChooseBoreholeFilesFirst") : t(defaultText);
 
   useEffect(() => {
-    setDropZoneText(initialDropzoneText);
     setDropZoneTextColor(defaultDropzoneTextColor);
-  }, [defaultDropzoneTextColor, initialDropzoneText]);
+  }, [defaultDropzoneTextColor]);
 
   // Set the color of the dropzone text to red and display an error message
   const showErrorMsg = useCallback(
@@ -88,6 +88,13 @@ export const FileDropzone = props => {
         setDropZoneTextColor(defaultDropzoneTextColor);
         setDropZoneText(t(defaultText));
         setFiles(prevFiles => [...prevFiles, ...acceptedFiles]);
+        // set filetype depending on acceptedFileTypes. if contains csv
+        if (acceptedFileTypes.includes("text/csv")) {
+          setFileType("csv");
+        }
+        if (acceptedFileTypes.includes("application/json")) {
+          setFileType("json");
+        }
       }
     },
     [defaultDropzoneTextColor, defaultText, files.length, maxFilesToUpload, showErrorMsg, t],
@@ -96,6 +103,7 @@ export const FileDropzone = props => {
   // Is called when an accepted file is removed.
   const removeFile = fileToRemove => {
     setFiles(prevFiles => prevFiles.filter(file => file !== fileToRemove));
+    setFileType(null);
   };
 
   // Is called when the selected/dropped files are rejected

diff --git a/src/client/src/pages/overview/sidePanelContent/commons/actionsInterfaces.ts b/src/client/src/pages/overview/sidePanelContent/commons/actionsInterfaces.ts
@@ -22,6 +22,7 @@ export interface NewBoreholeProps extends WorkgroupSelectProps {
 
 export interface ImportContentProps {
   setSelectedFile: React.Dispatch<React.SetStateAction<Blob[] | null>>;
+  fileType: string | null;
 }
 
 export interface ImportModalProps extends ImportContentProps {

diff --git a/src/client/src/pages/overview/sidePanelContent/importer/importModal.tsx b/src/client/src/pages/overview/sidePanelContent/importer/importModal.tsx
@@ -99,7 +99,7 @@ const ImportModal = ({
         </Header>
       </Segment>
       <Modal.Content>
-        <ImportModalContent setSelectedFile={setSelectedFile} setFileType={setFileType} />
+        <ImportModalContent setSelectedFile={setSelectedFile} setFileType={setFileType} fileType={fileType} />
         <h3>{capitalizeFirstLetter(t("workgroup"))}</h3>
         <WorkgroupSelect workgroupId={workgroup} enabledWorkgroups={enabledWorkgroups} setWorkgroupId={setWorkgroup} />
       </Modal.Content>

diff --git a/src/client/src/pages/overview/sidePanelContent/importer/importModalContent.tsx b/src/client/src/pages/overview/sidePanelContent/importer/importModalContent.tsx
@@ -26,23 +26,21 @@ const ExampleHeadings = (headings: string) => {
 const ImportModalContent = ({
   setSelectedFile,
   setFileType,
+  fileType,
 }: ImportContentProps & { setFileType: (type: string) => void }) => {
   const { t } = useTranslation();
 
-  const handleBoreholeFileChange = useCallback(
-    (boreholeFileFromDropzone: Blob[]) => {
-      setSelectedFile(boreholeFileFromDropzone);
-      setFileType("csv");
+  const handleCsvFileChange = useCallback(
+    (csvFileFromDropzone: Blob[]) => {
+      setSelectedFile(csvFileFromDropzone);
     },
-    [setSelectedFile, setFileType],
+    [setSelectedFile],
   );
-
   const handleJsonFileChange = useCallback(
     (jsonFileFromDropzone: Blob[]) => {
       setSelectedFile(jsonFileFromDropzone);
-      setFileType("json");
     },
-    [setSelectedFile, setFileType],
+    [setSelectedFile],
   );
 
   return (
@@ -80,13 +78,14 @@ const ImportModalContent = ({
           )}
         </StackHalfWidth>
         <FileDropzone
-          onHandleFileChange={handleBoreholeFileChange}
+          onHandleFileChange={handleCsvFileChange}
           defaultText={"dropZoneBoreholeCsvText"}
           acceptedFileTypes={["text/csv"]}
           maxFilesToSelectAtOnce={1}
           maxFilesToUpload={1}
-          isDisabled={false}
+          isDisabled={fileType === "json"}
           dataCy={"import-boreholeFile-input"}
+          setFileType={setFileType}
         />
       </Stack>
       <h3>{capitalizeFirstLetter(t("JSON"))}</h3>
@@ -98,8 +97,9 @@ const ImportModalContent = ({
           acceptedFileTypes={["application/json"]}
           maxFilesToSelectAtOnce={1}
           maxFilesToUpload={1}
-          isDisabled={false}
+          isDisabled={fileType === "csv"}
           dataCy={"import-jsonFile-input"}
+          setFileType={setFileType}
         />
       </Stack>
     </>