From a08089d1b918e717a3cc43a06b7e1f224c32c194 Mon Sep 17 00:00:00 2001 From: Pramod Mahajan Date: Fri, 25 Apr 2025 12:29:36 +0530 Subject: [PATCH] new directory components --- src/components/Directory/ManageDirectory.jsx | 214 +++++++++++++++++++ src/components/Project/ProjectNav.jsx | 10 +- 2 files changed, 219 insertions(+), 5 deletions(-) create mode 100644 src/components/Directory/ManageDirectory.jsx diff --git a/src/components/Directory/ManageDirectory.jsx b/src/components/Directory/ManageDirectory.jsx new file mode 100644 index 00000000..6c6b41e4 --- /dev/null +++ b/src/components/Directory/ManageDirectory.jsx @@ -0,0 +1,214 @@ +import React, { useEffect } from "react"; +import { useForm, useFieldArray, FormProvider } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import TagInput from "../common/TagInput"; +import { z } from "zod"; + +export const directorySchema = z.object({ + firstName: z.string().min(1, "First Name is required"), + lastName: z.string().min(1, "Last Name is required"), + organization: z.string().min(1, "Organization name is required"), + type: z.string().min(1, "Type is required"), + address: z.string().optional(), + description: z.string().min(1, { message: "Description is required" }), + email: z + .array(z.string().email("Invalid email")) + .nonempty("At least one email required"), + phone: z + .array(z.string().regex(/^\d{10}$/, "Phone must be 10 digits")) + .nonempty("At least one phone number is required"), + tags: z.array(z.string()).optional(), +}); + + + +const ManageDirectory = () => { + const methods = useForm({ + resolver: zodResolver(directorySchema), + defaultValues: { + firstName: "", + lastName: "", + organization: "", + type: "", + address: "", + description: "", + email: [""], + phone: [""], + tags: [], + }, + }); + + const { + register, + handleSubmit, + control, + getValues, + trigger, + formState: { errors }, + } = methods; + + const { + fields: emailFields, + append: appendEmail, + remove: removeEmail, + } = useFieldArray({ control, name: "email" }); + + const { + fields: phoneFields, + append: appendPhone, + remove: removePhone, + } = useFieldArray({ control, name: "phone" }); + + useEffect(() => { + if (emailFields.length === 0) appendEmail(""); + if (phoneFields.length === 0) appendPhone(""); + }, [emailFields.length, phoneFields.length]); + + const onSubmit = (data) => { + console.log("Submitted:\n" + JSON.stringify(data, null, 2)); + }; + + const handleAddEmail = async () => { + const emails = getValues("email"); + const lastIndex = emails.length - 1; + const valid = await trigger(`email.${lastIndex}`); + if (valid) appendEmail(""); + }; + + const handleAddPhone = async () => { + const phones = getValues("phone"); + const lastIndex = phones.length - 1; + const valid = await trigger(`phone.${lastIndex}`); + if (valid) appendPhone(""); + }; + + return ( + +
+
+
+ + + {errors.firstName && {errors.firstName.message}} +
+ +
+ + + {errors.lastName && {errors.lastName.message}} +
+
+ +
+ + + {errors.organization && {errors.organization.message}} +
+ +
+
+ + {emailFields.map((field, index) => (<> +
+ + {index === emailFields.length - 1 ? ( + + ) : ( + + )} +
+ {errors.email?.[index] && ( + + {errors.email[index]?.message} + + )} + + ))} + + +
+ +
+ + {phoneFields.map((field, index) => (<> +
+ + {index === phoneFields.length - 1 ? ( + + ) : ( + + )} +
+ {errors.phone?.[ index ] && {errors.phone[ index ]?.message}} + + ))} + +
+
+ +
+
+ + + {errors.type && {errors.type.message}} +
+
+ +
+
+ +
+ +