77 lines
2.3 KiB
JavaScript
77 lines
2.3 KiB
JavaScript
import React from 'react'
|
|
|
|
const getEmailIcon = (type) => {
|
|
switch (type) {
|
|
case 'work': return "bx bx-briefcase me-1 " ;
|
|
case 'personal': return "bx bx-user me-1";
|
|
case 'support': return "bxr headphone-mic me-1";
|
|
case 'billing': return "bx bx-receipt me-1";
|
|
default: return "bx bx-envelope me-1";
|
|
}
|
|
};
|
|
|
|
const getPhoneIcon = (type) => {
|
|
switch (type) {
|
|
case 'business': return "bx bx-briefcase me-1 ";
|
|
case 'home': return "bx bx-mobile me-1 ";
|
|
case 'personal': return "bx bx-user me-1 ";
|
|
case 'landline': return "bx bx-phone me-1 ";
|
|
case 'fax': return "bx bx-printer me-1";
|
|
case 'whatsapp': return "bxl-whatsapp me-1";
|
|
case 'emergency': return "bx bx-error-circle me-1";
|
|
default: return "bx bx-phone me-1";
|
|
}
|
|
};
|
|
|
|
const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal }) => {
|
|
return (
|
|
<tr key={contact.id} >
|
|
<td className="text-start" colSpan={2}>{`${contact.name}`}</td>
|
|
|
|
{/* Emails */}
|
|
<td >
|
|
<div className="d-flex flex-column align-items-start px-1">
|
|
{contact.contactEmails?.map((email, index) => (
|
|
<span key={email.id}>
|
|
<i className={getEmailIcon(email.label)} style={{fontSize:"12px"}}></i>
|
|
<a href={`mailto:${email.email}`} className="text-decoration-none">{email.emailAddress}</a>
|
|
</span>
|
|
))}
|
|
</div>
|
|
</td>
|
|
|
|
<td>
|
|
<div className="d-flex flex-column align-items-start">
|
|
{contact.contactPhones?.map((phone, index) => (
|
|
<span key={phone.id}>
|
|
<i className={getPhoneIcon(phone.label)} style={{fontSize:"12px"}}></i>
|
|
{phone.phoneNumber}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</td>
|
|
|
|
|
|
<td className="text-start">{contact.organization}</td>
|
|
|
|
|
|
<td>
|
|
<div className="d-flex flex-column align-items-start">
|
|
<span class="badge badge-outline-primary">{contact?.contactCategory?.name }</span>
|
|
</div>
|
|
</td>
|
|
|
|
{/* Actions */}
|
|
<td className="align-middle text-center ">
|
|
<i className='bx bx-edit bx-sm text-primary cursor-pointer' onClick={() =>
|
|
{
|
|
setSelectedContact( contact )
|
|
setIsOpenModal(true)
|
|
}}></i>
|
|
<i className='bx bx-trash bx-sm text-danger cursor-pointer'></i>
|
|
</td>
|
|
</tr>
|
|
);
|
|
};
|
|
|
|
export default ListViewDirectory; |