explore amendements

app/[legislature]/dossier/[id]/[tab]/page.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { PreviewTab } from "@/components/folders/PreviewTab";
+import { AmendementTab } from "@/components/folders/AmendementTab";
 import { DebateTab } from "@/components/folders/DebateTab";
 import { getDossier } from "@/repository/database";
 
@@ -26,7 +27,7 @@ export default async function Page({
       return <DebateTab />;
 
     case "amendement":
-      return <p>Amendements</p>;
+      return <AmendementTab dossier={dossier} />;
 
     case "votes":
       return <p>Votes</p>;

components/folders/AmendementTab/AmendementCard.tsx

@@ -0,0 +1,87 @@
+"use client";
+import * as React from "react";
+
+import { Amendement } from "@/repository/types";
+import { Box } from "@mui/material";
+import Stack from "@mui/material/Stack";
+
+export default function AmendementCard(props: Amendement) {
+  const {
+    dateDepot,
+    dateSort,
+    sortAmendement,
+    etatCode,
+    etatLibelle,
+    sousEtatCode,
+    sousEtatLibelle,
+    dispositif,
+    exposeSommaire,
+    urlDivisionTexteVise,
+    signatairesLibelle,
+    ...other
+  } = props;
+
+  const [showMore, setShowMore] = React.useState(false);
+  return (
+    <Stack direction="column">
+      <Stack direction="row" justifyContent="space-between">
+        <span>Depte</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 }} />
+      </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>
+  );
+}

components/folders/AmendementTab/index.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import React from "react";
+
+import Container from "@mui/material/Container";
+import Stack from "@mui/material/Stack";
+
+import { DossierData } from "@/repository/database";
+import AmendementCard from "./AmendementCard";
+import { Divider } from "@mui/material";
+
+type AmendementTabProps = {
+  dossier?: DossierData;
+};
+
+export const AmendementTab = ({ dossier }: AmendementTabProps) => {
+  const {
+    commissionFondId,
+    commissionAvisId,
+    organes = {},
+    rapporteursFondIds,
+    coSignatairesIds,
+    acteurs = {},
+    acts = [],
+    documents = [],
+    amendementCount = {},
+    amendements = [],
+  } = dossier ?? {};
+
+  return (
+    <Container
+      sx={{
+        pt: 3,
+        display: "flex",
+        flexDirection: {
+          xs: "column-reverse",
+          md: "row",
+        },
+        gap: 5,
+      }}
+    >
+      <Stack>
+        {amendements.slice(0, 10).map((amendement) => (
+          <React.Fragment key={amendement.uid}>
+            <AmendementCard {...amendement} />
+            <Divider />
+          </React.Fragment>
+        ))}
+      </Stack>
+    </Container>
+  );
+};

components/folders/CardLayout.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 
-import { CardHeader, CardHeaderProps, Theme, useTheme } from "@mui/material";
+import { CardHeader, CardHeaderProps } from "@mui/material";
 
 export interface CardLayoutProps
   extends Pick<CardHeaderProps, "title" | "action"> {

repository/database.ts

@@ -7,21 +7,22 @@ import {
   Organe,
   Acteur,
   Document as DocumentData,
+  Amendement,
 } from "./types";
 
 /**
  * So Nextjs does not create too many db connections.
  *  https://dev.to/noclat/fixing-too-many-connections-errors-with-database-clients-stacking-in-dev-mode-with-next-js-3kpm
  */
 function registerService<T>(name: string, initFn: () => T): T {
-  if (process.env.NODE_ENV === 'development') {
+  if (process.env.NODE_ENV === "development") {
     if (!(name in global)) {
       (global as any)[name] = initFn();
     }
     return (global as any)[name];
   }
   return initFn();
-};
+}
 
 const db = registerService("database", () => knex(config.development));
 
@@ -81,6 +82,7 @@ export type DossierData = {
    * Map les document id avec leur nombre d'amendement.
    */
   amendementCount: Record<string, number>;
+  amendements: Amendement[];
   acts: ActeLegislatif[];
   documents: Record<string, DocumentData>;
   organes: Record<string, Organe>;
@@ -208,6 +210,11 @@ export async function getDossier(
       amendementCount[texteLegislatifRefUid] = count;
     });
 
+    const amendements = await db
+      .select("*")
+      .from("Amendement")
+      .whereIn("texteLegislatifRefUid", Array.from(documentsIds));
+
     return {
       dossier,
       commissionFondId,
@@ -219,6 +226,7 @@ export async function getDossier(
       organes,
       acteurs,
       amendementCount,
+      amendements,
     };
   } catch (error) {
     console.error("Error fetching rows from Dossier:", error);