Merge pull request 'pramod_Task-#298 : Update Contact' (#119) from pramod_Task-#298 into Feature_Directory
Reviewed-on: #119
This commit is contained in:
commit
b489c094b3
57
src/components/Directory/DirectorySchema.js
Normal file
57
src/components/Directory/DirectorySchema.js
Normal file
@ -0,0 +1,57 @@
|
||||
import { z } from "zod";
|
||||
export const ContactSchema = z
|
||||
.object({
|
||||
name: z.string().min(1, "Name is required"),
|
||||
organization: z.string().min(1, "Organization name is required"),
|
||||
contactCategoryId: z.string().nullable().optional(),
|
||||
address: z.string().optional(),
|
||||
description: z.string().min(1, { message: "Description is required" }),
|
||||
projectIds: z.array(z.string()).min(1, "Project is required"),
|
||||
contactEmails: z
|
||||
.array(
|
||||
z.object({
|
||||
label: z.string(),
|
||||
emailAddress: z.string().email("Invalid email").or(z.literal("")),
|
||||
})
|
||||
)
|
||||
.optional()
|
||||
.default([]),
|
||||
|
||||
contactPhones: z
|
||||
.array(
|
||||
z.object({
|
||||
label: z.string(),
|
||||
phoneNumber: z
|
||||
.string()
|
||||
.min(6, "Invalid Number")
|
||||
.max(10, "Invalid Number")
|
||||
.regex(/^[\d\s+()-]+$/, "Invalid phone number format").or(z.literal("")),
|
||||
})
|
||||
)
|
||||
.optional()
|
||||
.default([]),
|
||||
|
||||
tags: z
|
||||
.array(
|
||||
z.object({
|
||||
id: z.string().nullable(),
|
||||
name: z.string(),
|
||||
})
|
||||
)
|
||||
.min(1, { message: "At least one tag is required" }),
|
||||
bucketIds: z.array(z.string()).optional(),
|
||||
})
|
||||
|
||||
.refine((data) => {
|
||||
const hasValidEmail = (data.contactEmails || []).some(
|
||||
(e) => e.emailAddress?.trim() !== ""
|
||||
);
|
||||
const hasValidPhone = (data.contactPhones || []).some(
|
||||
(p) => p.phoneNumber?.trim() !== ""
|
||||
);
|
||||
|
||||
return hasValidEmail || hasValidPhone;
|
||||
}, {
|
||||
message: "At least one contact (email or phone) is required",
|
||||
path: ["contactPhone"],
|
||||
});
|
||||
@ -23,7 +23,7 @@ const getPhoneIcon = (type) => {
|
||||
}
|
||||
};
|
||||
|
||||
const ListViewDirectory = ({ contact }) => {
|
||||
const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal }) => {
|
||||
return (
|
||||
<tr key={contact.id} >
|
||||
<td className="text-start" colSpan={2}>{`${contact.name}`}</td>
|
||||
@ -40,7 +40,6 @@ const ListViewDirectory = ({ contact }) => {
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Phones */}
|
||||
<td>
|
||||
<div className="d-flex flex-column align-items-start">
|
||||
{contact.contactPhones?.map((phone, index) => (
|
||||
@ -64,7 +63,11 @@ const ListViewDirectory = ({ contact }) => {
|
||||
|
||||
{/* Actions */}
|
||||
<td className="align-middle text-center ">
|
||||
<i className='bx bx-edit bx-sm text-primary cursor-pointer'></i>
|
||||
<i className='bx bx-edit bx-sm text-primary cursor-pointer' onClick={() =>
|
||||
{
|
||||
setSelectedContact( contact )
|
||||
setIsOpenModal(true)
|
||||
}}></i>
|
||||
<i className='bx bx-trash bx-sm text-danger cursor-pointer'></i>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -7,76 +7,48 @@ import {
|
||||
} from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import TagInput from "../common/TagInput";
|
||||
import { z } from "zod";
|
||||
import IconButton from "../common/IconButton";
|
||||
import useMaster from "../../hooks/masterHook/useMaster";
|
||||
import useMaster, {
|
||||
useContactCategory,
|
||||
useContactTags,
|
||||
} from "../../hooks/masterHook/useMaster";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { changeMaster } from "../../slices/localVariablesSlice";
|
||||
import { useBuckets } from "../../hooks/useDirectory";
|
||||
import {useProjects} from "../../hooks/useProjects";
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
import SelectMultiple from "../common/SelectMultiple";
|
||||
import {ContactSchema} from "./DirectorySchema";
|
||||
|
||||
export const ContactSchema = z.object({
|
||||
Name: z.string().min(1, "Name is required"),
|
||||
organization: z.string().min(1, "Organization name is required"),
|
||||
ContactCategoryId: z.string().optional(),
|
||||
address: z.string().optional(),
|
||||
description: z.string().min( 1, {message: "Description is required"} ),
|
||||
ProjectId :z.string().optional(),
|
||||
ContactEmails: z
|
||||
.array(
|
||||
z.object({
|
||||
label: z.string(),
|
||||
emailAddress: z.string().email("Invalid email"),
|
||||
})
|
||||
)
|
||||
.optional()
|
||||
.default([]),
|
||||
ContactPhones: z
|
||||
.array(
|
||||
z.object({
|
||||
label: z.string(),
|
||||
phoneNumber: z.string().regex(/^\d{10}$/, "Phone must be 10 digits"),
|
||||
})
|
||||
)
|
||||
.optional()
|
||||
.default([]),
|
||||
|
||||
tags: z
|
||||
.array(
|
||||
z.object({
|
||||
id: z.string().nullable(),
|
||||
name: z.string(),
|
||||
})
|
||||
)
|
||||
.optional(),
|
||||
BucketIds: z.array(z.string()).optional(),
|
||||
});
|
||||
|
||||
const ManageDirectory = ({submitContact,onCLosed}) => {
|
||||
const ManageDirectory = ({ submitContact, onCLosed }) => {
|
||||
const selectedMaster = useSelector(
|
||||
(store) => store.localVariables.selectedMaster
|
||||
);
|
||||
const [categoryData, setCategoryData] = useState([]);
|
||||
const [TagsData, setTagsData] = useState([]);
|
||||
const { data, loading } = useMaster();
|
||||
const {buckets, loading: bucketsLoaging} = useBuckets();
|
||||
const {projects, loading: projectLoading} = useProjects();
|
||||
const [IsSubmitting,setSubmitting] = useState(false)
|
||||
const { buckets, loading: bucketsLoaging } = useBuckets();
|
||||
const { projects, loading: projectLoading } = useProjects();
|
||||
const { contactCategory, loading: contactCategoryLoading } =
|
||||
useContactCategory();
|
||||
const { contactTags, loading: Tagloading } = useContactTags();
|
||||
const [IsSubmitting, setSubmitting] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const methods = useForm({
|
||||
resolver: zodResolver(ContactSchema),
|
||||
defaultValues: {
|
||||
Name: "",
|
||||
name: "",
|
||||
organization: "",
|
||||
ContactCategoryId: null,
|
||||
contactCategoryId: null,
|
||||
address: "",
|
||||
description: "",
|
||||
ProjectId:null,
|
||||
ContactEmails: [],
|
||||
ContactPhones: [],
|
||||
projectIds: [],
|
||||
contactEmails: [],
|
||||
contactPhones: [],
|
||||
tags: [],
|
||||
BucketIds: [],
|
||||
bucketIds: [],
|
||||
},
|
||||
});
|
||||
|
||||
@ -96,93 +68,98 @@ const ManageDirectory = ({submitContact,onCLosed}) => {
|
||||
fields: emailFields,
|
||||
append: appendEmail,
|
||||
remove: removeEmail,
|
||||
} = useFieldArray({ control, name: "ContactEmails" });
|
||||
} = useFieldArray({ control, name: "contactEmails" });
|
||||
|
||||
const {
|
||||
fields: phoneFields,
|
||||
append: appendPhone,
|
||||
remove: removePhone,
|
||||
} = useFieldArray({ control, name: "ContactPhones" });
|
||||
} = useFieldArray({ control, name: "contactPhones" });
|
||||
|
||||
useEffect(() => {
|
||||
if (emailFields.length === 0) appendEmail("");
|
||||
if (phoneFields.length === 0) appendPhone("");
|
||||
}, [emailFields.length, phoneFields.length]);
|
||||
useEffect(() => {
|
||||
if (emailFields.length === 0) {
|
||||
appendEmail({ label: "Work", emailAddress: "" });
|
||||
}
|
||||
if (phoneFields.length === 0) {
|
||||
appendPhone({ label: "Office", phoneNumber: "" });
|
||||
}
|
||||
}, [emailFields.length, phoneFields.length]);
|
||||
|
||||
|
||||
|
||||
const handleAddEmail = async () => {
|
||||
const emails = getValues("ContactEmails");
|
||||
const emails = getValues("contactEmails");
|
||||
const lastIndex = emails.length - 1;
|
||||
const valid = await trigger(`ContactEmails.${lastIndex}.emailAddress`);
|
||||
const valid = await trigger(`contactEmails.${lastIndex}.emailAddress`);
|
||||
if (valid) {
|
||||
appendEmail({ label: "Work", emailAddress: "" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddPhone = async () => {
|
||||
const phones = getValues("ContactPhones");
|
||||
const phones = getValues("contactPhones");
|
||||
const lastIndex = phones.length - 1;
|
||||
const valid = await trigger(`ContactPhones.${lastIndex}.phoneNumber`);
|
||||
const valid = await trigger(`contactPhones.${lastIndex}.phoneNumber`);
|
||||
if (valid) {
|
||||
appendPhone({ label: "Office", phoneNumber: "" });
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedMaster === "Contact Category") {
|
||||
setCategoryData(data);
|
||||
} else {
|
||||
setTagsData(data);
|
||||
}
|
||||
}, [selectedMaster, data]);
|
||||
|
||||
const watchBucketIds = watch("BucketIds");
|
||||
const watchBucketIds = watch("bucketIds");
|
||||
|
||||
const toggleBucketId = (id) => {
|
||||
const updated = watchBucketIds?.includes(id)
|
||||
? watchBucketIds.filter((val) => val !== id)
|
||||
: [...watchBucketIds, id];
|
||||
|
||||
setValue("BucketIds", updated, { shouldValidate: true });
|
||||
setValue("bucketIds", updated, { shouldValidate: true });
|
||||
};
|
||||
const handleCheckboxChange = (id) => {
|
||||
const updated = watchBucketIds.includes(id)
|
||||
? watchBucketIds.filter((i) => i !== id)
|
||||
: [...watchBucketIds, id];
|
||||
|
||||
setValue("BucketIds", updated, { shouldValidate: true });
|
||||
setValue("bucketIds", updated, { shouldValidate: true });
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
const onSubmit = ( data ) =>
|
||||
{
|
||||
setSubmitting(true)
|
||||
submitContact( data, reset, setSubmitting )
|
||||
const cleaned = {
|
||||
...data,
|
||||
contactEmails: (data.contactEmails || []).filter(
|
||||
(e) => e.emailAddress?.trim() !== ""
|
||||
),
|
||||
contactPhones: (data.contactPhones || []).filter(
|
||||
(p) => p.phoneNumber?.trim() !== ""
|
||||
),
|
||||
};
|
||||
|
||||
setSubmitting(true);
|
||||
submitContact(cleaned, reset, setSubmitting);
|
||||
};
|
||||
|
||||
const handleClosed = () => {
|
||||
onCLosed();
|
||||
};
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="text-start d-flex align-items-center">
|
||||
<div className="d-flex justify-content-center align-items-center">
|
||||
<IconButton size={15} iconClass="bx bx-user-plus" color="primary" />{" "}
|
||||
<h6 className="m-0 fw-18"> Create New Contact</h6>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<div className="col-md-6 text-start">
|
||||
<label className="form-label">Name</label>
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
{...register("Name")}
|
||||
{...register("name")}
|
||||
/>
|
||||
{errors.Name && (
|
||||
<small className="danger-text">{errors.Name.message}</small>
|
||||
{errors.name && (
|
||||
<small className="danger-text">{errors.name.message}</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-md-6">
|
||||
<div className="col-md-6 text-start">
|
||||
<label className="form-label">Organization</label>
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
@ -202,29 +179,29 @@ const ManageDirectory = ({submitContact,onCLosed}) => {
|
||||
key={field.id}
|
||||
className="row d-flex align-items-center mb-1"
|
||||
>
|
||||
<div className="col-5">
|
||||
<div className="col-5 text-start">
|
||||
<label className="form-label">Label</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register(`ContactEmails.${index}.label`)}
|
||||
{...register(`contactEmails.${index}.label`)}
|
||||
>
|
||||
<option value="Work">Work</option>
|
||||
<option value="Personal">Personal</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
{errors.ContactEmails?.[index]?.label && (
|
||||
{errors.contactEmails?.[index]?.label && (
|
||||
<small className="danger-text">
|
||||
{errors.ContactEmails[index].label.message}
|
||||
{errors.contactEmails[index].label.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-7">
|
||||
<div className="col-7 text-start">
|
||||
<label className="form-label">Email</label>
|
||||
<div className="d-flex align-items-center">
|
||||
<input
|
||||
type="email"
|
||||
className="form-control form-control-sm"
|
||||
{...register(`ContactEmails.${index}.emailAddress`)}
|
||||
{...register(`contactEmails.${index}.emailAddress`)}
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
{index === emailFields.length - 1 ? (
|
||||
@ -247,27 +224,26 @@ const ManageDirectory = ({submitContact,onCLosed}) => {
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{errors.ContactEmails?.[index]?.emailAddress && (
|
||||
{errors.contactEmails?.[index]?.emailAddress && (
|
||||
<small className="danger-text">
|
||||
{errors.ContactEmails[index].emailAddress.message}
|
||||
{errors.contactEmails[index].emailAddress.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="col-md-6">
|
||||
{phoneFields.map((field, index) => (
|
||||
<div
|
||||
key={field.id}
|
||||
className="row d-flex align-items-center mb-2"
|
||||
>
|
||||
<div className="col-5">
|
||||
<div className="col-5 text-start">
|
||||
<label className="form-label">Label</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register(`ContactPhones.${index}.label`)}
|
||||
{...register(`contactPhones.${index}.label`)}
|
||||
>
|
||||
<option value="Office">Office</option>
|
||||
<option value="Personal">Personal</option>
|
||||
@ -279,13 +255,13 @@ const ManageDirectory = ({submitContact,onCLosed}) => {
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-7">
|
||||
<div className="col-7 text-start">
|
||||
<label className="form-label">Phone</label>
|
||||
<div className="d-flex align-items-center">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
{...register(`ContactPhones.${index}.phoneNumber`)}
|
||||
{...register(`contactPhones.${index}.phoneNumber`)}
|
||||
placeholder="9876543210"
|
||||
/>
|
||||
{index === phoneFields.length - 1 ? (
|
||||
@ -308,27 +284,28 @@ const ManageDirectory = ({submitContact,onCLosed}) => {
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{errors.ContactPhones?.[index]?.phoneNumber && (
|
||||
{errors.contactPhones?.[index]?.phoneNumber && (
|
||||
<small className="danger-text">
|
||||
{errors.ContactPhones[index].phoneNumber.message}
|
||||
{errors.contactPhones[index].phoneNumber.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{errors.contactPhone?.message && (
|
||||
<div className="danger-text">{errors.contactPhone.message}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="row my-1">
|
||||
<div className="col-md-6">
|
||||
<div className="col-md-6 text-start">
|
||||
<label className="form-label">Category</label>
|
||||
<select
|
||||
defaultValue=""
|
||||
className="form-select form-select-sm"
|
||||
{...register("ContactCategoryId")}
|
||||
onClick={() => dispatch(changeMaster("Contact Category"))}
|
||||
{...register("contactCategoryId")}
|
||||
>
|
||||
{loading && !categoryData ? (
|
||||
{contactCategoryLoading && !contactCategory ? (
|
||||
<option disabled value="">
|
||||
Loading...
|
||||
</option>
|
||||
@ -337,7 +314,7 @@ const ManageDirectory = ({submitContact,onCLosed}) => {
|
||||
<option disabled selected value="">
|
||||
Select Category
|
||||
</option>
|
||||
{categoryData?.map((cate) => (
|
||||
{contactCategory?.map((cate) => (
|
||||
<option key={cate.id} value={cate.id}>
|
||||
{cate.name}
|
||||
</option>
|
||||
@ -345,26 +322,52 @@ const ManageDirectory = ({submitContact,onCLosed}) => {
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
{errors.ContactCategoryId && (
|
||||
<small className="danger-text">{errors.ContactCategoryId.message}</small>
|
||||
{errors.contactCategoryId && (
|
||||
<small className="danger-text">
|
||||
{errors.contactCategoryId.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<TagInput name="tags" label="Tags" options={data} />
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<SelectMultiple
|
||||
name="projectIds"
|
||||
label="Select Projects"
|
||||
options={projects}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
IsLoading={projectLoading}
|
||||
/>
|
||||
{errors.projectIds && (
|
||||
<small className="danger-text">
|
||||
{errors.projectIds.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-6 text-start">
|
||||
<label className="form-label mb-2">Select Label</label>
|
||||
|
||||
<div
|
||||
className="row px-1"
|
||||
style={{ maxHeight: "100px", overflowY: "auto" }}
|
||||
<div className="col-12 text-start">
|
||||
<TagInput name="tags" label="Tags" options={contactTags} />
|
||||
{errors.tags && (
|
||||
<small className="danger-text">
|
||||
{errors.tags.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-12 mt-1 text-start">
|
||||
<label className="form-label ">Select Label</label>
|
||||
|
||||
<ul
|
||||
className="d-flex flex-wrap px-1 list-unstyled overflow-auto mb-0"
|
||||
style={{ maxHeight: "80px" }}
|
||||
>
|
||||
{bucketsLoaging && <p>Loading...</p>}
|
||||
{buckets?.map((item) => (
|
||||
<div className="col-6 col-sm-6 " key={item.id}>
|
||||
<div className="form-check mb-2">
|
||||
<li
|
||||
key={item.id}
|
||||
className="list-inline-item flex-shrink-0 me-6 mb-2"
|
||||
>
|
||||
<div className="form-check ">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
@ -379,47 +382,17 @@ const ManageDirectory = ({submitContact,onCLosed}) => {
|
||||
{item.name}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
{errors.BucketIds && (
|
||||
<small className="text-danger">{errors.BucketIds.message}</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-6">
|
||||
<label className="form-label">Category</label>
|
||||
<select
|
||||
defaultValue=""
|
||||
className="form-select form-select-sm"
|
||||
{...register("ProjectId")}
|
||||
|
||||
>
|
||||
{loading && !categoryData ? (
|
||||
<option disabled value="">
|
||||
Loading...
|
||||
</option>
|
||||
) : (
|
||||
<>
|
||||
<option disabled selected value="">
|
||||
Select Project
|
||||
</option>
|
||||
{projects?.map((project) => (
|
||||
<option key={project.id} value={project.id}>
|
||||
{project.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
{errors.category && (
|
||||
<small className="danger-text">{errors.category.message}</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label">Address</label>
|
||||
<textarea
|
||||
className="form-control form-control-sm"
|
||||
@ -428,7 +401,7 @@ const ManageDirectory = ({submitContact,onCLosed}) => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label">Description</label>
|
||||
<textarea
|
||||
className="form-control form-control-sm"
|
||||
@ -444,7 +417,11 @@ const ManageDirectory = ({submitContact,onCLosed}) => {
|
||||
<button className="btn btn-sm btn-primary" type="submit">
|
||||
{IsSubmitting ? "Please Wait..." : "Submit"}
|
||||
</button>
|
||||
<button className="btn btn-sm btn-secondary" type="button" onClick={onCLosed}>
|
||||
<button
|
||||
className="btn btn-sm btn-secondary"
|
||||
type="button"
|
||||
onClick={handleClosed}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
|
||||
455
src/components/Directory/UpdateContact.jsx
Normal file
455
src/components/Directory/UpdateContact.jsx
Normal file
@ -0,0 +1,455 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
useForm,
|
||||
useFieldArray,
|
||||
FormProvider,
|
||||
useFormContext,
|
||||
} from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import TagInput from "../common/TagInput";
|
||||
import IconButton from "../common/IconButton";
|
||||
import useMaster, {
|
||||
useContactCategory,
|
||||
useContactTags,
|
||||
} from "../../hooks/masterHook/useMaster";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { changeMaster } from "../../slices/localVariablesSlice";
|
||||
import { useBuckets } from "../../hooks/useDirectory";
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
import SelectMultiple from "../common/SelectMultiple";
|
||||
import { ContactSchema } from "./DirectorySchema";
|
||||
|
||||
const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
|
||||
const selectedMaster = useSelector(
|
||||
(store) => store.localVariables.selectedMaster
|
||||
);
|
||||
const [categoryData, setCategoryData] = useState([]);
|
||||
const [TagsData, setTagsData] = useState([]);
|
||||
const { data, loading } = useMaster();
|
||||
const { buckets, loading: bucketsLoaging } = useBuckets();
|
||||
const { projects, loading: projectLoading } = useProjects();
|
||||
const { contactCategory, loading: contactCategoryLoading } =
|
||||
useContactCategory();
|
||||
const { contactTags, loading: Tagloading } = useContactTags();
|
||||
const [ IsSubmitting, setSubmitting ] = useState( false );
|
||||
const [isInitialized, setIsInitialized] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const methods = useForm({
|
||||
resolver: zodResolver(ContactSchema),
|
||||
defaultValues: {
|
||||
name: "",
|
||||
organization: "",
|
||||
contactCategoryId: null,
|
||||
address: "",
|
||||
description: "",
|
||||
projectIds: [],
|
||||
contactEmails: [],
|
||||
contactPhones: [],
|
||||
tags: [],
|
||||
bucketIds: [],
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
control,
|
||||
getValues,
|
||||
trigger,
|
||||
setValue,
|
||||
watch,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = methods;
|
||||
|
||||
const {
|
||||
fields: emailFields,
|
||||
append: appendEmail,
|
||||
remove: removeEmail,
|
||||
} = useFieldArray({ control, name: "contactEmails" });
|
||||
|
||||
const {
|
||||
fields: phoneFields,
|
||||
append: appendPhone,
|
||||
remove: removePhone,
|
||||
} = useFieldArray({ control, name: "contactPhones" });
|
||||
|
||||
const handleAddEmail = async () => {
|
||||
const emails = getValues("contactEmails");
|
||||
const lastIndex = emails.length - 1;
|
||||
const valid = await trigger(`contactEmails.${lastIndex}.emailAddress`);
|
||||
if (valid) {
|
||||
appendEmail({ label: "Work", emailAddress: "" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddPhone = async () => {
|
||||
const phones = getValues("contactPhones");
|
||||
const lastIndex = phones.length - 1;
|
||||
const valid = await trigger(`contactPhones.${lastIndex}.phoneNumber`);
|
||||
if (valid) {
|
||||
appendPhone({ label: "Office", phoneNumber: "" });
|
||||
}
|
||||
};
|
||||
|
||||
const watchBucketIds = watch("bucketIds");
|
||||
|
||||
const toggleBucketId = (id) => {
|
||||
const updated = watchBucketIds?.includes(id)
|
||||
? watchBucketIds.filter((val) => val !== id)
|
||||
: [...watchBucketIds, id];
|
||||
|
||||
setValue("bucketIds", updated, { shouldValidate: true });
|
||||
};
|
||||
const handleCheckboxChange = (id) => {
|
||||
const updated = watchBucketIds.includes(id)
|
||||
? watchBucketIds.filter((i) => i !== id)
|
||||
: [...watchBucketIds, id];
|
||||
|
||||
setValue("bucketIds", updated, { shouldValidate: true });
|
||||
};
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
debugger;
|
||||
const cleaned = {
|
||||
...data,
|
||||
contactEmails: (data.contactEmails || []).filter(
|
||||
(e) => e.emailAddress?.trim() !== ""
|
||||
),
|
||||
contactPhones: (data.contactPhones || []).filter(
|
||||
(p) => p.phoneNumber?.trim() !== ""
|
||||
),
|
||||
};
|
||||
|
||||
setSubmitting(true);
|
||||
await submitContact({ ...cleaned, id: existingContact.id });
|
||||
setSubmitting(false);
|
||||
|
||||
};
|
||||
|
||||
const handleClosed = () => {
|
||||
onCLosed();
|
||||
};
|
||||
useEffect(() => {
|
||||
const isValidContact =
|
||||
existingContact &&
|
||||
typeof existingContact === "object" &&
|
||||
!Array.isArray(existingContact);
|
||||
|
||||
if (!isInitialized &&isValidContact && TagsData) {
|
||||
reset({
|
||||
name: existingContact.name || "",
|
||||
organization: existingContact.organization || "",
|
||||
contactEmails: existingContact.contactEmails || [],
|
||||
contactPhones: existingContact.contactPhones || [],
|
||||
contactCategoryId: existingContact.contactCategory?.id || null,
|
||||
address: existingContact.address || "",
|
||||
description: existingContact.description || "",
|
||||
projectIds: existingContact.projectIds || null,
|
||||
tags: existingContact.tags || [],
|
||||
bucketIds: existingContact.bucketIds || [],
|
||||
} );
|
||||
|
||||
if (!existingContact.contactPhones || existingContact.contactPhones.length === 0) {
|
||||
appendPhone({ label: "Office", phoneNumber: "" });
|
||||
}
|
||||
|
||||
if (!existingContact.contactEmails || existingContact.contactEmails.length === 0) {
|
||||
appendEmail({ label: "Work", emailAddress: "" });
|
||||
}
|
||||
setIsInitialized(true)
|
||||
}
|
||||
|
||||
return()=> reset()
|
||||
}, [ existingContact, buckets, projects ] );
|
||||
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="d-flex justify-content-center align-items-center">
|
||||
<IconButton size={15} iconClass="bx bx-user-plus" color="primary" />{" "}
|
||||
<h6 className="m-0 fw-18"> Update Contact</h6>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-6 text-start">
|
||||
<label className="form-label">Name</label>
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
{...register("name")}
|
||||
/>
|
||||
{errors.name && (
|
||||
<small className="danger-text">{errors.name.message}</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 text-start">
|
||||
<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>
|
||||
<div className="row mt-1">
|
||||
<div className="col-md-6">
|
||||
{emailFields.map((field, index) => (
|
||||
<div
|
||||
key={field.id}
|
||||
className="row d-flex align-items-center mb-1"
|
||||
>
|
||||
<div className="col-5 text-start">
|
||||
<label className="form-label">Label</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register(`contactEmails.${index}.label`)}
|
||||
>
|
||||
<option value="Work">Work</option>
|
||||
<option value="Personal">Personal</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
{errors.contactEmails?.[index]?.label && (
|
||||
<small className="danger-text">
|
||||
{errors.contactEmails[index].label.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-7 text-start">
|
||||
<label className="form-label">Email</label>
|
||||
<div className="d-flex align-items-center">
|
||||
<input
|
||||
type="email"
|
||||
className="form-control form-control-sm"
|
||||
{...register(`contactEmails.${index}.emailAddress`)}
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
{index === emailFields.length - 1 ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-primary ms-1"
|
||||
onClick={handleAddEmail}
|
||||
style={{ width: "24px", height: "24px" }}
|
||||
>
|
||||
<i className="bx bx-plus bx-xs" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-danger ms-1 p-0"
|
||||
onClick={() => removeEmail(index)}
|
||||
style={{ width: "24px", height: "24px" }}
|
||||
>
|
||||
<i className="bx bx-x bx-xs" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{errors.contactEmails?.[index]?.emailAddress && (
|
||||
<small className="danger-text">
|
||||
{errors.contactEmails[index].emailAddress.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
{phoneFields.map((field, index) => (
|
||||
<div
|
||||
key={field.id}
|
||||
className="row d-flex align-items-center mb-2"
|
||||
>
|
||||
<div className="col-5 text-start">
|
||||
<label className="form-label">Label</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register(`contactPhones.${index}.label`)}
|
||||
>
|
||||
<option value="Office">Office</option>
|
||||
<option value="Personal">Personal</option>
|
||||
<option value="Business">Business</option>
|
||||
</select>
|
||||
{errors.phone?.[index]?.label && (
|
||||
<small className="danger-text">
|
||||
{errors.ContactPhones[index].label.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-7 text-start">
|
||||
<label className="form-label">Phone</label>
|
||||
<div className="d-flex align-items-center">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
{...register(`contactPhones.${index}.phoneNumber`)}
|
||||
placeholder="9876543210"
|
||||
/>
|
||||
{index === phoneFields.length - 1 ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-primary ms-1"
|
||||
onClick={handleAddPhone}
|
||||
style={{ width: "24px", height: "24px" }}
|
||||
>
|
||||
<i className="bx bx-plus bx-xs" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-danger ms-1"
|
||||
onClick={() => removePhone(index)}
|
||||
style={{ width: "24px", height: "24px" }}
|
||||
>
|
||||
<i className="bx bx-x bx-xs" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{errors.contactPhones?.[index]?.phoneNumber && (
|
||||
<small className="danger-text">
|
||||
{errors.contactPhones[index].phoneNumber.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{errors.contactPhone?.message && (
|
||||
<div className="danger-text">{errors.contactPhone.message}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="row my-1">
|
||||
<div className="col-md-6 text-start">
|
||||
<label className="form-label">Category</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("contactCategoryId")}
|
||||
>
|
||||
{contactCategoryLoading && !contactCategory ? (
|
||||
<option disabled value="">
|
||||
Loading...
|
||||
</option>
|
||||
) : (
|
||||
<>
|
||||
<option disabled selected value="">
|
||||
Select Category
|
||||
</option>
|
||||
{contactCategory?.map((cate) => (
|
||||
<option key={cate.id} value={cate.id}>
|
||||
{cate.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
{errors.contactCategoryId && (
|
||||
<small className="danger-text">
|
||||
{errors.contactCategoryId.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<SelectMultiple
|
||||
name="projectIds"
|
||||
label="Select Projects"
|
||||
options={projects}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
IsLoading={projectLoading}
|
||||
/>
|
||||
{errors.projectIds && (
|
||||
<small className="danger-text">{errors.projectIds.message}</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-start">
|
||||
<TagInput name="tags" label="Tags" options={contactTags} />
|
||||
{errors.tags && (
|
||||
<small className="danger-text">{errors.tags.message}</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-12 mt-1 text-start">
|
||||
<label className="form-label ">Select Label</label>
|
||||
|
||||
<ul
|
||||
className="d-flex flex-wrap px-1 list-unstyled overflow-auto mb-0"
|
||||
style={{ maxHeight: "80px" }}
|
||||
>
|
||||
{bucketsLoaging && <p>Loading...</p>}
|
||||
{buckets?.map((item) => (
|
||||
<li
|
||||
key={item.id}
|
||||
className="list-inline-item flex-shrink-0 me-6 mb-2"
|
||||
>
|
||||
<div className="form-check ">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
id={`item-${item.id}`}
|
||||
checked={watchBucketIds.includes(item.id)}
|
||||
onChange={() => handleCheckboxChange(item.id)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label"
|
||||
htmlFor={`item-${item.id}`}
|
||||
>
|
||||
{item.name}
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{errors.BucketIds && (
|
||||
<small className="text-danger">{errors.BucketIds.message}</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label">Address</label>
|
||||
<textarea
|
||||
className="form-control form-control-sm"
|
||||
rows="2"
|
||||
{...register("address")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-start">
|
||||
<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-center gap-1 py-2">
|
||||
<button className="btn btn-sm btn-primary" type="submit" disabled={IsSubmitting}>
|
||||
{IsSubmitting ? "Please Wait..." : "Update"}
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm btn-secondary"
|
||||
type="button"
|
||||
onClick={handleClosed}
|
||||
disabled={IsSubmitting}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpdateContact;
|
||||
158
src/components/common/MultiSelectDropdown.css
Normal file
158
src/components/common/MultiSelectDropdown.css
Normal file
@ -0,0 +1,158 @@
|
||||
/* Container for the multi-select dropdown */
|
||||
.multi-select-dropdown-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Header of the dropdown */
|
||||
.multi-select-dropdown-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.multi-select-dropdown-header .placeholder-style {
|
||||
color: #6c757d;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.multi-select-dropdown-header .placeholder-style-selected {
|
||||
/* color: #0d6efd; */
|
||||
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Arrow icon */
|
||||
.multi-select-dropdown-arrow {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* Dropdown options */
|
||||
.multi-select-dropdown-options {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
background-color: white;
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* Search input */
|
||||
.multi-select-dropdown-search {
|
||||
padding: 4px;
|
||||
border-bottom: 1px solid #f1f3f5;
|
||||
}
|
||||
|
||||
.multi-select-dropdown-search-input {
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Select All checkbox */
|
||||
.multi-select-dropdown-select-all {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.multi-select-dropdown-select-all .custom-checkbox {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.multi-select-dropdown-select-all-label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Options in dropdown */
|
||||
.multi-select-dropdown-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.multi-select-dropdown-option:hover {
|
||||
background-color: #f1f3f5;
|
||||
}
|
||||
|
||||
.multi-select-dropdown-option.selected {
|
||||
background-color: #dbe7ff;
|
||||
color: #0d6efd;
|
||||
}
|
||||
|
||||
.multi-select-dropdown-option input[type="checkbox"] {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* Custom checkbox */
|
||||
.custom-checkbox {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ddd;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.custom-checkbox:checked {
|
||||
background-color: #0d6efd;
|
||||
border-color: #0d6efd;
|
||||
}
|
||||
|
||||
.custom-checkbox:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.multi-select-dropdown-Not-found{
|
||||
text-align: center;
|
||||
padding: 1px 3px;
|
||||
}
|
||||
.multi-select-dropdown-Not-found:hover {
|
||||
background: #e2dfdf;
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* Responsive styles */
|
||||
@media (max-width: 767px) {
|
||||
.multi-select-dropdown-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.multi-select-dropdown-header {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.multi-select-dropdown-options {
|
||||
width: 100%;
|
||||
max-height: 200px;
|
||||
}
|
||||
}
|
||||
125
src/components/common/SelectMultiple.jsx
Normal file
125
src/components/common/SelectMultiple.jsx
Normal file
@ -0,0 +1,125 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { useFormContext } from 'react-hook-form';
|
||||
import './MultiSelectDropdown.css';
|
||||
|
||||
const SelectMultiple = ({
|
||||
name,
|
||||
options = [],
|
||||
label = 'Select options',
|
||||
labelKey = 'name',
|
||||
valueKey = 'id',
|
||||
placeholder = 'Please select...',
|
||||
IsLoading = false
|
||||
}) => {
|
||||
const { setValue, watch } = useFormContext();
|
||||
const selectedValues = watch(name) || [];
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const dropdownRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
const handleCheckboxChange = (value) => {
|
||||
const updated = selectedValues.includes(value)
|
||||
? selectedValues.filter((v) => v !== value)
|
||||
: [...selectedValues, value];
|
||||
|
||||
setValue(name, updated, { shouldValidate: true });
|
||||
};
|
||||
|
||||
const filteredOptions = options.filter((item) =>
|
||||
item[labelKey]?.toLowerCase().includes(searchText.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<div ref={dropdownRef} className="multi-select-dropdown-container">
|
||||
<label className="form-label mb-1">{label}</label>
|
||||
|
||||
<div
|
||||
className="multi-select-dropdown-header"
|
||||
onClick={() => setIsOpen((prev) => !prev)}
|
||||
>
|
||||
<span
|
||||
className={
|
||||
selectedValues.length > 0
|
||||
? 'placeholder-style-selected'
|
||||
: 'placeholder-style'
|
||||
}
|
||||
>
|
||||
<div className="selected-badges-container">
|
||||
{selectedValues.length > 0 ? (
|
||||
selectedValues.map((val) => {
|
||||
const found = options.find((opt) => opt[valueKey] === val);
|
||||
return (
|
||||
<span key={val} className="badge badge-selected-item mx-1">
|
||||
{found ? found[labelKey] : ''}
|
||||
</span>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<span className="placeholder-text">{placeholder}</span>
|
||||
)}
|
||||
</div>
|
||||
</span>
|
||||
<i className="bx bx-chevron-down"></i>
|
||||
</div>
|
||||
|
||||
|
||||
{isOpen && (
|
||||
<div className="multi-select-dropdown-options">
|
||||
<div className="multi-select-dropdown-search">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="multi-select-dropdown-search-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{filteredOptions.map((item) => {
|
||||
const labelVal = item[labelKey];
|
||||
const valueVal = item[valueKey];
|
||||
const isChecked = selectedValues.includes(valueVal);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={valueVal}
|
||||
className={`multi-select-dropdown-option ${isChecked ? 'selected' : ''}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="custom-checkbox form-check-input"
|
||||
checked={isChecked}
|
||||
onChange={() => handleCheckboxChange(valueVal)}
|
||||
/>
|
||||
<label className="text-secondary">{labelVal}</label>
|
||||
</div>
|
||||
);
|
||||
} )}
|
||||
{!IsLoading && filteredOptions.length === 0 && (
|
||||
<div className='multi-select-dropdown-Not-found'>
|
||||
<label className="text-muted">Not Found {`'${searchText}'`}</label>
|
||||
</div>
|
||||
)}
|
||||
{IsLoading && filteredOptions.length === 0 && (
|
||||
<div className='multi-select-dropdown-Not-found'>
|
||||
<label className="text-muted">Loading...</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectMultiple;
|
||||
@ -1,30 +1,28 @@
|
||||
import { useFormContext } from "react-hook-form";
|
||||
import { useFormContext, useWatch } from "react-hook-form";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { changeMaster } from "../../slices/localVariablesSlice";
|
||||
|
||||
const TagInput = ({
|
||||
label = "Tags",
|
||||
name = "tags",
|
||||
placeholder = "Start typing to add...",
|
||||
placeholder = "Start typing to add... like employee, manager",
|
||||
color = "#e9ecef",
|
||||
options = [],
|
||||
}) => {
|
||||
const [tags, setTags] = useState([]);
|
||||
const [input, setInput] = useState("");
|
||||
const [suggestions, setSuggestions] = useState([]);
|
||||
const { setValue, trigger } = useFormContext();
|
||||
const dispatch = useDispatch();
|
||||
const { setValue, trigger, control } = useFormContext();
|
||||
const watchedTags = useWatch({ control, name });
|
||||
|
||||
useEffect(() => {
|
||||
setValue(
|
||||
name,
|
||||
tags.map((tag) => ({
|
||||
id: tag.id ?? null,
|
||||
name: tag.name,
|
||||
}))
|
||||
);
|
||||
}, [ tags, name, setValue ] );
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
Array.isArray(watchedTags) &&
|
||||
JSON.stringify(tags) !== JSON.stringify(watchedTags)
|
||||
) {
|
||||
setTags(watchedTags);
|
||||
}
|
||||
}, [JSON.stringify(watchedTags)]);
|
||||
|
||||
useEffect(() => {
|
||||
if (input.trim() === "") {
|
||||
@ -32,29 +30,34 @@ const TagInput = ({
|
||||
} else {
|
||||
const filtered = options?.filter(
|
||||
(opt) =>
|
||||
opt?.name?.toLowerCase()?.includes(input?.toLowerCase()) &&
|
||||
!tags?.some((tag) => tag?.name === opt?.name)
|
||||
opt?.name?.toLowerCase()?.includes(input.toLowerCase()) &&
|
||||
!tags?.some((tag) => tag.name === opt.name)
|
||||
);
|
||||
setSuggestions(filtered);
|
||||
}
|
||||
}, [input, options, tags]);
|
||||
|
||||
const addTag = async ( tagObj ) =>
|
||||
{
|
||||
if (!tags.some((tag) => tag.id === tagObj.id)) {
|
||||
const cleanedTag = {
|
||||
id: tagObj.id ?? null,
|
||||
name: tagObj.name,
|
||||
};
|
||||
const newTags = [...tags, cleanedTag];
|
||||
setTags(newTags);
|
||||
setValue(name, newTags, { shouldValidate: true }); // ✅ only id + name
|
||||
await trigger(name);
|
||||
setInput("");
|
||||
setSuggestions([]);
|
||||
}
|
||||
};
|
||||
const addTag = async (tagObj) => {
|
||||
if (!tags.some((tag) => tag.name === tagObj.name)) {
|
||||
const cleanedTag = {
|
||||
id: tagObj.id ?? null,
|
||||
name: tagObj.name,
|
||||
};
|
||||
const newTags = [...tags, cleanedTag];
|
||||
setTags(newTags);
|
||||
setValue(name, newTags, { shouldValidate: true });
|
||||
await trigger(name);
|
||||
setInput("");
|
||||
setSuggestions([]);
|
||||
}
|
||||
};
|
||||
|
||||
const removeTag = (indexToRemove) => {
|
||||
const newTags = tags.filter((_, i) => i !== indexToRemove);
|
||||
setTags(newTags);
|
||||
setValue(name, newTags, { shouldValidate: true });
|
||||
trigger(name);
|
||||
};
|
||||
|
||||
const handleInputKeyDown = (e) => {
|
||||
if (e.key === "Enter" && input.trim() !== "") {
|
||||
@ -69,7 +72,7 @@ const TagInput = ({
|
||||
name: input.trim(),
|
||||
description: input.trim(),
|
||||
};
|
||||
addTag(newTag); // Call async function (not awaiting because it's UI input)
|
||||
addTag(newTag);
|
||||
} else if (e.key === "Backspace" && input === "") {
|
||||
setTags((prev) => prev.slice(0, -1));
|
||||
}
|
||||
@ -79,13 +82,6 @@ const TagInput = ({
|
||||
addTag(suggestion);
|
||||
};
|
||||
|
||||
const removeTag = (indexToRemove) => {
|
||||
const newTags = tags.filter((_, i) => i !== indexToRemove);
|
||||
setTags(newTags);
|
||||
setValue(name, newTags, { shouldValidate: true });
|
||||
trigger(name);
|
||||
};
|
||||
|
||||
const backgroundColor = color || "#f8f9fa";
|
||||
const iconColor = `var(--bs-${color})`;
|
||||
|
||||
@ -120,6 +116,7 @@ const TagInput = ({
|
||||
/>
|
||||
</span>
|
||||
))}
|
||||
|
||||
<input
|
||||
type="text"
|
||||
value={input}
|
||||
@ -132,17 +129,17 @@ const TagInput = ({
|
||||
flex: 1,
|
||||
minWidth: "120px",
|
||||
}}
|
||||
onFocus={() => dispatch(changeMaster("Contact Tag"))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{suggestions.length > 0 && (
|
||||
<ul
|
||||
className="list-group position-absolute mt-1 bg-white w-50 shadow-sm"
|
||||
className="list-group position-absolute mt-1 bg-white w-50 shadow-sm "
|
||||
style={{
|
||||
zIndex: 1000,
|
||||
maxHeight: "150px",
|
||||
overflowY: "auto",
|
||||
boxShadow:"0px 4px 10px rgba(0, 0, 0, 0.2)",borderRadius:"3px",border:"1px solid #ddd"
|
||||
}}
|
||||
>
|
||||
{suggestions.map((sugg, i) => (
|
||||
@ -150,7 +147,8 @@ const TagInput = ({
|
||||
key={i}
|
||||
className="dropdown-item p-1 hoverBox"
|
||||
onClick={() => handleSuggestionClick(sugg)}
|
||||
style={{ cursor: "pointer", fontSize: "0.875rem" }}
|
||||
style={{cursor: "pointer", fontSize: "0.875rem"}}
|
||||
|
||||
>
|
||||
{sugg.name}
|
||||
</li>
|
||||
@ -161,5 +159,4 @@ const TagInput = ({
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TagInput;
|
||||
|
||||
@ -157,4 +157,67 @@ export const useActivitiesMaster = () =>
|
||||
}, [] )
|
||||
|
||||
return {categories,categoryLoading,categoryError}
|
||||
}
|
||||
}
|
||||
|
||||
export const useContactCategory = () =>
|
||||
{
|
||||
const [ contactCategory, setContactCategory ] = useState( [] )
|
||||
const [ loading, setLoading ] = useState( false )
|
||||
const [ Error, setError ] = useState()
|
||||
|
||||
const fetchConatctCategory = async() =>
|
||||
{
|
||||
const cache_Category = getCachedData( "Contact Category" );
|
||||
if ( !cache_Category )
|
||||
{
|
||||
try
|
||||
{
|
||||
let resp = await MasterRespository.getContactCategory();
|
||||
setContactCategory( resp.data );
|
||||
cacheData("Contact Category",resp.data)
|
||||
} catch ( error )
|
||||
{
|
||||
setError(error)
|
||||
}
|
||||
} else
|
||||
{
|
||||
setContactCategory(cache_Category)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect( () =>
|
||||
{
|
||||
fetchConatctCategory()
|
||||
}, [] )
|
||||
return { contactCategory,loading,Error}
|
||||
}
|
||||
export const useContactTags = () => {
|
||||
const [contactTags, setContactTags] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchContactTag = async () => {
|
||||
const cache_Tags = getCachedData("Contact Tag");
|
||||
|
||||
if (!cache_Tags) {
|
||||
setLoading(true);
|
||||
try {
|
||||
const resp = await MasterRespository.getContactTag();
|
||||
setContactTags(resp.data);
|
||||
cacheData("Contact Tag", resp.data);
|
||||
} catch (err) {
|
||||
setError(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
} else {
|
||||
setContactTags(cache_Tags);
|
||||
}
|
||||
};
|
||||
|
||||
fetchContactTag();
|
||||
}, []);
|
||||
|
||||
return { contactTags, loading, error };
|
||||
};
|
||||
@ -1,77 +1,63 @@
|
||||
import {useEffect, useState} from "react"
|
||||
import {DirectoryRepository} from "../repositories/DirectoryRepository";
|
||||
import {cacheData, getCachedData} from "../slices/apiDataManager";
|
||||
import { useEffect, useState } from "react";
|
||||
import { DirectoryRepository } from "../repositories/DirectoryRepository";
|
||||
import { cacheData, getCachedData } from "../slices/apiDataManager";
|
||||
|
||||
export const useDirectory = () =>
|
||||
{
|
||||
const [ contacts, setContacts ] = useState( [] )
|
||||
const [ loading, setLoading ] = useState( false )
|
||||
const [ error, setError ] = useState();
|
||||
export const useDirectory = () => {
|
||||
const [contacts, setContacts] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState();
|
||||
|
||||
|
||||
|
||||
const fetch = async() =>
|
||||
{
|
||||
const cache_contacts = getCachedData( "contacts" );
|
||||
if ( !cache_contacts )
|
||||
{
|
||||
setLoading(true)
|
||||
try
|
||||
{
|
||||
const response = await DirectoryRepository.GetContacts();
|
||||
setContacts( response.data )
|
||||
cacheData( "contacts", response.data )
|
||||
setLoading(false)
|
||||
} catch ( error )
|
||||
{
|
||||
setError( error );
|
||||
setLoading(false)
|
||||
}
|
||||
} else
|
||||
{
|
||||
setContacts(cache_contacts)
|
||||
}
|
||||
|
||||
const fetch = async () => {
|
||||
const cache_contacts = getCachedData("contacts");
|
||||
if (!cache_contacts) {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await DirectoryRepository.GetContacts();
|
||||
setContacts(response.data);
|
||||
cacheData("contacts", response.data);
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
setError(error);
|
||||
setLoading(false);
|
||||
}
|
||||
} else {
|
||||
setContacts(cache_contacts);
|
||||
}
|
||||
};
|
||||
|
||||
useState( () =>
|
||||
{
|
||||
fetch()
|
||||
}, [] )
|
||||
return {contacts,loading,error}
|
||||
}
|
||||
useState(() => {
|
||||
fetch();
|
||||
}, []);
|
||||
return { contacts, loading, error };
|
||||
};
|
||||
|
||||
export const useBuckets = () =>
|
||||
{
|
||||
const [ buckets, setbuckets ] = useState();
|
||||
const [ loading, setLoading ] = useState();
|
||||
const [ Error, setError ] = useState( '' )
|
||||
|
||||
const fetch = async() =>
|
||||
{ const cache_buckets = getCachedData("buckets")
|
||||
if ( !cache_buckets )
|
||||
{
|
||||
setLoading(true)
|
||||
try
|
||||
{
|
||||
const resp = await DirectoryRepository.GetBucktes();
|
||||
setbuckets( resp.data );
|
||||
cacheData( "bucktes", resp.data )
|
||||
setLoading(false)
|
||||
} catch ( error )
|
||||
{
|
||||
const msg = error.response.data.message || error.message || "Something wrong";
|
||||
setError(msg)
|
||||
}
|
||||
} else
|
||||
{
|
||||
setbuckets(cache_buckets)
|
||||
}
|
||||
export const useBuckets = () => {
|
||||
const [buckets, setBuckets] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const fetchBuckets = async () => {
|
||||
const cacheBuckets = getCachedData("buckets");
|
||||
if (!cacheBuckets) {
|
||||
setLoading( true );
|
||||
try {
|
||||
const resp = await DirectoryRepository.GetBucktes();
|
||||
setBuckets(resp.data);
|
||||
cacheData( "buckets", resp.data );
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
const msg =
|
||||
error?.response?.data?.message || error?.message || "Something went wrong";
|
||||
setError(msg);
|
||||
}
|
||||
} else {
|
||||
setBuckets(cacheBuckets);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect( () =>
|
||||
{
|
||||
fetch()
|
||||
}, [] )
|
||||
return {buckets,loading,Error}
|
||||
}
|
||||
useEffect(() => {
|
||||
fetchBuckets();
|
||||
}, []);
|
||||
|
||||
return { buckets, loading, error };
|
||||
};
|
||||
|
||||
@ -164,4 +164,7 @@ padding: 1px !important;
|
||||
|
||||
.accordion-button:not(.collapsed) .toggle-icon {
|
||||
content: "\f146"; /* minus-circle */
|
||||
}
|
||||
.hoverBox:hover{
|
||||
background-color: #f1f3f5;
|
||||
}
|
||||
@ -8,35 +8,50 @@ import { useDirectory } from "../../hooks/useDirectory";
|
||||
import { DirectoryRepository } from "../../repositories/DirectoryRepository";
|
||||
import { getCachedData } from "../../slices/apiDataManager";
|
||||
import showToast from "../../services/toastService";
|
||||
import UpdateContact from "../../components/Directory/UpdateContact";
|
||||
|
||||
const Directory = () => {
|
||||
const [isOpenModal, setIsOpenModal] = useState(false);
|
||||
const closedModel = () => setIsOpenModal(false);
|
||||
const [selectedContact, setSelectedContact] = useState(null);
|
||||
const [ContatList, setContactList] = useState([]);
|
||||
|
||||
const { contacts, loading } = useDirectory();
|
||||
const submitContact = async (data, setLoading, reset) => {
|
||||
try
|
||||
{
|
||||
debugger
|
||||
const resp = await DirectoryRepository.CreateContact(data)
|
||||
const submitContact = async (data) => {
|
||||
try {
|
||||
let response;
|
||||
let updatedContacts;
|
||||
const contacts_cache = getCachedData("contacts") || [];
|
||||
const updated_contacts = [...contacts_cache, resp.data];
|
||||
|
||||
setContactList(updated_contacts);
|
||||
showToast(resp.message || "Contact created successfully", "success");
|
||||
setLoading(false);
|
||||
reset();
|
||||
setIsOpenModal(false);
|
||||
if (selectedContact) {
|
||||
|
||||
response = await DirectoryRepository.UpdateContact(data.id, data);
|
||||
updatedContacts = contacts_cache.map((contact) =>
|
||||
contact.id === data.id ? response.data : contact
|
||||
);
|
||||
showToast("Contact updated successfully", "success");
|
||||
setIsOpenModal( false );
|
||||
setSelectedContact(null);
|
||||
} else {
|
||||
response = await DirectoryRepository.CreateContact(data);
|
||||
updatedContacts = [...contacts_cache, response.data];
|
||||
showToast("Contact created successfully", "success");
|
||||
setIsOpenModal(false);
|
||||
}
|
||||
|
||||
setContactList(updatedContacts);
|
||||
} catch (error) {
|
||||
const msg =
|
||||
error.response.data.message ||
|
||||
error.response?.data?.message ||
|
||||
error.message ||
|
||||
"Error Occured during api calling !";
|
||||
"Error occurred during API call!";
|
||||
showToast(msg, "error");
|
||||
}
|
||||
};
|
||||
|
||||
const closedModel = () => {
|
||||
setIsOpenModal(false);
|
||||
setSelectedContact(null);
|
||||
};
|
||||
useEffect(() => {
|
||||
setContactList(contacts);
|
||||
}, [contacts]);
|
||||
@ -50,11 +65,23 @@ const Directory = () => {
|
||||
></Breadcrumb>
|
||||
|
||||
{isOpenModal && (
|
||||
<GlobalModel isOpen={isOpenModal} closeModal={()=>setIsOpenModal(false)} size="lg">
|
||||
<ManageDirectory
|
||||
submitContact={submitContact}
|
||||
onCLosed={closedModel}
|
||||
/>
|
||||
<GlobalModel
|
||||
isOpen={isOpenModal}
|
||||
closeModal={() => setIsOpenModal(false)}
|
||||
size="lg"
|
||||
>
|
||||
{selectedContact ? (
|
||||
<UpdateContact
|
||||
existingContact={selectedContact}
|
||||
submitContact={submitContact}
|
||||
onCLosed={closedModel}
|
||||
/>
|
||||
) : (
|
||||
<ManageDirectory
|
||||
submitContact={submitContact}
|
||||
onCLosed={closedModel}
|
||||
/>
|
||||
)}
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
@ -93,7 +120,7 @@ const Directory = () => {
|
||||
<span>Name</span>
|
||||
</div>
|
||||
</th>
|
||||
<th className="px-2 text-start">
|
||||
<th className="px-2 text-start">
|
||||
<div className="d-flex text-center align-items-center gap-1 justify-content-start">
|
||||
<IconButton
|
||||
size={12}
|
||||
@ -169,21 +196,22 @@ const Directory = () => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="table-border-bottom-0 overflow-auto ">
|
||||
{(loading && ContatList.length === 0) && (
|
||||
{loading && ContatList.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={10}>Loading...</td>
|
||||
</tr>
|
||||
)}
|
||||
{(!loading && contacts.length == 0 && ContatList.length === 0) && (
|
||||
{!loading && contacts.length == 0 && ContatList.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={10}>No Contact Found</td>
|
||||
</tr>
|
||||
)}
|
||||
)}
|
||||
{!loading &&
|
||||
ContatList.map((contact) => (
|
||||
<ListViewDirectory
|
||||
contact={contact}
|
||||
submitContact={submitContact}
|
||||
setSelectedContact={setSelectedContact}
|
||||
setIsOpenModal={setIsOpenModal}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
|
||||
@ -2,7 +2,8 @@ import {api} from "../utils/axiosClient";
|
||||
|
||||
export const DirectoryRepository = {
|
||||
GetContacts: () => api.get( '/api/directory' ),
|
||||
CreateContact:(data)=>api.post('/api/directory',data),
|
||||
CreateContact: ( data ) => api.post( '/api/directory', data ),
|
||||
UpdateContact:(id,data)=>api.put(`/api/directory/${id}`,data),
|
||||
|
||||
GetBucktes:()=>api.get(`/api/Directory/buckets`)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user