From 0a32529c6e1fdf9375a1a8ebc3a697a17fe1ff02 Mon Sep 17 00:00:00 2001
From: Alexandre Garbe <alexandre.garbe@gmail.com>
Date: Fri, 15 Nov 2024 12:21:30 +0100
Subject: [PATCH] feat(admin): added an "add certification bloc" link to the
 certification v2 page

---
 .../[certificationId]/page.tsx                | 227 ++++++++++--------
 1 file changed, 122 insertions(+), 105 deletions(-)

diff --git a/packages/reva-admin-react/src/app/(admin)/certifications-v2/[certificationId]/page.tsx b/packages/reva-admin-react/src/app/(admin)/certifications-v2/[certificationId]/page.tsx
index 1184635e8..388c1d45a 100644
--- a/packages/reva-admin-react/src/app/(admin)/certifications-v2/[certificationId]/page.tsx
+++ b/packages/reva-admin-react/src/app/(admin)/certifications-v2/[certificationId]/page.tsx
@@ -2,11 +2,12 @@
 import { EnhancedSectionCard } from "@/components/card/enhanced-section-card/EnhancedSectionCard";
 import { Button } from "@codegouvfr/react-dsfr/Button";
 import { useUpdateCertificationPage } from "./updateCertification.hook";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { ReactNode } from "react";
 import { format } from "date-fns";
 import { Accordion } from "@codegouvfr/react-dsfr/Accordion";
 import Tag from "@codegouvfr/react-dsfr/Tag";
+import { SectionCard } from "@/components/card/section-card/SectionCard";
 
 type CertificationForPage = Exclude<
   ReturnType<typeof useUpdateCertificationPage>["certification"],
