Skip to content

Commit

Permalink
feat: add collect filter (#99)
Browse files Browse the repository at this point in the history
  • Loading branch information
RenauxLeaInsee authored Jan 7, 2025
1 parent fca4b89 commit 1f132dc
Show file tree
Hide file tree
Showing 18 changed files with 182 additions and 124 deletions.
2 changes: 2 additions & 0 deletions src/hooks/useSearchFilter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export type QuestioningsBaseType = {
pageSize: number;
lastEvent?: string[];
lastCommunication?: string[];
campaignId?: string;
};

export const base = {
Expand All @@ -27,6 +28,7 @@ export const base = {
pageSize: 10,
lastEvent: [],
lastCommunication: [],
campaignId: "",
} as QuestioningsBaseType,
surveys: {
idSource: "",
Expand Down
4 changes: 2 additions & 2 deletions src/pages/ContactPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -55,7 +55,7 @@ export const ContactPage = () => {
<Button
variant="contained"
size="large"
component={Link}
component={LinkWithForwardRef}
to={`/questionings`}
onClick={() => {
return setFilter("questionings", {
Expand Down
55 changes: 22 additions & 33 deletions src/pages/Logout.tsx
Original file line number Diff line number Diff line change
@@ -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} />;
};
4 changes: 2 additions & 2 deletions src/pages/QuestioningPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -83,7 +83,7 @@ export const QuestioningPage = () => {
variant="contained"
disabled={hasNoQuestioningUrl}
size="large"
component={Link}
component={LinkWithForwardRef}
to={questioning.readOnlyUrl ?? ""}
endIcon={<OpenInNewIcon />}
>
Expand Down
6 changes: 5 additions & 1 deletion src/pages/Search/SearchQuestionings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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={{
Expand Down
28 changes: 28 additions & 0 deletions src/theme.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
{
Expand Down
41 changes: 20 additions & 21 deletions src/ui/Contact/ContactCampaignsCard.tsx
Original file line number Diff line number Diff line change
@@ -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"];
Expand All @@ -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 && (
Expand Down
11 changes: 7 additions & 4 deletions src/ui/Contact/SearchContactTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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" },
Expand All @@ -29,6 +29,9 @@ export const style = {
outline: `1px solid ${theme.palette.common.black} !important`,
outlineOffset: "-1px",
},
"&:hover": {
cursor: "pointer",
},
},
};

Expand All @@ -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>
Expand Down
91 changes: 58 additions & 33 deletions src/ui/FilterSelect.tsx
Original file line number Diff line number Diff line change
@@ -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>
)}
/>
);
};
1 change: 0 additions & 1 deletion src/ui/Layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 5 additions & 0 deletions src/ui/Link.tsx
Original file line number Diff line number Diff line change
@@ -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 & {
Expand All @@ -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} />;
});
Loading

0 comments on commit 1f132dc

Please sign in to comment.