added filter for project cards list view
This commit is contained in:
parent
04a25d58f4
commit
9ef09f9536
@ -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">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user