Skip to content

Commit 193639a

Browse files
agarbeagarbe
committed
feat(admin): added add competence bloc page to certification registry manager update certification page
1 parent 6b17bbd commit 193639a

File tree

5 files changed

+274
-0
lines changed

5 files changed

+274
-0
lines changed

‎packages/reva-admin-react/cypress/e2e/responsable-certifications/certifications/add-certification-competence-bloc-page/add-certification-competence-bloc-page.cy.ts

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import { stubMutation, stubQuery } from "../../../../utils/graphql";
2+
import certificationBPBoucher from "./fixtures/certification-bp-boucher.json";
3+
import createCertificationBlocMutationResponse from "./fixtures/create-competence-bloc-bp-boucher-mutation-response.json";
4+
5+
function interceptCertificationCompetenceBloc() {
6+
cy.intercept("POST", "/api/graphql", (req) => {
7+
stubQuery(
8+
req,
9+
"activeFeaturesForConnectedUser",
10+
"features/active-features.json",
11+
);
12+
stubQuery(
13+
req,
14+
"getMaisonMereCGUQuery",
15+
"account/gestionnaire-cgu-accepted.json",
16+
);
17+
stubQuery(
18+
req,
19+
"getCertificationForCertificationRegistryManagerAddCompetenceBlocPage",
20+
certificationBPBoucher,
21+
);
22+
});
23+
}
24+
25+
function interceptCreateCertificationCompetenceBlocMutation() {
26+
cy.intercept("POST", "/api/graphql", (req) => {
27+
stubMutation(
28+
req,
29+
"createCertificationCompetenceBlocForCertificationRegistryManagerAddCertificationCompetenceBlocPage",
30+
createCertificationBlocMutationResponse,
31+
);
32+
});
33+
}
34+
35+
context("when i access the add certification page ", () => {
36+
it("display the page with a correct title", function () {
37+
interceptCertificationCompetenceBloc();
38+
39+
cy.admin(
40+
"http://localhost:3003/admin2/responsable-certifications/certifications/bf78b4d6-f6ac-4c8f-9e6b-d6c6ae9e891b/bloc-competence/add/",
41+
);
42+
cy.wait("@activeFeaturesForConnectedUser");
43+
cy.wait("@getMaisonMereCGUQuery");
44+
cy.wait(
45+
"@getCertificationForCertificationRegistryManagerAddCompetenceBlocPage",
46+
);
47+
48+
cy.get(
49+
'[data-test="certification-registry-manager-add-certification-competence-bloc-page"]',
50+
)
51+
.children("h1")
52+
.should("have.text", "Ajouter un bloc de compétences");
53+
});
54+
55+
it("let me fill and submit the form", function () {
56+
interceptCertificationCompetenceBloc();
57+
interceptCreateCertificationCompetenceBlocMutation();
58+
cy.admin(
59+
"http://localhost:3003/admin2/responsable-certifications/certifications/bf78b4d6-f6ac-4c8f-9e6b-d6c6ae9e891b/bloc-competence/add/",
60+
);
61+
cy.wait("@activeFeaturesForConnectedUser");
62+
cy.wait("@getMaisonMereCGUQuery");
63+
cy.wait(
64+
"@getCertificationForCertificationRegistryManagerAddCompetenceBlocPage",
65+
);
66+
67+
cy.get('[data-test="competence-bloc-label-input"] input')
68+
.clear()
69+
.type("updated competence bloc label");
70+
71+
cy.get("button").contains("Enregistrer").click();
72+
cy.wait(
73+
"@createCertificationCompetenceBlocForCertificationRegistryManagerAddCertificationCompetenceBlocPage",
74+
);
75+
});
76+
77+
it("let me add a new competence to the competence bloc", function () {
78+
interceptCertificationCompetenceBloc();
79+
cy.admin(
80+
"http://localhost:3003/admin2/responsable-certifications/certifications/bf78b4d6-f6ac-4c8f-9e6b-d6c6ae9e891b/bloc-competence/add/",
81+
);
82+
cy.wait("@activeFeaturesForConnectedUser");
83+
cy.wait("@getMaisonMereCGUQuery");
84+
cy.wait(
85+
"@getCertificationForCertificationRegistryManagerAddCompetenceBlocPage",
86+
);
87+
88+
cy.get('[data-test="add-competence-button"]').click();
89+
90+
cy.get('[data-test="competence-list"] input').should("have.length", 1);
91+
});
92+
93+
it("let me delete a competence from the competence bloc", function () {
94+
interceptCertificationCompetenceBloc();
95+
cy.admin(
96+
"http://localhost:3003/admin2/responsable-certifications/certifications/bf78b4d6-f6ac-4c8f-9e6b-d6c6ae9e891b/bloc-competence/add/",
97+
);
98+
cy.wait("@activeFeaturesForConnectedUser");
99+
cy.wait("@getMaisonMereCGUQuery");
100+
cy.wait(
101+
"@getCertificationForCertificationRegistryManagerAddCompetenceBlocPage",
102+
);
103+
104+
cy.get('[data-test="add-competence-button"]').click();
105+
cy.get('[data-test="add-competence-button"]').click();
106+
107+
cy.get('[data-test="competence-list"] input').should("have.length", 2);
108+
109+
cy.get('[data-test="delete-competence-button"]').eq(1).click();
110+
111+
cy.get('[data-test="competence-list"] input').should("have.length", 1);
112+
});
113+
});

