admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

modified table layout

Browse Source
This commit is contained in:
Pramod Mahajan 2025-05-28 18:50:14 +05:30
parent e22ab1ae05
commit 875656dbf5
1 changed files with 57 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
src/components/Directory/ListViewDirectory.jsx
View File

@ -5,73 +5,69 @@ import { getEmailIcon,getPhoneIcon } from './DirectoryUtils';
const ListViewDirectory = ({IsActive, contact,setSelectedContact,setIsOpenModal,setOpen_contact,setIsOpenModalNote,IsDeleted}) => {
return (
<tr style={{background:`${!IsActive ? "#f8f6f6":""}`}} >
<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"
firstName={(contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""}
lastName={(contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""}
/>
<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 gap-2">
<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>
<span >{contact?.name || ""}</span>
</div>
<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>
<td colSpan={2} className="text-start text-truncate px-2" style={{ width: "20%", maxWidth: "200px" }}>
{contact.organization}
</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 className="px-2" style={{ width: "10%" }}>
<span className="badge badge-outline-secondary">
{contact?.contactCategory?.name}
</span>
</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>
{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>
<td colSpan={2} className="text-start text-wrap">{contact.organization}</td>
<td>
<div className="d-flex flex-column align-items-start">
<span className="badge badge-outline-primary">{contact?.contactCategory?.name }</span>
</div>
</td>
{/* Actions */}
{IsActive &&
<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' onClick={() => IsDeleted( contact.id )}></i>
</td>
}
</tr>
);
};