feat: creation d'un FormRenderer.js pour creer un formulaire dynamique [NEWTS-17]

2026-04-03 16:51:26 +00:00 · 2025-08-31 12:26:04 +02:00
parent 482e8c1357
commit 9481a0132d
47 changed files with 324 additions and 130 deletions
--- a/Front-End/src/components/Form/FileUpload.js
+++ b/Front-End/src/components/Form/FileUpload.js
@ -0,0 +1,115 @@
+import React, { useState, useRef } from 'react';
+import { CloudUpload } from 'lucide-react';
+import logger from '@/utils/logger';
+
+export default function FileUpload({
+  selectionMessage,
+  onFileSelect,
+  uploadedFileName,
+  existingFile,
+  required,
+  errorMsg,
+  enable = true, // Nouvelle prop pour activer/désactiver le champ
+}) {
+  const [localFileName, setLocalFileName] = useState(uploadedFileName || '');
+  const fileInputRef = useRef(null);
+
+  const handleFileChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      setLocalFileName(file.name);
+      logger.debug('Fichier sélectionné:', file.name);
+      onFileSelect(file);
+    }
+  };
+
+  const handleFileDrop = (e) => {
+    e.preventDefault();
+    if (!enable) return; // Empêcher le dépôt si désactivé
+    const file = e.dataTransfer.files[0];
+    if (file) {
+      setLocalFileName(file.name);
+      logger.debug('Fichier déposé:', file.name);
+      onFileSelect(file);
+    }
+  };
+
+  return (
+    <div
+      className={`border p-4 rounded-md shadow-md ${
+        !enable ? 'bg-gray-100 cursor-not-allowed' : ''
+      }`}
+    >
+      <h3 className="text-lg font-semibold mb-4">
+        {`${selectionMessage}`}
+        {required && <span className="text-red-500 ml-1">*</span>}
+      </h3>
+      <div
+        className={`border-2 border-dashed p-6 rounded-lg flex flex-col items-center justify-center ${
+          !enable
+            ? 'border-gray-300 bg-gray-100 cursor-not-allowed'
+            : 'border-gray-500 hover:border-emerald-500'
+        }`}
+        onClick={() => enable && fileInputRef.current.click()} // Désactiver le clic si `enable` est false
+        onDragOver={(e) => enable && e.preventDefault()}
+        onDrop={handleFileDrop}
+      >
+        <CloudUpload
+          className={`w-12 h-12 mb-4 ${
+            !enable ? 'text-gray-400' : 'text-emerald-500'
+          }`}
+        />
+        <input
+          type="file"
+          accept=".pdf, .png, .jpg, .jpeg, .gif, .bmp"
+          onChange={handleFileChange}
+          className="hidden"
+          ref={fileInputRef}
+          disabled={!enable} // Désactiver l'input si `enable` est false
+        />
+        <label
+          htmlFor="fileInput"
+          className={`text-center ${
+            !enable ? 'text-gray-400' : 'text-gray-500'
+          }`}
+        >
+          <p className="text-lg font-semibold">
+            {enable ? 'Déposez votre fichier ici' : 'Téléversement désactivé'}
+          </p>
+          {enable && (
+            <p className="text-sm text-gray-500 mt-2">
+              ou cliquez pour sélectionner un fichier
+            </p>
+          )}
+        </label>
+      </div>
+
+      {/* Affichage du fichier existant */}
+      {existingFile && !localFileName && (
+        <div className="mt-4 flex items-center space-x-4 bg-gray-100 p-3 rounded-md shadow-sm">
+          <CloudUpload className="w-6 h-6 text-emerald-500" />
+          <p className="text-sm font-medium text-gray-800">
+            <span className="font-semibold">
+              {typeof existingFile === 'string'
+                ? existingFile.split('/').pop() // Si c'est une chaîne, utilisez split
+                : existingFile?.name || 'Nom de fichier inconnu'}{' '}
+            </span>
+          </p>
+        </div>
+      )}
+
+      {/* Affichage du fichier sélectionné */}
+      {localFileName && (
+        <div className="mt-4 flex items-center space-x-4 bg-gray-100 p-3 rounded-md shadow-sm">
+          <CloudUpload className="w-6 h-6 text-emerald-500" />
+          <p className="text-sm font-medium text-gray-800">
+            <span className="font-semibold">{localFileName}</span>
+          </p>
+        </div>
+      )}
+
+      {/* Message d'erreur */}
+      {errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}
+    </div>
+  );
+}