Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: first implementation of the new design for amendement #28

Merged
merged 3 commits into from
Feb 27, 2024
Merged

feat: first implementation of the new design for amendement #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
736e6aa
feat: first implementation of th new design
alexfauquette Feb 24, 2024
5420bf7
disableGutters
alexfauquette Feb 25, 2024
9036319
some design cleaning
alexfauquette Feb 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions components/StatusChip/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,21 @@ import Chip, { chipClasses, ChipProps } from "@mui/material/Chip";

export type Status = "validated" | "review" | "refused" | "dropped";
interface StatusChipProps extends ChipProps {
status: Status;
status?: Status;
}

function getColor(status: StatusChipProps["status"], theme: Theme) {
if (status === "validated") {
return theme.palette.success;
switch (status) {
case "validated":
return theme.palette.success;
case "review":
return theme.palette.info;
case "refused":
return theme.palette.warning;
case "dropped":
default:
return { main: theme.palette.grey[800], light: theme.palette.grey[100] };
}
if (status === "review") {
return theme.palette.info;
}
if (status === "dropped") {
return theme.palette.warning;
}
return { main: theme.palette.grey[800], light: theme.palette.grey[100] };
}

function StatusChip(props: StatusChipProps) {
Expand All @@ -40,7 +41,6 @@ const StyledStatusChip = styled(StatusChip, {
...(size === "small" && {
height: 26,
borderRadius: 26 / 2,
color: theme.palette.grey[900],
}),
[`& .${chipClasses.label}`]: {
paddingLeft: theme.spacing(1),
Expand Down
189 changes: 102 additions & 87 deletions components/folders/AmendementTab/AmendementCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,32 @@
import * as React from "react";

import { Amendement } from "@/repository/types";
import { Box, Typography, Collapse, Link } from "@mui/material";
import Typography from "@mui/material/Typography";
import Stack from "@mui/material/Stack";
import Accordion from "@mui/material/Accordion";
import AccordionDetails from "@mui/material/AccordionDetails";
import AccordionSummary from "@mui/material/AccordionSummary";

import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import StatusChip from "@/components/StatusChip";

function getStatus(label: string) {
switch (label) {
case "Adopté":
return "validated";
case "Rejeté":
case "Irrecevable":
case "Tombé":
case "Irrecevable 40":
return "refused";
case "Non soutenu":
case "Retiré":
return "dropped";
default:
return "review";
}
}

import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
export default function AmendementCard(props: Amendement) {
const {
dateDepot,
Expand All @@ -24,100 +45,94 @@ export default function AmendementCard(props: Amendement) {
acteur,
prenom,
nom,
uid,
...other
} = props;

// TODO: utiliser la base cosignataires amendement pour avoir le nombre et les noms
const nbSignataires = signatairesLibelle.split(" ").length - 1;

const [showMore, setShowMore] = React.useState(false);
return (
<Stack direction="column" spacing={2} sx={{ my: 2 }}>
<Stack direction="row" justifyContent="space-between">
<span>
{prenom} {nom}
</span>
<span>{sortAmendement || etatLibelle}</span>
</Stack>
<Box
sx={{
display: "flex",
}}
<Accordion
elevation={0}
disableGutters
sx={(theme) => ({
borderBottom: `solid ${theme.palette.divider} 1px`,
borderRadius: 0,
})}
>
<AccordionSummary
aria-controls={`${uid}-pannel`}
id={`${uid}-header`}
expandIcon={<ExpandMoreIcon />}
>
{true && (
<Collapse orientation="horizontal" in={showMore}>
<Stack
component="ul"
spacing={1.25}
sx={{ listStyle: "none", pr: 2, width: 250 }}
>
<Typography component="li" fontWeight="light" variant="body2">
Date de dépôt:&nbsp;
<Typography component="span" variant="body2">
{dateDepot.toLocaleDateString("fr-FR", {
year: "numeric",
month: "short",
day: "numeric",
})}
</Typography>
</Typography>
<Typography component="li" fontWeight="light" variant="body2">
Date d&apos;examen:&nbsp;
<Typography component="span" variant="body2">
{dateSort?.toLocaleDateString("fr-FR", {
year: "numeric",
month: "long",
day: "numeric",
})}
</Typography>
<Stack
direction="row"
justifyContent="space-between"
sx={{ width: "100%", mr: 2 }}
>
<span>
{prenom} {nom}
</span>
<StatusChip
size="small"
label={sortAmendement || etatLibelle}
status={getStatus(sortAmendement || etatLibelle)}
/>
</Stack>
</AccordionSummary>
<AccordionDetails>
<Stack direction="column" spacing={2}>
<Typography variant="caption">N°{numeroLong}</Typography>
<Typography
fontWeight="light"
variant="body2"
flexGrow={1}
flexShrink={1}
flexBasis={0}
component="div"
sx={{ bgcolor: "#F8F9FA", p: 1 }}
dangerouslySetInnerHTML={{ __html: dispositif }}
/>

<Typography fontWeight="light" variant="body2">
Examiné par:&nbsp;
<Typography component="a" variant="body2">
Le nom d&apos;une commission parlementaire
</Typography>
</Typography>
<Stack direction="row" justifyContent="space-between" flexBasis={0}>
<Typography fontWeight="light" variant="body2">
Déposé par:&nbsp;
<Typography component="span" variant="body2">
{nbSignataires} député{nbSignataires > 1 ? "s" : ""}
</Typography>
<Typography component="li" fontWeight="light" variant="body2">
Déposé par:&nbsp;
<Typography component="span" variant="body2">
{nbSignataires} député{nbSignataires > 1 ? "s" : ""}
</Typography>
</Typography>

<Typography fontWeight="light" variant="body2">
Date de dépôt:&nbsp;
<Typography component="span" variant="body2">
{dateDepot.toLocaleDateString("fr-FR", {
year: "numeric",
month: "short",
day: "numeric",
})}
</Typography>
{/* TODO */}
{/* <Typography component="li" fontWeight="light" variant="body2">
Examiné par:{" "}
<Typography component="span" variant="body2"></Typography>
</Typography> */}
<Typography component="li">
Etat:{" "}
<Typography component="span" variant="body2">
{etatLibelle}
</Typography>
</Typography>

<Typography fontWeight="light" variant="body2">
Date d&apos;examen:&nbsp;
<Typography component="span" variant="body2">
{dateSort?.toLocaleDateString("fr-FR", {
year: "numeric",
month: "short",
day: "numeric",
})}
</Typography>
</Stack>
</Collapse>
)}
<Typography
fontWeight="light"
variant="body2"
flexGrow={1}
flexShrink={1}
flexBasis={0}
component="div"
dangerouslySetInnerHTML={{ __html: dispositif }}
/>
</Box>
<Stack direction="row">
<Typography variant="caption">N°{numeroLong}</Typography>
</Stack>
<Link
onClick={() => setShowMore((p) => !p)}
component="button"
variant="body2"
sx={{
alignSelf: "baseline",
display: "flex",
alignItems: "center",
"&>span": { ml: 1 },
}}
>
{showMore ? <RemoveCircleOutlineIcon /> : <AddCircleOutlineIcon />}
<span>Voir {showMore ? "moins" : "plus"}</span>
</Link>
</Stack>
</Typography>
</Stack>
</Stack>
</AccordionDetails>
</Accordion>
);
}
8 changes: 2 additions & 6 deletions components/folders/AmendementTab/AmendementList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import React from "react";

import Stack from "@mui/material/Stack";
import { Divider } from "@mui/material";

import AmendementCard from "./AmendementCard";
import { AmendementTabProps } from ".";
Expand Down Expand Up @@ -50,11 +49,8 @@ export default function AmendementsList(

return (
<Stack>
{filteredAmendements.slice(0, 10).map((amendement) => (
<React.Fragment key={amendement.uid}>
<AmendementCard {...amendement} />
<Divider />
</React.Fragment>
{filteredAmendements.map((amendement) => (
<AmendementCard {...amendement} key={amendement.uid} />
))}
</Stack>
);
Expand Down
Loading