refactor: Création de nouveaux composants / update formulaire de

création de classe (#2)

Front-End/src/components/Structure/Configuration/TeachersSelectionConfiguration.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import Table from '@/components/Table';
+
+const TeachersSelectionConfiguration = ({ formData, teachers, handleTeacherSelection, selectedTeachers }) => {
+  return (
+    <div className="mt-4" style={{ maxHeight: '300px', overflowY: 'auto' }}>
+      <label className="mt-6 block text-2xl font-medium text-gray-700 mb-2">Enseignants</label>
+      <label className={`block text-sm font-medium mb-4`}>Sélection : <span className={`${formData.enseignants_ids.length !== 0 ? 'text-emerald-400' : 'text-red-300'}`}>{formData.enseignants_ids.length}</span></label>
+      <Table
+        columns={[
+          { 
+            name: 'Nom', 
+            transform: (row) => row.nom,
+          },
+          { 
+            name: 'Prénom', 
+            transform: (row) => row.prenom,
+          },
+          { 
+            name: 'Spécialités', 
+            transform: (row) => (
+              <div className="flex flex-wrap items-center">
+                {row.specialites.map(specialite => (
+                  <span key={specialite.id} className="flex items-center mr-2 mb-1">
+                    <div
+                      className="w-4 h-4 rounded-full mr-2"
+                      style={{ backgroundColor: specialite.codeCouleur }}
+                      title={specialite.nom}
+                    ></div>
+                    <span>{specialite.nom}</span>
+                  </span>
+                ))}
+              </div>
+            ),
+          },
+        ]}
+        data={teachers}
+        onRowClick={handleTeacherSelection}
+        selectedRows={selectedTeachers}
+        isSelectable={true}
+      />
+    </div>
+  );
+};
+
+export default TeachersSelectionConfiguration;