feat(admin): added first version of CompetenceBlocForm for certificat…

…ion v2
SocialGouv · Nov 12, 2024 · 2e128ee · 2e128ee
1 parent 222c961
commit 2e128ee
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 0 deletions.
diff --git a/...tifications-v2/[certificationId]/bloc-competence/[certificationCompetenceBlocId]/page.tsx b/...tifications-v2/[certificationId]/bloc-competence/[certificationCompetenceBlocId]/page.tsx
@@ -4,6 +4,7 @@ import { useUpdateCompetenceBlocPage } from "./updateCompetenceBloc.hook";
 import { FormOptionalFieldsDisclaimer } from "@/components/form-optional-fields-disclaimer/FormOptionalFieldsDisclaimer";
 import { GrayCard } from "@/components/card/gray-card/GrayCard";
 import { Breadcrumb } from "@codegouvfr/react-dsfr/Breadcrumb";
+import { CompetenceBlocForm } from "../_components/CompetenceBlocForm";
 
 type CertificationCompetenceBlocForPage = Exclude<
   ReturnType<typeof useUpdateCompetenceBlocPage>["competenceBloc"],
@@ -68,5 +69,11 @@ const PageContent = ({
         <dt className="font-medium">{competenceBloc.FCCompetences}</dt>
       </dl>
     </GrayCard>
+    <CompetenceBlocForm
+      className="mt-6"
+      backUrl={`/certifications-v2/${competenceBloc.certification.id}`}
+      defaultValues={competenceBloc}
+      onSubmit={async (f) => console.log({ f })}
+    />
   </div>
 );
diff --git a/...n)/certifications-v2/[certificationId]/bloc-competence/_components/CompetenceBlocForm.tsx b/...n)/certifications-v2/[certificationId]/bloc-competence/_components/CompetenceBlocForm.tsx
@@ -0,0 +1,85 @@
+import { FormButtons } from "@/components/form/form-footer/FormButtons";
+import { Input } from "@codegouvfr/react-dsfr/Input";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useFieldArray, useForm } from "react-hook-form";
+import { z } from "zod";
+
+export const competenceBlocFormSchema = z.object({
+  label: z
+    .string()
+    .min(2, "Ce champ doit contenir au moins 2 caractères")
+    .default(""),
+  competences: z
+    .object({
+      id: z.string().optional(),
+      label: z
+        .string()
+        .min(2, "Ce champ doit contenir au moins 2 caractères")
+        .default(""),
+    })
+    .array(),
+});
+
+export type CompetenceBlocFormData = z.infer<typeof competenceBlocFormSchema>;
+
+export const CompetenceBlocForm = ({
+  onSubmit,
+  defaultValues,
+  backUrl,
+  className = "",
+}: {
+  onSubmit(data: CompetenceBlocFormData): Promise<void>;
+  defaultValues: Partial<CompetenceBlocFormData>;
+  backUrl: string;
+  className?: string;
+}) => {
+  const methods = useForm<CompetenceBlocFormData>({
+    resolver: zodResolver(competenceBlocFormSchema),
+    defaultValues,
+  });
+
+  const {
+    register,
+    control,
+    handleSubmit,
+    formState: { isDirty, isSubmitting, errors },
+  } = methods;
+
+  const { fields: competencesFields } = useFieldArray({
+    control, // control props comes from useForm (optional: if you are using FormProvider)
+    name: "competences", // unique name for your Field Array
+  });
+
+  const handleFormSubmit = handleSubmit(onSubmit, (e) => console.log(e));
+  return (
+    <form onSubmit={handleFormSubmit} className={`${className}`}>
+      <Input
+        label="Intitulé du bloc de compétences"
+        state={errors.label ? "error" : "default"}
+        stateRelatedMessage={errors.label?.message?.toString()}
+        nativeInputProps={{
+          ...register("label"),
+        }}
+      />
+      <div className="flex flex-col gap-2 mt-6 pl-4">
+        {competencesFields.map((c, cIndex) => (
+          <Input
+            className="mb-0"
+            label=""
+            state={errors.label ? "error" : "default"}
+            stateRelatedMessage={errors.label?.message?.toString()}
+            key={c.id}
+            nativeInputProps={{ ...register(`competences.${cIndex}.label`) }}
+          />
+        ))}
+      </div>
+      <FormButtons
+        backUrl={backUrl}
+        formState={{
+          isDirty,
+          isSubmitting,
+        }}
+      />
+    </form>
+  );
+};