feat: Précablage du formulaire dynamique [N3WTS-17]

Front-End/src/components/Form/FormRenderer.js

@@ -11,6 +11,7 @@ import CheckBox from './CheckBox';
 import ToggleSwitch from './ToggleSwitch';
 import InputPhone from './InputPhone';
 import FileUpload from './FileUpload';
+import SignatureField from './SignatureField';
 
 /*
  * Récupère une icône Lucide par son nom.
@@ -24,46 +25,8 @@ export function getIcon(name) {
   }
 }
 
-const formConfigTest = {
-  id: 0,
-  title: 'Mon formulaire dynamique',
-  submitLabel: 'Envoyer',
-  fields: [
-    { id: 'name', label: 'Nom', type: 'text', required: true },
-    { id: 'email', label: 'Email', type: 'email' },
-    {
-      id: 'email2',
-      label: 'Email',
-      type: 'text',
-      icon: 'Mail',
-    },
-    {
-      id: 'role',
-      label: 'Rôle',
-      type: 'select',
-      options: ['Admin', 'Utilisateur', 'Invité'],
-      required: true,
-    },
-    {
-      type: 'paragraph',
-      text: "Bonjour, Bienvenue dans ce formulaire d'inscription haha",
-    },
-    {
-      id: 'birthdate',
-      label: 'Date de naissance',
-      type: 'date',
-      icon: 'Calendar',
-    },
-    {
-      id: 'textarea',
-      label: 'toto',
-      type: 'textarea',
-    },
-  ],
-};
-
 export default function FormRenderer({
-  formConfig = formConfigTest,
+  formConfig,
   csrfToken,
   onFormSubmit = (data) => {
     alert(JSON.stringify(data, null, 2));
@@ -109,7 +72,8 @@ export default function FormRenderer({
       const hasFiles = Object.keys(data).some((key) => {
         return (
           data[key] instanceof FileList ||
-          (data[key] && data[key][0] instanceof File)
+          (data[key] && data[key][0] instanceof File) ||
+          (typeof data[key] === 'string' && data[key].startsWith('data:image'))
         );
       });
 
@@ -118,7 +82,7 @@ export default function FormRenderer({
         const formData = new FormData();
 
         // Ajouter l'ID du formulaire
-        formData.append('formId', formConfig.id.toString());
+        formData.append('formId', (formConfig?.id || 'unknown').toString());
 
         // Traiter chaque champ et ses valeurs
         Object.keys(data).forEach((key) => {
@@ -134,6 +98,29 @@ export default function FormRenderer({
                 formData.append(`files.${key}`, value[i]);
               }
             }
+          } else if (
+            typeof value === 'string' &&
+            value.startsWith('data:image')
+          ) {
+            // Gérer les signatures (SVG ou images base64)
+            if (value.includes('svg+xml')) {
+              // Gérer les signatures SVG
+              const svgData = value.split(',')[1];
+              const svgBlob = new Blob([atob(svgData)], {
+                type: 'image/svg+xml',
+              });
+              formData.append(`files.${key}`, svgBlob, `signature_${key}.svg`);
+            } else {
+              // Gérer les images base64 classiques
+              const byteString = atob(value.split(',')[1]);
+              const ab = new ArrayBuffer(byteString.length);
+              const ia = new Uint8Array(ab);
+              for (let i = 0; i < byteString.length; i++) {
+                ia[i] = byteString.charCodeAt(i);
+              }
+              const blob = new Blob([ab], { type: 'image/png' });
+              formData.append(`files.${key}`, blob, `signature_${key}.png`);
+            }
           } else {
             // Gérer les autres types de champs
             formData.append(
@@ -154,7 +141,7 @@ export default function FormRenderer({
       } else {
         // Pas de fichier, on peut utiliser JSON
         const formattedData = {
-          formId: formConfig.id,
+          formId: formConfig?.id || 'unknown',
           responses: { ...data },
         };
 
@@ -189,10 +176,10 @@ export default function FormRenderer({
     >
       {csrfToken ? <DjangoCSRFToken csrfToken={csrfToken} /> : null}
       <h2 className="text-2xl font-bold text-center mb-4">
-        {formConfig.title}
+        {formConfig?.title || 'Formulaire'}
       </h2>
 
-      {formConfig.fields.map((field) => (
+      {(formConfig?.fields || []).map((field) => (
         <div
           key={field.id || `field-${Math.random().toString(36).substr(2, 9)}`}
           className="flex flex-col mt-4"
@@ -428,13 +415,40 @@ export default function FormRenderer({
               )}
             />
           )}
+          {field.type === 'signature' && (
+            <Controller
+              name={field.id}
+              control={control}
+              rules={{ required: field.required }}
+              render={({ field: { onChange, value } }) => (
+                <div>
+                  <SignatureField
+                    label={field.label}
+                    required={field.required}
+                    value={value || ''}
+                    onChange={onChange}
+                    backgroundColor={field.backgroundColor || '#ffffff'}
+                    penColor={field.penColor || '#000000'}
+                    penWidth={field.penWidth || 2}
+                  />
+                  {errors[field.id] && (
+                    <p className="text-red-500 text-sm mt-1">
+                      {field.required
+                        ? `${field.label} est requis`
+                        : 'Champ invalide'}
+                    </p>
+                  )}
+                </div>
+              )}
+            />
+          )}
         </div>
       ))}
       <div className="form-group-submit mt-4">
         <Button
           type="submit"
           primary
-          text={formConfig.submitLabel ? formConfig.submitLabel : 'Envoyer'}
+          text={formConfig?.submitLabel || 'Envoyer'}
           className="mb-1 px-4 py-2 rounded-md shadow bg-emerald-500 text-white hover:bg-emerald-600 w-full"
         />
       </div>