diff --git a/src/pages/campaigns/components/table/index.tsx b/src/pages/campaigns/components/table/index.tsx index 01b31865..4e689a4a 100644 --- a/src/pages/campaigns/components/table/index.tsx +++ b/src/pages/campaigns/components/table/index.tsx @@ -32,6 +32,9 @@ const CustomTable = styled(Table)` display: flex; align-items: center; height: 100%; + & > div { + width: 100%; + } } `; diff --git a/src/pages/campaigns/components/table/useCampaigns.tsx b/src/pages/campaigns/components/table/useCampaigns.tsx index 294eba53..99ea6517 100644 --- a/src/pages/campaigns/components/table/useCampaigns.tsx +++ b/src/pages/campaigns/components/table/useCampaigns.tsx @@ -1,5 +1,10 @@ -import { Button, Skeleton, Text } from "@appquality/appquality-design-system"; -import { useEffect } from "react"; +import { + Button, + Dropdown, + Skeleton, + Text, +} from "@appquality/appquality-design-system"; +import { useEffect, useMemo, useState } from "react"; import { GetCampaignsApiArg, GetCampaignsApiResponse, @@ -41,7 +46,7 @@ const useCampaigns = (options?: { order?: GetCampaignsApiArg["order"]; orderBy?: GetCampaignsApiArg["orderBy"]; }) => { - const LIMIT = 100; + const LIMIT = 20; const { page, filters, order } = useFiltersCardContext(); const { isLoading, data, refetch } = useGetCampaignsQuery({ limit: LIMIT, @@ -214,32 +219,61 @@ const useCampaigns = (options?: { }; }; +const PhaseDropdownWrapper = styled.div` + .phase-dropdown { + width: 100%; + } +`; + const PhaseSelector = ({ campaign }: { campaign: Campaign }) => { + const [value, setValue] = useState( + campaign.phase.id.toString() + ); const { data, isLoading } = useGetPhasesQuery(); const [updatePhase] = usePutDossiersByCampaignPhasesMutation(); + const options = useMemo(() => { + if (!data?.results) return []; + + return Object.values( + data.results.reduce((acc, phase) => { + const phaseType = phase.type.id; + + if (!acc[phaseType]) { + acc[phaseType] = { options: [], label: phase.type.name }; + } + + acc[phaseType].options.push({ + value: phase.id.toString(), + label: phase.name, + }); + return acc; + }, {} as { [key: string]: { options: { value: string; label: string }[]; label: string } }) + ); + }, [data?.results]); + if (isLoading || !data || !data.results) return ; return ( - + + g.options).find((o) => o.value === value)} + onChange={(option) => { + if (!option) return; + setValue(option.value); + updatePhase({ + campaign: campaign.id.toString(), + body: { + phase: parseInt(option.value), + }, + }); + }} + /> + ); }; diff --git a/src/services/tryberApi/index.ts b/src/services/tryberApi/index.ts index 2dc7a076..71bd7b74 100644 --- a/src/services/tryberApi/index.ts +++ b/src/services/tryberApi/index.ts @@ -2725,6 +2725,10 @@ export type GetPhasesApiResponse = /** status 200 OK */ { results: { id: number; name: string; + type: { + id: number; + name: string; + }; }[]; }; export type GetPhasesApiArg = void;