Contact list grid columns not displayed when no contact is available #331

Merged
pramod.mahajan merged 2 commits from Kartik_Bug#888 into Issues_Aug_1W 2025-08-12 09:40:28 +00:00
2 changed files with 32 additions and 23 deletions

View File

@ -38,7 +38,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
const [IsDeleting, setDeleting] = useState(false);
const [openBucketModal, setOpenBucketModal] = useState(false);
const [notes, setNotes] = useState([]);
const [filterAppliedNotes, setFilterAppliedNotes] = useState([]);
const [filterAppliedNotes, setFilterAppliedNotes] = useState([]);
// const [selectedOrgs, setSelectedOrgs] = useState([]);
// Changed to an array for multiple selections
@ -260,7 +260,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
}, [prefernceContacts]);
return (
<div className={IsPage ? "container-fluid":""}>
<div className={IsPage ? "container-fluid" : ""}>
{IsPage && (
<Breadcrumb
data={[
@ -353,7 +353,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
setOpenBucketModal={setOpenBucketModal}
contactsToExport={contacts}
notesToExport={notes}
selectedNoteNames={selectedNoteNames}
selectedNoteNames={selectedNoteNames}
setSelectedNoteNames={setSelectedNoteNames}
notesForFilter={notes}
setFilterAppliedNotes={setFilterAppliedNotes}
@ -361,23 +361,9 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
</div>
</div>
<div className="card-minHeight mt-0">
{(viewType === "card" || viewType === "list" || viewType === "notes") && (
<div className="d-flex flex-column justify-content-center align-items-center text-center">
{!loading && (viewType === "card" || viewType === "list") && contacts?.length === 0 && (
<p className="mt-10">No contact found</p>
)}
{!loading &&
(viewType === "card" || viewType === "list") &&
contacts?.length > 0 &&
currentItems.length === 0 && (
<p className="mt-10">No matching contact found</p>
)}
</div>
)}
{viewType === "list" && (
<div className="card cursor-pointer mt-5">
<div className="card-body p-2 pb-1">
<div className="card cursor-pointer mt-3">
<div className="card-body p-2 pb-1" style={{ minHeight: "200px" }}>
<DirectoryListTableHeader>
{!loading &&
currentItems.map((contact) => (
@ -394,12 +380,22 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
/>
))}
</DirectoryListTableHeader>
{/* Empty state AFTER list */}
{!loading && contacts?.length === 0 && (
<p className="mt-3 ms-3 text-muted" >No contact found</p>
)}
{!loading &&
contacts?.length > 0 &&
currentItems.length === 0 && (
<p className="mt-3 ms-3 text-muted">No matching contact found</p>
)}
</div>
</div>
)}
{viewType === "card" && (
<div className="row mt-4">
<div className="row mt-10">
{!loading &&
currentItems.map((contact) => (
<div
@ -418,6 +414,16 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
/>
</div>
))}
{/* Empty state for card view */}
{!loading && contacts?.length === 0 && (
<p className="mt-3 ms-3 text-muted">No contact found</p>
)}
{!loading &&
contacts?.length > 0 &&
currentItems.length === 0 && (
<p className="mt-3 ms-3 text-muted">No matching contact found</p>
)}
</div>
)}
@ -428,7 +434,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
setNotesForFilter={setNotes}
searchText={searchText}
setIsOpenModalNote={setIsOpenModalNote}
filterAppliedNotes={filterAppliedNotes}
filterAppliedNotes={filterAppliedNotes}
/>
</div>
)}
@ -464,7 +470,10 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
</li>
))}
<li className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}>
<li
className={`page-item ${currentPage === totalPages ? "disabled" : ""
}`}
>
<button
className="page-link"
onClick={() => paginate(currentPage + 1)}

View File

@ -3,7 +3,7 @@ import IconButton from "../../components/common/IconButton";
const DirectoryListTableHeader = ({ children }) => {
return (
<div className="table-responsive text-nowrap py-2">
<div className="table-responsive text-nowrap py-2" style={{ minHeight: "80px"}}>
<table className="table px-2">
<thead>
<tr>