Merge pull request #36 from alexfauquette/amendements

Ajouter le header dans les amendements

components/folders/AdditionalInfoCard.tsx

@@ -8,20 +8,25 @@ import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
-
+import MuiLink from "@mui/material/Link";
 import { DeputyPreview } from "./DeputyPreview";
 import InfoIcon from "@/icons/InfoIcon";
 import { DossierData } from "@/repository/database";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import DeputeCard from "./DeputeCard";
 
 export const AdditionalInfoCard = ({
   amendementCount,
   documents,
   coSignatairesIds,
   acteurs,
+  organes,
 }: Pick<
   DossierData,
-  "amendementCount" | "documents" | "coSignatairesIds" | "acteurs"
+  "amendementCount" | "documents" | "coSignatairesIds" | "acteurs" | "organes"
 >) => {
+  const params = useParams<{ legislature: string; id: string }>();
   const [fullCosignataires, setFullCosignataires] = React.useState(false);
 
   const amendements = Object.values(documents)
@@ -56,9 +61,14 @@ export const AdditionalInfoCard = ({
                     <Typography variant="body2" fontWeight="bold">
                       {count} amendements
                     </Typography>
-                    <Typography variant="body2" fontWeight="light">
+                    <MuiLink
+                      variant="body2"
+                      fontWeight="light"
+                      component={Link}
+                      href={`/${params.legislature}/dossier/${params.id}/amendement?document=${uid}`}
+                    >
                       {titre}
-                    </Typography>
+                    </MuiLink>
                   </div>
                 ))}
               </Stack>
