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

enhance UX for loading and empty states in contact table

Browse Source
This commit is contained in:
Pramod Mahajan 2025-06-03 00:09:33 +05:30
parent 8d966fc5c0
commit 29ef1e4016
1 changed files with 137 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -319,124 +319,145 @@ const handleDeleteContact = async (overrideId = null) => {
</GlobalModel>
)}
<div className="card p-2 card-minHeight">
<DirectoryPageHeader
searchText={searchText}
setSearchText={setSearchText}
setIsActive={setIsActive}
listView={listView}
setListView={setListView}
filteredBuckets={filteredBuckets}
tempSelectedBucketIds={tempSelectedBucketIds}
handleTempBucketChange={handleTempBucketChange}
filteredCategories={filteredCategories}
tempSelectedCategoryIds={tempSelectedCategoryIds}
handleTempCategoryChange={handleTempCategoryChange}
clearFilter={clearFilter}
applyFilter={applyFilter}
loading={loading}
IsActive={IsActive}
setOpenBucketModal={setOpenBucketModal}
/>
{!listView && loading && <p>Loading...</p>}
{!listView && !loading && currentItems.length == 0 && (
<p>No Matching Contact Found</p>
)}
{listView ? (
<DirectoryListTableHeader>
{loading && (
<tr>
<td colSpan={10}>Loading...</td>
</tr>
)}
{!loading && currentItems.length === 0 && (
<tr>
<td colSpan={10}>No Matching Contact Found</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>
) : (
<div className="row">
{!loading && currentItems.map((contact, index) => (
<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>
)}
<div className="card p-2 card-minHeight">
<DirectoryPageHeader
searchText={searchText}
setSearchText={setSearchText}
setIsActive={setIsActive}
listView={listView}
setListView={setListView}
filteredBuckets={filteredBuckets}
tempSelectedBucketIds={tempSelectedBucketIds}
handleTempBucketChange={handleTempBucketChange}
filteredCategories={filteredCategories}
tempSelectedCategoryIds={tempSelectedCategoryIds}
handleTempCategoryChange={handleTempCategoryChange}
clearFilter={clearFilter}
applyFilter={applyFilter}
loading={loading}
IsActive={IsActive}
setOpenBucketModal={setOpenBucketModal}
/>
{!loading && currentItems < ITEMS_PER_PAGE && (
<nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1">
<li
className={`page-item ${currentPage === 1 ? "disabled" : ""}`}
{/* Messages when listView is false */}
{!listView && (
<div className="d-flex flex-column justify-content-center align-items-center text-center card-minHeight">
{loading && <p>Loading...</p>}
{!loading && contacts?.length === 0 && <p>No contact found</p>}
{!loading && contacts?.length > 0 && currentItems.length === 0 && (
<p>No matching contact found</p>
)}
</div>
)}
{/* Table view (listView === true) */}
{listView ? (
<DirectoryListTableHeader>
{loading && (
<tr>
<td colSpan={10}>Loading...</td>
</tr>
)}
{!loading && contacts?.length === 0 && (
<tr >
<td colSpan={10}>No contact found</td>
</tr>
)}
{!loading && currentItems.length === 0 && contacts?.length > 0 && (
<tr>
<td colSpan={10}>No matching contact found</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>
) : (
<div className="row">
{!loading &&
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>
)}
{/* Pagination */}
{!loading &&
contacts?.length > 0 &&
currentItems.length < ITEMS_PER_PAGE && (
<nav aria-label="Page navigation">
<ul className="pagination pagination-sm justify-content-end py-1">
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
<button
className="page-link btn-xs"
onClick={() => paginate(currentPage - 1)}
>
&laquo;
</button>
</li>
{[...Array(totalPages)].map((_, index) => (
<li
key={index}
className={`page-item ${
currentPage === index + 1 ? "active" : ""
}`}
>
<button
className="page-link"
onClick={() => paginate(index + 1)}
>
<button
className="page-link btn-xs"
onClick={() => paginate(currentPage - 1)}
>
&laquo;
</button>
</li>
{[...Array(totalPages)].map((_, index) => (
<li
key={index}
className={`page-item ${
currentPage === index + 1 ? "active" : ""
}`}
>
<button
className="page-link "
onClick={() => paginate(index + 1)}
>
{index + 1}
</button>
</li>
))}
<li
className={`page-item ${
currentPage === totalPages ? "disabled" : ""
}`}
>
<button
className="page-link "
onClick={() => paginate(currentPage + 1)}
>
&raquo;
</button>
</li>
</ul>
</nav>
)}
</div>
{index + 1}
</button>
</li>
))}
<li
className={`page-item ${
currentPage === totalPages ? "disabled" : ""
}`}
>
<button
className="page-link"
onClick={() => paginate(currentPage + 1)}
>
&raquo;
</button>
</li>
</ul>
</nav>
)}
</div>
</div>
);
};