diff --git a/src/i18n-en.js b/src/i18n-en.js index d424c27..ce5754e 100644 --- a/src/i18n-en.js +++ b/src/i18n-en.js @@ -27,4 +27,7 @@ export const messagesEn = { chooseInterviewer: "Choose an interviewer :", chooseOrganizationUnit: "Choose an organization unit :", followInterviewer: "Follow an interviewer", + followSurvey: 'Follow a survey', + allSurveys: 'All surveys', + followOrganizationUnit: "Follow an organization unit" } \ No newline at end of file diff --git a/src/i18n-fr.js b/src/i18n-fr.js index 02c6668..c7b40e7 100644 --- a/src/i18n-fr.js +++ b/src/i18n-fr.js @@ -27,5 +27,7 @@ export const messagesFr = { chooseInterviewer: "Choisissez un enquêteur / une enquêtrice :", chooseOrganizationUnit: "Choisissez un site :", followInterviewer: "Suivre un enquêteur", - + followSurvey: "Suivre une enquête", + allSurveys: "Ensemble des enquêtes", + followOrganizationUnit: "Suivre un site" } \ No newline at end of file diff --git a/src/pages/FollowCampaignPage.tsx b/src/pages/FollowCampaignPage.tsx new file mode 100644 index 0000000..e527f4f --- /dev/null +++ b/src/pages/FollowCampaignPage.tsx @@ -0,0 +1,5 @@ +import { Typography } from "@mui/material"; + +export const FollowCampaignPage = () => { + return page suivre enquête; +}; diff --git a/src/pages/FollowInterviewerPage.tsx b/src/pages/FollowInterviewerPage.tsx new file mode 100644 index 0000000..bd652f6 --- /dev/null +++ b/src/pages/FollowInterviewerPage.tsx @@ -0,0 +1,5 @@ +import { Typography } from "@mui/material"; + +export const FollowInterviewerPage = () => { + return page suivre enquêteur; +}; diff --git a/src/pages/FollowOrganizationUnitPage.tsx b/src/pages/FollowOrganizationUnitPage.tsx new file mode 100644 index 0000000..2486c17 --- /dev/null +++ b/src/pages/FollowOrganizationUnitPage.tsx @@ -0,0 +1,5 @@ +import { Typography } from "@mui/material"; + +export const FollowOrganizationUnitPage = () => { + return page suivre site; +}; diff --git a/src/pages/FollowPage.tsx b/src/pages/FollowPage.tsx index c4e76cb..6fb688c 100644 --- a/src/pages/FollowPage.tsx +++ b/src/pages/FollowPage.tsx @@ -1,10 +1,14 @@ import { Row } from "../ui/Row"; import { FollowInterviewerCard } from "../ui/FollowInterviewerCard"; +import { FollowSurveyCard } from "../ui/FollowSurveyCard"; +import { FollowOrganizationUnitCard } from "../ui/FollowOrganizationUnitCard"; export const FollowPage = () => { // TODO use real condition const isNationalProfile = true; + // TODO call api to get interviewers, surveys and organizationUnits + const gridTemplateColumns = isNationalProfile ? { gridTemplateColumns: "1fr 1fr 1fr" } : { gridTemplateColumns: "1fr 1fr" }; @@ -21,7 +25,9 @@ export const FollowPage = () => { px={4} py={3} > + + {isNationalProfile && } ); }; diff --git a/src/routes.tsx b/src/routes.tsx index f6d6255..92b6bb2 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -8,6 +8,9 @@ import { ClosePage } from "./pages/ClosePage"; import { NotifyPage } from "./pages/NotifyPage"; import { CollectOrganizationPage } from "./pages/CollectOrganizationPage"; import { ReassignmentPage } from "./pages/ReassignmentPage"; +import { FollowInterviewerPage } from "./pages/FollowInterviewerPage"; +import { FollowCampaignPage } from "./pages/FollowCampaignPage"; +import { FollowOrganizationUnitPage } from "./pages/FollowOrganizationUnitPage"; export const routes: RouteObject[] = [ { @@ -21,6 +24,9 @@ export const routes: RouteObject[] = [ children: [ { path: "", element: }, { path: "follow", element: }, + { path: "follow/interviewer/:id", element: }, + { path: "follow/campaign/:id", element: }, + { path: "follow/organization-unit/:id", element: }, { path: "read", element: }, { path: "close", element: }, { path: "notify", element: }, diff --git a/src/ui/FollowCardHeader.tsx b/src/ui/FollowCardHeader.tsx new file mode 100644 index 0000000..48af30b --- /dev/null +++ b/src/ui/FollowCardHeader.tsx @@ -0,0 +1,30 @@ +import Stack from "@mui/material/Stack"; +import Typography from "@mui/material/Typography"; +import { useIntl } from "react-intl"; +import { SearchField } from "./SearchField"; +import { ChangeEvent } from "react"; + +type Props = { + title: string; + placeholder: string; + onSearch: (e: ChangeEvent) => void; +}; + +export const FollowCardHeader = ({ title, placeholder, onSearch }: Props) => { + const intl = useIntl(); + + const handleChange = (e: ChangeEvent) => { + onSearch(e); + }; + + return ( + + {intl.formatMessage({ id: title })} + + + ); +}; diff --git a/src/ui/FollowInterviewerCard.tsx b/src/ui/FollowInterviewerCard.tsx index a389886..7ea7743 100644 --- a/src/ui/FollowInterviewerCard.tsx +++ b/src/ui/FollowInterviewerCard.tsx @@ -2,12 +2,15 @@ import { useIntl } from "react-intl"; import { useDebouncedState } from "../hooks/useDebouncedState"; import Card from "@mui/material/Card"; import Stack from "@mui/material/Stack"; -import Typography from "@mui/material/Typography"; -import { SearchField } from "./SearchField"; import TableContainer from "@mui/material/TableContainer"; import Table from "@mui/material/Table"; import TableHead from "@mui/material/TableHead"; import { TableBody, TableCell, TableRow } from "@mui/material"; +import { useState } from "react"; +import { APISchemas } from "../types/api"; +import { Link as RouterLink } from "react-router-dom"; +import { Link } from "./Link"; +import { FollowCardHeader } from "./FollowCardHeader"; const interviewersMock = [ { @@ -40,24 +43,22 @@ const interviewersMock = [ export const FollowInterviewerCard = () => { const intl = useIntl(); const [search, setSearch] = useDebouncedState("", 500); - // const [page, setPage] = useState(0); + const [page, setPage] = useState(0); - // const handleChangePage = (_: React.MouseEvent | null, newPage: number) => { - // setPage(newPage); - // }; + const handleChangePage = (_: React.MouseEvent | null, newPage: number) => { + setPage(newPage); + }; + + const filteredInterviewers = filterInterviewers({ interviewers: interviewersMock, search }); return ( - + - - {intl.formatMessage({ id: "followInterviewer" })} - - setSearch(e.target.value)} - label={intl.formatMessage({ id: "toSearchLabel" })} - placeholder={intl.formatMessage({ id: "searchInterviewer" })} + setSearch(e.target.value)} + placeholder="searchInterviewer" /> - @@ -68,11 +69,18 @@ export const FollowInterviewerCard = () => { - {interviewersMock.map(interviewer => ( + {filteredInterviewers.map(interviewer => ( - - {interviewer.interviewerLastName.toLocaleUpperCase()}{" "} - {interviewer.interviewerFirstName} + + + {interviewer.interviewerLastName?.toLocaleUpperCase()}{" "} + {interviewer.interviewerFirstName} + ))} @@ -84,3 +92,30 @@ export const FollowInterviewerCard = () => { ); }; + +type FilterInterviewerProps = { + interviewers: APISchemas["InterviewerDto"][]; + search?: string; +}; + +const filterInterviewers = ({ interviewers, search }: FilterInterviewerProps) => { + if (search) { + interviewers = interviewers.filter( + item => + item.interviewerFirstName?.toLowerCase().includes(search.toLowerCase()) || + item.interviewerLastName?.toLowerCase().includes(search.toLowerCase()) || + (item.interviewerFirstName && + item.interviewerLastName && + (item.interviewerFirstName + ?.toLowerCase() + .concat(item.interviewerLastName?.toLowerCase()) + .includes(search.split(" ").join("").toLowerCase()) || + item.interviewerLastName + ?.toLowerCase() + .concat(item.interviewerFirstName?.toLowerCase()) + .includes(search.split(" ").join("").toLowerCase()))), + ); + } + + return interviewers; +}; diff --git a/src/ui/FollowOrganizationUnitCard.tsx b/src/ui/FollowOrganizationUnitCard.tsx new file mode 100644 index 0000000..ac2bd57 --- /dev/null +++ b/src/ui/FollowOrganizationUnitCard.tsx @@ -0,0 +1,100 @@ +import { useIntl } from "react-intl"; +import { useDebouncedState } from "../hooks/useDebouncedState"; +import Card from "@mui/material/Card"; +import Stack from "@mui/material/Stack"; +import TableContainer from "@mui/material/TableContainer"; +import Table from "@mui/material/Table"; +import TableHead from "@mui/material/TableHead"; +import { TableBody, TableCell, TableRow } from "@mui/material"; +import { useState } from "react"; +import { Link as RouterLink } from "react-router-dom"; +import { Link } from "./Link"; +import { FollowCardHeader } from "./FollowCardHeader"; + +const OUMock = [ + { + id: "1", + label: "Paris", + }, + { + id: "2", + label: "Metz", + }, + { + id: "3", + + label: "Lille", + }, + { + id: "4", + + label: "Amiens", + }, +]; + +export const FollowOrganizationUnitCard = () => { + const intl = useIntl(); + const [search, setSearch] = useDebouncedState("", 500); + const [page, setPage] = useState(0); + + const handleChangePage = (_: React.MouseEvent | null, newPage: number) => { + setPage(newPage); + }; + + const filteredOU = filterOrganizationUnits({ organizationUnits: OUMock, search }); + + return ( + + + setSearch(e.target.value)} + placeholder="searchOrganizationUnit" + /> + +
+ + + + {intl.formatMessage({ id: "chooseOrganizationUnit" })} + + + + + {filteredOU.map(OU => ( + + + + {OU.label} + + + + ))} + + {/* TODO use TableFooter */} +
+ + + + ); +}; + +type FilterOUProps = { + organizationUnits: { id: string; label: string }[]; + search?: string; +}; + +const filterOrganizationUnits = ({ organizationUnits, search }: FilterOUProps) => { + if (search) { + organizationUnits = organizationUnits.filter(item => + item.label.toLowerCase().includes(search.toLowerCase()), + ); + } + + return organizationUnits; +}; diff --git a/src/ui/FollowSurveyCard.tsx b/src/ui/FollowSurveyCard.tsx new file mode 100644 index 0000000..3b5f87a --- /dev/null +++ b/src/ui/FollowSurveyCard.tsx @@ -0,0 +1,52 @@ +import { useIntl } from "react-intl"; +import Card from "@mui/material/Card"; +import Stack from "@mui/material/Stack"; +import Typography from "@mui/material/Typography"; +import Box from "@mui/material/Box"; +import { Link } from "./Link"; +import { Link as RouterLink } from "react-router-dom"; + +const surveysMock = [ + { + id: "1", + label: "Logement", + }, + { + id: "2", + label: "Autonomie", + }, + { + id: "3", + label: "TIC", + }, +]; + +export const FollowSurveyCard = () => { + const intl = useIntl(); + + return ( + + + {intl.formatMessage({ id: "followSurvey" })} + + + {intl.formatMessage({ id: "chooseSurvey" })} + + {surveysMock.map(survey => ( + + {survey.label} + + ))} + + {intl.formatMessage({ id: "allSurveys" })} + + + + ); +};