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

Merge pull request 'Directory tab inside Project Profile page not displayed properly (tab within tab issue)' (#464) from Kartik_Bug#1408 into OnFieldWork_V1

Browse Source 
Reviewed-on: #464
This commit is contained in:
pramod.mahajan 2025-10-09 12:56:40 +00:00
commit 5057738d8b
1 changed files with 83 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
src/pages/Directory/DirectoryPage.jsx
View File

@ -139,9 +139,8 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
<ul className="nav nav-tabs"> <ul className="nav nav-tabs">
<li className="nav-item cursor-pointer"> <li className="nav-item cursor-pointer">
<a <a
className={`nav-link ${ className={`nav-link ${activeTab === "notes" ? "active" : ""
activeTab === "notes" ? "active" : "" } fs-6`}
} fs-6`}
onClick={(e) => handleTabClick("notes", e)} onClick={(e) => handleTabClick("notes", e)}
> >
<i className="bx bx-notepad bx-sm me-1_5"></i> <i className="bx bx-notepad bx-sm me-1_5"></i>
@ -150,9 +149,8 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
</li> </li>
<li className="nav-item cursor-pointer"> <li className="nav-item cursor-pointer">
<a <a
className={`nav-link ${ className={`nav-link ${activeTab === "contacts" ? "active" : ""
activeTab === "contacts" ? "active" : "" } fs-6`}
} fs-6`}
onClick={(e) => handleTabClick("contacts", e)} onClick={(e) => handleTabClick("contacts", e)}
> >
<i className="bx bxs-contact bx-sm me-1_5"></i> <i className="bx bxs-contact bx-sm me-1_5"></i>
@ -160,94 +158,97 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
</a> </a>
</li> </li>
</ul> </ul>
</div>
<div className="mb-1 px-2 py-3"> <div className="mb-1 px-2 py-3">
<div className="d-flex align-items-center justify-content-between"> <div className="d-flex align-items-center justify-content-between">
<div className="d-flex align-items-center gap-3"> <div className="d-flex align-items-center gap-3">
{activeTab === "notes" && ( {activeTab === "notes" && (
<input <input
type="search" type="search"
className="form-control form-control-sm" className="form-control form-control-sm"
placeholder="Search notes..." placeholder="Search notes..."
value={searchNote} value={searchNote}
onChange={(e) => setSearchNote(e.target.value)} onChange={(e) => setSearchNote(e.target.value)}
/> />
)} )}
{activeTab === "contacts" && ( {activeTab === "contacts" && (
<div className="d-flex align-items-center gap-3"> <div className="d-flex align-items-center gap-3">
<div className="d-flex gap-2 align-items-center"> <div className="d-flex gap-2 align-items-center">
<input <input
type="search" type="search"
className="form-control form-control-sm" className="form-control form-control-sm"
placeholder="Search contacts..." placeholder="Search contacts..."
value={searchContact} value={searchContact}
onChange={(e) => setsearchContact(e.target.value)} onChange={(e) => setsearchContact(e.target.value)}
/> />
<button
className={`btn btn-sm p-1 ${gridView ? " btn-primary" : " btn-outline-primary"
}`}
onClick={() => setGridView(true)}
>
<i className="bx bx-grid-alt"></i>
</button>
<button
className={`btn btn-sm p-1 ${!gridView ? "btn-primary" : "btn-outline-primary"
}`}
onClick={() => setGridView(false)}
>
<i className="bx bx-list-ul"></i>
</button>
</div>
</div>
)}
</div>
<div className="dropdown z-2">
<button
type="button"
className="btn btn-icon p-0 m-0"
data-bs-toggle="dropdown"
aria-expanded="false"
title="More Actions"
>
<i className="bx bx-dots-vertical-rounded text-muted bx-md"></i>
</button>
<ul className="dropdown-menu dropdown-menu-end shadow-sm p-2" style={{ minWidth: "220px" }}>
<li>
<button <button
className={`btn btn-sm p-1 ${ className="dropdown-item d-flex align-items-center gap-2"
gridView ? " btn-primary" : " btn-outline-primary" onClick={() => handleExport("csv")}
}`}
onClick={() => setGridView(true)}
> >
<i className="bx bx-grid-alt"></i> <i className="bx bx-file"></i>
<span>Export to CSV</span>
</button> </button>
</li>
<button {/* Divider */}
className={`btn btn-sm p-1 ${ {activeTab === "contacts" && <li><hr className="dropdown-divider" /></li>}
!gridView ? "btn-primary" : "btn-outline-primary"
}`}
onClick={() => setGridView(false)}
>
<i className="bx bx-list-ul"></i>
</button>
</div>
<div className="form-check form-switch d-flex align-items-center m-0"> {activeTab === "contacts" && (
<input <li className="dropdown-item d-flex align-items-center">
type="checkbox" <div className="form-check form-switch mb-0">
className="form-check-input" <input
role="switch" type="checkbox"
id="inactiveEmployeesCheckbox" className="form-check-input"
checked={showActive} role="switch"
onChange={(e) => setShowActive(e.target.checked)} id="inactiveContactsSwitch"
/> checked={showActive}
<label onChange={(e) => setShowActive(e.target.checked)}
className="form-check-label ms-2" />
htmlFor="inactiveEmployeesCheckbox" </div>
> <span>{showActive ? "Active Contacts" : "Inactive Contacts"}</span>
{showActive ? "Active" : "Inactive"} Contacts </li>
</label> )}
</div> </ul>
</div> </div>
)}
</div>
<div className="btn-group">
<button
className="btn btn-sm btn-label-secondary dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i className="bx bx-export me-2 bx-sm"></i>Export
</button>
<ul className="dropdown-menu">
<li>
<a
className="dropdown-item cursor-pointer"
onClick={() => handleExport("csv")}
>
<i className="bx bx-file me-1"></i> CSV
</a>
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>