Merge pull request #34 from alexfauquette/depute-amendements

Continue les pages deputes

app/depute/[slug]/InfoPersonelles.tsx

@@ -0,0 +1,110 @@
+import * as React from "react";
+
+import { Paper, Stack, Typography } from "@mui/material";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import { Acteur, Mandat } from "@/repository/types";
+
+export default function InfoPersonelles({
+  mandats,
+  depute,
+}: {
+  mandats: Mandat[];
+  depute: Acteur;
+}) {
+  const sortedMandats = mandats
+    .filter((mandat) => mandat.legislature === "16")
+    .sort((a, b) => (a.dateDebut < b.dateDebut ? 1 : -1));
+
+  const dernerMandatDepute = sortedMandats.filter(
+    (mandat) => mandat.typeOrgane === "ASSEMBLEE"
+  )[0];
+
+  const dernerGroupParlementaire = sortedMandats.filter(
+    (mandat) => mandat.typeOrgane === "GP"
+  )[0];
+
+  const dernerPartisPolitique = sortedMandats.filter(
+    (mandat) => mandat.typeOrgane === "PARPOL"
+  )[0];
+
+  const { dateNais, villeNais, profession } = depute;
+  const age =
+    new Date(
+      new Date().valueOf() - new Date(dateNais).valueOf()
+    ).getFullYear() - 1970;
+
+  return (
+    <Paper sx={{ p: 2, bgcolor: "grey.50", width: 300 }} elevation={0}>
+      <Stack direction="column" spacing={2}>
+        <Typography variant="subtitle1">Infomrations personelles</Typography>
+
+        <div>
+          <Typography variant="body2" fontWeight="light">
+            Debut de mandat <InfoOutlinedIcon fontSize="inherit" />
+          </Typography>
+          <Typography variant="body2">
+            Le{" "}
+            {new Date(dernerMandatDepute.dateDebut).toLocaleDateString(
+              "fr-FR",
+              { day: "numeric", month: "long", year: "numeric" }
+            )}
+          </Typography>
+        </div>
+
+        <div>
+          <Typography variant="body2" fontWeight="light">
+            Fin de mandat <InfoOutlinedIcon fontSize="inherit" />
+          </Typography>
+          <Typography variant="body2">
+            {dernerMandatDepute.dateFin !== null
+              ? `Le ${new Date(dernerMandatDepute.dateFin).toLocaleDateString(
+                  "fr-FR",
+                  { day: "numeric", month: "long", year: "numeric" }
+                )}`
+              : "en cours"}
+          </Typography>
+        </div>
+
+        <div>
+          <Typography variant="body2" fontWeight="light">
+            Group politique <InfoOutlinedIcon fontSize="inherit" />
+          </Typography>
+          <Typography variant="body2">
+            {dernerGroupParlementaire &&
+            dernerGroupParlementaire.dateFin === null
+              ? dernerGroupParlementaire.libelle
+              : "-"}
+          </Typography>
+        </div>
+
+        <div>
+          <Typography variant="body2" fontWeight="light">
+            Partis politique <InfoOutlinedIcon fontSize="inherit" />
+          </Typography>
+          <Typography variant="body2">
+            {dernerPartisPolitique && dernerPartisPolitique.dateFin === null
+              ? dernerPartisPolitique.libelle
+              : "-"}
+          </Typography>
+        </div>
+
+        <div>
+          <Typography variant="body2" fontWeight="light">
+            Date de naissance <InfoOutlinedIcon fontSize="inherit" />
+          </Typography>
+          <Typography variant="body2">
+            Le {new Date(dateNais).toLocaleDateString("fr-FR")} ({age} ans) à{" "}
+            {villeNais}
+          </Typography>
+        </div>
+
+        <div>
+          <Typography variant="body2" fontWeight="light">
+            Profession <InfoOutlinedIcon fontSize="inherit" />
+          </Typography>
+          <Typography variant="body2">{profession}</Typography>
+        </div>
+      </Stack>
+    </Paper>
+  );
+}

app/depute/[slug]/Mandats.tsx

@@ -1,4 +1,3 @@
-"use client";
 import * as React from "react";
 
 import { List, ListItem, Box, Paper, Stack, Typography } from "@mui/material";

app/depute/[slug]/Tabs.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useSelectedLayoutSegment } from "next/navigation";
+
+import Tab from "@mui/material/Tab";
+import Tabs from "@mui/material/Tabs";
+import Link from "next/link";
+
+export default function DeputeTabs({ slug }: { slug: string }) {
+  const segment = useSelectedLayoutSegment();
+
+  return (
+    <Tabs value={segment ?? "activites"} variant="scrollable">
+      <Tab
+        value="activites"
+        label="Activités"
+        component={Link}
+        href={`/depute/${slug}/`}
+      />
+      <Tab
+        value="travaux"
+        label="Travaux"
+        component={Link}
+        href={`/depute/${slug}/travaux`}
+      />
+      <Tab
+        value="amendements"
+        label="Amendements"
+        component={Link}
+        href={`/depute/${slug}/amendements`}
+      />
+      <Tab
+        value="votes"
+        label="Votes"
+        component={Link}
+        href={`/depute/${slug}/votes`}
+      />
+    </Tabs>
+  );
+}

app/depute/[slug]/[tab]/Activites.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default async function Activites(props: { deputeSlug: string }) {
+  return <p>Activites</p>;
+}

