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

Increase the size of table in Projects Directory and show text in center and add 200 px height.

Browse Source
This commit is contained in:
Kartik sharma 2025-07-09 16:06:30 +05:30 committed by pramod mahajan
parent 62c178bd18
commit 331a60a899
1 changed files with 82 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
src/pages/Directory/Directory.jsx
View File

@ -363,75 +363,97 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
</div> </div>
</div> </div>
<div className="card-minHeight mt-0"> <div className="card-minHeight mt-0">
{/* Loader when switching between Active/Pending or filtering */} {/* LIST VIEW */}
{loading && ( {viewType === "list" && (
<div className="d-flex justify-content-center align-items-center py-5"> <div className="card cursor-pointer mt-3">
<div className="spinner-border text-primary" role="status"> <div className="card-body p-2 pb-1" style={{ minHeight: "200px" }}>
<span className="visually-hidden">Loading...</span>
</div>
</div>
)}
{/* Empty state messages */}
{!loading && (viewType === "card" || viewType === "list") && (
<div className="d-flex flex-column justify-content-center align-items-center text-center">
{contacts?.length === 0 && (
<p className="mt-10">No contact found</p>
)}
{contacts?.length > 0 && currentItems.length === 0 && (
<p className="mt-10">No matching contact found</p>
)}
</div>
)}
{/* List View */}
{!loading && viewType === "list" && currentItems.length > 0 && (
<div className="card cursor-pointer mt-5">
<div className="card-body p-2 pb-1">
<DirectoryListTableHeader> <DirectoryListTableHeader>
{currentItems.map((contact) => ( {!loading && contacts?.length === 0 ? (
<ListViewDirectory <tr>
key={contact.id} <td colSpan="6">
IsActive={IsActive} <div
contact={contact} className="d-flex justify-content-center align-items-center"
setSelectedContact={setSelectedContact} style={{ height: "150px",marginLeft: "230px" }}
setIsOpenModal={setIsOpenModal} >
setOpen_contact={setOpen_contact} <p className="mb-0 text-muted">No contact found</p>
setIsOpenModalNote={setIsOpenModalNote} </div>
IsDeleted={setDeleteContact} </td>
restore={handleDeleteContact} </tr>
/> ) : !loading && contacts?.length > 0 && currentItems.length === 0 ? (
))} <tr>
<td colSpan="6">
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "150px" }}
>
<p className="mb-0 text-muted">No matching contact found</p>
</div>
</td>
</tr>
) : (
!loading &&
currentItems.map((contact) => (
<ListViewDirectory
key={contact.id}
IsActive={IsActive}
contact={contact}
setSelectedContact={setSelectedContact}
setIsOpenModal={setIsOpenModal}
setOpen_contact={setOpen_contact}
setIsOpenModalNote={setIsOpenModalNote}
IsDeleted={setDeleteContact}
restore={handleDeleteContact}
/>
))
)}
</DirectoryListTableHeader> </DirectoryListTableHeader>
</div> </div>
</div> </div>
)} )}
{/* Card View */} {/* CARD VIEW */}
{!loading && viewType === "card" && currentItems.length > 0 && ( {viewType === "card" && (
<div className="row mt-4"> <>
{currentItems.map((contact) => ( {contacts?.length === 0 && !loading ? (
<div <div
key={contact.id} className="d-flex justify-content-center align-items-center text-center"
className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4" style={{ minHeight: "200px" }}
> >
<CardViewDirectory <p className="text-muted mb-0">No contact found</p>
IsActive={IsActive}
contact={contact}
setSelectedContact={setSelectedContact}
setIsOpenModal={setIsOpenModal}
setOpen_contact={setOpen_contact}
setIsOpenModalNote={setIsOpenModalNote}
IsDeleted={setDeleteContact}
restore={handleDeleteContact}
/>
</div> </div>
))} ) : currentItems.length === 0 && !loading ? (
</div> <div
className="d-flex justify-content-center align-items-center text-center"
style={{ minHeight: "250px" }}
>
<p className="text-muted mb-0">No matching contact found</p>
</div>
) : (
<div className="row mt-4">
{currentItems.map((contact) => (
<div
key={contact.id}
className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
>
<CardViewDirectory
IsActive={IsActive}
contact={contact}
setSelectedContact={setSelectedContact}
setIsOpenModal={setIsOpenModal}
setOpen_contact={setOpen_contact}
setIsOpenModalNote={setIsOpenModalNote}
IsDeleted={setDeleteContact}
restore={handleDeleteContact}
/>
</div>
))}
</div>
)}
</>
)} )}
{/* Notes View */} {/* NOTES VIEW */}
{!loading && viewType === "notes" && ( {viewType === "notes" && (
<div className="mt-0"> <div className="mt-0">
<NotesCardViewDirectory <NotesCardViewDirectory
notes={notes} notes={notes}
@ -448,7 +470,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
{!loading && {!loading &&
viewType !== "notes" && viewType !== "notes" &&
contacts?.length > 0 && contacts?.length > 0 &&
filteredContacts.length > ITEMS_PER_PAGE && ( currentItems.length > ITEMS_PER_PAGE && (
<nav aria-label="Page navigation"> <nav aria-label="Page navigation">
<ul className="pagination pagination-sm justify-content-end py-1"> <ul className="pagination pagination-sm justify-content-end py-1">
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}> <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
@ -500,5 +522,4 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
); );
}; };
export default Directory; export default Directory;