74 lines
2.5 KiB
JavaScript
74 lines
2.5 KiB
JavaScript
import React from 'react'
|
|
import Avatar from '../common/Avatar';
|
|
import { getEmailIcon,getPhoneIcon } from './DirectoryUtils';
|
|
|
|
|
|
const ListViewDirectory = ({IsActive, contact,setSelectedContact,setIsOpenModal,setOpen_contact,setIsOpenModalNote,IsDeleted}) => {
|
|
return (
|
|
<tr className={!IsActive ? "bg-light" : ""}>
|
|
<td className="text-start cursor-pointer" style={{ width: "18%" }} colSpan={2} onClick={() => {
|
|
if (IsActive) {
|
|
setIsOpenModalNote(true);
|
|
setOpen_contact(contact);
|
|
}
|
|
}}>
|
|
<div className="d-flex align-items-center">
|
|
<Avatar
|
|
size="xs"
|
|
classAvatar="m-0"
|
|
firstName={(contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""}
|
|
lastName={(contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""}
|
|
/>
|
|
<span className="text-truncate mx-0" style={{ maxWidth: "150px" }}>{contact?.name || ""}</span>
|
|
</div>
|
|
</td>
|
|
|
|
<td className="px-2" style={{ width: "20%" }}>
|
|
<div className="d-flex flex-column align-items-start text-truncate">
|
|
{contact.contactEmails?.map((email, index) => (
|
|
<span key={email.id} className="text-truncate">
|
|
<i className={getEmailIcon(email.label)} style={{ fontSize: "12px" }}></i>
|
|
<a href={`mailto:${email.emailAddress}`} className="text-decoration-none ms-1">{email.emailAddress}</a>
|
|
</span>
|
|
))}
|
|
</div>
|
|
</td>
|
|
|
|
<td className="px-2" style={{ width: "20%" }}>
|
|
<div className="d-flex flex-column align-items-start text-truncate">
|
|
{contact.contactPhones?.map((phone, index) => (
|
|
<span key={phone.id}>
|
|
<i className={getPhoneIcon(phone.label)} style={{ fontSize: "12px" }}></i>
|
|
<span className="ms-1">{phone.phoneNumber}</span>
|
|
</span>
|
|
))}
|
|
</div>
|
|
</td>
|
|
|
|
<td colSpan={2} className="text-start text-truncate px-2" style={{ width: "20%", maxWidth: "200px" }}>
|
|
{contact.organization}
|
|
</td>
|
|
|
|
<td className="px-2" style={{ width: "10%" }}>
|
|
<span className="badge badge-outline-secondary">
|
|
{contact?.contactCategory?.name}
|
|
</span>
|
|
</td>
|
|
|
|
{IsActive && (
|
|
<td className="align-middle text-center" style={{ width: "12%" }}>
|
|
<i className="bx bx-edit bx-sm text-primary cursor-pointer me-2"
|
|
onClick={() => {
|
|
setSelectedContact(contact);
|
|
setIsOpenModal(true);
|
|
}}></i>
|
|
<i className="bx bx-trash bx-sm text-danger cursor-pointer"
|
|
onClick={() => IsDeleted(contact.id)}></i>
|
|
</td>
|
|
)}
|
|
</tr>
|
|
|
|
);
|
|
};
|
|
|
|
export default ListViewDirectory; |