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

added filter for project cards list view

Browse Source
This commit is contained in:
Pramod Mahajan 2025-05-04 19:58:28 +05:30
parent 04a25d58f4
commit 9ef09f9536
1 changed files with 73 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/pages/project/ProjectList.jsx
View File

@ -27,7 +27,12 @@ const ProjectList = () => {
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(6); const [itemsPerPage] = useState(6);
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState("");
const [selectedStatuses, setSelectedStatuses] = useState(["b74da4c2-d07e-46f2-9919-e75e49b12731","603e994b-a27f-4e5d-a251-f3d69b0498ba","ef1c356e-0fe0-42df-a5d3-8daee355492d","33deaef9-9af1-4f2a-b443-681ea0d04f81",]); const [selectedStatuses, setSelectedStatuses] = useState([
"b74da4c2-d07e-46f2-9919-e75e49b12731",
"603e994b-a27f-4e5d-a251-f3d69b0498ba",
"ef1c356e-0fe0-42df-a5d3-8daee355492d",
"33deaef9-9af1-4f2a-b443-681ea0d04f81",
]);
const handleShow = () => setShowModal(true); const handleShow = () => setShowModal(true);
const handleClose = () => setShowModal(false); const handleClose = () => setShowModal(false);
@ -42,12 +47,12 @@ const ProjectList = () => {
}); });
const sortedGrouped = selectedStatuses const sortedGrouped = selectedStatuses
.filter((statusId) => grouped[statusId]) .filter((statusId) => grouped[statusId])
.flatMap((statusId) => .flatMap((statusId) =>
grouped[statusId].sort((a, b) => grouped[statusId].sort((a, b) =>
a.name.toLowerCase().localeCompare(b.name.toLowerCase()) a.name.toLowerCase().localeCompare(b.name.toLowerCase())
) )
); );
setProjectList(sortedGrouped); setProjectList(sortedGrouped);
} }
@ -171,7 +176,7 @@ const ProjectList = () => {
data-bs-custom-class="tooltip" data-bs-custom-class="tooltip"
title="Card View" title="Card View"
> >
<i className="bx bx-grid-alt"></i> <i className="bx bx-grid-alt bx-sm"></i>
</button> </button>
<button <button
type="button" type="button"
@ -185,9 +190,52 @@ const ProjectList = () => {
data-bs-custom-class="tooltip" data-bs-custom-class="tooltip"
title="List View" title="List View"
> >
<i className="bx bx-list-ul"></i> <i className="bx bx-list-ul bx-sm"></i>
</button> </button>
</div> </div>
{!listView && (
<div className="dropdown ms-3">
<a
className="dropdown-toggle hide-arrow cursor-pointer"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i className="bx bx-filter bx-lg"></i>
</a>
<ul className="dropdown-menu p-2 text-capitalize">
{[
{
id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
label: "Active",
},
{
id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
label: "On Hold",
},
{
id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
label: "Inactive",
},
{
id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
label: "Completed",
},
].map(({ id, label }) => (
<li key={id}>
<div className="form-check">
<input
className="form-check-input "
type="checkbox"
checked={selectedStatuses.includes(id)}
onChange={() => handleStatusChange(id)}
/>
<label className="form-check-label">{label}</label>
</div>
</li>
))}
</ul>
</div>
)}
</div> </div>
<div> <div>
@ -234,10 +282,22 @@ const ProjectList = () => {
</a> </a>
<ul className="dropdown-menu p-2 text-capitalize"> <ul className="dropdown-menu p-2 text-capitalize">
{[ {[
{ id: "b74da4c2-d07e-46f2-9919-e75e49b12731", label: "Active" }, {
{ id: "603e994b-a27f-4e5d-a251-f3d69b0498ba", label: "On Hold" }, id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
{ id: "ef1c356e-0fe0-42df-a5d3-8daee355492d", label: "Inactive" }, label: "Active",
{ id: "33deaef9-9af1-4f2a-b443-681ea0d04f81", label: "Completed" }, },
{
id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
label: "On Hold",
},
{
id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
label: "Inactive",
},
{
id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
label: "Completed",
},
].map(({ id, label }) => ( ].map(({ id, label }) => (
<li key={id}> <li key={id}>
<div className="form-check"> <div className="form-check">