mirror of
https://git.v0id.ovh/n3wt-innov/n3wt-school.git
synced 2026-01-28 23:43:22 +00:00
feat: Création d'un annuaire / mise à jour du subscribe
This commit is contained in:
N3WT DE COMPET
218
Front-End/src/components/ProfileDirectory.js
Normal file
218
Front-End/src/components/ProfileDirectory.js
Normal file
@ -0,0 +1,218 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Trash2, Eye, EyeOff, ToggleLeft, ToggleRight } from 'lucide-react';
|
||||
import Table from '@/components/Table';
|
||||
import Popup from '@/components/Popup';
|
||||
import StatusLabel from '@/components/StatusLabel';
|
||||
import SpecialityItem from '@/components/Structure/Configuration/SpecialityItem';
|
||||
|
||||
const roleTypeToLabel = (roleType) => {
|
||||
switch (roleType) {
|
||||
case 0:
|
||||
return 'ECOLE';
|
||||
case 1:
|
||||
return 'ADMIN';
|
||||
case 2:
|
||||
return 'PARENT';
|
||||
default:
|
||||
return 'UNKNOWN';
|
||||
}
|
||||
};
|
||||
|
||||
const roleTypeToBadgeClass = (roleType) => {
|
||||
switch (roleType) {
|
||||
case 0:
|
||||
return 'bg-blue-100 text-blue-600';
|
||||
case 1:
|
||||
return 'bg-red-100 text-red-600';
|
||||
case 2:
|
||||
return 'bg-green-100 text-green-600';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-600';
|
||||
}
|
||||
};
|
||||
|
||||
const ProfileDirectory = ({ profileRoles, handleActivateProfile, handleDeleteProfile }) => {
|
||||
const parentProfiles = profileRoles.filter(profileRole => profileRole.role_type === 2);
|
||||
const schoolAdminProfiles = profileRoles.filter(profileRole => profileRole.role_type !== 2);
|
||||
|
||||
const [popupVisible, setPopupVisible] = useState(false);
|
||||
const [popupMessage, setPopupMessage] = useState("");
|
||||
const [confirmPopupVisible, setConfirmPopupVisible] = useState(false);
|
||||
const [confirmPopupMessage, setConfirmPopupMessage] = useState("");
|
||||
const [confirmPopupOnConfirm, setConfirmPopupOnConfirm] = useState(() => {});
|
||||
|
||||
const handleConfirmActivateProfile = (profileRole) => {
|
||||
setConfirmPopupMessage(`Êtes-vous sûr de vouloir ${profileRole.is_active ? 'désactiver' : 'activer'} ce profil ?`);
|
||||
setConfirmPopupOnConfirm(() => () => {
|
||||
handleActivateProfile(profileRole)
|
||||
.then(() => {
|
||||
setPopupMessage(`Le profil a été ${profileRole.is_active ? 'désactivé' : 'activé'} avec succès.`);
|
||||
setPopupVisible(true);
|
||||
})
|
||||
.catch(error => {
|
||||
setPopupMessage(`Erreur lors de la ${profileRole.is_active ? 'désactivation' : 'activation'} du profil.`);
|
||||
setPopupVisible(true);
|
||||
});
|
||||
setConfirmPopupVisible(false);
|
||||
});
|
||||
setConfirmPopupVisible(true);
|
||||
};
|
||||
|
||||
const handleConfirmDeleteProfile = (id) => {
|
||||
setConfirmPopupMessage("Êtes-vous sûr de vouloir supprimer ce profil ?");
|
||||
setConfirmPopupOnConfirm(() => () => {
|
||||
handleDeleteProfile(id)
|
||||
.then(() => {
|
||||
setPopupMessage("Le profil a été supprimé avec succès.");
|
||||
setPopupVisible(true);
|
||||
})
|
||||
.catch(error => {
|
||||
setPopupMessage("Erreur lors de la suppression du profil.");
|
||||
setPopupVisible(true);
|
||||
});
|
||||
setConfirmPopupVisible(false);
|
||||
});
|
||||
setConfirmPopupVisible(true);
|
||||
};
|
||||
|
||||
const parentColumns = [
|
||||
{ name: 'Identifiant', transform: (row) => row.associated_profile_email },
|
||||
{ name: 'Rôle', transform: (row) => (
|
||||
<span className={`px-2 py-1 rounded-full font-bold ${roleTypeToBadgeClass(row.role_type)}`}>
|
||||
{roleTypeToLabel(row.role_type)}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
{ name: 'Utilisateur', transform: (row) => row.associated_person?.guardian_name },
|
||||
{ name: 'Elève(s) associé(s)', transform: (row) => (
|
||||
<div className="flex flex-col justify-center space-y-2">
|
||||
{row.associated_person?.students?.map(student => (
|
||||
<span key={student.student_name} className="px-2 py-1 rounded-full text-gray-800">
|
||||
{student.student_name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{ name: 'Etat du dossier d\'inscription', transform: (row) => (
|
||||
<div className="flex flex-col justify-center items-center space-y-2">
|
||||
{row.associated_person?.students?.map(student => (
|
||||
<StatusLabel key={student.student_name} status={student.registration_status} showDropdown={false} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
name: 'Actions',
|
||||
transform: (row) => (
|
||||
<div className="flex justify-center space-x-2">
|
||||
<button
|
||||
type="button"
|
||||
className={row.is_active ? 'text-emerald-500 hover:text-emerald-700' : 'text-orange-500 hover:text-orange-700'}
|
||||
onClick={() => handleConfirmActivateProfile(row)}
|
||||
>
|
||||
{row.is_active ? <ToggleRight className="w-5 h-5 " /> : <ToggleLeft className="w-5 h-5" />}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="text-red-500 hover:text-red-700"
|
||||
onClick={() => handleConfirmDeleteProfile(row.id)}
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
const schoolAdminColumns = [
|
||||
{ name: 'Identifiant', transform: (row) => row.associated_profile_email },
|
||||
{ name: 'Rôle', transform: (row) => (
|
||||
<span className={`px-2 py-1 rounded-full font-bold ${roleTypeToBadgeClass(row.role_type)}`}>
|
||||
{roleTypeToLabel(row.role_type)}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
{ name: 'Utilisateur', transform: (row) => row.associated_person?.teacher_name },
|
||||
{ name: 'Classe(s) associée(s)', transform: (row) => (
|
||||
<div className="flex flex-wrap justify-center space-x-2">
|
||||
{row.associated_person?.classes?.map(classe => (
|
||||
<span key={classe.id} className="px-2 py-1 rounded-full bg-gray-200 text-gray-800">
|
||||
{classe.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{ name: 'Spécialités', transform: (row) => (
|
||||
<div className="flex flex-wrap justify-center space-x-2">
|
||||
{row.associated_person?.specialities?.map(speciality => (
|
||||
<SpecialityItem speciality={speciality} isDraggable={false}/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
name: 'Actions',
|
||||
transform: (row) => (
|
||||
<div className="flex justify-center space-x-2">
|
||||
<button
|
||||
type="button"
|
||||
className={row.is_active ? 'text-emerald-500 hover:text-emerald-700' : 'text-orange-500 hover:text-orange-700'}
|
||||
onClick={() => handleConfirmActivateProfile(row)}
|
||||
>
|
||||
{row.is_active ? <ToggleRight className="w-5 h-5 " /> : <ToggleLeft className="w-5 h-5" />}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="text-red-500 hover:text-red-700"
|
||||
onClick={() => handleConfirmDeleteProfile(row.id)}
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow-lg w-full p-6">
|
||||
<div className="space-y-8">
|
||||
<div className="max-h-128 overflow-y-auto border rounded p-4">
|
||||
{parentProfiles.length === 0 ? (
|
||||
<div>Aucun profil trouvé</div>
|
||||
) : (
|
||||
<Table
|
||||
data={parentProfiles}
|
||||
columns={parentColumns}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="max-h-128 overflow-y-auto border rounded p-4">
|
||||
{schoolAdminProfiles.length === 0 ? (
|
||||
<div>Aucun profil trouvé</div>
|
||||
) : (
|
||||
<Table
|
||||
data={schoolAdminProfiles}
|
||||
columns={schoolAdminColumns}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Popup
|
||||
visible={popupVisible}
|
||||
message={popupMessage}
|
||||
onConfirm={() => setPopupVisible(false)}
|
||||
uniqueConfirmButton={true}
|
||||
/>
|
||||
<Popup
|
||||
visible={confirmPopupVisible}
|
||||
message={confirmPopupMessage}
|
||||
onConfirm={confirmPopupOnConfirm}
|
||||
onCancel={() => setConfirmPopupVisible(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfileDirectory;
|
||||
Reference in New Issue
Block a user