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

UI Misaligned on Toggling 'Show Inactive Contact' When No Inactive Contacts Exist in Directory at projects.

Browse Source
This commit is contained in:
Kartik sharma 2025-07-08 12:38:08 +05:30 committed by pramod mahajan
parent a1f232d65b
commit d539bd67f1
1 changed files with 61 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,7 +39,6 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
const [openBucketModal, setOpenBucketModal] = useState(false); const [openBucketModal, setOpenBucketModal] = useState(false);
const [notes, setNotes] = useState([]); const [notes, setNotes] = useState([]);
const [filterAppliedNotes, setFilterAppliedNotes] = useState([]); const [filterAppliedNotes, setFilterAppliedNotes] = useState([]);
const [filterAppliedNotes, setFilterAppliedNotes] = useState([]);
// const [selectedOrgs, setSelectedOrgs] = useState([]); // const [selectedOrgs, setSelectedOrgs] = useState([]);
// ✅ Changed to an array for multiple selections // ✅ Changed to an array for multiple selections
@ -355,7 +354,6 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
contactsToExport={contacts} contactsToExport={contacts}
notesToExport={notes} notesToExport={notes}
selectedNoteNames={selectedNoteNames} selectedNoteNames={selectedNoteNames}
selectedNoteNames={selectedNoteNames}
setSelectedNoteNames={setSelectedNoteNames} setSelectedNoteNames={setSelectedNoteNames}
notesForFilter={notes} notesForFilter={notes}
setFilterAppliedNotes={setFilterAppliedNotes} setFilterAppliedNotes={setFilterAppliedNotes}
@ -363,36 +361,33 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
</div> </div>
</div> </div>
<div className="card-minHeight mt-0"> <div className="card-minHeight mt-0">
{/* LIST VIEW */} {/* Loader when switching between Active/Pending or filtering */}
{viewType === "list" && ( {loading && (
<div className="card cursor-pointer mt-3"> <div className="d-flex justify-content-center align-items-center py-5">
<div className="card-body p-2 pb-1" style={{ minHeight: "200px" }}> <div className="spinner-border text-primary" role="status">
<span className="visually-hidden">Loading...</span>
</div>
</div>
)}
{/* Empty state messages */}
{!loading && (viewType === "card" || viewType === "list") && (
<div className="d-flex flex-column justify-content-center align-items-center text-center">
{contacts?.length === 0 && (
<p className="mt-10">No contact found</p>
)}
{contacts?.length > 0 && currentItems.length === 0 && (
<p className="mt-10">No matching contact found</p>
)}
</div>
)}
{/* List View */}
{!loading && viewType === "list" && currentItems.length > 0 && (
<div className="card cursor-pointer mt-5">
<div className="card-body p-2 pb-1">
<DirectoryListTableHeader> <DirectoryListTableHeader>
{!loading && contacts?.length === 0 ? ( {currentItems.map((contact) => (
<tr>
<td colSpan="6">
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "150px",marginLeft: "230px" }}
>
<p className="mb-0 text-muted">No contact found</p>
</div>
</td>
</tr>
) : !loading && contacts?.length > 0 && currentItems.length === 0 ? (
<tr>
<td colSpan="6">
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "150px" }}
>
<p className="mb-0 text-muted">No matching contact found</p>
</div>
</td>
</tr>
) : (
!loading &&
currentItems.map((contact) => (
<ListViewDirectory <ListViewDirectory
key={contact.id} key={contact.id}
IsActive={IsActive} IsActive={IsActive}
@ -404,31 +399,14 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
IsDeleted={setDeleteContact} IsDeleted={setDeleteContact}
restore={handleDeleteContact} restore={handleDeleteContact}
/> />
)) ))}
)}
</DirectoryListTableHeader> </DirectoryListTableHeader>
</div> </div>
</div> </div>
)} )}
{/* CARD VIEW */} {/* Card View */}
{viewType === "card" && ( {!loading && viewType === "card" && currentItems.length > 0 && (
<>
{contacts?.length === 0 && !loading ? (
<div
className="d-flex justify-content-center align-items-center text-center"
style={{ minHeight: "200px" }}
>
<p className="text-muted mb-0">No contact found</p>
</div>
) : currentItems.length === 0 && !loading ? (
<div
className="d-flex justify-content-center align-items-center text-center"
style={{ minHeight: "250px" }}
>
<p className="text-muted mb-0">No matching contact found</p>
</div>
) : (
<div className="row mt-4"> <div className="row mt-4">
{currentItems.map((contact) => ( {currentItems.map((contact) => (
<div <div
@ -449,11 +427,9 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
))} ))}
</div> </div>
)} )}
</>
)}
{/* NOTES VIEW */} {/* Notes View */}
{viewType === "notes" && ( {!loading && viewType === "notes" && (
<div className="mt-0"> <div className="mt-0">
<NotesCardViewDirectory <NotesCardViewDirectory
notes={notes} notes={notes}
@ -461,7 +437,6 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
searchText={searchText} searchText={searchText}
setIsOpenModalNote={setIsOpenModalNote} setIsOpenModalNote={setIsOpenModalNote}
filterAppliedNotes={filterAppliedNotes} filterAppliedNotes={filterAppliedNotes}
filterAppliedNotes={filterAppliedNotes}
/> />
</div> </div>
)} )}
@ -470,7 +445,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
{!loading && {!loading &&
viewType !== "notes" && viewType !== "notes" &&
contacts?.length > 0 && contacts?.length > 0 &&
currentItems.length > ITEMS_PER_PAGE && ( filteredContacts.length > ITEMS_PER_PAGE && (
<nav aria-label="Page navigation"> <nav aria-label="Page navigation">
<ul className="pagination pagination-sm justify-content-end py-1"> <ul className="pagination pagination-sm justify-content-end py-1">
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}> <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
@ -497,10 +472,6 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
</li> </li>
))} ))}
<li
className={`page-item ${currentPage === totalPages ? "disabled" : ""
}`}
>
<li <li
className={`page-item ${currentPage === totalPages ? "disabled" : "" className={`page-item ${currentPage === totalPages ? "disabled" : ""
}`} }`}
@ -517,9 +488,9 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
)} )}
</div> </div>
</div> </div>
); );
}; };
export default Directory; export default Directory;