feat: add collect filter

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: "",

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 = () => {
           <Button
             variant="contained"
             size="large"
-            component={Link}
+            component={LinkWithForwardRef}
             to={`/questionings`}
             onClick={() => {
               return setFilter("questionings", {

src/pages/Logout.tsx

@@ -1,44 +1,33 @@
-import { Stack, Typography, Box, Link } from "@mui/material";
+import { Stack, Typography, Box, Card, Button } from "@mui/material";
+import { Link } from "../ui/Link.tsx";
 import { Row } from "../ui/Row.tsx";
-import { PropsWithChildren } from "react";
-import { Link as RouterLink } from "react-router-dom";
 
 export function LogoutPage() {
   return (
-    <>
-      <Stack
-        position="relative"
-        sx={{
-          background: "linear-gradient(270deg, #21005D 0%, #9A82DB 0%, #E12358 90%)",
-        }}
-        justifyContent="center"
-        alignItems="center"
-        minHeight={500}
-        height="calc(100vh - 230px)"
-      >
-        <Typography variant="displaySmall" fontWeight={400} color="white">
-          {"Vous avez été deconnecté,"}
-        </Typography>
-        <Row spacing={2}>
-          <Typography variant="displaySmall" fontWeight={400} color="white">
-            {"pour revenir sur "}
-          </Typography>
-          <Row typography="headlineMedium" gap={0.25} color="red.main" component="span">
+    <Box
+      sx={{
+        width: "90vw",
+        height: "90vh",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        margin: "auto",
+      }}
+    >
+      <Card sx={{ p: 5, width: "500px" }} elevation={2}>
+        <Stack gap={5} alignItems={"center"}>
+          <Row typography="headlineLarge" gap={0.5} color="red.main" component="span">
             <Box component="span" color="black.main" fontWeight={600}>
               Platine
             </Box>
             Gestion
           </Row>
-          ,
-        </Row>
-        <Typography variant="displaySmall" fontWeight={400} color="white" component={HomeLink}>
-          {"cliquez ici"}
-        </Typography>
-      </Stack>
-    </>
+          <Typography variant="headlineLarge">Vous avez été déconnecté.</Typography>
+          <Button variant="contained" sx={{ py: 1 }} component={Link} to={"/"}>
+            Se reconnecter
+          </Button>
+        </Stack>
+      </Card>
+    </Box>
   );
 }
-
-const HomeLink = (props: PropsWithChildren) => {
-  return <Link component={RouterLink} underline="none" to="/" {...props} />;
-};

src/pages/QuestioningPage.tsx

@@ -3,14 +3,14 @@ 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";
 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={<OpenInNewIcon />}
           >

src/pages/Search/SearchQuestionings.tsx

@@ -137,7 +137,11 @@ export const SearchQuestionings = () => {
             }}
           />
           <Row gap={3}>
-            <FilterSelect options={[]} label={"Collecte"} name={"campaignId"} />
+            <FilterSelect
+              label={"Collecte"}
+              questioningFilter={questioningFilter}
+              setFilter={setFilter}
+            />
             <MultipleSearchSelect
               options={collectStatus}
               inputProps={{

src/theme.tsx

@@ -417,6 +417,34 @@ export const theme = createTheme({
         },
       ],
     },
+    MuiAutocomplete: {
+      styleOverrides: {
+        clearIndicator: {
+          color: palette.primary.main,
+          visibility: "visible",
+        },
+        popupIndicator: {
+          color: palette.primary.main,
+        },
+        groupLabel: {
+          ...typography.titleSmall,
+          color: palette.black.main,
+        },
+        option: {
+          "&[aria-selected='true']": {
+            backgroundColor: "white !important",
+          },
+        },
+        inputRoot: {
+          ".MuiOutlinedInput-notchedOutline": {
+            borderColor: palette.border.default,
+          },
+          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            border: `1px solid ${palette.primary.main}`,
+          },
+        },
+      },
+    },
     MuiIconButton: {
       variants: [
         {

src/ui/Contact/ContactCampaignsCard.tsx

@@ -1,7 +1,7 @@
 import { Button, Card, Divider, List, ListItem, ListItemText, Stack, Typography } from "@mui/material";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
-import { Link } from "../Link.tsx";
 import { APISchemas } from "../../types/api.ts";
+import { LinkWithForwardRef } from "../Link.tsx";
 
 type Props = {
   campaigns?: APISchemas["ContactDetailsDto"]["listCampaigns"];
@@ -24,26 +24,25 @@ export const ContactCampaignsCard = (props: Props) => {
           </ListItem>
 
           {campaigns.map(campaign => (
-            <li key={campaign}>
-              <Divider variant="fullWidth" component="li" />
-              <ListItem
-                sx={{ pl: 0 }}
-                secondaryAction={
-                  <Button
-                    component={Link}
-                    to={`/campaigns/${campaign}`}
-                    sx={{ typography: "titleSmall" }}
-                    endIcon={<OpenInNewIcon />}
-                    // TODO: remove disabled when get pages
-                    disabled={true}
-                  >
-                    Voir
-                  </Button>
-                }
-              >
-                <ListItemText primary={<Typography variant="bodyMedium">{campaign}</Typography>} />
-              </ListItem>
-            </li>
+            <ListItem
+              key={campaign}
+              sx={{ pl: 0 }}
+              secondaryAction={
+                <Button
+                  component={LinkWithForwardRef}
+                  to={`/campaigns/${campaign}`}
+                  sx={{ typography: "titleSmall" }}
+                  endIcon={<OpenInNewIcon />}
+                  // TODO: remove disabled when get pages
+                  disabled={true}
+                >
+                  Voir
+                </Button>
+              }
+            >
+              <ListItemText primary={<Typography variant="bodyMedium">{campaign}</Typography>} />
+              <Divider variant="fullWidth" />
+            </ListItem>
           ))}
 
           {!hasCampaigns && (

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 (
     <TableContainer component={Paper} elevation={2}>
       <Table aria-label="search contacts table">
         <TableHeader columns={columns} />
-        {props.isLoading && <LoadingTable onVisible={props.onVisible} />}
         <TableBody>
+          {props.isLoading && <LoadingTable onVisible={props.onVisible} />}
           {contacts.map(contact => {
             return (
               <TableRow
                 key={contact.identifier}
                 sx={style.root}
                 hover
-                component={Link}
-                to={`/contacts/${contact.identifier}`}
+                onClick={() => navigate(`/contacts/${contact.identifier}`)}
               >
                 <TableCell>{`#${contact.identifier}`}</TableCell>
                 <TableCell>{`${contact.firstName} ${contact.lastName}`}</TableCell>

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<Element, Event>,
+    // 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 (
-    <FormControl variant="filled" sx={{ flex: 1 }}>
-      <InputLabel id={labelId}>{label}</InputLabel>
-      <Select
-        IconComponent={props => <ExpandMoreOutlinedIcon {...props} sx={{ color: "text.primary" }} />}
-        labelId={labelId}
-        label={label}
-        name={name}
-        value={value}
-        fullWidth
-        id={`select-${name}`}
-        displayEmpty
-        disableUnderline
-        variant="filled"
-      >
-        {options.map(option => {
-          return (
-            <MenuItem value={option.value} key={option.value}>
-              {option.label}
-            </MenuItem>
-          );
-        })}
-      </Select>
-    </FormControl>
+    <Autocomplete
+      popupIcon={<ExpandMoreOutlinedIcon />}
+      clearIcon={<CloseIcon />}
+      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 => (
+        <TextField
+          variant="filled"
+          {...params}
+          label={label}
+          InputProps={{ ...params.InputProps, disableUnderline: true }}
+        />
+      )}
+      renderOption={(props, option) => (
+        <MenuItem {...props} key={option.campaignId}>
+          <ListItemText>{option.collect} </ListItemText>
+          {questioningFilter.campaignId === option.campaignId && <CheckIcon fontSize="small" />}
+        </MenuItem>
+      )}
+    />
   );
 };

src/ui/Layout.tsx

@@ -7,7 +7,6 @@ import { NavigationDrawer } from "./NavigationDrawer.tsx";
 export function Layout({ children }: PropsWithChildren) {
   return (
     <Box sx={{ display: "flex" }}>
-      <NavigationDrawer />
       <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
         {children}
       </Box>

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 <MuiLink component={RouterLink} {...props} />;
 };
+
+export const LinkWithForwardRef = forwardRef<HTMLAnchorElement, Props>(function Link(props, ref) {
+  return <MuiLink component={RouterLink} ref={ref} {...props} />;
+});