493 lines
16 KiB
JavaScript
493 lines
16 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import { useForm, useFieldArray, FormProvider } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import TagInput from "../common/TagInput";
|
|
import {
|
|
useBuckets,
|
|
useContactDetails,
|
|
useCreateContact,
|
|
useDesignation,
|
|
useOrganization,
|
|
useUpdateContact,
|
|
} from "../../hooks/useDirectory";
|
|
import { useProjects } from "../../hooks/useProjects";
|
|
import {
|
|
useContactCategory,
|
|
useContactTags,
|
|
} from "../../hooks/masterHook/useMaster";
|
|
import SelectMultiple from "../common/SelectMultiple";
|
|
import { ContactSchema, defaultContactValue } from "./DirectorySchema";
|
|
import InputSuggestions from "../common/InputSuggestion";
|
|
import Label from "../common/Label";
|
|
|
|
const ManageContact = ({ contactId, closeModal }) => {
|
|
// fetch master data
|
|
const { buckets, loading: bucketsLoaging } = useBuckets();
|
|
const { projects, loading: projectLoading } = useProjects();
|
|
const { contactCategory, loading: contactCategoryLoading } =
|
|
useContactCategory();
|
|
const { organizationList } = useOrganization();
|
|
const { designationList } = useDesignation();
|
|
const { contactTags } = useContactTags();
|
|
|
|
// fetch contact details if editing
|
|
const { data: contactData, isLoading: isContactLoading } = useContactDetails(
|
|
contactId,
|
|
{
|
|
enabled: !!contactId,
|
|
}
|
|
);
|
|
|
|
const [showSuggestions, setShowSuggestions] = useState(false);
|
|
const [filteredDesignationList, setFilteredDesignationList] = useState([]);
|
|
|
|
const methods = useForm({
|
|
resolver: zodResolver(ContactSchema),
|
|
defaultValues: defaultContactValue,
|
|
});
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
control,
|
|
getValues,
|
|
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" });
|
|
|
|
useEffect(() => {
|
|
if (contactId && contactData) {
|
|
reset({
|
|
name: contactData.name || "",
|
|
description: contactData.description || "",
|
|
|
|
designation: contactData.designation || "",
|
|
organization: contactData.organization || "",
|
|
|
|
contactEmails: contactData.contactEmails?.length
|
|
? contactData.contactEmails
|
|
: [{ label: "Work", emailAddress: "" }],
|
|
|
|
contactPhones: contactData.contactPhones?.length
|
|
? contactData.contactPhones
|
|
: [{ label: "Office", phoneNumber: "" }],
|
|
|
|
contactCategoryId: contactData.contactCategory?.id || "",
|
|
address: contactData?.address || "",
|
|
projectIds: contactData.projects?.map((p) => p.id) || [],
|
|
bucketIds: contactData.buckets?.map((b) => b.id) || [],
|
|
tags: contactData.tags || [],
|
|
});
|
|
}
|
|
}, [contactId, contactData, reset]);
|
|
|
|
useEffect(() => {
|
|
if (!contactId) {
|
|
if (emailFields.length === 0)
|
|
appendEmail({ label: "Work", emailAddress: "" });
|
|
if (phoneFields.length === 0)
|
|
appendPhone({ label: "Office", phoneNumber: "" });
|
|
}
|
|
}, [
|
|
contactId,
|
|
emailFields.length,
|
|
phoneFields.length,
|
|
appendEmail,
|
|
appendPhone,
|
|
]);
|
|
|
|
const watchBucketIds = watch("bucketIds") || [];
|
|
|
|
const handleDesignationChange = (e) => {
|
|
const val = e.target.value;
|
|
const matches = designationList.filter((org) =>
|
|
org.toLowerCase().includes(val.toLowerCase())
|
|
);
|
|
setFilteredDesignationList(matches);
|
|
setShowSuggestions(true);
|
|
setTimeout(() => setShowSuggestions(false), 5000);
|
|
};
|
|
|
|
const handleSelectDesignation = (val) => {
|
|
setShowSuggestions(false);
|
|
setValue("designation", val);
|
|
};
|
|
|
|
// bucket toggle
|
|
const handleCheckboxChange = (id) => {
|
|
const updated = watchBucketIds.includes(id)
|
|
? watchBucketIds.filter((i) => i !== id)
|
|
: [...watchBucketIds, id];
|
|
setValue("bucketIds", updated, { shouldValidate: true });
|
|
};
|
|
|
|
// create & update mutations
|
|
const { mutate: CreateContact, isPending: creating } = useCreateContact(() =>
|
|
handleClosed()
|
|
);
|
|
const { mutate: UpdateContact, isPending: updating } = useUpdateContact(() =>
|
|
handleClosed()
|
|
);
|
|
|
|
const onSubmit = (data) => {
|
|
const payload = {
|
|
...data,
|
|
contactEmails: (data.contactEmails || []).filter(
|
|
(e) => e.emailAddress?.trim() !== ""
|
|
),
|
|
contactPhones: (data.contactPhones || []).filter(
|
|
(p) => p.phoneNumber?.trim() !== ""
|
|
),
|
|
};
|
|
|
|
if (contactId) {
|
|
const contactPayload = { ...data, id: contactId };
|
|
UpdateContact({
|
|
contactId: contactData.id,
|
|
contactPayload: contactPayload,
|
|
});
|
|
} else {
|
|
CreateContact(payload);
|
|
}
|
|
};
|
|
|
|
const handleClosed = () => {
|
|
closeModal();
|
|
};
|
|
|
|
const handleAddEmail = () => {
|
|
appendEmail({ label: "Work", emailAddress: "" });
|
|
};
|
|
|
|
const handleAddPhone = () => {
|
|
appendPhone({ label: "Office", phoneNumber: "" });
|
|
};
|
|
|
|
const isPending = updating || creating;
|
|
return (
|
|
<FormProvider {...methods}>
|
|
<form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
|
|
<div className="d-flex justify-content-center align-items-center mb-4">
|
|
<h5 className="m-0 fw-18">
|
|
{contactId ? "Edit Contact" : "Create New Contact"}
|
|
</h5>
|
|
</div>
|
|
|
|
{/* Name + Organization */}
|
|
<div className="row">
|
|
<div className="col-md-6 text-start">
|
|
<Label htmlFor={"name"} required>
|
|
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 htmlFor={"organization"} required>
|
|
Organization
|
|
</Label>
|
|
<InputSuggestions
|
|
organizationList={organizationList}
|
|
value={watch("organization") || ""}
|
|
onChange={(val) => setValue("organization", val, { shouldValidate: true })}
|
|
error={errors.organization?.message}
|
|
/>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* Designation */}
|
|
<div className="row mt-1">
|
|
<div className="col-md-6 text-start position-relative">
|
|
<Label htmlFor={"designation"} required>
|
|
Designation
|
|
</Label>
|
|
<input
|
|
className="form-control form-control-sm"
|
|
{...register("designation")}
|
|
onChange={handleDesignationChange}
|
|
/>
|
|
{showSuggestions && filteredDesignationList.length > 0 && (
|
|
<ul
|
|
className="list-group shadow-sm position-absolute bg-white border w-50 zindex-tooltip"
|
|
style={{
|
|
maxHeight: "180px",
|
|
overflowY: "auto",
|
|
marginTop: "2px",
|
|
zIndex: 1000,
|
|
}}
|
|
>
|
|
{filteredDesignationList.map((designation) => (
|
|
<li
|
|
key={designation}
|
|
className="list-group-item list-group-item-action"
|
|
style={{ cursor: "pointer", fontSize: "14px" }}
|
|
onMouseDown={() => handleSelectDesignation(designation)}
|
|
>
|
|
{designation}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
{errors.designation && (
|
|
<small className="danger-text">
|
|
{errors.designation.message}
|
|
</small>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Emails + Phones */}
|
|
<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>
|
|
</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 ? (
|
|
<i
|
|
className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary"
|
|
onClick={handleAddEmail}
|
|
/>
|
|
) : (
|
|
<i
|
|
className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-danger"
|
|
onClick={() => removeEmail(index)}
|
|
/>
|
|
)}
|
|
</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>
|
|
</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 ? (
|
|
<i
|
|
className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary"
|
|
onClick={handleAddPhone}
|
|
/>
|
|
) : (
|
|
<i
|
|
className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-danger"
|
|
onClick={() => removePhone(index)}
|
|
/>
|
|
)}
|
|
</div>
|
|
{errors.contactPhones?.[index]?.phoneNumber && (
|
|
<small className="danger-text">
|
|
{errors.contactPhones[index].phoneNumber.message}
|
|
</small>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Category + Projects */}
|
|
<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 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>
|
|
|
|
{/* Tags */}
|
|
<div className="col-12 text-start">
|
|
<TagInput
|
|
name="tags"
|
|
label="Tags"
|
|
options={contactTags}
|
|
isRequired={true}
|
|
/>
|
|
{errors.tags && (
|
|
<small className="danger-text">{errors.tags.message}</small>
|
|
)}
|
|
</div>
|
|
|
|
{/* Buckets */}
|
|
<div className="row">
|
|
<div className="col-md-12 mt-1 text-start">
|
|
<label className="form-label ">Select Bucket</label>
|
|
<ul className="d-flex flex-wrap px-1 list-unstyled mb-0">
|
|
{bucketsLoaging && <p>Loading...</p>}
|
|
{buckets?.map((item) => (
|
|
<li
|
|
key={item.id}
|
|
className="list-inline-item flex-shrink-0 me-6 mb-1"
|
|
>
|
|
<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="danger-text">{errors.bucketIds.message}</small>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Address + Description */}
|
|
<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-end gap-2 py-2 mt-3">
|
|
<button
|
|
className="btn btn-sm btn-label-secondary"
|
|
type="button"
|
|
onClick={handleClosed}
|
|
disabled={isPending}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button className="btn btn-sm btn-primary" type="submit" disabled={isPending}>
|
|
{isPending ? "Please Wait..." : "Submit"}
|
|
</button>
|
|
|
|
</div>
|
|
</form>
|
|
</FormProvider>
|
|
);
|
|
};
|
|
|
|
export default ManageContact;
|