From 7e0acf00bd76ecefb0165d21b0f006bca9172194 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Thu, 29 May 2025 20:10:15 +0530
Subject: [PATCH] display contact profile data

---
 .../Directory/ProfileContactDirectory.jsx     | 268 +++++++++++++-----
 1 file changed, 190 insertions(+), 78 deletions(-)

diff --git a/src/components/Directory/ProfileContactDirectory.jsx b/src/components/Directory/ProfileContactDirectory.jsx
index 323c9b87..274b0d22 100644
--- a/src/components/Directory/ProfileContactDirectory.jsx
+++ b/src/components/Directory/ProfileContactDirectory.jsx
@@ -5,12 +5,28 @@ import moment from "moment";
 import NotesDirectory from "./NotesDirectory";
 
 const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
-  const { conatProfile, loading } = useContactProfile(contact?.id);
-  const [profileContact, setProfileContact] = useState();
+  const { contactProfile, loading, refetch } = useContactProfile(contact?.id);
+  const [copiedIndex, setCopiedIndex] = useState(null);
 
+  const [profileContact, setProfileContact] = useState();
+  const [expanded, setExpanded] = useState(false);
+  const description = contactProfile?.description || "";
+  const limit = 100;
+
+  const toggleReadMore = () => setExpanded(!expanded);
+
+  const isLong = description.length > limit;
+  const displayText = expanded
+    ? description
+    : description.slice(0, limit) + (isLong ? "..." : "");
   useEffect(() => {
-    setProfileContact(conatProfile);
-  }, [conatProfile]);
+    setProfileContact(contactProfile);
+  }, [contactProfile]);
+  const handleCopy = (email, index) => {
+    navigator.clipboard.writeText(email);
+    setCopiedIndex(index);
+    setTimeout(() => setCopiedIndex(null), 2000); // Reset after 2 seconds
+  };
   return (
     <div className="p-1">
       <div className="text-center m-0 p-0">
@@ -20,6 +36,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
         <div className="d-flex align-items-center mb-2">
           <Avatar
             size="sm"
+            classAvatar="m-0"
             firstName={
               (contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""
             }
@@ -27,92 +44,187 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
               (contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
             }
           />
-          <div className="d-flex flex-column text-start ms-2">
+          <div className="d-flex flex-column text-start ms-1">
             <span className="m-0 fw-semibold">{contact?.name}</span>
-            <span className="small">
-              <i className="bx bx-building bx-xs"></i>{" "}
-              {conatProfile?.organization}
-            </span>
-            <span className="small-text">Manager</span>
+            <small className="text-secondary small-text">
+              {contactProfile?.tags?.map((tag) => tag.name).join(" | ")}
+            </small>
           </div>
         </div>
         <div className="row">
-            <div className="col-12 col-md-6 d-flex flex-column text-start">
-          {conatProfile?.contactEmails?.length > 0 && (
-            <div className="d-flex mb-2">
-              <div style={{ width: "100px", minWidth: "100px" }}>
-                <p className="m-0">Email</p>
+          <div className="col-12 col-md-6 d-flex flex-column text-start">
+            {contactProfile?.contactEmails?.length > 0 && (
+              <div className="d-flex mb-2">
+                <div style={{ width: "100px", minWidth: "100px" }}>
+                  <p className="m-0">Email:</p>
+                </div>
+                <div>
+                  <ul className="list-inline mb-0">
+                    {contactProfile.contactEmails.map((email, idx) => (
+                      <li
+                        className="list-inline-item me-3 d-flex align-items-center"
+                        key={idx}
+                      >
+                        <i className="bx bx-envelope bx-xs me-1"></i>
+                        <span className="me-2">{email.emailAddress}</span>
+                        <i
+                          className={`bx bx-copy cursor-pointer ${
+                            copiedIndex === idx
+                              ? "text-secondary"
+                              : "text-primary"
+                          }`}
+                          title={copiedIndex === idx ? "Copied!" : "Copy Email"}
+                          style={{ fontSize: "16px" }}
+                          onClick={() => handleCopy(email.emailAddress, idx)}
+                        ></i>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
               </div>
-              <div>
-                <ul className="list-inline mb-0">
-                  {conatProfile.contactEmails.map((email, idx) => (
-                    <li className="list-inline-item me-3" key={idx}>
-                      <i className="bx bx-envelope bx-xs me-1"></i>
-                      {email.emailAddress}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </div>
-          )}
-          {conatProfile?.contactPhones?.length > 0 && (
-            <div className="d-flex mb-2">
-              <div style={{ width: "100px", minWidth: "100px" }}>
-                <p className="m-0">Phone</p>
-              </div>
-              <div>
-                <ul className="list-inline mb-0">
-                  {conatProfile?.contactPhones.map((phone, idx) => (
-                    <li className="list-inline-item me-3" key={idx}>
-                      <i className="bx bx-phone bx-xs me-1"></i>
-                      {phone.phoneNumber}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </div>
-          )}
+            )}
 
-          {conatProfile?.createdAt && (
-            <div className="d-flex mb-2">
-              <div style={{ width: "100px", minWidth: "100px" }}>
-                <p className="m-0">Created</p>
+            {contactProfile?.contactPhones?.length > 0 && (
+              <div className="d-flex mb-2">
+                <div style={{ width: "100px", minWidth: "100px" }}>
+                  <p className="m-0">Phone : </p>
+                </div>
+                <div>
+                  <ul className="list-inline mb-0">
+                    {contactProfile?.contactPhones.map((phone, idx) => (
+                      <li className="list-inline-item me-3" key={idx}>
+                        <i className="bx bx-phone bx-xs me-1"></i>
+                        {phone.phoneNumber}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
               </div>
-              <div>
-                <ul className="list-inline mb-0">
-                  <li className="list-inline-item">
-                    <i className="bx bx-calendar-week bx-xs me-1"></i>
-                    {moment(conatProfile.createdAt).format("MMMM, DD YYYY")}
-                  </li>
-                </ul>
+            )}
+
+            {contactProfile?.createdAt && (
+              <div className="d-flex mb-2">
+                <div style={{ width: "100px", minWidth: "100px" }}>
+                  <p className="m-0">Created : </p>
+                </div>
+                <div>
+                  <ul className="list-inline mb-0">
+                    <li className="list-inline-item">
+                      <i className="bx bx-calendar-week bx-xs me-1"></i>
+                      {moment(contactProfile.createdAt).format("MMMM, DD YYYY")}
+                    </li>
+                  </ul>
+                </div>
               </div>
-            </div>
-          )}
+            )}
+
+            {contactProfile?.address && (
+              <div className="d-flex mb-2">
+                <div style={{ width: "100px", minWidth: "100px" }}>
+                  <p className="m-0">Location : </p>
+                </div>
+                <div>
+                  <ul className="list-inline mb-0">
+                    <li className="list-inline-item">
+                      <i className="bx bx-map bx-xs me-1"></i>
+                      {contactProfile?.address}
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            )}
           </div>
-          { conatProfile?.buckets?.length > 0 && 
-                <div className="col-12 col-md-6 d-flex flex-column text-start">
-              {conatProfile?.contactEmails?.length > 0 && (
-            <div className="d-flex mb-2 align-items-center">
-              <div style={{ width: "100px", minWidth: "100px" }}>
-                <p className="m-0">Buckets</p>
-              </div>
-              <div>
-                <ul className="list-inline mb-0">
-                  {conatProfile.buckets.map((bucket) => (
-                    <li className="list-inline-item me-2" key={bucket.id}>
-                      <span class="badge bg-label-primary my-1">{ bucket.name}</span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </div>
-          )}
-           </div>
-         }
-       </div>
 
+          <div className="col-12 col-md-6 d-flex flex-column text-start">
+            {contactProfile?.organization && (
+              <div className="d-flex mb-2">
+                <div style={{ width: "100px", minWidth: "100px" }}>
+                  <p className="m-0">Orgnization : </p>
+                </div>
+                <div>
+                  <ul className="list-inline mb-0">
+                    <li className="list-inline-item">
+                      <i className="fa-solid fa-briefcase me-2"></i>
+                      {contactProfile.organization}
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            )}
+            {contactProfile?.contactCategory && (
+              <div className="d-flex mb-2">
+                <div style={{ width: "100px", minWidth: "100px" }}>
+                  <p className="m-0">Category : </p>
+                </div>
+                <div>
+                  <ul className="list-inline mb-0">
+                    <li className="list-inline-item">
+                      <i className="bx bx-user bx-xs me-1"></i>
+                      {contactProfile.contactCategory.name}
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            )}
+
+            {contactProfile?.buckets?.length > 0 && (
+              <div className="d-flex ">
+                {contactProfile?.contactEmails?.length > 0 && (
+                  <div className="d-flex mb-2 align-items-center">
+                    <div style={{ width: "100px", minWidth: "100px" }}>
+                      <p className="m-0">Buckets : </p>
+                    </div>
+                    <div>
+                      <ul className="list-inline mb-0">
+                        {contactProfile.buckets.map((bucket) => (
+                          <li className="list-inline-item me-2" key={bucket.id}>
+                            <span className="badge bg-label-primary my-1">
+                              {bucket.name}
+                            </span>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+        {contactProfile?.projects?.length > 0 && (
+          <div className="d-flex mb-2 align-items-start">
+            <div style={{ minWidth: "100px" }}>
+              <p className="m-0 text-start">Projects :</p>
+            </div>
+            <div className="text-start">
+              <ul className="list-inline mb-0">
+                {contactProfile.projects.map((project, index) => (
+                  <li className="list-inline-item me-2" key={project.id}>
+                    {project.name}
+                    {index < contactProfile.projects.length - 1 && ","}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        )}
+
+        <div className="p-3 alert alert-secondary text-small text-start rounded  muted">
+          <small className="fw-130">
+            {displayText}
+            {isLong && (
+              <span
+                onClick={toggleReadMore}
+                className="text-primary mx-1 cursor-pointer"
+              >
+                {expanded ? "Read less" : "Read more"}
+              </span>
+            )}
+          </small>
+        </div>
         <hr className="my-1" />
         <NotesDirectory
+          refetchProfile={refetch}
           isLoading={loading}
           contactProfile={profileContact}
           setProfileContact={setProfileContact}