display contact profile data
This commit is contained in:
Pramod Mahajan
parent
bc9cbd61f3
commit
7e0acf00bd
@ -5,12 +5,28 @@ import moment from "moment";
|
|||||||
import NotesDirectory from "./NotesDirectory";
|
import NotesDirectory from "./NotesDirectory";
|
||||||
|
|
||||||
const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
|
const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
|
||||||
const { conatProfile, loading } = useContactProfile(contact?.id);
|
const { contactProfile, loading, refetch } = useContactProfile(contact?.id);
|
||||||
const [profileContact, setProfileContact] = useState();
|
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(() => {
|
useEffect(() => {
|
||||||
setProfileContact(conatProfile);
|
setProfileContact(contactProfile);
|
||||||
}, [conatProfile]);
|
}, [contactProfile]);
|
||||||
|
const handleCopy = (email, index) => {
|
||||||
|
navigator.clipboard.writeText(email);
|
||||||
|
setCopiedIndex(index);
|
||||||
|
setTimeout(() => setCopiedIndex(null), 2000); // Reset after 2 seconds
|
||||||
|
};
|
||||||
return (
|
return (
|
||||||
<div className="p-1">
|
<div className="p-1">
|
||||||
<div className="text-center m-0 p-0">
|
<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">
|
<div className="d-flex align-items-center mb-2">
|
||||||
<Avatar
|
<Avatar
|
||||||
size="sm"
|
size="sm"
|
||||||
|
classAvatar="m-0"
|
||||||
firstName={
|
firstName={
|
||||||
(contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""
|
(contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""
|
||||||
}
|
}
|
||||||
@ -27,92 +44,187 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
|
|||||||
(contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
|
(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="m-0 fw-semibold">{contact?.name}</span>
|
||||||
<span className="small">
|
<small className="text-secondary small-text">
|
||||||
<i className="bx bx-building bx-xs"></i>{" "}
|
{contactProfile?.tags?.map((tag) => tag.name).join(" | ")}
|
||||||
{conatProfile?.organization}
|
</small>
|
||||||
</span>
|
|
||||||
<span className="small-text">Manager</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-12 col-md-6 d-flex flex-column text-start">
|
<div className="col-12 col-md-6 d-flex flex-column text-start">
|
||||||
{conatProfile?.contactEmails?.length > 0 && (
|
{contactProfile?.contactEmails?.length > 0 && (
|
||||||
<div className="d-flex mb-2">
|
<div className="d-flex mb-2">
|
||||||
<div style={{ width: "100px", minWidth: "100px" }}>
|
<div style={{ width: "100px", minWidth: "100px" }}>
|
||||||
<p className="m-0">Email</p>
|
<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>
|
||||||
<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 && (
|
{contactProfile?.contactPhones?.length > 0 && (
|
||||||
<div className="d-flex mb-2">
|
<div className="d-flex mb-2">
|
||||||
<div style={{ width: "100px", minWidth: "100px" }}>
|
<div style={{ width: "100px", minWidth: "100px" }}>
|
||||||
<p className="m-0">Created</p>
|
<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>
|
||||||
<div>
|
)}
|
||||||
<ul className="list-inline mb-0">
|
|
||||||
<li className="list-inline-item">
|
{contactProfile?.createdAt && (
|
||||||
<i className="bx bx-calendar-week bx-xs me-1"></i>
|
<div className="d-flex mb-2">
|
||||||
{moment(conatProfile.createdAt).format("MMMM, DD YYYY")}
|
<div style={{ width: "100px", minWidth: "100px" }}>
|
||||||
</li>
|
<p className="m-0">Created : </p>
|
||||||
</ul>
|
</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>
|
||||||
</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>
|
</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" />
|
<hr className="my-1" />
|
||||||
<NotesDirectory
|
<NotesDirectory
|
||||||
|
refetchProfile={refetch}
|
||||||
isLoading={loading}
|
isLoading={loading}
|
||||||
contactProfile={profileContact}
|
contactProfile={profileContact}
|
||||||
setProfileContact={setProfileContact}
|
setProfileContact={setProfileContact}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user