UI Misaligned on Toggling 'Show Inactive Contact' When No Inactive Contacts Exist in Directory at projects.
This commit is contained in:
parent
a381b58851
commit
718fb73c5d
@ -38,8 +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 [filterAppliedNotes, setFilterAppliedNotes] = useState([]);
|
||||
// const [selectedOrgs, setSelectedOrgs] = useState([]);
|
||||
|
||||
// ✅ Changed to an array for multiple selections
|
||||
@ -355,7 +354,6 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
contactsToExport={contacts}
|
||||
notesToExport={notes}
|
||||
selectedNoteNames={selectedNoteNames}
|
||||
selectedNoteNames={selectedNoteNames}
|
||||
setSelectedNoteNames={setSelectedNoteNames}
|
||||
notesForFilter={notes}
|
||||
setFilterAppliedNotes={setFilterAppliedNotes}
|
||||
@ -363,97 +361,75 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-minHeight mt-0">
|
||||
{/* LIST VIEW */}
|
||||
{viewType === "list" && (
|
||||
<div className="card cursor-pointer mt-3">
|
||||
<div className="card-body p-2 pb-1" style={{ minHeight: "200px" }}>
|
||||
{/* Loader when switching between Active/Pending or filtering */}
|
||||
{loading && (
|
||||
<div className="d-flex justify-content-center align-items-center py-5">
|
||||
<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>
|
||||
{!loading && contacts?.length === 0 ? (
|
||||
<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
|
||||
key={contact.id}
|
||||
IsActive={IsActive}
|
||||
contact={contact}
|
||||
setSelectedContact={setSelectedContact}
|
||||
setIsOpenModal={setIsOpenModal}
|
||||
setOpen_contact={setOpen_contact}
|
||||
setIsOpenModalNote={setIsOpenModalNote}
|
||||
IsDeleted={setDeleteContact}
|
||||
restore={handleDeleteContact}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
{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>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* CARD VIEW */}
|
||||
{viewType === "card" && (
|
||||
<>
|
||||
{contacts?.length === 0 && !loading ? (
|
||||
{/* Card View */}
|
||||
{!loading && viewType === "card" && currentItems.length > 0 && (
|
||||
<div className="row mt-4">
|
||||
{currentItems.map((contact) => (
|
||||
<div
|
||||
className="d-flex justify-content-center align-items-center text-center"
|
||||
style={{ minHeight: "200px" }}
|
||||
key={contact.id}
|
||||
className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
|
||||
>
|
||||
<p className="text-muted mb-0">No contact found</p>
|
||||
<CardViewDirectory
|
||||
IsActive={IsActive}
|
||||
contact={contact}
|
||||
setSelectedContact={setSelectedContact}
|
||||
setIsOpenModal={setIsOpenModal}
|
||||
setOpen_contact={setOpen_contact}
|
||||
setIsOpenModalNote={setIsOpenModalNote}
|
||||
IsDeleted={setDeleteContact}
|
||||
restore={handleDeleteContact}
|
||||
/>
|
||||
</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">
|
||||
{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>
|
||||
)}
|
||||
|
||||
{/* NOTES VIEW */}
|
||||
{viewType === "notes" && (
|
||||
{/* Notes View */}
|
||||
{!loading && viewType === "notes" && (
|
||||
<div className="mt-0">
|
||||
<NotesCardViewDirectory
|
||||
notes={notes}
|
||||
@ -461,7 +437,6 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
searchText={searchText}
|
||||
setIsOpenModalNote={setIsOpenModalNote}
|
||||
filterAppliedNotes={filterAppliedNotes}
|
||||
filterAppliedNotes={filterAppliedNotes}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@ -470,7 +445,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
{!loading &&
|
||||
viewType !== "notes" &&
|
||||
contacts?.length > 0 &&
|
||||
currentItems.length > ITEMS_PER_PAGE && (
|
||||
filteredContacts.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" : ""}`}>
|
||||
@ -497,10 +472,6 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
</li>
|
||||
))}
|
||||
|
||||
<li
|
||||
className={`page-item ${currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<li
|
||||
className={`page-item ${currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
@ -517,9 +488,9 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Directory;
|
||||
export default Directory;
|
||||
|
||||
|
||||
@ -81,22 +81,9 @@ const ProjectDetails = () => {
|
||||
switch (activePill) {
|
||||
case "profile": {
|
||||
return (
|
||||
<>
|
||||
<div className="row ">
|
||||
<div className="col-lg-4 col-md-5 mt-5">
|
||||
{/* About User */}
|
||||
<AboutProject data={projectDetails}></AboutProject>
|
||||
<ProjectOverview project={projectId} />
|
||||
{/* About User */}
|
||||
</div>
|
||||
<div className="col-lg-8 col-md-5 mt-5">
|
||||
{/* Profile Overview */}
|
||||
<ProjectProgressChart
|
||||
ShowAllProject="false"
|
||||
DefaultRange="1M"
|
||||
/>
|
||||
{/* Profile Overview */}
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-xl-4 col-lg-5 col-md-5 mt-5">
|
||||
<AboutProject ></AboutProject>
|
||||
</div>
|
||||
<div className="col-xl-4 col-lg-5 col-md-5 mt-5">
|
||||
<ProjectOverview project={projectId} />
|
||||
@ -136,8 +123,8 @@ const ProjectDetails = () => {
|
||||
}
|
||||
case "directory": {
|
||||
return (
|
||||
<div className="row mt-2">
|
||||
<Directory IsPage={false} prefernceContacts={projectDetails.id} />
|
||||
<div className="row">
|
||||
<Directory IsPage={false} prefernceContacts={projects_Details.id} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -177,7 +164,7 @@ const ProjectDetails = () => {
|
||||
]}
|
||||
></Breadcrumb>
|
||||
|
||||
<div className="row ">
|
||||
<div className="row">
|
||||
{projectLoading && <p>Loading....</p>}
|
||||
{/* {!projectLoading && project && (
|
||||
<ProjectBanner project_data={project}></ProjectBanner>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user