From ba04e041b865950d86586fe235ca070f42000a80 Mon Sep 17 00:00:00 2001 From: Pramod Mahajan Date: Sun, 18 May 2025 02:18:53 +0530 Subject: [PATCH] created new component for update contact --- src/components/Directory/UpdateContact.jsx | 449 +++++++++++++++++++++ 1 file changed, 449 insertions(+) create mode 100644 src/components/Directory/UpdateContact.jsx diff --git a/src/components/Directory/UpdateContact.jsx b/src/components/Directory/UpdateContact.jsx new file mode 100644 index 00000000..8e702949 --- /dev/null +++ b/src/components/Directory/UpdateContact.jsx @@ -0,0 +1,449 @@ +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 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" }); + + 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 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); + // reset() + }; + + const handleClosed = () => { + onCLosed(); + }; + useEffect(() => { + const isValidContact = + existingContact && + typeof existingContact === "object" && + !Array.isArray(existingContact); + + if (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 || [], + }); + } + }, [existingContact, buckets, projects]); + return ( + +
+
+ {" "} +
Create New Contact
+
+
+
+ + + {errors.name && ( + {errors.name.message} + )} +
+ +
+ + + {errors.organization && ( + + {errors.organization.message} + + )} +
+
+
+
+ {emailFields.map((field, index) => ( +
+
+ + + {errors.contactEmails?.[index]?.label && ( + + {errors.contactEmails[index].label.message} + + )} +
+
+ +
+ + {index === emailFields.length - 1 ? ( + + ) : ( + + )} +
+ {errors.contactEmails?.[index]?.emailAddress && ( + + {errors.contactEmails[index].emailAddress.message} + + )} +
+
+ ))} +
+
+ {phoneFields.map((field, index) => ( +
+
+ + + {errors.phone?.[index]?.label && ( + + {errors.ContactPhones[index].label.message} + + )} +
+
+ +
+ + {index === phoneFields.length - 1 ? ( + + ) : ( + + )} +
+ {errors.contactPhones?.[index]?.phoneNumber && ( + + {errors.contactPhones[index].phoneNumber.message} + + )} +
+
+ ))} +
+ {errors.contactPhone?.message && ( +
{errors.contactPhone.message}
+ )} +
+ +
+
+ + + {errors.contactCategoryId && ( + + {errors.contactCategoryId.message} + + )} +
+
+ + {errors.projectIds && ( + {errors.projectIds.message} + )} +
+
+ +
+ + {errors.tags && ( + {errors.tags.message} + )} +
+
+
+ + +
    + {bucketsLoaging &&

    Loading...

    } + {buckets?.map((item) => ( +
  • +
    + handleCheckboxChange(item.id)} + /> + +
    +
    • + ))} +
+ + {errors.BucketIds && ( + {errors.BucketIds.message} + )} +
+
+ +
+ +