wip: style convention summary page

gip-inclusion · Nov 13, 2024 · 23f3e51 · 23f3e51
1 parent 0ead703
commit 23f3e51
Show file tree

Hide file tree

Showing 8 changed files with 576 additions and 503 deletions.
diff --git a/front/src/app/components/admin/conventions/ConventionValidationDetails.tsx b/front/src/app/components/admin/conventions/ConventionValidationDetails.tsx
@@ -1,4 +1,5 @@
 import { fr } from "@codegouvfr/react-dsfr";
+import { cx } from "@codegouvfr/react-dsfr/fr/cx";
 import React, { ReactNode, useState } from "react";
 import { ConventionRenewedInformations } from "react-design-system";
 import { path, ConventionReadDto, isConventionRenewed } from "shared";
@@ -62,6 +63,58 @@ export const ConventionValidationDetails = ({
   );
 };
 
+const displaySubSectionContent = (
+  subSection: RowFields,
+  convention: ConventionReadDto,
+) => {
+  const buildContent = (field: ColField): ReactNode => {
+    let value: React.ReactNode;
+
+    if (!field?.key) return;
+
+    value = path(field.key, convention) as string;
+
+    if (field.getValue) {
+      value = (
+        <>
+          {field.getValue?.(convention)}
+          {field.copyButton?.(convention)}
+        </>
+      );
+    }
+
+    return (
+      <>
+        <div className={fr.cx("fr-text--xs", "fr-m-0")}>{field.colLabel}</div>
+        <div
+          style={{
+            fontWeight: "700",
+          }}
+        >
+          {value}
+        </div>
+      </>
+    );
+  };
+
+  return (
+    <div className={fr.cx("fr-grid-row")}>
+      {subSection.fields
+        .filter((field) => !!field)
+        .map((field) => {
+          return (
+            <section
+              className={fr.cx("fr-col-12", "fr-col-sm-6", "fr-mb-2w")}
+              key={field.key}
+            >
+              {buildContent(field)}
+            </section>
+          );
+        })}
+    </div>
+  );
+};
+
 export const ConventionValidationSection = ({
   convention,
   list,
@@ -71,6 +124,64 @@ export const ConventionValidationSection = ({
   list: FieldsAndTitle;
   index: number;
 }) => {
+  const relevantSection = list.rowFields.filter(
+    (row) =>
+      row.fields.filter((field) => {
+        if (!field) return false;
+
+        const pathValue = path(field.key, convention);
+        const fieldValue = field?.getValue?.(convention);
+
+        if (pathValue === undefined) return false;
+        return fieldValue ?? pathValue;
+      }).length,
+  );
+
+  console.log({ list, relevantFields: relevantSection });
+  return (
+    <section
+      className={fr.cx("fr-mb-2w", "fr-p-2w")}
+      style={{
+        border: "1px solid var(--grey-900-175)",
+        borderRadius: "5px",
+      }}
+    >
+      <h2
+        className={fr.cx("fr-mb-2w", "fr-pb-1w")}
+        style={{
+          color: "var(--text-title-blue-france)",
+          borderBottom: "1px solid var(--grey-900-175)",
+        }}
+      >
+        {list.listTitle}
+      </h2>
+      <div className={fr.cx("fr-grid-row")}>
+        {relevantSection.map((subSection) => {
+          return (
+            <section
+              className={fr.cx("fr-col-12", "fr-col-md-6")}
+              key={subSection.title}
+            >
+              <h3>{subSection.title}</h3>
+              {displaySubSectionContent(subSection, convention)}
+            </section>
+          );
+        })}
+      </div>
+    </section>
+  );
+};
+
+export const ConventionValidationSectionOld = ({
+  convention,
+  list,
+  index,
+}: {
+  convention: ConventionReadDto;
+  list: FieldsAndTitle;
+  index: number;
+}) => {
+  console.log({ list });
   const { cx } = useStyles();
   const [markedAsRead, setMarkedAsRead] = useState<boolean>(false);