feat(admin): added update certification competence bloc v2 page

SocialGouv · Nov 11, 2024 · 90d5ab1 · 90d5ab1
1 parent 6469b17
commit 90d5ab1
Show file tree

Hide file tree

Showing 4 changed files with 157 additions and 0 deletions.
diff --git a/...rtification-competence-bloc-page/fixtures/certification-competence-bloc-bp-boucher-1.json b/...rtification-competence-bloc-page/fixtures/certification-competence-bloc-bp-boucher-1.json
@@ -0,0 +1,27 @@
+{
+  "data": {
+    "getCertificationCompetenceBloc": {
+      "id": "008a6fab-55ad-4412-ab17-56bc4b8e2fd0",
+      "label": "Préparation, présentation, décoration et vente en boucherie",
+      "code": "RNCP37310BC01",
+      "competences": [
+        {
+          "id": "b8786018-6d24-4538-9622-f4ac62eb1742",
+          "label": "Réaliser les opérations de préparations des viandes"
+        },
+        {
+          "id": "2cbb6688-7b80-416f-940a-e348246484f8",
+          "label": "Mettre en valeur les produits notamment l’intégralité de la carcasse dans une démarche de développement durable"
+        },
+        {
+          "id": "2c829da9-ed10-48a3-ae1b-2f7db433c6d8",
+          "label": "Vendre les produits au client en argumentant et en proposant des conseils culinaires"
+        },
+        {
+          "id": "5aad9206-27a0-4afa-ac28-06d30bab6504",
+          "label": "Communiquer sur l’étiquetage, la conservation, la traçabilité, les signes officiels de qualité et l’origine des viandes"
+        }
+      ]
+    }
+  }
+}
diff --git a/...update-certification-competence-bloc-page/update-certification-competence-bloc-page.cy.ts b/...update-certification-competence-bloc-page/update-certification-competence-bloc-page.cy.ts
@@ -0,0 +1,42 @@
+import { stubQuery } from "../../../utils/graphql";
+import certificationCBBPBoucher1 from "./fixtures/certification-competence-bloc-bp-boucher-1.json";
+
+function interceptCertificationCompetenceBloc() {
+  cy.intercept("POST", "/api/graphql", (req) => {
+    stubQuery(
+      req,
+      "activeFeaturesForConnectedUser",
+      "features/active-features.json",
+    );
+    stubQuery(
+      req,
+      "getMaisonMereCGUQuery",
+      "account/gestionnaire-cgu-accepted.json",
+    );
+    stubQuery(
+      req,
+      "getCompetenceBlocForUpdateCompetenceBlocPage",
+      certificationCBBPBoucher1,
+    );
+  });
+}
+
+context("when i access the update certification page ", () => {
+  it("display the page with a correct title", function () {
+    interceptCertificationCompetenceBloc();
+
+    cy.admin(
+      "http://localhost:3003/admin2/certifications-v2/bf78b4d6-f6ac-4c8f-9e6b-d6c6ae9e891b/bloc-competence/008a6fab-55ad-4412-ab17-56bc4b8e2fd0/",
+    );
+    cy.wait("@activeFeaturesForConnectedUser");
+    cy.wait("@getMaisonMereCGUQuery");
+    cy.wait("@getCompetenceBlocForUpdateCompetenceBlocPage");
+
+    cy.get('[data-test="update-certification-page"]')
+      .children("h1")
+      .should(
+        "have.text",
+        "RNCP37310BC01 - Préparation, présentation, décoration et vente en boucherie",
+      );
+  });
+});
diff --git a/...tifications-v2/[certificationId]/bloc-competence/[certificationCompetenceBlocId]/page.tsx b/...tifications-v2/[certificationId]/bloc-competence/[certificationCompetenceBlocId]/page.tsx
@@ -0,0 +1,39 @@
+"use client";
+import { useParams } from "next/navigation";
+import { useUpdateCompetenceBlocPage } from "./updateCompetenceBloc.hook";
+import { FormOptionalFieldsDisclaimer } from "@/components/form-optional-fields-disclaimer/FormOptionalFieldsDisclaimer";
+
+type CertificationCompetenceBlocForPage = Exclude<
+  ReturnType<typeof useUpdateCompetenceBlocPage>["competenceBloc"],
+  undefined
+>;
+
+export default function UpdateCompetenceBlocPage() {
+  const { certificationCompetenceBlocId } = useParams<{
+    certificationCompetenceBlocId: string;
+  }>();
+
+  const { competenceBloc, getCompetenceBlocQueryStatus } =
+    useUpdateCompetenceBlocPage({ certificationCompetenceBlocId });
+  return getCompetenceBlocQueryStatus === "success" && competenceBloc ? (
+    <PageContent competenceBloc={competenceBloc} />
+  ) : null;
+}
+
+const PageContent = ({
+  competenceBloc,
+}: {
+  competenceBloc: CertificationCompetenceBlocForPage;
+}) => (
+  <div data-test="update-certification-page">
+    <h1>
+      {competenceBloc.code} - {competenceBloc.label}
+    </h1>
+    <FormOptionalFieldsDisclaimer />
+    <p className="mb-12">
+      Retrouvez toutes les informations récupérées à partir du code RNCP. Si
+      vous souhaitez les modifier, il est préférable de contacter directement
+      France compétences.
+    </p>
+  </div>
+);
diff --git a/...ificationId]/bloc-competence/[certificationCompetenceBlocId]/updateCompetenceBloc.hook.ts b/...ificationId]/bloc-competence/[certificationCompetenceBlocId]/updateCompetenceBloc.hook.ts
@@ -0,0 +1,49 @@
+import { useGraphQlClient } from "@/components/graphql/graphql-client/GraphqlClient";
+import { graphql } from "@/graphql/generated";
+import { useQuery } from "@tanstack/react-query";
+
+const getCompetenceBlocQuery = graphql(`
+  query getCompetenceBlocForUpdateCompetenceBlocPage(
+    $certificationCompetenceBlocId: ID!
+  ) {
+    getCertificationCompetenceBloc(
+      certificationCompetenceBlocId: $certificationCompetenceBlocId
+    ) {
+      id
+      label
+      code
+      competences {
+        id
+        label
+      }
+    }
+  }
+`);
+
+export const useUpdateCompetenceBlocPage = ({
+  certificationCompetenceBlocId,
+}: {
+  certificationCompetenceBlocId: string;
+}) => {
+  const { graphqlClient } = useGraphQlClient();
+
+  const {
+    data: getCompetenceBlocResponse,
+    status: getCompetenceBlocQueryStatus,
+  } = useQuery({
+    queryKey: [
+      certificationCompetenceBlocId,
+      "competenceBlocs",
+      "getCompetenceBlocForUpdateCompetenceBlocPage",
+    ],
+    queryFn: () =>
+      graphqlClient.request(getCompetenceBlocQuery, {
+        certificationCompetenceBlocId,
+      }),
+  });
+
+  const competenceBloc =
+    getCompetenceBlocResponse?.getCertificationCompetenceBloc;
+
+  return { competenceBloc, getCompetenceBlocQueryStatus };
+};