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

création de classe (#2)
2026-01-29 07:53:23 +00:00 · 2024-12-14 15:28:07 +01:00
parent cf144310a1
commit 7acae479da
43 changed files with 2374 additions and 441 deletions
--- a/Front-End/src/components/Structure/Configuration/SpecialitiesSection.js
+++ b/Front-End/src/components/Structure/Configuration/SpecialitiesSection.js
@ -0,0 +1,96 @@
+import { BookOpen, Trash2, MoreVertical, Edit3, Plus } from 'lucide-react';
+import { useState } from 'react';
+import Table from '@/components/Table';
+import DropdownMenu from '@/components/DropdownMenu';
+import Modal from '@/components/Modal';
+import SpecialityForm from '@/components/Structure/Configuration/SpecialityForm';
+import { SpecialityFormProvider } from '@/context/SpecialityFormContext';
+
+const SpecialitiesSection = ({ specialities, handleCreate, handleEdit, handleDelete }) => {
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [editingSpeciality, setEditingSpeciality] = useState(null);
+
+  const openEditModal = (speciality) => {
+    setIsOpen(true);
+    setEditingSpeciality(speciality);
+  }
+
+  const closeEditModal = () => { 
+    setIsOpen(false); 
+    setEditingSpeciality(null); 
+  };
+
+  const handleModalSubmit = (updatedData) => {
+    if (editingSpeciality) {
+      handleEdit(editingSpeciality.id, updatedData);
+    } else {
+      handleCreate(updatedData);
+    }
+    closeEditModal();
+  };
+
+  return (
+    <div className="mb-8">
+      <div className="flex justify-between items-center mb-4 max-w-4xl ml-0">
+        <h2 className="text-3xl text-gray-800 flex items-center">
+          <BookOpen className="w-8 h-8 mr-2" />
+          Spécialités
+        </h2>
+        <button
+          onClick={() => openEditModal(null)} // ouvrir le modal pour créer une nouvelle spécialité
+          className="flex items-center bg-emerald-600 text-white p-2 rounded-full shadow hover:bg-emerald-900 transition duration-200"
+        >
+          <Plus className="w-5 h-5" />
+        </button>
+      </div>
+      <div className="bg-white rounded-lg border border-gray-200 max-w-4xl ml-0">
+        <Table
+          columns={[
+            {
+              name: 'INTITULÉ', 
+              transform: (row) => (
+                <div
+                  className="inline-block px-3 py-1 rounded-full font-bold text-white"
+                  style={{ backgroundColor: row.codeCouleur }}
+                  title={row.codeCouleur}
+                >
+                  <span className="font-bold text-white">{row.nom.toUpperCase()}</span>
+                </div>
+              )
+            },
+            { name: 'DATE DE CREATION', transform: (row) => row.dateCreation_formattee },
+            { name: 'ACTIONS', transform: (row) => (
+            <DropdownMenu
+                buttonContent={<MoreVertical size={20} className="text-gray-400 hover:text-gray-600" />}
+                items={[
+                    { label: 'Modifier', icon:Edit3, onClick: () => openEditModal(row) },
+                    { label: 'Supprimer', icon: Trash2, onClick: () => handleDelete(row.id) }
+                  ]
+                }
+                buttonClassName="text-gray-400 hover:text-gray-600"
+                menuClassName="absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg z-10 flex flex-col items-center"
+            />
+            )}
+        ]}
+          data={specialities}
+        />
+      </div>
+      {isOpen && (
+        <SpecialityFormProvider initialSpeciality={editingSpeciality || {}}>
+          <Modal 
+            isOpen={isOpen} 
+            setIsOpen={setIsOpen} 
+            title={editingSpeciality ? "Modification de la spécialité" : "Création d'une nouvelle spécialité"}
+            size='sm:w-1/6'
+            ContentComponent={() => (
+                                      <SpecialityForm onSubmit={handleModalSubmit} isNew={!editingSpeciality} />
+                                    )}
+          />
+        </SpecialityFormProvider>
+      )}
+    </div>
+  );
+};
+
+export default SpecialitiesSection;