From b4a53248048e15e8de1f6e7def37be7cef0dc828 Mon Sep 17 00:00:00 2001 From: Alexandre Garbe Date: Thu, 12 Dec 2024 13:41:38 +0100 Subject: [PATCH] feat(admin): wired certification prerequisites update form to api --- .../fixtures/certification-bp-boucher.json | 4 +- ...quisites-bp-boucher-mutation-response.json | 7 +++ ...ate-certification-prerequisites-page.cy.ts | 34 +++++++++++++- .../[certificationId]/prerequisites/page.tsx | 45 ++++++++++++++++--- .../prerequisites/updatePrerequisites.hook.ts | 33 +++++++++++++- 5 files changed, 111 insertions(+), 12 deletions(-) create mode 100644 packages/reva-admin-react/cypress/e2e/responsable-certifications/certifications/update-certification-prerequisites-page/fixtures/update-prerequisites-bp-boucher-mutation-response.json diff --git a/packages/reva-admin-react/cypress/e2e/responsable-certifications/certifications/update-certification-prerequisites-page/fixtures/certification-bp-boucher.json b/packages/reva-admin-react/cypress/e2e/responsable-certifications/certifications/update-certification-prerequisites-page/fixtures/certification-bp-boucher.json index f4578dcb7..6e2afecc2 100644 --- a/packages/reva-admin-react/cypress/e2e/responsable-certifications/certifications/update-certification-prerequisites-page/fixtures/certification-bp-boucher.json +++ b/packages/reva-admin-react/cypress/e2e/responsable-certifications/certifications/update-certification-prerequisites-page/fixtures/certification-bp-boucher.json @@ -19,12 +19,12 @@ { "id": "b1b1b1b1-b1b1-b1b1-b1b1-b1b1b1b1b1b1", "label": "Prérequis 1", - "order": 0 + "index": 0 }, { "id": "b2b2b2b2-b2b2-b2b2-b2b2-b2b2b2b2b2b2", "label": "Prérequis 2", - "order": 2 + "index": 1 } ] } diff --git a/packages/reva-admin-react/cypress/e2e/responsable-certifications/certifications/update-certification-prerequisites-page/fixtures/update-prerequisites-bp-boucher-mutation-response.json b/packages/reva-admin-react/cypress/e2e/responsable-certifications/certifications/update-certification-prerequisites-page/fixtures/update-prerequisites-bp-boucher-mutation-response.json new file mode 100644 index 000000000..a04757c83 --- /dev/null +++ b/packages/reva-admin-react/cypress/e2e/responsable-certifications/certifications/update-certification-prerequisites-page/fixtures/update-prerequisites-bp-boucher-mutation-response.json @@ -0,0 +1,7 @@ +{ + "data": { + "referential_updateCertificationPrerequisites": { + "id": "008a6fab-55ad-4412-ab17-56bc4b8e2fd0" + } + } +} diff --git a/packages/reva-admin-react/cypress/e2e/responsable-certifications/certifications/update-certification-prerequisites-page/update-certification-prerequisites-page.cy.ts b/packages/reva-admin-react/cypress/e2e/responsable-certifications/certifications/update-certification-prerequisites-page/update-certification-prerequisites-page.cy.ts index dafa7f268..31c1d5d2c 100644 --- a/packages/reva-admin-react/cypress/e2e/responsable-certifications/certifications/update-certification-prerequisites-page/update-certification-prerequisites-page.cy.ts +++ b/packages/reva-admin-react/cypress/e2e/responsable-certifications/certifications/update-certification-prerequisites-page/update-certification-prerequisites-page.cy.ts @@ -1,5 +1,6 @@ -import { stubQuery } from "../../../../utils/graphql"; +import { stubMutation, stubQuery } from "../../../../utils/graphql"; import certificationBPBoucher from "./fixtures/certification-bp-boucher.json"; +import updateCertificationPrerequisitesMutationResponse from "./fixtures/update-prerequisites-bp-boucher-mutation-response.json"; function interceptCertification() { cy.intercept("POST", "/api/graphql", (req) => { @@ -24,6 +25,16 @@ function interceptCertification() { }); } +function interceptUpdateCertificationPrerequisitesMutation() { + cy.intercept("POST", "/api/graphql", (req) => { + stubMutation( + req, + "updateCertificationPrerequisitesForUpdateCertificationPrerequisitesPage", + updateCertificationPrerequisitesMutationResponse, + ); + }); +} + context("when i access the update certification page ", () => { it("display the page with a correct title", function () { interceptCertification(); @@ -52,6 +63,27 @@ context("when i access the update certification page ", () => { cy.get("button").contains("Enregistrer").should("be.disabled"); }); + it.only("let me update a certification prerequisites and submit the form", function () { + interceptCertification(); + interceptUpdateCertificationPrerequisitesMutation(); + cy.admin( + "http://localhost:3003/admin2/responsable-certifications/certifications/bf78b4d6-f6ac-4c8f-9e6b-d6c6ae9e891b/prerequisites", + ); + cy.wait("@activeFeaturesForConnectedUser"); + cy.wait("@getMaisonMereCGUQuery"); + cy.wait("@getCertificationForUpdateCertificationPrerequisitesPage"); + + cy.get('[data-test="prerequisite-list"] input') + .eq(0) + .clear() + .type("updated prerequisite"); + + cy.get("button").contains("Enregistrer").click(); + cy.wait( + "@updateCertificationPrerequisitesForUpdateCertificationPrerequisitesPage", + ); + }); + it("let me add a new prerequisite to the certification", function () { interceptCertification(); cy.admin( diff --git a/packages/reva-admin-react/src/app/responsable-certifications/certifications/[certificationId]/prerequisites/page.tsx b/packages/reva-admin-react/src/app/responsable-certifications/certifications/[certificationId]/prerequisites/page.tsx index 913d68855..c07a8babd 100644 --- a/packages/reva-admin-react/src/app/responsable-certifications/certifications/[certificationId]/prerequisites/page.tsx +++ b/packages/reva-admin-react/src/app/responsable-certifications/certifications/[certificationId]/prerequisites/page.tsx @@ -3,7 +3,12 @@ import { useParams } from "next/navigation"; import { FormOptionalFieldsDisclaimer } from "@/components/form-optional-fields-disclaimer/FormOptionalFieldsDisclaimer"; import { Breadcrumb } from "@codegouvfr/react-dsfr/Breadcrumb"; import { useUpdatePrerequisitesPage } from "./updatePrerequisites.hook"; -import { PrerequisitesForm } from "./(components)/prerequisites-form/PrerequisitesForm"; +import { + PrerequisitesForm, + PrerequisitesFormData, +} from "./(components)/prerequisites-form/PrerequisitesForm"; +import { successToast, graphqlErrorToast } from "@/components/toast/toast"; +import { useRouter } from "next/navigation"; type CertificationForPage = Exclude< ReturnType["certification"], @@ -15,20 +20,46 @@ export default function UpdatePrerequisitesPage() { certificationId: string; }>(); - const { certification, getCertificationQueryStatus } = - useUpdatePrerequisitesPage({ - certificationId, - }); + const router = useRouter(); + const { + certification, + getCertificationQueryStatus, + updateCertificationPrerequisites, + } = useUpdatePrerequisitesPage({ + certificationId, + }); + + const handleFormSubmit = async (data: PrerequisitesFormData) => { + try { + const input = data.noPrerequisites + ? { prerequisites: [] } + : { + prerequisites: data.prerequisites.map((p) => ({ + label: p.label, + index: p.index, + })), //remove id added by react-hook-form useFieldArray + }; + await updateCertificationPrerequisites.mutateAsync(input); + successToast("modifications enregistrées"); + router.push( + `/responsable-certifications/certifications/${certificationId}`, + ); + } catch (e) { + graphqlErrorToast(e); + } + }; return getCertificationQueryStatus === "success" && certification ? ( - + ) : null; } const PageContent = ({ certification, + onSubmit, }: { certification: CertificationForPage; + onSubmit(data: PrerequisitesFormData): Promise; }) => (
console.log({ d })} + onSubmit={onSubmit} defaultValues={{ noPrerequisites: !certification.prerequisites.length, prerequisites: certification.prerequisites, diff --git a/packages/reva-admin-react/src/app/responsable-certifications/certifications/[certificationId]/prerequisites/updatePrerequisites.hook.ts b/packages/reva-admin-react/src/app/responsable-certifications/certifications/[certificationId]/prerequisites/updatePrerequisites.hook.ts index db2c56e54..44147b175 100644 --- a/packages/reva-admin-react/src/app/responsable-certifications/certifications/[certificationId]/prerequisites/updatePrerequisites.hook.ts +++ b/packages/reva-admin-react/src/app/responsable-certifications/certifications/[certificationId]/prerequisites/updatePrerequisites.hook.ts @@ -1,6 +1,7 @@ import { useGraphQlClient } from "@/components/graphql/graphql-client/GraphqlClient"; import { graphql } from "@/graphql/generated"; -import { useQuery } from "@tanstack/react-query"; +import { UpdateCertificationPrerequisitesInput } from "@/graphql/generated/graphql"; +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; const getCertificationQuery = graphql(` query getCertificationForUpdateCertificationPrerequisitesPage( @@ -19,12 +20,23 @@ const getCertificationQuery = graphql(` } `); +const updateCertificationPrerequisitesMutation = graphql(` + mutation updateCertificationPrerequisitesForUpdateCertificationPrerequisitesPage( + $input: UpdateCertificationPrerequisitesInput! + ) { + referential_updateCertificationPrerequisites(input: $input) { + id + } + } +`); + export const useUpdatePrerequisitesPage = ({ certificationId, }: { certificationId: string; }) => { const { graphqlClient } = useGraphQlClient(); + const queryClient = useQueryClient(); const { data: getCertificationResponse, @@ -32,7 +44,7 @@ export const useUpdatePrerequisitesPage = ({ } = useQuery({ queryKey: [ certificationId, - "certifiactions", + "certifications", "getCertificationForUpdateCertificationPrerequisitesPage", ], queryFn: () => @@ -41,10 +53,27 @@ export const useUpdatePrerequisitesPage = ({ }), }); + const updateCertificationPrerequisites = useMutation({ + mutationFn: ( + input: Omit, + ) => + graphqlClient.request(updateCertificationPrerequisitesMutation, { + input: { + ...input, + certificationId: certificationId, + }, + }), + onSuccess: () => + queryClient.invalidateQueries({ + queryKey: [certificationId], + }), + }); + const certification = getCertificationResponse?.getCertification; return { certification, getCertificationQueryStatus, + updateCertificationPrerequisites, }; };