diff --git a/src/components/Directory/CardViewDirectory.jsx b/src/components/Directory/CardViewDirectory.jsx index 9be8663a..0d955810 100644 --- a/src/components/Directory/CardViewDirectory.jsx +++ b/src/components/Directory/CardViewDirectory.jsx @@ -123,6 +123,16 @@ const CardViewDirectory = ({ }} >
+ {contact.designation && ( + + )} {contact.contactEmails[0] && ( - {errors.bucketIds && ( - - {errors.bucketIds.message} - - )} + {errors.bucketIds && ( + + {errors.bucketIds.message} + + )} diff --git a/src/components/Directory/ProfileContactDirectory.jsx b/src/components/Directory/ProfileContactDirectory.jsx index 256e2ea8..41e1dadd 100644 --- a/src/components/Directory/ProfileContactDirectory.jsx +++ b/src/components/Directory/ProfileContactDirectory.jsx @@ -47,7 +47,8 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
{contact?.name} - {contactProfile?.tags?.map((tag) => tag.name).join(" | ")} + {/* {contactProfile?.tags?.map((tag) => tag.name).join(" | ")} */} + {contactProfile?.designation}
diff --git a/src/components/Directory/UpdateContact.jsx b/src/components/Directory/UpdateContact.jsx index 985229a3..9d74fc35 100644 --- a/src/components/Directory/UpdateContact.jsx +++ b/src/components/Directory/UpdateContact.jsx @@ -14,7 +14,11 @@ import useMaster, { } from "../../hooks/masterHook/useMaster"; import { useDispatch, useSelector } from "react-redux"; import { changeMaster } from "../../slices/localVariablesSlice"; -import { useBuckets, useOrganization } from "../../hooks/useDirectory"; +import { + useBuckets, + useDesignation, + useOrganization, +} from "../../hooks/useDirectory"; import { useProjects } from "../../hooks/useProjects"; import SelectMultiple from "../common/SelectMultiple"; import { ContactSchema } from "./DirectorySchema"; @@ -32,10 +36,13 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => { const { contactCategory, loading: contactCategoryLoading } = useContactCategory(); const { contactTags, loading: Tagloading } = useContactTags(); - const [ IsSubmitting, setSubmitting ] = useState( false ); + const [IsSubmitting, setSubmitting] = useState(false); const [isInitialized, setIsInitialized] = useState(false); const dispatch = useDispatch(); - const {organizationList} = useOrganization() + const { organizationList } = useOrganization(); + const { designationList } = useDesignation(); + const [showSuggestions, setShowSuggestions] = useState(false); + const [filteredDesignationList, setFilteredDesignationList] = useState([]); const methods = useForm({ resolver: zodResolver(ContactSchema), @@ -45,6 +52,7 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => { contactCategoryId: null, address: "", description: "", + designation: "", projectIds: [], contactEmails: [], contactPhones: [], @@ -95,6 +103,24 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => { } }; + // handle logic when input of desgination is changed + 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); + }; + + // handle logic when designation is selected + const handleSelectDesignation = (val) => { + setShowSuggestions(false); + setValue("designation", val); + }; + const watchBucketIds = watch("bucketIds"); const toggleBucketId = (id) => { @@ -113,33 +139,28 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => { }; const onSubmit = async (data) => { -const cleaned = { - ...data, - contactEmails: (data.contactEmails || []) - .filter((e) => e.emailAddress?.trim() !== "") - .map((email, index) => { - const existingEmail = existingContact.contactEmails?.[index]; - return existingEmail - ? { ...email, id: existingEmail.id } - : email; - }), - contactPhones: (data.contactPhones || []) - .filter((p) => p.phoneNumber?.trim() !== "") - .map((phone, index) => { - const existingPhone = existingContact.contactPhones?.[index]; - return existingPhone - ? { ...phone, id: existingPhone.id } - : phone; - }), -}; + const cleaned = { + ...data, + contactEmails: (data.contactEmails || []) + .filter((e) => e.emailAddress?.trim() !== "") + .map((email, index) => { + const existingEmail = existingContact.contactEmails?.[index]; + return existingEmail ? { ...email, id: existingEmail.id } : email; + }), + contactPhones: (data.contactPhones || []) + .filter((p) => p.phoneNumber?.trim() !== "") + .map((phone, index) => { + const existingPhone = existingContact.contactPhones?.[index]; + return existingPhone ? { ...phone, id: existingPhone.id } : phone; + }), + }; -setSubmitting(true); -await submitContact({ ...cleaned, id: existingContact.id }); + setSubmitting(true); + await submitContact({ ...cleaned, id: existingContact.id }); setSubmitting(false); - }; - const orgValue = watch("organization") + const orgValue = watch("organization"); const handleClosed = () => { onCLosed(); }; @@ -149,7 +170,7 @@ await submitContact({ ...cleaned, id: existingContact.id }); typeof existingContact === "object" && !Array.isArray(existingContact); - if (!isInitialized &&isValidContact && TagsData) { + if (!isInitialized && isValidContact && TagsData) { reset({ name: existingContact.name || "", organization: existingContact.organization || "", @@ -158,24 +179,30 @@ await submitContact({ ...cleaned, id: existingContact.id }); contactCategoryId: existingContact.contactCategory?.id || null, address: existingContact.address || "", description: existingContact.description || "", + designation: existingContact.designation || "", projectIds: existingContact.projectIds || null, tags: existingContact.tags || [], bucketIds: existingContact.bucketIds || [], - } ); - - if (!existingContact.contactPhones || existingContact.contactPhones.length === 0) { - appendPhone({ label: "Office", phoneNumber: "" }); + }); + + if ( + !existingContact.contactPhones || + existingContact.contactPhones.length === 0 + ) { + appendPhone({ label: "Office", phoneNumber: "" }); + } + + if ( + !existingContact.contactEmails || + existingContact.contactEmails.length === 0 + ) { + appendEmail({ label: "Work", emailAddress: "" }); + } + setIsInitialized(true); } - if (!existingContact.contactEmails || existingContact.contactEmails.length === 0) { - appendEmail({ label: "Work", emailAddress: "" }); - } - setIsInitialized(true) - } - // return()=> reset() - }, [ existingContact, buckets, projects ] ); - + }, [existingContact, buckets, projects]); return ( @@ -195,15 +222,14 @@ await submitContact({ ...cleaned, id: existingContact.id }); )} -
setValue("organization", val)} - error={errors.organization?.message} - /> + organizationList={organizationList} + value={getValues("organization") || ""} + onChange={(val) => setValue("organization", val)} + error={errors.organization?.message} + /> {errors.organization && ( {errors.organization.message} @@ -211,6 +237,55 @@ await submitContact({ ...cleaned, id: existingContact.id }); )}
+
+
+ + + {showSuggestions && filteredDesignationList.length > 0 && ( +
    + {filteredDesignationList.map((designation) => ( +
  • handleSelectDesignation(designation)} + onMouseEnter={(e) => + (e.currentTarget.style.backgroundColor = "#f8f9fa") + } + onMouseLeave={(e) => + (e.currentTarget.style.backgroundColor = "transparent") + } + > + {designation} +
  • + ))} +
+ )} + {errors.designation && ( + + {errors.designation.message} + + )} +
+
{emailFields.map((field, index) => ( @@ -247,11 +322,13 @@ await submitContact({ ...cleaned, id: existingContact.id }); //
{errors.contactEmails?.[index]?.emailAddress && ( @@ -310,7 +389,10 @@ await submitContact({ ...cleaned, id: existingContact.id }); // onClick={handleAddPhone} // style={{ width: "24px", height: "24px" }} // > - + ) : ( //
{errors.contactPhones?.[index]?.phoneNumber && ( @@ -348,7 +433,7 @@ await submitContact({ ...cleaned, id: existingContact.id }); ) : ( <> - {contactCategory?.map((cate) => ( @@ -387,7 +472,7 @@ await submitContact({ ...cleaned, id: existingContact.id }); )}
-
+
    @@ -445,7 +530,11 @@ await submitContact({ ...cleaned, id: existingContact.id });
-