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 && ( {/* Messages when listView is false */}
<p>No Matching Contact Found</p> {!listView && (
)} <div className="d-flex flex-column justify-content-center align-items-center text-center ">
{listView ? ( {loading && <p>Loading...</p>}
<DirectoryListTableHeader> {!loading && contacts?.length === 0 && <p>No contact found</p>}
{loading && ( {!loading && contacts?.length > 0 && currentItems.length === 0 && (
<tr> <p>No matching contact found</p>
<td colSpan={10}>Loading...</td> )}
</tr> </div>
)} )}
{!loading && currentItems.length === 0 && (
<tr> {/* Table view (listView === true) */}
<td colSpan={10}>No Matching Contact Found</td> {listView ? (
</tr> <DirectoryListTableHeader>
)} {loading && (
{!loading && <tr>
currentItems.map((contact) => ( <td colSpan={10}>Loading...</td>
<ListViewDirectory </tr>
key={contact.id} )}
IsActive={IsActive}
contact={contact} {!loading && contacts?.length === 0 && (
setSelectedContact={setSelectedContact} <tr >
setIsOpenModal={setIsOpenModal} <td colSpan={10}>No contact found</td>
setOpen_contact={setOpen_contact} </tr>
setIsOpenModalNote={setIsOpenModalNote} )}
IsDeleted={setDeleteContact}
restore={handleDeleteContact} {!loading && currentItems.length === 0 && contacts?.length > 0 && (
/> <tr>
))} <td colSpan={10}>No matching contact found</td>
</DirectoryListTableHeader> </tr>
) : ( )}
<div className="row">
{!loading && currentItems.map((contact, index) => ( {!loading &&
<div currentItems.map((contact) => (
key={contact.id} <ListViewDirectory
className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4" key={contact.id}
> IsActive={IsActive}
<CardViewDirectory contact={contact}
IsActive={IsActive} setSelectedContact={setSelectedContact}
contact={contact} setIsOpenModal={setIsOpenModal}
setSelectedContact={setSelectedContact} setOpen_contact={setOpen_contact}
setIsOpenModal={setIsOpenModal} setIsOpenModalNote={setIsOpenModalNote}
setOpen_contact={setOpen_contact} IsDeleted={setDeleteContact}
setIsOpenModalNote={setIsOpenModalNote} restore={handleDeleteContact}
IsDeleted={setDeleteContact} />
restore={handleDeleteContact} ))}
/> </DirectoryListTableHeader>
</div> ) : (
))} <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>
)} ))}
</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) => (
{!loading && currentItems < ITEMS_PER_PAGE && ( <li
<nav aria-label="Page "> key={index}
<ul className="pagination pagination-sm justify-content-end py-1"> className={`page-item ${
<li currentPage === index + 1 ? "active" : ""
className={`page-item ${currentPage === 1 ? "disabled" : ""}`} }`}
>
<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>
); );
}; };