From 410387051f6d5fd3be1f131aa1670e8e6bf77d37 Mon Sep 17 00:00:00 2001
From: Alexandre Garbe <alexandre.garbe@gmail.com>
Date: Tue, 20 Aug 2024 15:59:59 +0200
Subject: [PATCH] feat(admin): added accordeon to "comptes collaborateurs"
 section of certification authority structure summary admin page

---
 .../page.tsx                                  | 65 +++++++++++--------
 1 file changed, 37 insertions(+), 28 deletions(-)

diff --git a/packages/reva-admin-react/src/app/(admin)/certification-authority-structures/[certificationAuthorityStructureId]/page.tsx b/packages/reva-admin-react/src/app/(admin)/certification-authority-structures/[certificationAuthorityStructureId]/page.tsx
index 81acd3a29..0950946e6 100644
--- a/packages/reva-admin-react/src/app/(admin)/certification-authority-structures/[certificationAuthorityStructureId]/page.tsx
+++ b/packages/reva-admin-react/src/app/(admin)/certification-authority-structures/[certificationAuthorityStructureId]/page.tsx
@@ -4,6 +4,7 @@ import CandidacySectionCard from "@/components/card/candidacy-section-card/Candi
 import { DefaultCandidacySectionCard } from "@/components/card/candidacy-section-card/DefaultCandidacySectionCard";
 import { useGraphQlClient } from "@/components/graphql/graphql-client/GraphqlClient";
 import { graphql } from "@/graphql/generated";
+import Accordion from "@codegouvfr/react-dsfr/Accordion";
 import Badge from "@codegouvfr/react-dsfr/Badge";
 import Button from "@codegouvfr/react-dsfr/Button";
 import { useQuery } from "@tanstack/react-query";
@@ -142,35 +143,43 @@ const CertificationAuthorityStructurePage = () => {
               titleIconClass="fr-icon-team-fill"
             >
               <ul className="list-none">
-                {certificationAuthorityStructure.certificationAuthorities.map(
-                  (certificationAuthority) =>
-                    certificationAuthority.certificationAuthorityLocalAccounts.map(
-                      (cala) => (
-                        <li
-                          key={cala.id}
-                          className="flex items-center justify-between pt-4 pb-3 border-neutral-300 border-t last:border-b"
-                        >
-                          <div className="flex flex-col">
-                            <span className="font-bold">
-                              {cala.account.firstname || ""}{" "}
-                              {cala.account.lastname}
-                            </span>
-                            <span>{cala.account.email}</span>
-                          </div>
-                          <span>
-                            <Button
-                              priority="tertiary"
-                              linkProps={{
-                                href: `/certification-authority-structures/${certificationAuthorityStructureId}/comptes-collaborateurs/${cala.id}`,
-                              }}
+                {certificationAuthorityStructure.certificationAuthorities
+                  .filter((ca) => ca.certificationAuthorityLocalAccounts.length)
+                  .map((certificationAuthority) => (
+                    <li key={certificationAuthority.id}>
+                      <Accordion
+                        label={certificationAuthority.label}
+                        className="before:shadow-none"
+                      >
+                        {certificationAuthority.certificationAuthorityLocalAccounts.map(
+                          (cala) => (
+                            <li
+                              key={cala.id}
+                              className="flex items-center justify-between pt-4 pb-3 border-neutral-300 first:border-t border-b"
                             >
-                              Modifier
-                            </Button>
-                          </span>
-                        </li>
-                      ),
-                    ),
-                )}
+                              <div className="flex flex-col">
+                                <span className="font-bold">
+                                  {cala.account.firstname || ""}{" "}
+                                  {cala.account.lastname}
+                                </span>
+                                <span>{cala.account.email}</span>
+                              </div>
+                              <span>
+                                <Button
+                                  priority="tertiary"
+                                  linkProps={{
+                                    href: `/certification-authority-structures/${certificationAuthorityStructureId}/comptes-collaborateurs/${cala.id}`,
+                                  }}
+                                >
+                                  Visualiser
+                                </Button>
+                              </span>
+                            </li>
+                          ),
+                        )}
+                      </Accordion>
+                    </li>
+                  ))}
               </ul>
             </CandidacySectionCard>
           </div>