acasini/n3wt-school
1
0
Fork 0
mirror of https://git.v0id.ovh/n3wt-innov/n3wt-school.git synced 2026-01-29 07:53:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Création d'un profile selector [#37,#38]

Browse Source
This commit is contained in:
Luc SORIGNET
2025-04-12 16:07:30 +02:00
parent 4c2e2f8756
commit 89b01b79db
16 changed files with 237 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
Front-End/src/components/ProfileSelector.js
View File

@ -1,29 +1,65 @@
import React from 'react';
import React, { useState } from 'react';
import { useEstablishment } from '@/context/EstablishmentContext';
import DropdownMenu from '@/components/DropdownMenu';
import { getRightStr } from '@/utils/rights';
import { ChevronDown } from 'lucide-react'; // Import de l'icône
const ProfileSelector = ({ onEstablishmentChange, className = '' }) => {
const { establishments, selectedEstablishmentId, setSelectedEstablishmentId, setProfileRole } = useEstablishment();
const [dropdownOpen, setDropdownOpen] = useState(false);
const handleEstablishmentChange = (establishmentId) => {
setSelectedEstablishmentId(establishmentId);
const role = establishments.find(est => est.id === establishmentId)?.role_type;
setProfileRole(role);
if (onEstablishmentChange) {
onEstablishmentChange(establishmentId);
}
setDropdownOpen(false); // Fermer le menu après sélection
};
// Si on a pas de rôle ou un seul rôle, on n'affiche pas le sélecteur
if (!establishments || establishments.length === 0 || establishments.length === 1) {
return null;
}
const selectedEstablishment = establishments.find(est => est.id === selectedEstablishmentId);
const ProfileSelector = ({ selectedProfile, setSelectedProfile }) => {
return (
<div className="flex space-x-4">
<button
type="button"
className={`px-4 py-2 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-blue-300 ${selectedProfile === 1 ? 'bg-blue-500 text-white ring-2 ring-blue-500' : 'bg-gray-200'}`}
onClick={() => setSelectedProfile(1)}
>
ADMINISTRATEUR
</button>
<button
type="button"
className={`px-4 py-2 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-blue-300 ${selectedProfile === 0 ? 'bg-blue-500 text-white ring-2 ring-blue-500' : 'bg-gray-200'}`}
onClick={() => setSelectedProfile(0)}
>
PROFESSEUR
</button>
<button
type="button"
className={`px-4 py-2 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-blue-300 ${selectedProfile === 2 ? 'bg-blue-500 text-white ring-2 ring-blue-500' : 'bg-gray-200'}`}
onClick={() => setSelectedProfile(2)}
>
PARENT
</button>
<div className={`relative ${className}`}>
<DropdownMenu
buttonContent={
<div className="h-16 flex items-center gap-2 cursor-pointer px-4 bg-white">
<div className="flex-1">
<div className="font-bold text-left">{getRightStr(selectedEstablishment?.role_type) || ''}</div>
<div className="text-sm text-gray-500 text-left">
{selectedEstablishment?.name || 'Sélectionnez un établissement'}
</div>
</div>
{/* Icône ChevronDown avec rotation conditionnelle */}
<ChevronDown
className={`w-5 h-5 transition-transform duration-200 ${
dropdownOpen ? 'rotate-180' : 'rotate-0'
}`}
/>
</div>
}
items={establishments.map(establishment => ({
type: 'item',
label: (
<div className="text-left">
<div className="font-bold">{getRightStr(establishment.role_type)}</div>
<div className="text-sm text-gray-500">{establishment.name}</div>
</div>
),
onClick: () => handleEstablishmentChange(establishment.id),
}))}
buttonClassName="w-full"
menuClassName="absolute mt-2 w-full bg-white border border-gray-200 rounded shadow-lg z-10"
dropdownOpen={dropdownOpen}
setDropdownOpen={setDropdownOpen}
/>
</div>
);
};