diff --git a/src/hooks/useSearchFilter.ts b/src/hooks/useSearchFilter.ts index 9d62f1f..2990964 100644 --- a/src/hooks/useSearchFilter.ts +++ b/src/hooks/useSearchFilter.ts @@ -9,6 +9,7 @@ export type QuestioningsBaseType = { pageSize: number; lastEvent?: string[]; lastCommunication?: string[]; + campaignId?: string; }; export const base = { @@ -27,6 +28,7 @@ export const base = { pageSize: 10, lastEvent: [], lastCommunication: [], + campaignId: "", } as QuestioningsBaseType, surveys: { idSource: "", diff --git a/src/pages/ContactPage.tsx b/src/pages/ContactPage.tsx index 23706db..e9bd3df 100644 --- a/src/pages/ContactPage.tsx +++ b/src/pages/ContactPage.tsx @@ -9,8 +9,8 @@ import { theme } from "../theme.tsx"; import { Button, Typography } from "@mui/material"; import { ContactDetailsCard } from "../ui/Contact/ContactDetailsCard.tsx"; import { ContactCampaignsCard } from "../ui/Contact/ContactCampaignsCard.tsx"; -import { Link } from "../ui/Link.tsx"; import { useGetSearchFilter, useSetSearchFilter } from "../hooks/useSearchFilter.ts"; +import { LinkWithForwardRef } from "../ui/Link.tsx"; export const ContactPage = () => { const setFilter = useSetSearchFilter(); @@ -55,7 +55,7 @@ export const ContactPage = () => { + + + ); } - -const HomeLink = (props: PropsWithChildren) => { - return ; -}; diff --git a/src/pages/QuestioningPage.tsx b/src/pages/QuestioningPage.tsx index e9e7e45..60b6272 100644 --- a/src/pages/QuestioningPage.tsx +++ b/src/pages/QuestioningPage.tsx @@ -3,7 +3,6 @@ import { SyntheticEvent, useState } from "react"; import { theme } from "../theme.tsx"; import { Breadcrumbs } from "../ui/Breadcrumbs.tsx"; import { Row } from "../ui/Row.tsx"; -import { Link } from "../ui/Link.tsx"; import OpenInNewIcon from "@mui/icons-material/OpenInNew"; import { PageTab } from "../ui/PageTab.tsx"; import { QuestioningInfos } from "../ui/Questioning/QuestioningInfos.tsx"; @@ -11,6 +10,7 @@ import { collectStatus } from "../constants/collectStatus.ts"; import { getCollectStateChipColor } from "../ui/Questioning/SearchQuestioningTable.tsx"; import { useParams } from "react-router-dom"; import { useFetchQuery } from "../hooks/useFetchQuery.ts"; +import { LinkWithForwardRef } from "../ui/Link.tsx"; enum Tab { Infos = "Infos", @@ -83,7 +83,7 @@ export const QuestioningPage = () => { variant="contained" disabled={hasNoQuestioningUrl} size="large" - component={Link} + component={LinkWithForwardRef} to={questioning.readOnlyUrl ?? ""} endIcon={} > diff --git a/src/pages/Search/SearchQuestionings.tsx b/src/pages/Search/SearchQuestionings.tsx index 74d89c9..4f3ca1b 100644 --- a/src/pages/Search/SearchQuestionings.tsx +++ b/src/pages/Search/SearchQuestionings.tsx @@ -137,7 +137,11 @@ export const SearchQuestionings = () => { }} /> - + { {campaigns.map(campaign => ( -
  • - - } - // TODO: remove disabled when get pages - disabled={true} - > - Voir - - } - > - {campaign}} /> - -
    • + } + // TODO: remove disabled when get pages + disabled={true} + > + Voir + + } + > + {campaign}} /> + + ))} {!hasCampaigns && ( diff --git a/src/ui/Contact/SearchContactTable.tsx b/src/ui/Contact/SearchContactTable.tsx index de5afb6..c947fce 100644 --- a/src/ui/Contact/SearchContactTable.tsx +++ b/src/ui/Contact/SearchContactTable.tsx @@ -8,8 +8,8 @@ import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import { Paper, Skeleton, TableRow } from "@mui/material"; import { useEffect, useRef } from "react"; import { useIntersection } from "react-use"; -import { Link } from "../Link.tsx"; import { theme } from "../../theme.tsx"; +import { useNavigate } from "react-router-dom"; const columns: readonly Column[] = [ { id: "identifier", label: "ID", minWidth: "140px" }, @@ -29,6 +29,9 @@ export const style = { outline: `1px solid ${theme.palette.common.black} !important`, outlineOffset: "-1px", }, + "&:hover": { + cursor: "pointer", + }, }, }; @@ -41,21 +44,21 @@ type Props = { export const SearchContactTable = (props: Props) => { const contacts = props.contacts ?? []; + const navigate = useNavigate(); return ( - {props.isLoading && } + {props.isLoading && } {contacts.map(contact => { return ( navigate(`/contacts/${contact.identifier}`)} > {`#${contact.identifier}`} {`${contact.firstName} ${contact.lastName}`} diff --git a/src/ui/FilterSelect.tsx b/src/ui/FilterSelect.tsx index e59efc7..b6546c3 100644 --- a/src/ui/FilterSelect.tsx +++ b/src/ui/FilterSelect.tsx @@ -1,42 +1,67 @@ -import FormControl from "@mui/material/FormControl"; -import InputLabel from "@mui/material/InputLabel"; -import MenuItem from "@mui/material/MenuItem"; -import Select from "@mui/material/Select/Select"; +import Autocomplete from "@mui/material/Autocomplete"; +import TextField from "@mui/material/TextField"; +import { QuestioningsBaseType } from "../hooks/useSearchFilter.ts"; +import { SyntheticEvent } from "react"; import ExpandMoreOutlinedIcon from "@mui/icons-material/ExpandMoreOutlined"; +import CloseIcon from "@mui/icons-material/Close"; +import CheckIcon from "@mui/icons-material/Check"; +import { ListItemText, MenuItem } from "@mui/material"; + +// TODO remove it when get data +const options = [ + { campaignId: "DVM2024M01", sourceId: "DVM", collect: "2024M01" }, + { campaignId: "DVM2023M01", sourceId: "DVM", collect: "2023M01" }, + { campaignId: "DVM2022M01", sourceId: "DVM", collect: "2022M01" }, + { campaignId: "VPP2024X00", sourceId: "VPP", collect: "2024X00" }, + { campaignId: "VPP2022M01", sourceId: "VPP", collect: "2022M01" }, +]; type Props = { - options: { label: string; value: string }[]; - value?: string; label: string; - name: string; + questioningFilter: QuestioningsBaseType; + setFilter: (name: "questionings", filter: QuestioningsBaseType) => void; }; -export const FilterSelect = ({ options, value, label, name }: Props) => { - const labelId = `label-${label}`; - +export const FilterSelect = ({ label, questioningFilter, setFilter }: Props) => { + const handleChange = ( + _: SyntheticEvent, + // TODO use endpoint type when get data + newValue: { campaignId: string; sourceId: string; collect: string } | null, + ) => { + if (newValue) { + setFilter("questionings", { ...questioningFilter, campaignId: newValue.campaignId }); + } else { + setFilter("questionings", { ...questioningFilter, campaignId: "" }); + } + }; return ( - - {label} - - + } + clearIcon={} + noOptionsText="Aucune collecte trouvée" + options={options.sort((a, b) => a.sourceId.localeCompare(b.sourceId))} + groupBy={option => option.sourceId} + getOptionLabel={option => option.campaignId} + filterOptions={(options, { inputValue }) => + options.filter(option => option.campaignId.toLowerCase().includes(inputValue.toLowerCase())) + } + sx={{ flex: 1 }} + value={options.find(o => o.campaignId === questioningFilter.campaignId) || null} + onChange={handleChange} + renderInput={params => ( + + )} + renderOption={(props, option) => ( + + {option.collect} + {questioningFilter.campaignId === option.campaignId && } + + )} + /> ); }; diff --git a/src/ui/Layout.tsx b/src/ui/Layout.tsx index 6e1661a..c1e89ee 100644 --- a/src/ui/Layout.tsx +++ b/src/ui/Layout.tsx @@ -7,7 +7,6 @@ import { NavigationDrawer } from "./NavigationDrawer.tsx"; export function Layout({ children }: PropsWithChildren) { return ( - {children} diff --git a/src/ui/Link.tsx b/src/ui/Link.tsx index 0db1e2f..4a9e5a4 100644 --- a/src/ui/Link.tsx +++ b/src/ui/Link.tsx @@ -1,4 +1,5 @@ import { Link as MuiLink, type LinkProps } from "@mui/material"; +import { forwardRef } from "react"; import { Link as RouterLink } from "react-router-dom"; type Props = LinkProps & { @@ -8,3 +9,7 @@ type Props = LinkProps & { export const Link = (props: Props) => { return ; }; + +export const LinkWithForwardRef = forwardRef(function Link(props, ref) { + return ; +}); diff --git a/src/ui/NavigationListItem.tsx b/src/ui/NavigationListItem.tsx index 68965a8..5156dbd 100644 --- a/src/ui/NavigationListItem.tsx +++ b/src/ui/NavigationListItem.tsx @@ -4,7 +4,7 @@ import ListItemIcon from "@mui/material/ListItemIcon"; import ListItemText from "@mui/material/ListItemText"; import { theme } from "../theme.tsx"; import { ElementType } from "react"; -import { Link } from "./Link.tsx"; +import { LinkWithForwardRef } from "./Link.tsx"; type Props = { open: boolean; @@ -29,7 +29,7 @@ export const NavigationListItem = ({ open, IconComponent, label, link, isActive border: "3px solid white", }, }} - component={Link} + component={LinkWithForwardRef} to={link} > { sx={{ px: 0 }} secondaryAction={
    - {props.isLoading && } + {props.isLoading && } {surveyUnits.map(surveyUnit => { return ( navigate(`/survey-units/${surveyUnit.idSu}`)} > {surveyUnit.identificationCode} {surveyUnit.idSu} diff --git a/src/ui/SurveyUnit/SurveyUnitHeader.tsx b/src/ui/SurveyUnit/SurveyUnitHeader.tsx index 442155a..ff53ef8 100644 --- a/src/ui/SurveyUnit/SurveyUnitHeader.tsx +++ b/src/ui/SurveyUnit/SurveyUnitHeader.tsx @@ -3,8 +3,8 @@ import { APISchemas } from "../../types/api.ts"; import { Button, Stack, Typography } from "@mui/material"; import { Breadcrumbs } from "../Breadcrumbs.tsx"; import { theme } from "../../theme.tsx"; -import { Link } from "../Link.tsx"; import { useGetSearchFilter, useSetSearchFilter } from "../../hooks/useSearchFilter.ts"; +import { LinkWithForwardRef } from "../Link.tsx"; type Props = { surveyUnit: APISchemas["SurveyUnitDetailsDto"]; @@ -47,7 +47,7 @@ export const SurveyUnitHeader = ({ surveyUnit }: Props) => {