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 3c75222dd7
commit 62a044261a
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}) => { const ListViewDirectory = ({IsActive, contact,setSelectedContact,setIsOpenModal,setOpen_contact,setIsOpenModalNote,IsDeleted}) => {
return ( return (
<tr style={{background:`${!IsActive ? "#f8f6f6":""}`}} > <tr className={!IsActive ? "bg-light" : ""}>
<td className="text-start cursor-pointer" style={{width: '18%'}} colSpan={2} onClick={() => <td className="text-start cursor-pointer" style={{ width: "18%" }} colSpan={2} onClick={() => {
{ if (IsActive) {
if ( IsActive ) setIsOpenModalNote(true);
{ setOpen_contact(contact);
setIsOpenModalNote(true) }
setOpen_contact(contact) }}>
} <div className="d-flex align-items-center gap-2">
}}> <Avatar
<div className="d-flex align-items-center"> size="xs"
<Avatar classAvatar="m-0"
size="xs" firstName={(contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""}
firstName={(contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""} lastName={(contact?.name || "").trim().split(" ")[1]?.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> <td className="px-2" style={{ width: "20%" }}>
</div> <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 className="px-2" style={{ width: "10%" }}>
<td > <span className="badge badge-outline-secondary">
<div className="d-flex flex-column align-items-start px-1"> {contact?.contactCategory?.name}
{contact.contactEmails?.map((email, index) => ( </span>
<span key={email.id}> </td>
<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> {IsActive && (
<div className="d-flex flex-column align-items-start"> <td className="align-middle text-center" style={{ width: "12%" }}>
{contact.contactPhones?.map((phone, index) => ( <i className="bx bx-edit bx-sm text-primary cursor-pointer me-2"
<span key={phone.id}> onClick={() => {
<i className={getPhoneIcon(phone.label)} style={{fontSize:"12px"}}></i> setSelectedContact(contact);
{phone.phoneNumber} setIsOpenModal(true);
</span> }}></i>
))} <i className="bx bx-trash bx-sm text-danger cursor-pointer"
</div> onClick={() => IsDeleted(contact.id)}></i>
</td> </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>
); );
}; };