n3wt-school/Front-End/src/components/ClassesSection.js

import { Users, Trash2, MoreVertical, Edit3, Plus, ZoomIn } from 'lucide-react';
import { useState } from 'react';
import Table from '@/components/Table';
import DropdownMenu from '@/components/DropdownMenu';
import Modal from '@/components/Modal';
import ClassForm from '@/components/ClassForm';
import ClasseDetails from '@/components/ClasseDetails';

const ClassesSection = ({ classes, specialities, teachers, handleCreate, handleEdit, handleDelete }) => {

  const [isOpen, setIsOpen] = useState(false);
  const [isOpenDetails, setIsOpenDetails] = useState(false);
  const [editingClass, setEditingClass] = useState(null);

  const openEditModal = (classe) => {
    setIsOpen(true);
    setEditingClass(classe);
  }

  const openEditModalDetails = (classe) => {
    setIsOpenDetails(true);
    setEditingClass(classe);
  }

  const closeEditModal = () => { 
    setIsOpen(false); 
    setEditingClass(null); 
  };

  const closeEditModalDetails = () => { 
    setIsOpenDetails(false); 
    setEditingClass(null); 
  };

  const handleModalSubmit = (updatedData) => {
    if (editingClass) {
      handleEdit(editingClass.id, updatedData);
    } else {
      handleCreate(updatedData);
    }
    closeEditModal();
  };

  return (
    <div className="mb-8">
      <div className="flex justify-between items-center mb-4 max-w-8xl ml-0">
        <h2 className="text-3xl text-gray-800 flex items-center">
          <Users className="w-8 h-8 mr-2" />
          Classes
        </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-8xl ml-0">
        <Table
          columns={[
            { name: 'AMBIANCE', transform: (row) => row.nom_ambiance },
            { name: 'AGE', transform: (row) => `${row.tranche_age[0]} - ${row.tranche_age[1]} ans` },
            { name: 'NOMBRE D\'ELEVES', transform: (row) => row.nombre_eleves },
            { name: 'LANGUE D\'ENSEIGNEMENT', transform: (row) => row.langue_enseignement },
            { name: 'ANNEE SCOLAIRE', transform: (row) => row.annee_scolaire },
            {
              name: 'SPECIALITES',
              transform: (row) => (
                <div key={row.id} className="flex justify-center items-center space-x-2">
                  {row.specialites.map(specialite => (
                    <span
                      key={specialite.id}
                      className="w-4 h-4 rounded-full"
                      style={{ backgroundColor: specialite.codeCouleur }}
                      title={specialite.nom}
                    ></span>
                  ))}
                </div>
              )
            },
            {
              name: 'ENSEIGNANT PRINCIPAL',
              transform: (row) => {
                return row.enseignant_principal 
                  ? `${row.enseignant_principal.nom || ''} ${row.enseignant_principal.prenom || ''}` 
                  : <i>Non assigné</i>;
              }              
            },
            { name: 'ACTIONS', transform: (row) => (
              <DropdownMenu
                  buttonContent={<MoreVertical size={20} className="text-gray-400 hover:text-gray-600" />}
                  items={[
                      { label: 'Inspecter', icon: ZoomIn, onClick: () => openEditModalDetails(row) },
                      { 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={classes}
        />
      </div>
      {isOpen && (
				<Modal 
            isOpen={isOpen} 
            setIsOpen={setIsOpen} 
            title={editingClass ? "Modification de la classe" : "Création d'une nouvelle classe"} ContentComponent={() => (
                                                          <ClassForm classe={editingClass || {}} onSubmit={handleModalSubmit} isNew={!editingClass} specialities={specialities} teachers={teachers} />
                                                      )}
          />
      )}
      {isOpenDetails && (
				<Modal 
            isOpen={isOpenDetails} 
            setIsOpen={setIsOpenDetails}
            title={(
              <div className="flex items-center">
                <Users className="w-8 h-8 mr-2" />
                {editingClass ? (
                  <>
                  {editingClass.nom_ambiance} - {editingClass.tranche_age[0]} à {editingClass.tranche_age[1]} ans
                  </>
                  ) : ''}
              </div>
            )}
            ContentComponent={() => (
                                      <ClasseDetails classe={editingClass} />
                                    )}
        />
      )}
    </div>
  );
};

export default ClassesSection;