fix: Mise en page des inscriptions (boutons ajout / barre de recherche)

This commit is contained in:
N3WT DE COMPET
2024-11-27 18:34:27 +01:00
parent 85d4c007cb
commit cf144310a1

View File

@ -13,7 +13,7 @@ import Button from '@/components/Button';
import DropdownMenu from "@/components/DropdownMenu"; import DropdownMenu from "@/components/DropdownMenu";
import { swapFormatDate } from '@/utils/Date'; import { swapFormatDate } from '@/utils/Date';
import { formatPhoneNumber } from '@/utils/Telephone'; import { formatPhoneNumber } from '@/utils/Telephone';
import { MoreVertical, Send, Edit, Trash2, FileText, ChevronUp, UserPlus, CheckCircle } from 'lucide-react'; import { MoreVertical, Send, Edit, Trash2, FileText, ChevronUp, UserPlus, CheckCircle, Plus} from 'lucide-react';
import Modal from '@/components/Modal'; import Modal from '@/components/Modal';
import InscriptionForm from '@/components/Inscription/InscriptionForm' import InscriptionForm from '@/components/Inscription/InscriptionForm'
import AffectationClasseForm from '@/components/AffectationClasseForm' import AffectationClasseForm from '@/components/AffectationClasseForm'
@ -562,68 +562,81 @@ const columnsSubscribed = [
return ( return (
<div className='p-8'> <div className='p-8'>
<div className="border-b border-gray-200 mb-6"> <div className="border-b border-gray-200 mb-6">
<div className="flex gap-8"> <div className="flex items-center gap-8">
<Tab <Tab
text={<> text={(
{t('pending')} <>
<span className="ml-2 text-sm text-gray-400">({totalPending})</span> {t('pending')}
</>} <span className="ml-2 text-sm text-gray-400">({totalPending})</span>
</>
)}
active={activeTab === 'pending'} active={activeTab === 'pending'}
onClick={() => setActiveTab('pending')} onClick={() => setActiveTab('pending')}
/> />
<Tab <Tab
text={<> text={(
{t('subscribed')} <>
<span className="ml-2 text-sm text-gray-400">({totalSubscribed})</span> {t('subscribed')}
</>} <span className="ml-2 text-sm text-gray-400">({totalSubscribed})</span>
</>
)}
active={activeTab === 'subscribed'} active={activeTab === 'subscribed'}
onClick={() => setActiveTab('subscribed')} onClick={() => setActiveTab('subscribed')}
/> />
<Tab <Tab
text={<> text={(
{t('archived')} <>
<span className="ml-2 text-sm text-gray-400">({totalArchives})</span> {t('archived')}
</>} <span className="ml-2 text-sm text-gray-400">({totalArchives})</span>
</>
)}
active={activeTab === 'archived'} active={activeTab === 'archived'}
onClick={() => setActiveTab('archived')} onClick={() => setActiveTab('archived')}
/> />
<Button text={t("addStudent")} primary onClick={openModal} icon={<UserPlus size={20} />} />
</div> </div>
</div> </div>
<div className="border-b border-gray-200 mb-6 w-full">
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-4 w-full">
<div className="relative flex-grow mr-4"> <button
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} /> onClick={openModal}
<input className="flex items-center bg-emerald-600 text-white p-2 rounded-full shadow hover:bg-emerald-900 transition duration-200 mr-4"
type="text" >
placeholder={t('searchStudent')} <Plus className="w-5 h-5" />
className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-md" </button>
value={searchTerm} <div className="relative flex-grow">
onChange={handleSearchChange} <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
<input
type="text"
placeholder={t('searchStudent')}
className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-md"
value={searchTerm}
onChange={handleSearchChange}
/>
</div>
</div>
<div className="w-full">
<DjangoCSRFToken csrfToken={csrfToken} />
<Table
key={`${currentPage}-${searchTerm}`}
data={
activeTab === 'pending'
? fichesInscriptionsDataEnCours
: activeTab === 'subscribed'
? fichesInscriptionsDataInscrits
: fichesInscriptionsDataArchivees
}
columns={
activeTab === 'subscribed'
? columnsSubscribed
: columns
}
itemsPerPage={itemsPerPage}
currentPage={currentPage}
totalPages={totalPages}
onPageChange={handlePageChange}
/> />
</div> </div>
</div> </div>
<DjangoCSRFToken csrfToken={csrfToken} />
<Table
key={`${currentPage}-${searchTerm}`}
data={
activeTab === 'pending'
? fichesInscriptionsDataEnCours
: activeTab === 'subscribed'
? fichesInscriptionsDataInscrits
: fichesInscriptionsDataArchivees
}
columns={
activeTab === 'subscribed'
? columnsSubscribed
: columns
}
itemsPerPage={itemsPerPage}
currentPage={currentPage}
totalPages={totalPages}
onPageChange={handlePageChange}
/>
<Popup <Popup
visible={popup.visible} visible={popup.visible}
message={popup.message} message={popup.message}