‎packages/reva-admin-react/cypress/e2e/responsable-certifications/certifications/add-certification-competence-bloc-page/fixtures/certification-bp-boucher.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"data": {
3+
"getCertification": {
4+
"id": "bf78b4d6-f6ac-4c8f-9e6b-d6c6ae9e891b",
5+
"label": "BP Boucher"
6+
}
7+
}
8+
}

‎packages/reva-admin-react/cypress/e2e/responsable-certifications/certifications/add-certification-competence-bloc-page/fixtures/create-competence-bloc-bp-boucher-mutation-response.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"data": {
3+
"referential_createCertificationCompetenceBloc": {
4+
"id": "008a6fab-55ad-4412-ab17-56bc4b8e2fd0"
5+
}
6+
}
7+
}

‎packages/reva-admin-react/src/app/responsable-certifications/certifications/[certificationId]/bloc-competence/add/addCompetenceBloc.hook.ts

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { useGraphQlClient } from "@/components/graphql/graphql-client/GraphqlClient";
2+
import { graphql } from "@/graphql/generated";
3+
import { CreateCompetenceBlocInput } from "@/graphql/generated/graphql";
4+
import { useMutation, useQuery } from "@tanstack/react-query";
5+
6+
const getCertificationQuery = graphql(`
7+
query getCertificationForCertificationRegistryManagerAddCompetenceBlocPage(
8+
$certificationId: ID!
9+
) {
10+
getCertification(certificationId: $certificationId) {
11+
id
12+
label
13+
}
14+
}
15+
`);
16+
17+
const createCertificationCompetenceBlocMutation = graphql(`
18+
mutation createCertificationCompetenceBlocForCertificationRegistryManagerAddCertificationCompetenceBlocPage(
19+
$input: CreateCompetenceBlocInput!
20+
) {
21+
referential_createCertificationCompetenceBloc(input: $input) {
22+
id
23+
}
24+
}
25+
`);
26+
27+
export const useAddCompetenceBlocPage = ({
28+
certificationId,
29+
}: {
30+
certificationId: string;
31+
}) => {
32+
const { graphqlClient } = useGraphQlClient();
33+
34+
const {
35+
data: getCertificationResponse,
36+
status: getCertificationQueryStatus,
37+
} = useQuery({
38+
queryKey: [
39+
certificationId,
40+
"competenceBlocs",
41+
"getCertificationForAddCompetenceBlocPage",
42+
],
43+
queryFn: () =>
44+
graphqlClient.request(getCertificationQuery, {
45+
certificationId,
46+
}),
47+
});
48+
49+
const createCertificationCompetenceBloc = useMutation({
50+
mutationFn: (input: Omit<CreateCompetenceBlocInput, "certificationId">) =>
51+
graphqlClient.request(createCertificationCompetenceBlocMutation, {
52+
input: { ...input, certificationId },
53+
}),
54+
});
55+
56+
const certification = getCertificationResponse?.getCertification;
57+
58+
return {
59+
certification,
60+
getCertificationQueryStatus,
61+
createCertificationCompetenceBloc,
62+
};
63+
};

