pramod_Bug-#433 :Show "No Contact Found" Message When Directory Is Empty #177

Merged
vikas.nale merged 2 commits from pramod_Bug-#433 into Feature_Directory 2025-06-03 11:50:29 +00:00

View File

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