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

Correction in UI in ProjectPage.

Browse Source
This commit is contained in:
Kartik Sharma 2025-11-15 14:17:09 +05:30 committed by pramod.mahajan
parent fc1235caef
commit 852ebd7dd0
1 changed files with 67 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
src/pages/project/ProjectPage.jsx
View File

@ -40,10 +40,10 @@ const ProjectPage = () => {
const [projectList, setProjectList] = useState([]);
const [listView, setListView] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const [coreProjects, setCoreProjects] = useState(() => {
const storedValue = sessionStorage.getItem('whichProjectDisplay');
return storedValue === 'true';
});
const [coreProjects, setCoreProjects] = useState(() => {
const storedValue = sessionStorage.getItem('whichProjectDisplay');
return storedValue === 'true';
});
const HasManageProject = useHasUserPermission(MANAGE_PROJECT);
const [selectedStatuses, setSelectedStatuses] = useState(
@ -58,11 +58,11 @@ const ProjectPage = () => {
};
const handleToggleProject = (e) => {
const checked = e.target.checked;
setCoreProjects(checked);
sessionStorage.setItem('whichProjectDisplay', String(checked));
};
const handleToggleProject = (value) => {
setCoreProjects(value);
sessionStorage.setItem("whichProjectDisplay", String(value));
};
return (
<ProjectContext.Provider value={contextDispatcher}>
@ -75,10 +75,39 @@ const handleToggleProject = (e) => {
/>
<div className="card cursor-pointer mb-5">
<div className="card-body p-2 pb-1">
<div className="card-body p-2 pb-1">
<div className="d-flex flex-wrap justify-content-between align-items-start">
<div className="d-flex flex-wrap align-items-start">
<div className="flex-grow-1 me-2 mb-2">
{/* LEFT SIDE — DATE TOGGLE BUTTONS */}
<div className="mb-2">
<div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
{/* Service Project Button */}
<button
type="button"
className={`btn px-2 py-1 rounded-0 text-tiny ${!coreProjects ? "btn-primary text-white" : ""
}`}
onClick={() => handleToggleProject(false)}
>
Service Project
</button>
{/* Organization Project Button */}
<button
type="button"
className={`btn px-2 py-1 rounded-0 text-tiny ${coreProjects ? "btn-primary text-white" : ""
}`}
onClick={() => handleToggleProject(true)}
>
Infra Project
</button>
</div>
</div>
{/* RIGHT SIDE — SEARCH + CARD/LIST + DROPDOWN */}
<div className="d-flex flex-wrap align-items-center justify-content-end">
{/* Search */}
<div className="me-2" style={{ minWidth: "200px" }}>
<input
type="search"
className="form-control form-control-sm"
@ -91,49 +120,44 @@ const handleToggleProject = (e) => {
/>
</div>
<div className="d-flex gap-2 mb-2">
{/* Card/List Buttons */}
<div className="d-flex gap-2">
<button
type="button"
className={`btn btn-sm p-1 ${
!listView ? "btn-primary" : "btn-outline-primary"
}`}
className={`btn btn-sm p-1 ${!listView ? "btn-primary" : "btn-outline-primary"}`}
onClick={() => setListView(false)}
data-bs-toggle="tooltip"
data-bs-custom-class="tooltip"
title="Card View"
>
<i className="bx bx-grid-alt fs-5"></i>
</button>
<button
type="button"
className={`btn btn-sm p-1 ${
listView ? "btn-primary" : "btn-outline-primary"
}`}
className={`btn btn-sm p-1 ${listView ? "btn-primary" : "btn-outline-primary"}`}
onClick={() => setListView(true)}
data-bs-toggle="tooltip"
data-bs-custom-class="tooltip"
title="List View"
>
<i className="bx bx-list-ul fs-5"></i>
</button>
</div>
<div className="dropdown mt-1">
{/* Dropdown Filter */}
<div className="dropdown me-2">
<a
className="dropdown-toggle hide-arrow cursor-pointer p-1 mt-3 "
className="dropdown-toggle hide-arrow cursor-pointer p-1"
data-bs-toggle="dropdown"
aria-expanded="false"
data-bs-custom-class="tooltip"
title="Filter"
>
<i className="bx bx-slider-alt ms-1"></i>
<i className="bx bx-slider-alt fs-5"></i>
</a>
<ul className="dropdown-menu p-2 text-capitalize">
{PROJECT_STATUS.map(({ id, label }) => (
<li key={id}>
<div className="form-check">
<input
className="form-check-input "
className="form-check-input"
type="checkbox"
checked={selectedStatuses.includes(id)}
onChange={() => handleStatusChange(id)}
@ -144,56 +168,27 @@ const handleToggleProject = (e) => {
))}
</ul>
</div>
<div className="form-check form-switch d-flex align-items-center text-nowrap ms-3">
<input
type="checkbox"
className="form-check-input"
id="activeEmployeeSwitch"
checked={coreProjects}
onChange={handleToggleProject}
/>
<label
className="form-check-label ms-2"
htmlFor="activeEmployeeSwitch"
>
{coreProjects ? "Organization Project" : "Service Project"}
</label>
</div>
</div>
{HasManageProject && (
<div class="btn-group">
<button type="button" className="btn btn-primary">
<i className="bx bx-plus-circle me-2"></i> New Project
</button>
{HasManageProject && (
<button
type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
className="btn btn-primary btn-sm d-flex align-items-center"
onClick={() =>
coreProjects
? setMangeProject({ isOpen: true, Project: null }) // Organization Project → Infra
: setManageServiceProject({ isOpen: true, Project: null }) // Service Project
}
>
<span class="visually-hidden">Toggle Dropdown</span>
<i className="bx bx-plus-circle me-2"></i>
New Project
</button>
<ul class="dropdown-menu">
<li
onClick={() =>
setManageServiceProject({ isOpen: true, Project: null })
}
>
<a class="dropdown-item">Service Project</a>
</li>
<li
onClick={() =>
setMangeProject({ isOpen: true, Project: null })
}
>
<a class="dropdown-item">Infra Project</a>
</li>
</ul>
</div>
)}
)}
</div>
</div>
</div>
</div>