feat(admin): add a remove competence button to the update competence …

…bloc form
SocialGouv · Nov 13, 2024 · 2edd53c · 2edd53c
1 parent f42233d
commit 2edd53c
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 16 deletions.
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
@@ -98,4 +98,20 @@ context("when i access the update certification page ", () => {
 
     cy.get('[data-test="competence-list"] input').should("have.length", 5);
   });
+
+  it("let me remove a competence bloc", 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="competence-list"] input').should("have.length", 4);
+
+    cy.get('[data-test="remove-competence-button"]').eq(1).click();
+
+    cy.get('[data-test="competence-list"] input').should("have.length", 3);
+  });
 });
diff --git a/...n)/certifications-v2/[certificationId]/bloc-competence/_components/CompetenceBlocForm.tsx b/...n)/certifications-v2/[certificationId]/bloc-competence/_components/CompetenceBlocForm.tsx
@@ -47,11 +47,14 @@ export const CompetenceBlocForm = ({
     formState: { isDirty, isSubmitting, errors },
   } = methods;
 
-  const { fields: competencesFields, append: appendCompetenceField } =
-    useFieldArray({
-      control,
-      name: "competences",
-    });
+  const {
+    fields: competencesFields,
+    append: appendCompetence,
+    remove: removeCompetence,
+  } = useFieldArray({
+    control,
+    name: "competences",
+  });
 
   const handleFormSubmit = handleSubmit(onSubmit, (e) => console.log(e));
   return (
@@ -70,16 +73,26 @@ export const CompetenceBlocForm = ({
         data-test="competence-list"
       >
         {competencesFields.map((c, cIndex) => (
-          <Input
-            className="mb-0"
-            label=""
-            state={errors.competences?.[cIndex]?.label ? "error" : "default"}
-            stateRelatedMessage={errors.competences?.[
-              cIndex
-            ]?.label?.message?.toString()}
-            key={c.id}
-            nativeInputProps={{ ...register(`competences.${cIndex}.label`) }}
-          />
+          <div className="flex content-betwee gap-2" key={c.id}>
+            <Input
+              className="mb-0 w-full"
+              label=""
+              state={errors.competences?.[cIndex]?.label ? "error" : "default"}
+              stateRelatedMessage={errors.competences?.[
+                cIndex
+              ]?.label?.message?.toString()}
+              nativeInputProps={{ ...register(`competences.${cIndex}.label`) }}
+            />
+            <Button
+              data-test="remove-competence-button"
+              priority="tertiary no outline"
+              iconId="fr-icon-delete-line"
+              iconPosition="left"
+              onClick={() => removeCompetence(cIndex)}
+            >
+              Supprimer
+            </Button>
+          </div>
         ))}
       </div>
       <Button
@@ -88,7 +101,7 @@ export const CompetenceBlocForm = ({
         iconId="fr-icon-add-line"
         iconPosition="left"
         onClick={() =>
-          appendCompetenceField({ label: "", index: competencesFields.length })
+          appendCompetence({ label: "", index: competencesFields.length })
         }
       >
         Ajouter une compétence