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 { swapFormatDate } from '@/utils/Date';
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 InscriptionForm from '@/components/Inscription/InscriptionForm'
import AffectationClasseForm from '@/components/AffectationClasseForm'
@ -562,68 +562,81 @@ const columnsSubscribed = [
return (
<div className='p-8'>
<div className="border-b border-gray-200 mb-6">
<div className="flex gap-8">
<div className="flex items-center gap-8">
<Tab
text={<>
{t('pending')}
<span className="ml-2 text-sm text-gray-400">({totalPending})</span>
</>}
text={(
<>
{t('pending')}
<span className="ml-2 text-sm text-gray-400">({totalPending})</span>
</>
)}
active={activeTab === 'pending'}
onClick={() => setActiveTab('pending')}
/>
<Tab
text={<>
{t('subscribed')}
<span className="ml-2 text-sm text-gray-400">({totalSubscribed})</span>
</>}
text={(
<>
{t('subscribed')}
<span className="ml-2 text-sm text-gray-400">({totalSubscribed})</span>
</>
)}
active={activeTab === 'subscribed'}
onClick={() => setActiveTab('subscribed')}
/>
<Tab
text={<>
{t('archived')}
<span className="ml-2 text-sm text-gray-400">({totalArchives})</span>
</>}
text={(
<>
{t('archived')}
<span className="ml-2 text-sm text-gray-400">({totalArchives})</span>
</>
)}
active={activeTab === 'archived'}
onClick={() => setActiveTab('archived')}
/>
<Button text={t("addStudent")} primary onClick={openModal} icon={<UserPlus size={20} />} />
</div>
</div>
<div className="flex justify-between items-center mb-6">
<div className="relative flex-grow mr-4">
<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 className="border-b border-gray-200 mb-6 w-full">
<div className="flex justify-between items-center mb-4 w-full">
<button
onClick={openModal}
className="flex items-center bg-emerald-600 text-white p-2 rounded-full shadow hover:bg-emerald-900 transition duration-200 mr-4"
>
<Plus className="w-5 h-5" />
</button>
<div className="relative flex-grow">
<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>
<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
visible={popup.visible}
message={popup.message}