diff --git a/src/app/(private)/dashboard/organization/[organizationId]/OrganizationPage.tsx b/src/app/(private)/dashboard/organization/[organizationId]/OrganizationPage.tsx index f13ca56..cc4bc97 100644 --- a/src/app/(private)/dashboard/organization/[organizationId]/OrganizationPage.tsx +++ b/src/app/(private)/dashboard/organization/[organizationId]/OrganizationPage.tsx @@ -1,11 +1,11 @@ 'use client'; import { LoadingButton as Button } from '@mui/lab'; -import { Alert, Typography } from '@mui/material'; +import { Alert, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material'; import Container from '@mui/material/Container'; import Grid from '@mui/material/Grid'; -import { isBefore, subHours } from 'date-fns'; -import { useMemo } from 'react'; +import { isAfter, isBefore, subHours, subMonths } from 'date-fns'; +import { useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { trpc } from '@ad/src/client/trpcClient'; @@ -16,6 +16,14 @@ import { centeredAlertContainerGridProps } from '@ad/src/utils/grid'; import { linkRegistry } from '@ad/src/utils/routes/registry'; import { AggregatedQueries } from '@ad/src/utils/trpc'; +export enum ListFilter { + ALL = 1, + ARCHIVED_ONLY, + ENDED_ONLY, + CURRENT_ONLY, + FUTURE_ONLY, +} + export interface OrganizationPageProps { params: { organizationId: string }; } @@ -45,6 +53,28 @@ export function OrganizationPage({ params: { organizationId } }: OrganizationPag const synchronizeDataFromTicketingSystems = trpc.synchronizeDataFromTicketingSystems.useMutation(); + const [listFilter, setListFilter] = useState(ListFilter.ENDED_ONLY); + + const filteredEventsSeriesWrappers = useMemo(() => { + const currentDate = new Date(); + const archivedThreshold = subMonths(currentDate, 3); + + return (listEventsSeries.data?.eventsSeriesWrappers || []).filter((eventSerieWrapper) => { + switch (listFilter) { + case ListFilter.ARCHIVED_ONLY: + return isBefore(eventSerieWrapper.serie.endAt, archivedThreshold); + case ListFilter.ENDED_ONLY: + return isBefore(eventSerieWrapper.serie.endAt, currentDate); + case ListFilter.CURRENT_ONLY: + return isBefore(eventSerieWrapper.serie.startAt, currentDate) && isAfter(eventSerieWrapper.serie.endAt, currentDate); + case ListFilter.FUTURE_ONLY: + return isAfter(eventSerieWrapper.serie.startAt, currentDate); + default: + return true; + } + }); + }, [listFilter, listEventsSeries.data]); + const lastSynchronizationAt: Date | null = useMemo(() => { let oldestDate: Date | null = null; @@ -118,24 +148,47 @@ export function OrganizationPage({ params: { organizationId } }: OrganizationPag )} - - + + + + { + if (newValue !== null) { + setListFilter(newValue); + } + }} + aria-label="filtre" + > + Toutes + Archivées + Terminées + En cours + À venir + + + + + + - {eventsSeriesWrappers.length > 0 ? ( + {filteredEventsSeriesWrappers.length > 0 ? ( - {eventsSeriesWrappers.map((eventsSeriesWrapper) => { + {filteredEventsSeriesWrappers.map((eventsSeriesWrapper) => { return ( ) : ( - Aucune série de représentations n'a été trouvée dans votre billetterie. + {eventsSeriesWrappers.length === 0 + ? `Aucune série de représentations n'a été trouvée dans votre billetterie.` + : `Aucune série de représentations n'a été trouvée dans votre billetterie avec le filtre choisi.`} )}