Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
alexfauquette committed Jan 7, 2024
1 parent d8a0ff2 commit c20c7de
Show file tree
Hide file tree
Showing 7 changed files with 248 additions and 85 deletions.
5 changes: 4 additions & 1 deletion app/[legislature]/dossier/[id]/[tab]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { PreviewTab } from "@/components/folders/PreviewTab";
import { AmendementTab } from "@/components/folders/AmendementTab";
import { DebateTab } from "@/components/folders/DebateTab";
import { getDossier } from "@/repository/database";
import { AmendementsFilterState } from "@/components/folders/AmendementTab/useFilter";

export const dynamicParams = true;

Expand All @@ -13,12 +14,14 @@ export async function generateStaticParams() {

export default async function Page({
params,
}: {
}: // searchParams,
{
params: {
legislature: string;
id: string;
tab: string;
};
// searchParams: Partial<AmendementsFilterState>;
}) {
const dossier = await getDossier(params.legislature, params.id);

Expand Down
138 changes: 87 additions & 51 deletions components/folders/AmendementTab/AmendementCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@
import * as React from "react";

import { Amendement } from "@/repository/types";
import { Box } from "@mui/material";
import { Box, Typography, Button, Collapse, Slide, Link } from "@mui/material";
import Stack from "@mui/material/Stack";

import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
export default function AmendementCard(props: Amendement) {
const {
dateDepot,
Expand All @@ -18,70 +20,104 @@ export default function AmendementCard(props: Amendement) {
exposeSommaire,
urlDivisionTexteVise,
signatairesLibelle,
numeroLong,
acteur,
...other
} = props;

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

const [showMore, setShowMore] = React.useState(false);
return (
<Stack direction="column">
<Stack direction="column" spacing={2} sx={{ my: 2 }}>
<Stack direction="row" justifyContent="space-between">
<span>Depte</span>
<span>
{acteur.prenom} {acteur.nom}
</span>
<span>{sortAmendement || etatLibelle}</span>
</Stack>
<Box
sx={{
display: "flex",

"&>ul": {
flex: "4 0 0",
},
"&>p": {
flex: "8 0 0",
},
}}
>
<ul>
<li>
Date de dépôt:{" "}
<span>
{dateDepot.toLocaleDateString("fr-FR", {
year: "numeric",
month: "long",
day: "numeric",
})}
</span>
</li>
<li>
Date d'examen:{" "}
<span>
{dateDepot.toLocaleDateString("fr-FR", {
year: "numeric",
month: "long",
day: "numeric",
})}
</span>
</li>
<li>
Déposé par: <span></span>
</li>
<li>
Examiné par: <span></span>
</li>
<li>
Etat: <span></span>
</li>
</ul>
<p dangerouslySetInnerHTML={{ __html: dispositif }} />
{true && (
<Collapse
// direction="right"
orientation="horizontal"
in={showMore}
>
<Stack
component="li"
spacing={1.25}
sx={{ listStyle: "none", pr: 2, width: 500 }}
>
<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'examen:&nbsp;
<Typography component="span" variant="body2">
{dateSort?.toLocaleDateString("fr-FR", {
year: "numeric",
month: "long",
day: "numeric",
})}
</Typography>
</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>
{/* 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>
</Stack>
</Collapse>
)}
<Typography
fontWeight="light"
variant="body2"
flexGrow={1}
component="div"
dangerouslySetInnerHTML={{ __html: dispositif }}
/>
</Box>
<Stack direction="row"></Stack>
{showMore && (
<pre style={{ width: 1000, overflow: "scroll" }}>
{JSON.stringify(props, null, 2)}
</pre>
)}
<button onClick={() => setShowMore((p) => !p)}>
see {showMore ? "less" : "more"}
</button>
<Stack direction="row">
<Typography variant="caption">{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>
);
}
48 changes: 48 additions & 0 deletions components/folders/AmendementTab/AmendementList.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
"use client";
import React from "react";

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

import { DossierData } from "@/repository/database";
import AmendementCard from "./AmendementCard";

export default function AmendementsList(
props: Pick<DossierData, "amendements" | "acteurs"> & { numero: string }
) {
const { amendements, acteurs, numero } = props;

const filteredAmendements = amendements
.filter((amendement) => {
if (numero === "") {
return true;
}
return amendement.numeroLong
.toLowerCase()
.startsWith(numero.toLowerCase());
})
.filter(
({ texteLegislatifRefUid }) =>
texteLegislatifRefUid === "PIONANR5L16B0360"
)
.sort((a, b) =>
Number.parseInt(a.numeroOrdreDepot) < Number.parseInt(b.numeroOrdreDepot)
? -1
: 1
);

return (
<Stack>
{filteredAmendements.slice(0, 10).map((amendement) => (
<React.Fragment key={amendement.uid}>
<AmendementCard
{...amendement}
acteur={acteurs[amendement.acteurRefUid]}
/>
<Divider />
</React.Fragment>
))}
</Stack>
);
}
23 changes: 23 additions & 0 deletions components/folders/AmendementTab/Filter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import TextField from "@mui/material/TextField";

type FilterProps = {
numero: string;
handleNumero: (numero: string) => void;
};

export const Filter = (props: FilterProps) => {
const { numero, handleNumero } = props;

return (
<TextField
size="small"
label="Numero"
value={numero}
onChange={(event) => {
handleNumero(event.target.value);
}}
variant="outlined"
type="numeric"
/>
);
};
44 changes: 21 additions & 23 deletions components/folders/AmendementTab/index.tsx
Original file line number Diff line number Diff line change
@@ -1,52 +1,50 @@
"use client";

import React from "react";

import Container from "@mui/material/Container";
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";

import { DossierData } from "@/repository/database";
import AmendementCard from "./AmendementCard";
import { Divider } from "@mui/material";
import { FilterContainer } from "@/components/FilterContainer";

import { Filter } from "./Filter";
import { useFilterState } from "./useFilter";
import AmendementList from "./AmendementList";

type AmendementTabProps = {
dossier?: DossierData;
};

export const AmendementTab = ({ dossier }: AmendementTabProps) => {
const {
commissionFondId,
commissionAvisId,
organes = {},
rapporteursFondIds,
coSignatairesIds,
acteurs = {},
acts = [],
documents = [],
amendementCount = {},
amendements = [],
} = dossier ?? {};
const { amendements = [], acteurs = {} } = dossier ?? {};

const { numero, handleNumero } = useFilterState();

return (
<Container
sx={{
pt: 3,
display: "flex",
flexDirection: {
xs: "column-reverse",
xs: "column",
md: "row",
},
gap: 5,
}}
>
<Stack>
{amendements.slice(0, 10).map((amendement) => (
<React.Fragment key={amendement.uid}>
<AmendementCard {...amendement} />
<Divider />
</React.Fragment>
))}
<Stack spacing={3} useFlexGap flex={2}>
<FilterContainer>
<Filter numero={numero} handleNumero={handleNumero} />
</FilterContainer>
</Stack>
<Box flex={8} sx={{ minWidth: 0 }}>
<AmendementList
amendements={amendements}
acteurs={acteurs}
numero={numero}
/>
</Box>
</Container>
);
};
50 changes: 50 additions & 0 deletions components/folders/AmendementTab/useFilter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
"use client";
import * as React from "react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useTransition } from "react";

export type AmendementsFilterState = {
numero: string;
search: string;
};

export function useFilterState() {
const { replace } = useRouter();
const pathname = usePathname();
const searchParams = useSearchParams();

const [isPending, startTransition] = useTransition();

const [numero, setNumero] = React.useState<string>(
searchParams.get("numero") ?? ""
);

function handleSearch(term: string) {
const params = new URLSearchParams(window.location.search);
if (term) {
params.set("q", term);
} else {
params.delete("q");
}

startTransition(() => {
replace(`${pathname}?${params.toString()}`);
});
}

function handleNumero(numero: string) {
const params = new URLSearchParams(window.location.search);
setNumero(numero);
if (numero === "") {
params.delete("numero");
} else {
params.set("numero", numero);
}

startTransition(() => {
replace(`${pathname}?${params.toString()}`);
});
}

return { isPending, handleSearch, handleNumero, numero };
}
Loading

0 comments on commit c20c7de

Please sign in to comment.