feat(admin-react): display bloc de competence details in accordion

SocialGouv · Jul 3, 2024 · b47eb91 · b47eb91
1 parent f9f05ec
commit b47eb91
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 27 deletions.
diff --git a/...]/feasibility-aap/_components/DffSummary/_components/CertificationCompetenceAccordion.tsx b/...]/feasibility-aap/_components/DffSummary/_components/CertificationCompetenceAccordion.tsx
@@ -22,15 +22,18 @@ const getTextFromCompetence = ({
 export const CertificationCompetenceAccordion = ({
   competenceBloc,
   competenceDetails,
+  defaultExpanded = false,
 }: {
   competenceBloc: CertificationCompetenceBloc;
   competenceDetails: CertificationCompetenceDetails[];
+  defaultExpanded?: boolean;
 }) => {
+  const label = competenceBloc.code
+    ? `${competenceBloc.code} - ${competenceBloc.label}`
+    : competenceBloc.label;
+
   return (
-    <Accordion
-      label={`${competenceBloc.code} - ${competenceBloc.label}`}
-      defaultExpanded
-    >
+    <Accordion label={label} defaultExpanded={defaultExpanded}>
       {competenceBloc.competences.map((competence) => (
         <p key={competence.id}>
           <span className="font-bold">{competence.label} :</span>

diff --git a/...[candidacyId]/feasibility-aap/_components/DffSummary/_components/CertificationSection.tsx b/...[candidacyId]/feasibility-aap/_components/DffSummary/_components/CertificationSection.tsx
@@ -76,6 +76,7 @@ export default function CertificationSection({
         {blocsDeCompetences.map((certificationCompetenceBloc) => (
           <CertificationCompetenceAccordion
             key={certificationCompetenceBloc.id}
+            defaultExpanded
             competenceBloc={certificationCompetenceBloc}
             competenceDetails={certificationCompetenceDetails}
           />

diff --git a/...-react/src/app/(aap)/candidacies/[candidacyId]/feasibility-aap/aapFeasibilityPageLogic.ts b/...-react/src/app/(aap)/candidacies/[candidacyId]/feasibility-aap/aapFeasibilityPageLogic.ts
@@ -31,6 +31,17 @@ const getCandidacyById = graphql(`
             id
             code
             label
+            competences {
+              id
+              label
+            }
+          }
+        }
+        certificationCompetenceDetails {
+          text
+          certificationCompetence {
+            id
+            label
           }
         }
         aapDecision

diff --git a/packages/reva-admin-react/src/app/(aap)/candidacies/[candidacyId]/feasibility-aap/page.tsx b/packages/reva-admin-react/src/app/(aap)/candidacies/[candidacyId]/feasibility-aap/page.tsx
@@ -20,6 +20,7 @@ import { PrerequisitesCard } from "./_components/PrerequisitesCard";
 import { SendFileCandidateSection } from "./_components/SendFileCandidateSection";
 import { SendFileCertificationAuthoritySection } from "./_components/SendFileCertificateurSection";
 import { SwornStatementCard } from "./_components/SwornStatementCard";
+import { CertificationCompetenceAccordion } from "@/app/(aap)/candidacies/[candidacyId]/feasibility-aap/_components/DffSummary/_components/CertificationCompetenceAccordion";
 
 const AapFeasibilityPage = () => {
   const { candidacyId } = useParams<{
@@ -66,30 +67,34 @@ const AapFeasibilityPage = () => {
               />
             }
           >
-            <ul className="list-none flex flex-col gap-2">
-              {dematerializedFeasibilityFile?.blocsDeCompetences?.map((bc) => (
-                <li
-                  key={bc.certificationCompetenceBloc.id}
-                  className="grid grid-cols-[1fr_120px] items-center"
-                >
-                  <span>
-                    {bc.certificationCompetenceBloc.code
-                      ? `${bc.certificationCompetenceBloc.code} - ${bc.certificationCompetenceBloc.label}`
-                      : bc.certificationCompetenceBloc.label}
-                  </span>
-                  <Button
-                    className="w-full"
-                    priority={bc.complete ? "secondary" : "primary"}
-                    linkProps={{
-                      href: `/candidacies/${candidacyId}/feasibility-aap/competencies-blocks/${bc.certificationCompetenceBloc.id}`,
-                    }}
+            <ul className="list-none flex flex-col">
+              {dematerializedFeasibilityFile?.blocsDeCompetences?.map(
+                (bloc) => (
+                  <li
+                    key={bloc.certificationCompetenceBloc.id}
+                    className="flex justify-between items-start pb-0 gap-6"
                   >
-                    <span className="mx-auto">
-                      {bc.complete ? "Modifier" : "Compléter"}
-                    </span>
-                  </Button>
-                </li>
-              ))}
+                    <CertificationCompetenceAccordion
+                      key={bloc.certificationCompetenceBloc.id}
+                      competenceBloc={bloc.certificationCompetenceBloc}
+                      competenceDetails={
+                        dematerializedFeasibilityFile?.certificationCompetenceDetails
+                      }
+                    />
+                    <Button
+                      className="w-[120px] mt-4 flex-none"
+                      priority={bloc.complete ? "secondary" : "primary"}
+                      linkProps={{
+                        href: `/candidacies/${candidacyId}/feasibility-aap/competencies-blocks/${bloc.certificationCompetenceBloc.id}`,
+                      }}
+                    >
+                      <span className="mx-auto">
+                        {bloc.complete ? "Modifier" : "Compléter"}
+                      </span>
+                    </Button>
+                  </li>
+                ),
+              )}
             </ul>
           </CandidacySectionCard>
           <PrerequisitesCard