app/depute/[slug]/[tab]/Amendements.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import Stack from "@mui/material/Stack";
+
+import { getDeputeAmendement } from "@/repository/database";
+import AmendementCard from "@/components/folders/AmendementTab/AmendementCard";
+
+export default async function Amendements(props: { deputeSlug: string }) {
+  const { amendements = [], depute = {} } = await getDeputeAmendement(
+    props.deputeSlug
+  );
+  return (
+    <Stack>
+      <p>Amendements</p>
+      {amendements
+        .sort((a, b) =>
+          Number.parseInt(a.numeroOrdreDepot) <
+          Number.parseInt(b.numeroOrdreDepot)
+            ? -1
+            : 1
+        )
+        .map((amendement) => (
+          <AmendementCard
+            key={amendement.uid}
+            {...amendement}
+            prenom={depute.prenom}
+            nom={depute.nom}
+          />
+        ))}
+    </Stack>
+  );
+}

app/depute/[slug]/[tab]/Travaux.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default async function Travaux(props: { deputeSlug: string }) {
+  return <p>Travaux</p>;
+}

app/depute/[slug]/[tab]/Votes.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default async function Votes(props: { deputeSlug: string }) {
+  return <p>Votes</p>;
+}

app/depute/[slug]/[tab]/page.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import Amendements from "./Amendements";
+import Votes from "./Votes";
+import Travaux from "./Travaux";
+import Activites from "./Activites";
+
+export default function Page({
+  params,
+}: {
+  params: { slug: string; tab: string };
+}) {
+  switch (params.tab) {
+    case "amendements":
+      return <Amendements deputeSlug={params.slug} />;
+    case "votes":
+      return <Votes deputeSlug={params.slug} />;
+    case "travaux":
+      return <Travaux deputeSlug={params.slug} />;
+    default:
+      return <Activites deputeSlug={params.slug} />;
+  }
+}

app/depute/[slug]/layout.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import { getDepute } from "@/repository/database";
+import { Avatar, Box, Container, Stack, Typography } from "@mui/material";
+
+import CircleDiv from "@/icons/CircleDiv";
+import Mandats from "./Mandats";
+import Contacts from "./Contacts";
+import Tabs from "./Tabs";
+import InfoPersonelles from "./InfoPersonelles";
+
+export default async function Page({
+  children,
+  params,
+}: {
+  params: { slug: string };
+  children: React.ReactNode;
+}) {
+  const { depute, group, adresses, mandats } = await getDepute(params.slug);
+
+  if (depute === undefined) {
+    return <p>Deputé Not Found</p>;
+  }
+
+  const circonscription = mandats
+    ?.filter((mandat) => mandat.codeType === "ASSEMBLEE")
+    .sort((a, b) => (a.dateDebut < b.dateDebut ? 1 : -1))[0];
+
+  // A décider: Faut il afficher les mandats passé?
+  // Exemple: la partoissipation a des commission d'enquête
+  const mandasEnCours = mandats?.filter((mandat) => mandat.dateFin === null);
+
+  return (
+    <Box sx={{ maxWidth: "1024px", mx: "auto", my: 5 }}>
+      <Stack direction="row" justifyContent="space-between">
+        <Box sx={{ display: "flex", flexDirection: "row" }}>
+          <Avatar sx={{ bgcolor: "grey.200", width: 100, height: 100, mr: 1 }}>
+            {depute.prenom[0]}
+            {depute.nom[0]}
+          </Avatar>
+          <Box>
+            <Typography variant="h1" fontWeight="bold">
+              {depute.prenom} {depute.nom}
+            </Typography>
+
+            {circonscription && (
+              <Typography variant="body1" fontWeight="light">
+                {circonscription.departement} ({circonscription.numDepartement})
+                circonscription n°{circonscription.numCirco}
+                {circonscription.dateFin !== null && (
+                  <>
+                    <br />
+                    Fin de mandat le{" "}
+                    {new Date(circonscription.dateFin).toLocaleDateString()}
+                  </>
+                )}
+              </Typography>
+            )}
+
+            {group && (
+              // Deputes sans mandat n'ont plus d'organe associé
+              <Box
+                sx={{
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                  mt: 1,
+                }}
+              >
+                <CircleDiv color={group.couleurAssociee} />{" "}
+                <Typography sx={{ ml: 1 }} variant="body1" fontWeight="light">
+                  {group.libelle} ({group.libelleAbrev})
+                </Typography>
+              </Box>
+            )}
+          </Box>
+        </Box>
+      </Stack>
+      <Container
+        sx={{
+          pt: 3,
+          display: "flex",
+          flexDirection: {
+            xs: "column",
+            md: "row",
+          },
+          gap: 5,
+        }}
+      >
+        <Stack spacing={3} useFlexGap flex={2}>
+          <InfoPersonelles mandats={mandats ?? []} depute={depute} />
+          <Mandats mandats={mandasEnCours ?? []} />
+          <Contacts adresses={adresses ?? []} />
+        </Stack>
+
+        <Stack spacing={3} flex={5} sx={{ minWidth: 0 }}>
+          <Tabs slug={params.slug} />
+          {children}
+        </Stack>
+      </Container>
+
+      {/* <pre>{JSON.stringify(depute, null, 2)}</pre>
+      <pre>{JSON.stringify(group, null, 2)}</pre>
+      <pre>{JSON.stringify(adresses, null, 2)}</pre> 
+      <pre>{JSON.stringify(mandasEnCours, null, 2)}</pre>*/}
+    </Box>
+  );
+}