pramod_Task#105 #52
214
src/components/Directory/ManageDirectory.jsx
Normal file
214
src/components/Directory/ManageDirectory.jsx
Normal file
@ -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 (
|
||||
<FormProvider {...methods}>
|
||||
<form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<label className="form-label">First Name</label>
|
||||
<input className="form-control form-control-sm" {...register("firstName")} />
|
||||
{errors.firstName && <small className="danger-text">{errors.firstName.message}</small>}
|
||||
</div>
|
||||
|
||||
<div className="col-md-6">
|
||||
<label className="form-label">Last Name</label>
|
||||
<input className="form-control form-control-sm" {...register("lastName")} />
|
||||
{errors.lastName && <small className="danger-text">{errors.lastName.message}</small>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<label className="form-label">Organization</label>
|
||||
<input className="form-control form-control-sm" {...register("organization")} />
|
||||
{errors.organization && <small className="danger-text">{errors.organization.message}</small>}
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<label className="form-label">Email</label>
|
||||
{emailFields.map((field, index) => (<>
|
||||
<div key={field.id} className="d-flex align-items-center mb-1">
|
||||
<input
|
||||
type="email"
|
||||
className="form-control form-control-sm"
|
||||
{...register(`email.${index}`)}
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
{index === emailFields.length - 1 ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-primary ms-1"
|
||||
onClick={handleAddEmail}
|
||||
>
|
||||
<i className="bx bx-plus bx-xs" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-danger ms-1"
|
||||
onClick={() => removeEmail(index)}
|
||||
>
|
||||
<i className="bx bx-x bx-xs" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{errors.email?.[index] && (
|
||||
<small className="danger-text ms-2">
|
||||
{errors.email[index]?.message}
|
||||
</small>
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="col-md-6">
|
||||
<label className="form-label">Phone</label>
|
||||
{phoneFields.map((field, index) => (<>
|
||||
<div key={field.id} className="d-flex align-items-center mb-1">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
{...register(`phone.${index}`)}
|
||||
placeholder="9876543210"
|
||||
/>
|
||||
{index === phoneFields.length - 1 ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-primary ms-1"
|
||||
onClick={handleAddPhone}
|
||||
>
|
||||
<i className="bx bx-plus bx-xs" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-danger ms-1"
|
||||
onClick={() => removePhone(index)} // Remove the phone field
|
||||
>
|
||||
<i className="bx bx-x bx-xs" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{errors.phone?.[ index ] && <small className="danger-text ms-2">{errors.phone[ index ]?.message}</small>}
|
||||
</>
|
||||
))}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row my-1">
|
||||
<div className="col-md-6">
|
||||
<label className="form-label">Type</label>
|
||||
<input className="form-control form-control-sm" {...register("type")} />
|
||||
{errors.type && <small className="danger-text">{errors.type.message}</small>}
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<TagInput name="tags" label="Tags" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<label className="form-label">Address</label>
|
||||
<textarea className="form-control form-control-sm" rows="2" {...register("address")} />
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<label className="form-label">Description</label>
|
||||
<textarea className="form-control form-control-sm" rows="2" {...register("description")} />
|
||||
{errors.description && <small className="danger-text">{errors.description.message}</small>}
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-evenly py-2">
|
||||
<button className="btn btn-sm btn-primary" type="submit">Submit</button>
|
||||
<button className="btn btn-sm btn-secondary" type="button">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default ManageDirectory;
|
||||
@ -18,7 +18,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
|
||||
onPillClick("profile");
|
||||
}}
|
||||
>
|
||||
<i className="bx bx-user bx-sm me-1_5"></i> Profile
|
||||
<i className="bx bx-user bx-sm me-1_5"></i> <span className="d-none d-md-inline">Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
@ -30,7 +30,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
|
||||
onPillClick("teams");
|
||||
}}
|
||||
>
|
||||
<i className="bx bx-group bx-sm me-1_5"></i> Teams
|
||||
<i className="bx bx-group bx-sm me-1_5"></i><span className="d-none d-md-inline" > Teams</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className={`nav-item ${!HasViewInfraStructure && "d-none"} `}>
|
||||
@ -42,7 +42,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
|
||||
onPillClick("infra");
|
||||
}}
|
||||
>
|
||||
<i className="bx bx-grid-alt bx-sm me-1_5"></i> Infrastructure
|
||||
<i className="bx bx-grid-alt bx-sm me-1_5"></i> <span className="d-none d-md-inline">Infrastructure</span>
|
||||
</a>
|
||||
</li>
|
||||
{/* <li className="nav-item">
|
||||
@ -70,7 +70,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
|
||||
onPillClick("imagegallary");
|
||||
}}
|
||||
>
|
||||
<i className="bx bx-link bx-sm me-1_5"></i> Image Gallary
|
||||
<i className="bx bx-link bx-sm me-1_5"></i> <span className="d-none d-md-inline">Image Gallary</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
@ -82,7 +82,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
|
||||
onPillClick("directory");
|
||||
}}
|
||||
>
|
||||
<i className="bx bx-link bx-sm me-1_5"></i> Directory
|
||||
<i className="bx bx-link bx-sm me-1_5"></i> <span className="d-none d-md-inline">Directory</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user