feat(admin):frontend for registry managers to list and validate their certifications

Author: pierreavizou

packages/reva-admin-react/src/app/responsable-certifications/certifications.hooks.ts

@@ -0,0 +1,81 @@
+import { useGraphQlClient } from "@/components/graphql/graphql-client/GraphqlClient";
+import { graphql } from "@/graphql/generated";
+import { CertificationStatus } from "@/graphql/generated/graphql";
+import { useQuery } from "@tanstack/react-query";
+
+const getCertificationsQuery = graphql(`
+  query getCertificationsV2ForRegistryManager(
+    $offset: Int
+    $searchFilter: String
+    $status: CertificationStatus
+    $visible: Boolean
+  ) {
+    searchCertificationsV2ForRegistryManager(
+      limit: 10
+      offset: $offset
+      searchText: $searchFilter
+      status: $status
+      visible: $visible
+    ) {
+      rows {
+        id
+        label
+        codeRncp
+        status
+        visible
+        certificationAuthorityStructure {
+          label
+        }
+        expiresAt
+      }
+      info {
+        totalRows
+        totalPages
+        currentPage
+      }
+    }
+  }
+`);
+
+const RECORDS_PER_PAGE = 10;
+export const useCertifications = ({
+  searchFilter,
+  currentPage = 1,
+  status,
+  visible,
+}: {
+  searchFilter?: string;
+  currentPage?: number;
+  status?: CertificationStatus;
+  visible?: boolean;
+}) => {
+  const { graphqlClient } = useGraphQlClient();
+  console.log("visible", visible);
+  const {
+    data: getCertificationsResponse,
+    status: getCertificationsQueryStatus,
+  } = useQuery({
+    queryKey: [
+      "getCertificationsForRegistryManager",
+      searchFilter,
+      currentPage,
+      status,
+      visible,
+    ],
+    queryFn: () =>
+      graphqlClient.request(getCertificationsQuery, {
+        status: status as CertificationStatus,
+        visible,
+        searchFilter,
+        offset: (currentPage - 1) * RECORDS_PER_PAGE,
+      }),
+  });
+
+  const certificationPage =
+    getCertificationsResponse?.searchCertificationsV2ForRegistryManager;
+
+  return {
+    certificationPage,
+    getCertificationsQueryStatus,
+  };
+};

packages/reva-admin-react/src/app/responsable-certifications/certifications/layout.tsx renamed to packages/reva-admin-react/src/app/responsable-certifications/certifications/(list)/layout.tsx

@@ -1,72 +1,59 @@
 "use client";
-import SideMenu from "@codegouvfr/react-dsfr/SideMenu";
-import { usePathname, useSearchParams } from "next/navigation";
+import { CertificationStatus } from "@/graphql/generated/graphql";
+import SideMenu, { SideMenuProps } from "@codegouvfr/react-dsfr/SideMenu";
+import { useSearchParams } from "next/navigation";
 import { ReactNode } from "react";
 
 export default function CertificationsLayout({
   children,
 }: {
   children: ReactNode;
 }) {
-  const currentPathname = usePathname();
   const searchParams = useSearchParams();
 
+  const statusParam = searchParams.get("status") || undefined;
   const searchFilter = searchParams.get("search") || "";
+  const visibleParam = searchParams.get("visible") || undefined;
 
-  const hrefSideMenu = (path: string, category: string) => {
+  const hrefSideMenu = (status?: string, visible?: "true" | "false") => {
     const params = new URLSearchParams();
+    if (status) {
+      params.set("status", status);
+    }
+
+    if (visible) {
+      params.set("visible", visible);
+    }
+
     params.set("page", "1");
-    params.set("CATEGORY", category);
 
     if (searchFilter) {
       params.set("search", searchFilter);
     }
 
-    return `${path}/?${params.toString()}`;
+    return `/responsable-certifications/certifications/?${params.toString()}`;
   };
 
-  const menuItem = ({
-    text,
-    path,
-    category,
-    defaultMenuItem,
-  }: {
-    text: string;
-    path: string;
-    category: string;
-    defaultMenuItem?: boolean;
-  }) => ({
-    isActive:
-      (currentPathname.startsWith(path) &&
-        searchParams.get("CATEGORY") === category) ||
-      (!searchParams.get("CATEGORY") && defaultMenuItem),
+  const menuItem = (
+    text: string,
+    status?: CertificationStatus,
+    visible?: "true" | "false",
+  ): SideMenuProps.Item => ({
+    isActive: status === statusParam && visible === visibleParam,
     linkProps: {
-      href: hrefSideMenu(path, category),
+      href: hrefSideMenu(status, visible),
       target: "_self",
     },
     text,
   });
 
   const validatedManuItems = [
-    menuItem({
-      text: "Visibles",
-      path: "/responsable-certifications/certifications/",
-      category: "VISIBLE",
-    }),
-    menuItem({
-      text: "Invisibles",
-      path: "/responsable-certifications/certifications/",
-      category: "INVISIBLE",
-    }),
+    menuItem("Visibles", "VALIDE_PAR_CERTIFICATEUR", "true"),
+    menuItem("Invisibles", "VALIDE_PAR_CERTIFICATEUR", "false"),
   ];
 
   const toValidateMenuItems = [
-    menuItem({
-      text: "À valider",
-      path: "/responsable-certifications/certifications/",
-      category: "TO_VALIDATE",
-      defaultMenuItem: true,
-    }),
+    menuItem("À valider", "A_VALIDER_PAR_CERTIFICATEUR"),
   ];
 
   return (