@@ -29,116 +30,132 @@ const PageContent = ({
   certification,
 }: {
   certification: CertificationForPage;
-}) => (
-  <div data-test="update-certification-page">
-    <h1>{certification.label}</h1>
-    <p className="mb-12 text-xl">
-      Pour faciliter l’ajout, renseignez le code RNCP pour pré-remplir le
-      document avec les informations de France compétences et du Formacode.
-      Ensuite, vous pourrez renseigner une structure certificatrice et (à
-      minima) un gestionnaire des candidatures.
-    </p>
-    <div className="flex flex-col gap-8">
-      <EnhancedSectionCard
-        data-test="certification-description-card"
-        title="Descriptif de la certification"
-        status="COMPLETED"
-        isEditable
-        titleIconClass="fr-icon-award-fill"
-      >
-        <div className="flex flex-col gap-4">
-          <Info title="Code RNCP">{certification.codeRncp}</Info>
-          <h3 className="mb-0">Descriptif de la certification</h3>
-          <Info title="Intitulé">{certification.label}</Info>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <Info title="Niveau">{certification.degree.label}</Info>
-            <Info title="Type">{certification.typeDiplome.label}</Info>
-            <Info title="Date d’échéance">
-              {certification.rncpExpiresAt
-                ? format(certification.rncpExpiresAt, "dd/MM/yyyy")
-                : ""}
-            </Info>
-            <Info title="Date de dernière delivrance">
-              {certification.rncpDeliveryDeadline
-                ? format(certification.rncpDeliveryDeadline, "dd/MM/yyyy")
-                : ""}
-            </Info>
-          </div>
+}) => {
+  const router = useRouter();
+  return (
+    <div data-test="update-certification-page">
+      <h1>{certification.label}</h1>
+      <p className="mb-12 text-xl">
+        Pour faciliter l’ajout, renseignez le code RNCP pour pré-remplir le
+        document avec les informations de France compétences et du Formacode.
+        Ensuite, vous pourrez renseigner une structure certificatrice et (à
+        minima) un gestionnaire des candidatures.
+      </p>
+      <div className="flex flex-col gap-8">
+        <EnhancedSectionCard
+          data-test="certification-description-card"
+          title="Descriptif de la certification"
+          status="COMPLETED"
+          isEditable
+          titleIconClass="fr-icon-award-fill"
+        >
+          <div className="flex flex-col gap-4">
+            <Info title="Code RNCP">{certification.codeRncp}</Info>
+            <h3 className="mb-0">Descriptif de la certification</h3>
+            <Info title="Intitulé">{certification.label}</Info>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <Info title="Niveau">{certification.degree.label}</Info>
+              <Info title="Type">{certification.typeDiplome.label}</Info>
+              <Info title="Date d’échéance">
+                {certification.rncpExpiresAt
+                  ? format(certification.rncpExpiresAt, "dd/MM/yyyy")
+                  : ""}
+              </Info>
+              <Info title="Date de dernière delivrance">
+                {certification.rncpDeliveryDeadline
+                  ? format(certification.rncpDeliveryDeadline, "dd/MM/yyyy")
+                  : ""}
+              </Info>
+            </div>
 
-          <h3 className="mb-0">Domaines et sous-domaines du Formacode </h3>
+            <h3 className="mb-0">Domaines et sous-domaines du Formacode </h3>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            {certification.domains.length == 0 && (
-              <div>Aucun formacode associé</div>
-            )}
-            {certification.domains.map((domain) => (
-              <div key={domain.id} className="flex flex-col gap-2">
-                <div>{domain.label}</div>
-                {domain.children.map((subDomain) => (
-                  <Tag key={subDomain.id}>
-                    {`${subDomain.code} ${subDomain.label}`}
-                  </Tag>
-                ))}
-              </div>
-            ))}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {certification.domains.length == 0 && (
+                <div>Aucun formacode associé</div>
+              )}
+              {certification.domains.map((domain) => (
+                <div key={domain.id} className="flex flex-col gap-2">
+                  <div>{domain.label}</div>
+                  {domain.children.map((subDomain) => (
+                    <Tag key={subDomain.id}>
+                      {`${subDomain.code} ${subDomain.label}`}
+                    </Tag>
+                  ))}
+                </div>
+              ))}
+            </div>
           </div>
-        </div>
-      </EnhancedSectionCard>
-      <EnhancedSectionCard
-        title="Blocs de compétences"
-        titleIconClass="fr-icon-survey-fill"
-      >
-        <p>
-          La modification de bloc est possible, mais doit rester exceptionnelle.
-          Merci de l’utiliser uniquement en cas d’erreur importante à modifier
-          (exemple : erreur sur l’intitulé).
-        </p>
+        </EnhancedSectionCard>
+        <SectionCard
+          title="Blocs de compétences"
+          titleIconClass="fr-icon-survey-fill"
+          hasButton
+          buttonPriority="tertiary no outline"
+          buttonTitle="Ajouter un bloc de compétences"
+          buttonIconId="fr-icon-add-line"
+          buttonOnClick={() =>
+            router.push(
+              `/certifications-v2/${certification.id}/bloc-competence/add`,
+            )
+          }
+        >
+          <p>
+            La modification de bloc est possible, mais doit rester
+            exceptionnelle. Merci de l’utiliser uniquement en cas d’erreur
+            importante à modifier (exemple : erreur sur l’intitulé).
+          </p>
 
-        <ul className="pl-0" data-test="competence-blocs-list">
-          {certification.competenceBlocs.map((bloc) => (
-            <li
-              data-test="competence-bloc"
-              className="flex items-start justify-between gap-6"
-              key={bloc.id}
-            >
-              <Accordion label={`${bloc.code} - ${bloc.label}`} defaultExpanded>
-                <ul data-test="competences-list">
-                  {bloc.competences.map((competence) => (
-                    <li key={competence.id}>{competence.label}</li>
-                  ))}
-                </ul>
-              </Accordion>
-              <Button
-                data-test="update-competence-bloc-button"
-                priority="tertiary no outline"
-                linkProps={{
-                  href: `/certifications-v2/${certification.id}/bloc-competence/${bloc.id}`,
-                }}
+          <ul className="pl-0" data-test="competence-blocs-list">
+            {certification.competenceBlocs.map((bloc) => (
+              <li
+                data-test="competence-bloc"
+                className="flex items-start justify-between gap-6"
+                key={bloc.id}
               >
-                Modifier
-              </Button>
-            </li>
-          ))}
-        </ul>
-      </EnhancedSectionCard>
+                <Accordion
+                  label={`${bloc.code} - ${bloc.label}`}
+                  defaultExpanded
+                >
+                  <ul data-test="competences-list">
+                    {bloc.competences.map((competence) => (
+                      <li key={competence.id}>{competence.label}</li>
+                    ))}
+                  </ul>
+                </Accordion>
+                <Button
+                  data-test="update-competence-bloc-button"
+                  priority="tertiary no outline"
+                  linkProps={{
+                    href: `/certifications-v2/${certification.id}/bloc-competence/${bloc.id}`,
+                  }}
+                >
+                  Modifier
+                </Button>
+              </li>
+            ))}
+          </ul>
+        </SectionCard>
+      </div>
+      <hr className="mt-8" />
+      <h2>Validation par le responsable des certifications</h2>
+      <p>
+        Lorsque la certification est prête, vous devez l’envoyer au responsable
+        des certifications pour validation. Si aucun responsable des
+        certifications n’existe pour le moment et qu’aucune validation n’est
+        possible, elle pourra être visible des AAP mais pas encore des
+        candidats.
+      </p>
+      <hr className="mb-6" />
+      <Button
+        priority="secondary"
+        linkProps={{ href: "/certifications-v2", target: "_self" }}
+      >
+        Retour
+      </Button>
     </div>
-    <hr className="mt-8" />
-    <h2>Validation par le responsable des certifications</h2>
-    <p>
-      Lorsque la certification est prête, vous devez l’envoyer au responsable
-      des certifications pour validation. Si aucun responsable des
-      certifications n’existe pour le moment et qu’aucune validation n’est
-      possible, elle pourra être visible des AAP mais pas encore des candidats.
-    </p>
-    <hr className="mb-6" />
-    <Button
-      priority="secondary"
-      linkProps={{ href: "/certifications-v2", target: "_self" }}
-    >
-      Retour
-    </Button>
-  </div>
-);
+  );
+};
 
 const Info = ({
   title,