@@ -75,9 +85,27 @@ export const AdditionalInfoCard = ({
               </Stack>
               {coSignatairesIds
                 ?.slice(0, fullCosignataires ? coSignatairesIds.length : 3)
-                ?.map((id) => (
-                  <DeputyPreview key={id} acteur={acteurs[id]} />
-                ))}
+                ?.map((id) => {
+                  const { prenom, nom, slug, deputeGroupeParlementaireUid } =
+                    acteurs[id];
+
+                  const group = organes[deputeGroupeParlementaireUid];
+                  return (
+                    <DeputeCard
+                      key={id}
+                      prenom={prenom}
+                      nom={nom}
+                      slug={slug}
+                      group={
+                        group && {
+                          fullName: "",
+                          shortName: group.libelleAbrev,
+                          color: group.couleurAssociee,
+                        }
+                      }
+                    />
+                  );
+                })}
               {!fullCosignataires && (
                 <Button
                   fullWidth

components/folders/AmendementTab/AmendementCard.tsx

@@ -10,6 +10,7 @@ import AccordionSummary from "@mui/material/AccordionSummary";
 
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import StatusChip from "@/components/StatusChip";
+import DeputeCard from "../DeputeCard";
 
 function getStatus(label: string) {
   switch (label) {
@@ -46,7 +47,9 @@ export default function AmendementCard(props: Amendement) {
     prenom,
     nom,
     uid,
-    ...other
+    group_color,
+    group_libelle,
+    group_libelle_short,
   } = props;
 
   // TODO: utiliser la base cosignataires amendement pour avoir le nombre et les noms
@@ -68,12 +71,22 @@ export default function AmendementCard(props: Amendement) {
       >
         <Stack
           direction="row"
-          justifyContent="space-between"
+          alignItems="center"
+          spacing={1}
           sx={{ width: "100%", mr: 2 }}
         >
-          <span>
-            {prenom} {nom}
-          </span>
+          <DeputeCard
+            prenom={prenom}
+            nom={nom}
+            group={{
+              fullName: group_libelle,
+              shortName: "",
+              color: group_color,
+            }}
+            smallGroupColor
+            sx={{ flexGrow: 1 }}
+          />
+
           <StatusChip
             size="small"
             label={sortAmendement || etatLibelle}

components/folders/AmendementTab/index.tsx

@@ -12,6 +12,7 @@ import { Filter } from "./Filter";
 import { useFilterSearch } from "./useFilter";
 import AmendementList from "./AmendementList";
 import { Amendement, Acteur } from "@/repository/types";
+import { Typography } from "@mui/material";
 
 export type AmendementTabProps = Pick<
   DossierData,
@@ -59,15 +60,18 @@ export const AmendementTab = ({
           />
         </FilterContainer>
       </Stack>
-      <Box flex={8} sx={{ minWidth: 0 }}>
+      <Stack spacing={3} useFlexGap flex={8} sx={{ minWidth: 0 }}>
+        <Typography variant="h2" fontWeight="bold" fontFamily="Raleway">
+          {amendements.length} Amendements
+        </Typography>
         <AmendementList
           amendements={amendements}
           numero={numero}
           selectedDocument={document}
           depute={depute}
           status={status}
         />
-      </Box>
+      </Stack>
     </Container>
   );
 };

components/folders/CommiteeCard.tsx

@@ -10,6 +10,7 @@ import { DeputyPreview } from "@/components/folders/DeputyPreview";
 import InfoIcon from "@/icons/InfoIcon";
 import { Acteur, Organe } from "@/repository/types";
 import { DossierData } from "@/repository/database";
+import DeputeCard from "./DeputeCard";
 
 export const CommiteeCard = ({
   commissionFondId,
@@ -75,9 +76,26 @@ export const CommiteeCard = ({
               <Typography variant="body2" fontWeight="light" pb={1}>
                 Rapporteur
               </Typography>
-              {rapporteursFond.map((acteur) => (
-                <DeputyPreview acteur={acteur} key={acteur.uid} />
-              ))}
+              {rapporteursFond.map((acteur) => {
+                const { prenom, nom, slug, deputeGroupeParlementaireUid } =
+                  acteur;
+                const group = organes[deputeGroupeParlementaireUid];
+                return (
+                  <DeputeCard
+                    key={acteur.uid}
+                    prenom={prenom}
+                    nom={nom}
+                    slug={slug}
+                    group={
+                      group && {
+                        fullName: "",
+                        shortName: group.libelleAbrev,
+                        color: group.couleurAssociee,
+                      }
+                    }
+                  />
+                );
+              })}
             </div>
           )}
         </Stack>

components/folders/DeputeCard.tsx

@@ -3,10 +3,13 @@ import * as React from "react";
 import Avatar from "@mui/material/Avatar";
 import Box, { BoxProps } from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
+import Stack from "@mui/material/Stack";
+import Tooltip from "@mui/material/Tooltip";
+import MuiLink from "@mui/material/Link";
 
 import CompareArrowsSharpIcon from "@mui/icons-material/CompareArrowsSharp";
-import { Stack, Tooltip } from "@mui/material";
 import CircleDiv from "@/icons/CircleDiv";
+import Link from "next/link";
 
 type DeputeCardProps<RootComponent extends React.ElementType = "div"> = {
   prenom: string;
@@ -17,6 +20,7 @@ type DeputeCardProps<RootComponent extends React.ElementType = "div"> = {
     fullName: string;
     shortName: string;
   };
+  smallGroupColor?: boolean;
   vote?: "pour" | "contre" | "nonVotant" | "abstention";
   groupPosition?: "pour" | "contre" | "abstention";
 } & BoxProps<RootComponent>;
@@ -27,7 +31,9 @@ export default function DeputeCard<RootComponent extends React.ElementType>(
   const {
     prenom,
     nom,
+    slug,
     group,
+    smallGroupColor,
     vote,
     groupPosition,
     sx,
@@ -65,9 +71,21 @@ export default function DeputeCard<RootComponent extends React.ElementType>(
             minWidth: 0,
           }}
         >
-          <Typography variant="body2" fontWeight="bold">
-            {prenom} {nom}
-          </Typography>
+          {slug ? (
+            <MuiLink
+              variant="body2"
+              fontWeight="bold"
+              underline="hover"
+              component={Link}
+              href={`/depute/${slug}`}
+            >
+              {prenom} {nom}
+            </MuiLink>
+          ) : (
+            <Typography variant="body2" fontWeight="bold">
+              {prenom} {nom}
+            </Typography>
+          )}
           {secondaryText && (
             <Typography variant="body2" fontWeight="light">
               {secondaryText}
@@ -76,7 +94,10 @@ export default function DeputeCard<RootComponent extends React.ElementType>(
           {group && (
             <Tooltip title={group.fullName}>
               <Box sx={{ display: "flex", alignItems: "center" }}>
-                <CircleDiv color={group.color} style={{ minWidth: 16 }} />
+                <CircleDiv
+                  color={group.color}
+                  size={smallGroupColor ? 10 : 16}
+                />
                 <Typography
                   sx={{
                     ml: 0.5,
@@ -94,7 +115,7 @@ export default function DeputeCard<RootComponent extends React.ElementType>(
                       marginRight: 4,
                     }}
                   >
-                    {group.shortName && `${group.shortName}:`}
+                    {group.shortName} {group.shortName && group.fullName && ":"}
                   </span>
                   <span
                     style={{

components/folders/PreviewTab.tsx

@@ -57,6 +57,7 @@ export const PreviewTab = ({ dossier }: PreviewTabProps) => {
           documents={documents}
           coSignatairesIds={coSignatairesIds}
           acteurs={acteurs}
+          organes={organes}
         />
         <LegislativeDocumentsCard documents={documents} />
       </Stack>

repository/database.ts

@@ -173,16 +173,6 @@ export async function getDossier(
       documents[doc.uid] = doc;
     });
 
-    const organesData = await db
-      .select("*")
-      .from("Organe")
-      .whereIn("uid", Array.from(organesIds));
-
-    const organes: Record<string, Organe> = {};
-    organesData.forEach((doc) => {
-      organes[doc.uid] = doc;
-    });
-
     const coSignatairesIds = (
       await db
         .select("acteurRefUid")
@@ -211,6 +201,22 @@ export async function getDossier(
       acteurs[acteur.uid] = acteur;
     });
 
+    acteursData.forEach((acteur: Acteur) => {
+      if (acteur.deputeGroupeParlementaireUid) {
+        organesIds.add(acteur.deputeGroupeParlementaireUid);
+      }
+    });
+
+    const organesData = await db
+      .select("*")
+      .from("Organe")
+      .whereIn("uid", Array.from(organesIds));
+
+    const organes: Record<string, Organe> = {};
+    organesData.forEach((doc) => {
+      organes[doc.uid] = doc;
+    });
+
     return {
       dossier,
       commissionFondId,
@@ -279,14 +285,33 @@ export async function getDossierAmendements(
       .whereIn("texteLegislatifRefUid", Array.from(documentsIds))
       .leftJoin(
         function () {
-          this.select(["uid as acteur_uid", "prenom", "nom"])
+          this.select([
+            "uid as acteur_uid",
+            "prenom",
+            "nom",
+            "deputeGroupeParlementaireUid",
+          ])
             .from("Acteur")
             .as("acteur");
         },
         "Amendement.acteurRefUid",
         "acteur.acteur_uid"
       )
-      .options({ nestTables: true });
+      .leftJoin(
+        function () {
+          this.select([
+            "uid as organe_uid",
+            "codeType",
+            "libelle as group_libelle",
+            "libelleAbrege as group_libelle_short",
+            "couleurAssociee as group_color",
+          ])
+            .from("Organe")
+            .as("organe");
+        },
+        "acteur.deputeGroupeParlementaireUid",
+        "organe.organe_uid"
+      );
 
     return amendements;
   } catch (error) {