Merge pull request 'UI Misaligned on Toggling 'Show Inactive Contact' When No Inactive Contacts Exist in Directory at projects.' (#236) from Kartik_bug#649 into Issues_July_2W

Reviewed-on: #236
This commit is contained in:
Vikas Nale 2025-07-10 05:18:09 +00:00
commit fc8f6375c1
3 changed files with 81 additions and 47 deletions

View File

@ -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;

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
@ -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>
);
};

View File

@ -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>