151 lines
4.8 KiB
JavaScript
151 lines
4.8 KiB
JavaScript
import React from "react";
|
|
import Avatar from "../common/Avatar";
|
|
import { getBucketNameById } from "./DirectoryUtils";
|
|
import { useBuckets } from "../../hooks/useDirectory";
|
|
import { getPhoneIcon } from "./DirectoryUtils";
|
|
const CardViewDirectory = ({
|
|
IsActive,
|
|
contact,
|
|
setSelectedContact,
|
|
setIsOpenModal,
|
|
setOpen_contact,
|
|
setIsOpenModalNote,
|
|
IsDeleted,
|
|
}) => {
|
|
const { buckets } = useBuckets();
|
|
return (
|
|
<div
|
|
className="card text-start border-1"
|
|
style={{ background: `${!IsActive ? "#f8f6f6" : ""}` }}
|
|
>
|
|
<div className="card-body px-1 py-2 pb-0">
|
|
<div className="d-flex justify-content-between">
|
|
<div className="d-flex align-items-center">
|
|
<Avatar
|
|
size="xs"
|
|
firstName={
|
|
(contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""
|
|
}
|
|
lastName={
|
|
(contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
|
|
}
|
|
/>{" "}
|
|
<p className="m-0">{contact.name}</p>
|
|
</div>
|
|
<div>
|
|
<div className={`dropdown z-2 ${!IsActive && "d-none"}`}>
|
|
<button
|
|
type="button"
|
|
className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
<i
|
|
className="bx bx-dots-vertical-rounded bx-sm text-muted p-0"
|
|
data-bs-toggle="tooltip"
|
|
data-bs-offset="0,8"
|
|
data-bs-placement="top"
|
|
data-bs-custom-class="tooltip-dark"
|
|
title="More Action"
|
|
></i>
|
|
</button>
|
|
<ul className="dropdown-menu dropdown-menu-end w-auto">
|
|
<li
|
|
onClick={() => {
|
|
setSelectedContact(contact);
|
|
setIsOpenModal(true);
|
|
}}
|
|
|
|
>
|
|
<a className="dropdown-item px-2 py-0">
|
|
<i className="bx bx-pencil bx-xs me-2"></i>
|
|
<span className="align-left small-text">Modify</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
className="dropdown-item px-2 py-0"
|
|
onClick={() => IsDeleted(contact.id)}
|
|
>
|
|
<i className="bx bx-trash bx-xs me-2"></i>
|
|
<span className="align-left small-text">Delete</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ul className="list-inline m-0 ps-4">
|
|
<li className="list-inline-item me-1" style={{ fontSize: "10px" }}>
|
|
<i className="bx bx-building bx-xs"></i>
|
|
</li>
|
|
<li className="list-inline-item" style={{ fontSize: "10px" }}>
|
|
{contact.organization}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div
|
|
className="card-footer text-start px-1 py-1"
|
|
onClick={() => {
|
|
if (IsActive) {
|
|
setIsOpenModalNote(true);
|
|
setOpen_contact(contact);
|
|
}
|
|
}}
|
|
>
|
|
<hr className="my-0" />
|
|
{contact.contactEmails[0] && (
|
|
<ul className="list-inline my-1 ">
|
|
<li className="list-inline-item me-2">
|
|
<i className="bx bx-envelope bx-xs"></i>
|
|
</li>
|
|
<li className="list-inline-item small-text">
|
|
{contact.contactEmails[0]?.emailAddress}
|
|
</li>
|
|
</ul>
|
|
)}
|
|
|
|
{contact.contactPhones[0] && (
|
|
<ul className="list-inline m-0">
|
|
<li className="list-inline-item me-2">
|
|
<i
|
|
className={` ${getPhoneIcon(
|
|
contact.contactPhones[0].label
|
|
)} bx-xs`}
|
|
></i>
|
|
</li>
|
|
<li className="list-inline-item small-text">
|
|
{contact.contactPhones[0]?.phoneNumber}
|
|
</li>
|
|
</ul>
|
|
)}
|
|
|
|
<ul className="list-inline m-0">
|
|
<li className="list-inline-item me-2">
|
|
<i className="bx bx-merge bx-xs"></i>
|
|
</li>
|
|
<li className="list-inline-item small-text">
|
|
{contact.contactCategory.name}
|
|
</li>
|
|
</ul>
|
|
|
|
<ul className="list-inline m-0">
|
|
{contact.bucketIds.map((bucketId) => (
|
|
<React.Fragment key={bucketId}>
|
|
<li className="list-inline-item me-1">
|
|
<i className="bx bx-pin bx-xs"></i>
|
|
</li>
|
|
<li className="list-inline-item small-text">
|
|
{getBucketNameById(buckets, bucketId)}
|
|
</li>
|
|
</React.Fragment>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CardViewDirectory;
|