pramod_Bug-#433 :Show "No Contact Found" Message When Directory Is Empty #177
@ -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)}
|
||||||
|
>
|
||||||
|
«
|
||||||
|
</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>
|
||||||
>
|
))}
|
||||||
«
|
|
||||||
</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
|
»
|
||||||
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)}
|
|
||||||
>
|
|
||||||
»
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
Loading…
x
Reference in New Issue
Block a user