UI Misaligned on Toggling 'Show Inactive Contact' When No Inactive Contacts Exist in Directory at projects. #236
2
public/assets/vendor/css/core.css
vendored
2
public/assets/vendor/css/core.css
vendored
@ -836,7 +836,7 @@ progress {
|
||||
}
|
||||
|
||||
.row {
|
||||
--bs-gutter-x: 1.625rem;
|
||||
--bs-gutter-x: 3.625rem;
|
||||
--bs-gutter-y: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@ -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
|
||||
@ -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,25 +361,35 @@ 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>
|
||||
)}
|
||||
|
||||
{/* LIST VIEW */}
|
||||
{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 &&
|
||||
{!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}
|
||||
@ -392,35 +402,55 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
IsDeleted={setDeleteContact}
|
||||
restore={handleDeleteContact}
|
||||
/>
|
||||
))}
|
||||
))
|
||||
)}
|
||||
</DirectoryListTableHeader>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* CARD VIEW */}
|
||||
{viewType === "card" && (
|
||||
<div className="row mt-4">
|
||||
{!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>
|
||||
<>
|
||||
{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">
|
||||
{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>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* NOTES VIEW */}
|
||||
{viewType === "notes" && (
|
||||
<div className="mt-0">
|
||||
<NotesCardViewDirectory
|
||||
@ -428,12 +458,12 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
setNotesForFilter={setNotes}
|
||||
searchText={searchText}
|
||||
setIsOpenModalNote={setIsOpenModalNote}
|
||||
filterAppliedNotes={filterAppliedNotes}
|
||||
filterAppliedNotes={filterAppliedNotes}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{/* PAGINATION */}
|
||||
{!loading &&
|
||||
viewType !== "notes" &&
|
||||
contacts?.length > 0 &&
|
||||
@ -464,7 +494,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)}
|
||||
@ -476,6 +509,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -81,7 +81,7 @@ const ProjectDetails = () => {
|
||||
case "profile": {
|
||||
return (
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="row ">
|
||||
<div className="col-lg-4 col-md-5 mt-5">
|
||||
{/* About User */}
|
||||
<AboutProject data={projectDetails}></AboutProject>
|
||||
@ -139,7 +139,7 @@ const ProjectDetails = () => {
|
||||
}
|
||||
case "directory": {
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="row mt-2">
|
||||
<Directory IsPage={false} prefernceContacts={projectDetails.id} />
|
||||
</div>
|
||||
);
|
||||
@ -193,7 +193,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