‎packages/reva-admin-react/src/app/responsable-certifications/certifications/[certificationId]/bloc-competence/add/page.tsx

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
"use client";
2+
import { useParams, useRouter } from "next/navigation";
3+
import { FormOptionalFieldsDisclaimer } from "@/components/form-optional-fields-disclaimer/FormOptionalFieldsDisclaimer";
4+
import { Breadcrumb } from "@codegouvfr/react-dsfr/Breadcrumb";
5+
import {
6+
CompetenceBlocForm,
7+
CompetenceBlocFormData,
8+
} from "../../../../../../components/certifications/competence-bloc-form/CompetenceBlocForm";
9+
import { graphqlErrorToast, successToast } from "@/components/toast/toast";
10+
import { useAddCompetenceBlocPage } from "./addCompetenceBloc.hook";
11+
12+
type CertificationForPage = Exclude<
13+
ReturnType<typeof useAddCompetenceBlocPage>["certification"],
14+
undefined
15+
>;
16+
17+
export default function AddCompetenceBlocPage() {
18+
const { certificationId } = useParams<{
19+
certificationId: string;
20+
}>();
21+
22+
const router = useRouter();
23+
24+
const {
25+
certification,
26+
getCertificationQueryStatus,
27+
createCertificationCompetenceBloc,
28+
} = useAddCompetenceBlocPage({ certificationId });
29+
30+
const handleFormSubmit = async (data: CompetenceBlocFormData) => {
31+
try {
32+
await createCertificationCompetenceBloc.mutateAsync(data);
33+
successToast("modifications enregistrées");
34+
router.push(
35+
`/responsable-certifications/certifications/${certificationId}`,
36+
);
37+
} catch (e) {
38+
graphqlErrorToast(e);
39+
}
40+
};
41+
return getCertificationQueryStatus === "success" && certification ? (
42+
<PageContent certification={certification} onSubmit={handleFormSubmit} />
43+
) : null;
44+
}
45+
46+
const PageContent = ({
47+
certification,
48+
onSubmit,
49+
}: {
50+
onSubmit(data: CompetenceBlocFormData): Promise<void>;
51+
certification: CertificationForPage;
52+
}) => (
53+
<div data-test="certification-registry-manager-add-certification-competence-bloc-page">
54+
<Breadcrumb
55+
currentPageLabel="Ajouter un bloc de compétences"
56+
homeLinkProps={{
57+
href: `/`,
58+
}}
59+
segments={[
60+
{
61+
label: certification.label,
62+
linkProps: {
63+
href: `/responsable-certifications/certifications/${certification.id}`,
64+
},
65+
},
66+
]}
67+
/>
68+
69+
<h1>Ajouter un bloc de compétences</h1>
70+
<FormOptionalFieldsDisclaimer />
71+
<p className="mb-12 text-xl">
72+
Si vous avez constaté une erreur dans la récupération des informations de
73+
France compétences, ajoutez le ou les bloc(s) manquant(s) ci-dessous.
74+
Cette démarche est réversible, vous pouvez supprimer le ou les bloc(s) si
75+
nécessaire.
76+
</p>
77+
<CompetenceBlocForm
78+
className="mt-6"
79+
backUrl={`/responsable-certifications/certifications/${certification.id}`}
80+
onSubmit={onSubmit}
81+
/>
82+
</div>
83+
);

0 commit comments

Comments
 (0)