Merge pull request #62 from Inist-CNRS/Form-Fix

Form fix

Author: parmentf

tdm-fe/src/app/components/form/ProcessingFormEmail.tsx

@@ -15,6 +15,7 @@ type ProcessingFormEmailProps = {
 const ProcessingFormEmail = ({ value, onChange }: ProcessingFormEmailProps) => {
     const [email, setEmail] = useState<string>(value ?? '');
     const [isInvalid, setIsInvalid] = useState(false);
+    const [hasAttemptedInput, setHasAttemptedInput] = useState(false);
 
     useEffect(() => {
         let invalid = false;
@@ -24,26 +25,25 @@ const ProcessingFormEmail = ({ value, onChange }: ProcessingFormEmailProps) => {
         }
 
         setIsInvalid(invalid);
-        if (!invalid) {
-            onChange(email);
-        }
+        onChange(invalid ? null : email);
     }, [email, onChange]);
 
     const handleEmailChange = useCallback((event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
         setEmail(event.target.value);
+        setHasAttemptedInput(true);
     }, []);
 
     return (
         <div className="processing-form-field-group processing-form-field-with-label">
             <TextField
                 value={email}
                 onChange={handleEmailChange}
-                error={isInvalid}
+                error={isInvalid ? hasAttemptedInput : false}
                 className="processing-form-field"
                 label="Adresse électronique"
                 fullWidth
             />
-            {isInvalid ? (
+            {isInvalid && hasAttemptedInput ? (
                 <div className="text processing-form-field-label error">
                     L&apos;adresse électronique n&apos;est pas valide
                 </div>

tdm-fe/src/app/components/form/ProcessingFormUpload.tsx

@@ -7,51 +7,92 @@ import mimeTypes from 'mime';
 import { MuiFileInput } from 'mui-file-input';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 
+import type React from 'react';
+
 type ProcessingFormUploadProps = {
     mimes: string[];
     value: File | null;
     isOnError: boolean;
     isPending: boolean;
-    onChange: (value: File | null) => void;
+    onChange: (value: File | null, isValid: boolean) => void;
 };
 
 const ProcessingFormUpload = ({ mimes, value, isOnError, isPending, onChange }: ProcessingFormUploadProps) => {
     const [file, setFile] = useState<File | null>(value);
     const [isInvalid, setIsInvalid] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
+    const [hasAttemptedUpload, setHasAttemptedUpload] = useState(false);
 
     const stringifiesMineTypes = useMemo(() => {
         return mimes.join(', ');
     }, [mimes]);
 
+    /**
+     * Check file validity and update parent component
+     */
     useEffect(() => {
         let invalid = false;
 
-        if (!file || !mimes.includes(mimeTypes.getType(file.name) ?? '')) {
-            invalid = true;
+        if (file) {
+            if (!mimes.includes(mimeTypes.getType(file.name) ?? '')) {
+                invalid = true;
+            }
+            setHasAttemptedUpload(true);
         }
 
         setIsInvalid(invalid);
-        if (!invalid) {
-            onChange(file);
-        }
+        onChange(file, file !== null && !invalid);
     }, [file, mimes, onChange]);
 
     const handleFileChange = useCallback((newFile: File | null) => {
         setFile(newFile);
+        if (newFile === null) {
+            setHasAttemptedUpload(false);
+        }
+    }, []);
+
+    const handleDragEnter = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(true);
     }, []);
 
+    const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+    }, []);
+
+    const handleDrop = useCallback(
+        (e: React.DragEvent<HTMLDivElement>) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsDragging(false);
+            if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+                handleFileChange(e.dataTransfer.files[0]);
+            }
+        },
+        [handleFileChange],
+    );
+
     if (isPending || isOnError) {
         return <FileUpload showError={isOnError} />;
     }
 
     return (
-        <div className="processing-form-field-group processing-form-field-with-label">
+        <div
+            className={`processing-form-field-group processing-form-field-with-label ${isDragging ? 'dragging' : ''}`}
+            onDragEnter={handleDragEnter}
+            onDragOver={handleDragEnter}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+        >
             <MuiFileInput
                 className="processing-form-field"
-                placeholder="Déposer un fichier"
+                placeholder="Déposer un fichier ou glisser-déposer ici"
                 value={file}
                 onChange={handleFileChange}
-                error={isInvalid}
+                error={isInvalid ? hasAttemptedUpload : false}
                 fullWidth
                 clearIconButtonProps={{
                     children: <CloseIcon fontSize="small" />,
@@ -68,16 +109,10 @@ const ProcessingFormUpload = ({ mimes, value, isOnError, isPending, onChange }:
                     },
                 }}
             />
-            {isInvalid ? (
+            {isInvalid && hasAttemptedUpload ? (
                 <div className="text processing-form-field-label error">
-                    {!file ? (
-                        <>Fichier manquant</>
-                    ) : (
-                        <>
-                            Le fichier ne correspond pas à un format compatible, utilisez l&apos;un de ces formats :{' '}
-                            {stringifiesMineTypes}.
-                        </>
-                    )}
+                    Le fichier ne correspond pas à un format compatible, utilisez l&apos;un de ces formats :{' '}
+                    {stringifiesMineTypes}.
                 </div>
             ) : null}
         </div>

tdm-fe/src/app/components/form/scss/ProcessingFormConfiguration.scss

@@ -2,6 +2,29 @@
 
 .processing-form-field-group {
   margin-bottom: 16px !important;
+  border: 2px dashed transparent;
+  border-radius: 4px;
+  transition: all .3s ease;
+
+  &.dragging {
+    background-color: rgba($blue, .05);
+    border-color: $blue;
+    box-shadow: 0 0 10px rgba($blue, .2);
+    transform: scale(1.01);
+    animation: pulse 1.2s infinite;
+  }
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba($blue, .4);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba($blue, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba($blue, 0);
+  }
 }
 
 #processing-form-wrapper-param,

tdm-fe/src/app/pages/ProcessingCreationForm.tsx

@@ -270,9 +270,9 @@ const ProcessingCreationForm = () => {
      * Handle file change
      * @param value newly add file
      */
-    const handleUploadChange = useCallback((value: File | null) => {
+    const handleUploadChange = useCallback((value: File | null, isValid: boolean) => {
         setFile(value);
-        setIsWaitingInput(false);
+        setIsWaitingInput(!isValid);
     }, []);
 
     /**
@@ -292,7 +292,8 @@ const ProcessingCreationForm = () => {
      */
     const handleEmailChange = useCallback((value: string | null) => {
         setEmail(value);
-        setIsWaitingInput(false);
+        setIsWaitingInput(!value || !EMAIL_REGEX.test(value));
+        setIsInvalid(!value || !EMAIL_REGEX.test(value));
     }, []);
 
     return (