From acba1324dab0bdf86f0c4d884f3766494e5ab4d3 Mon Sep 17 00:00:00 2001 From: Dimitri Gritsajuk Date: Wed, 19 Jun 2024 18:17:37 +0200 Subject: [PATCH] Procuration - improve status filter (#3029) * Procuration - improve status filter * Fix review --- src/api/Procuration/procuration.model.ts | 9 ++ .../MandatePersonCard.test.tsx | 2 + .../MandatePersonCard/MandatePersonCard.tsx | 29 ++-- .../Components/MandantTab/MandantTab.tsx | 20 ++- .../MandateFilters/MandateFilters.tsx | 124 +++++++----------- .../Components/ProxyTab/ProxyTab.tsx | 20 ++- .../Procurations/Pages/MandateEditPage.tsx | 2 + .../Procurations/Pages/MandateMatchPage.tsx | 2 + .../Pages/MandateValidationPage.tsx | 2 + 9 files changed, 113 insertions(+), 97 deletions(-) diff --git a/src/api/Procuration/procuration.model.ts b/src/api/Procuration/procuration.model.ts index 8f5c4a2d8..d8ed60694 100644 --- a/src/api/Procuration/procuration.model.ts +++ b/src/api/Procuration/procuration.model.ts @@ -53,6 +53,7 @@ export interface ProcurationProxyDetailModel extends EmailPhoneModel { first_names: string last_name: string uuid: string + status: ProcurationStatusEnum id: string vote_place_name: string vote_zone: VoteZoneModel @@ -111,6 +112,14 @@ export enum ProcurationStatusEnum { DUPLICATE = 'duplicate', } +export const PROCURATION_STATUS_LABELS = { + [ProcurationStatusEnum.PENDING]: 'En attente', + [ProcurationStatusEnum.DUPLICATE]: 'Doublon', + [ProcurationStatusEnum.EXCLUDED]: 'Exclu', + [ProcurationStatusEnum.MANUAL]: 'Traité', + [ProcurationStatusEnum.COMPLETED]: 'Traité', +} + export interface AvailableProxyModel extends ProcurationModel { slots?: number requests?: ProcurationModel[] diff --git a/src/components/Procurations/Components/MandantTab/Components/MandatePersonCard/MandatePersonCard.test.tsx b/src/components/Procurations/Components/MandantTab/Components/MandatePersonCard/MandatePersonCard.test.tsx index 3202077f1..ea7386dee 100644 --- a/src/components/Procurations/Components/MandantTab/Components/MandatePersonCard/MandatePersonCard.test.tsx +++ b/src/components/Procurations/Components/MandantTab/Components/MandatePersonCard/MandatePersonCard.test.tsx @@ -6,6 +6,7 @@ import { fireEvent, render } from '@testing-library/react' import { faker } from '@faker-js/faker' import { beforeAll, expect, vitest } from 'vitest' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { ProcurationStatusEnum } from '~/api/Procuration/procuration.model' describe('Mandate person card', () => { beforeAll(() => { @@ -17,6 +18,7 @@ describe('Mandate person card', () => { avatarUrl: faker.image.url(), extraInfos: [], firstName: faker.person.firstName(), + status: ProcurationStatusEnum.PENDING, id: faker.string.uuid(), lastName: faker.person.lastName(), location: faker.person.jobArea(), diff --git a/src/components/Procurations/Components/MandantTab/Components/MandatePersonCard/MandatePersonCard.tsx b/src/components/Procurations/Components/MandantTab/Components/MandatePersonCard/MandatePersonCard.tsx index fe061e609..c42d39263 100644 --- a/src/components/Procurations/Components/MandantTab/Components/MandatePersonCard/MandatePersonCard.tsx +++ b/src/components/Procurations/Components/MandantTab/Components/MandatePersonCard/MandatePersonCard.tsx @@ -18,12 +18,13 @@ import { MandatePersonCardStateExclude, } from '~/components/Procurations/Components/MandantTab/Components/MandatePersonCard/Components/MandatePersonCardStateActions' import MandatePersonCardButtonGroup from '~/components/Procurations/Components/MandantTab/Components/MandatePersonCard/Components/MandatePersonCardButtonGroup' -import { SlotModel } from '~/api/Procuration/procuration.model' +import { PROCURATION_STATUS_LABELS, ProcurationStatusEnum, SlotModel } from '~/api/Procuration/procuration.model' import { getFormattedDate } from '~/utils/date' export interface MandatePersonCardProps { firstName: string lastName: string + status: string avatarUrl?: string tags: LabelTypeModel[] peopleInSameVotePlace?: number @@ -79,11 +80,21 @@ export default function MandatePersonCard(props: MandatePersonCardProps) { MandatePersonCardType.MATCH_MANDANT, MandatePersonCardType.FIND, MandatePersonCardType.MATCHED_MANDANT, - ].includes(props.type) && } + ].includes(props.type) && + ((props.status !== ProcurationStatusEnum.PENDING && ( + <> + + + + )) || )} - {[MandatePersonCardType.MATCH_PROXY, MandatePersonCardType.MATCHED_PROXY].includes(props.type) && ( - - )} + {[MandatePersonCardType.MATCH_PROXY, MandatePersonCardType.MATCHED_PROXY].includes(props.type) && + ((props.status !== ProcurationStatusEnum.PENDING && ( + <> + + + + )) || )} {props.tags.map(tag => ( void }) => ( ) -const MandateTag = ({ done }: { done?: boolean }) => ( +const MandateTag = ({ status }: { status: string }) => ( ( /> ) -const ProxyTag = ({ done }: { done?: boolean }) => ( +const ProxyTag = ({ status }: { status: string }) => ( >({}) - const [customFilters, setCustomFilers] = useState>({}) + const [customFilters, setCustomFilers] = useState({ + status: done + ? [ + ProcurationStatusEnum.COMPLETED, + ProcurationStatusEnum.DUPLICATE, + ProcurationStatusEnum.EXCLUDED, + ProcurationStatusEnum.MANUAL, + ] + : [ProcurationStatusEnum.PENDING], + }) const debouncedFilters = useDebounce(customFilters, 400) const { aggregate, total, isFetchingPreviousPage, isFetchingNextPage, hasNextPage, fetchNextPage, isInitialLoading } = @@ -42,7 +56,6 @@ export default function MandantTab({ done = false }: Props) { order: { createdAt: 'asc', }, - status: done ? ProcurationStatusEnum.COMPLETED : ProcurationStatusEnum.PENDING, ...debouncedFilters, }) @@ -97,7 +110,7 @@ export default function MandantTab({ done = false }: Props) { ) => void + onFilter: (data: { status: ProcurationStatusEnum[]; search: string }) => void onToggleMore: (newValue: boolean) => void + status: ProcurationStatusEnum[] isRequest?: boolean advanced?: boolean - status?: ProcurationStatusEnum } function MandateFilters({ onFilter, onToggleMore, - status = ProcurationStatusEnum.PENDING, + status, isRequest = false, advanced = false, }: Readonly) { @@ -29,16 +27,8 @@ function MandateFilters({ search: '', }, }) - const [showModal, setShowModal] = useState(false) const [moreState, setMoreState] = useState(false) - const toggleModal = useCallback(() => setShowModal(v => !v), []) - - const filterThenClose = useCallback(() => { - handleSubmit(onFilter)() - setShowModal(false) - }, [handleSubmit, onFilter]) - const onToggleClick = useCallback(() => { onToggleMore(!moreState) setMoreState(v => !v) @@ -46,68 +36,31 @@ function MandateFilters({ const registeredSearch = register('search') const demandStateOptions = isRequest ? requestStatuses : defaultStatuses + const onSubmit = handleSubmit(onFilter) return ( -
+ - + , }} {...register('search')} onChange={ev => { - onFilter({ search: ev.target.value }) registeredSearch.onChange(ev) + onSubmit() }} /> {advanced && ( - - - - )} - - - - - - - {showModal && ( - - - - - - - - - Statut - - - - + Statut @@ -116,8 +69,17 @@ function MandateFilters({ name="status" control={control} render={({ field: { onChange, value } }) => ( - { + onChange(ev) + onSubmit() + }} + value={value} + multiple={true} + > {demandStateOptions.map(el => ( {el.label} @@ -128,22 +90,24 @@ function MandateFilters({ /> - - - - - - - - - + )} + + - - )} + +
) } @@ -153,16 +117,16 @@ const defaultStatuses: { label: string; value: ProcurationStatusEnum }[] = [ value: ProcurationStatusEnum.COMPLETED, label: 'Terminé', }, + { + value: ProcurationStatusEnum.EXCLUDED, + label: 'Exclus', + }, { value: ProcurationStatusEnum.DUPLICATE, label: 'Doublon', }, ] -const requestStatuses = [ - ...defaultStatuses, - { value: ProcurationStatusEnum.EXCLUDED, label: 'Exclus' }, - { value: ProcurationStatusEnum.MANUAL, label: 'Manuel' }, -] +const requestStatuses = [...defaultStatuses, { value: ProcurationStatusEnum.MANUAL, label: 'Manuel' }] export default memo(MandateFilters) diff --git a/src/components/Procurations/Components/ProxyTab/ProxyTab.tsx b/src/components/Procurations/Components/ProxyTab/ProxyTab.tsx index bca24d26e..44736ba78 100644 --- a/src/components/Procurations/Components/ProxyTab/ProxyTab.tsx +++ b/src/components/Procurations/Components/ProxyTab/ProxyTab.tsx @@ -1,5 +1,5 @@ import { Grid, Typography } from '@mui/material' -import { useIntersectionObserver } from '@uidotdev/usehooks' +import { useDebounce, useIntersectionObserver } from '@uidotdev/usehooks' import { Dispatch, memo, SetStateAction, useCallback, useEffect, useState } from 'react' import useProcurationProxies from '~/api/Procuration/Hooks/useProcurationProxies' import { AvailableProxyModel, ProcurationStatusEnum } from '~/api/Procuration/procuration.model' @@ -28,9 +28,19 @@ interface Props { done?: boolean } +interface IFilters { + status: ProcurationStatusEnum[] + search?: string +} + export default function ProxyTab({ done }: Props) { const [expended, setExpended] = useState>({}) - const [customFilters, setCustomFilers] = useState>({}) + const [customFilters, setCustomFilers] = useState({ + status: done + ? [ProcurationStatusEnum.COMPLETED, ProcurationStatusEnum.DUPLICATE, ProcurationStatusEnum.EXCLUDED] + : [ProcurationStatusEnum.PENDING], + }) + const debouncedFilters = useDebounce(customFilters, 400) const { aggregate, total, isFetchingPreviousPage, isFetchingNextPage, hasNextPage, fetchNextPage, isInitialLoading } = useProcurationProxies({ @@ -38,8 +48,7 @@ export default function ProxyTab({ done }: Props) { order: { createdAt: 'asc', }, - status: done ? ProcurationStatusEnum.COMPLETED : ProcurationStatusEnum.PENDING, - ...customFilters, + ...debouncedFilters, }, }) @@ -87,8 +96,8 @@ export default function ProxyTab({ done }: Props) { @@ -175,6 +184,7 @@ const ProxyItemComponent = ({ uuid={item.uuid} firstName={item.first_names} lastName={item.last_name} + status={item.status} votePlace={item.vote_place_name} location={item.vote_zone?.name} peopleInSameVotePlace={!done ? item.available_proxies_count : undefined} diff --git a/src/components/Procurations/Pages/MandateEditPage.tsx b/src/components/Procurations/Pages/MandateEditPage.tsx index 6d53a92e6..9f47df27f 100644 --- a/src/components/Procurations/Pages/MandateEditPage.tsx +++ b/src/components/Procurations/Pages/MandateEditPage.tsx @@ -122,6 +122,7 @@ export default function MandateEditPage() { {