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

Project List view UI implementation.

Browse Source
This commit is contained in:
Kartik Sharma 2025-10-10 16:00:52 +05:30
parent fbb68a4488
commit 9de0b1a0df
1 changed files with 121 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

241
src/components/Project/ProjectListView.jsx
View File

@ -131,148 +131,149 @@ const ProjectListView = ({
const handleMoveDetails = (project) => { const handleMoveDetails = (project) => {
dispatch(setProjectId(project)); dispatch(setProjectId(project));
localStorage.setItem("lastActiveProjectTab","profile") localStorage.setItem("lastActiveProjectTab", "profile")
navigate("/projects/details"); navigate("/projects/details");
}; };
return ( return (
<div className="card page-min-h py-4 px-6 shadow-sm"> <div className="card page-min-h py-4 px-6 shadow-sm">
<table className="table table-hover align-middle m-0"> <div className="table-responsive text-nowrap">
<thead className="border-bottom"> <table className="table table-hover align-middle m-0">
<tr> <thead className="border-bottom">
{projectColumns.map((col) => ( <tr>
<th key={col.key} colSpan={col.colSpan} className={col.className}>
{col.label}
</th>
))}
<th className="text-center py-3">Action</th>
</tr>
</thead>
<tbody>
{currentItems?.map((project) => (
<tr key={project.id}>
{projectColumns.map((col) => ( {projectColumns.map((col) => (
<td <th key={col.key} colSpan={col.colSpan} className={col.className}>
key={col.key} {col.label}
colSpan={col.colSpan} </th>
className={`${col.className} py-5`}
style={{ paddingTop: "20px", paddingBottom: "20px" }}
>
{col.getValue
? col.getValue(project)
: project[col.key] || "N/A"}
</td>
))} ))}
<td className={`mx-2 ${"d-sm-table-cell"}`}> <th className="text-center py-3">Action</th>
<div className="dropdown z-2"> </tr>
<button </thead>
type="button" <tbody>
className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0" {currentItems?.map((project) => (
data-bs-toggle="dropdown" <tr key={project.id}>
aria-expanded="false" {projectColumns.map((col) => (
<td
key={col.key}
colSpan={col.colSpan}
className={`${col.className} py-5`}
style={{ paddingTop: "20px", paddingBottom: "20px" }}
> >
<i {col.getValue
className="bx bx-dots-vertical-rounded bx-sm text-muted" ? col.getValue(project)
data-bs-toggle="tooltip" : project[col.key] || "N/A"}
data-bs-offset="0,8" </td>
data-bs-placement="top" ))}
data-bs-custom-class="tooltip-dark" <td className={`mx-2 ${"d-sm-table-cell"}`}>
title="More Action" <div className="dropdown z-2">
></i> <button
</button> type="button"
<ul className="dropdown-menu dropdown-menu-end"> className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
<li onClick={() => handleMoveDetails(project.id)}> data-bs-toggle="dropdown"
<a aria-expanded="false"
aria-label="click to View details" >
className="dropdown-item cursor-pointer" <i
> className="bx bx-dots-vertical-rounded bx-sm text-muted"
<i className="bx bx-detail me-2"></i> data-bs-toggle="tooltip"
<span className="align-left">View details</span> data-bs-offset="0,8"
</a> data-bs-placement="top"
</li> data-bs-custom-class="tooltip-dark"
title="More Action"
></i>
</button>
<ul className="dropdown-menu dropdown-menu-end">
<li onClick={() => handleMoveDetails(project.id)}>
<a
aria-label="click to View details"
className="dropdown-item cursor-pointer"
>
<i className="bx bx-detail me-2"></i>
<span className="align-left">View details</span>
</a>
</li>
<li> <li>
<a <a
className="dropdown-item cursor-pointer" className="dropdown-item cursor-pointer"
onClick={() => onClick={() =>
setMangeProject({ setMangeProject({
isOpen: true, isOpen: true,
Project: project.id, Project: project.id,
}) })
} }
> >
<i className="bx bx-pencil me-2"></i> <i className="bx bx-pencil me-2"></i>
<span className="align-left">Modify</span> <span className="align-left">Modify</span>
</a> </a>
</li> </li>
{/* <li onClick={() => handleViewActivities(project.id)}> {/* <li onClick={() => handleViewActivities(project.id)}>
<a className="dropdown-item cursor-pointer"> <a className="dropdown-item cursor-pointer">
<i className="bx bx-task me-2"></i> <i className="bx bx-task me-2"></i>
<span className="align-left">Activities</span> <span className="align-left">Activities</span>
</a> </a>
</li> */} </li> */}
</ul> </ul>
</div> </div>
</td> </td>
</tr> </tr>
))} ))}
</tbody> </tbody>
</table> </table>
{isLoading && ( {isLoading && (
<div className="py-4"> <div className="py-4">
{" "} {" "}
{isLoading && <p className="text-center">Loading...</p>} {isLoading && <p className="text-center">Loading...</p>}
{!isLoading && filteredProjects.length === 0 && ( {!isLoading && filteredProjects.length === 0 && (
<p className="text-center text-muted">No projects found.</p>
)}
</div>
)}
{!isLoading && currentItems.length === 0 && (
<div className="py-6">
<p className="text-center text-muted">No projects found.</p> <p className="text-center text-muted">No projects found.</p>
)} </div>
</div> )}
)} {!isLoading && totalPages > 1 && (
{!isLoading && currentItems.length === 0 && ( <nav>
<div className="py-6"> <ul className="pagination pagination-sm justify-content-end py-2">
<p className="text-center text-muted">No projects found.</p> <li className={`page-item ${currentPage === 1 && "disabled"}`}>
</div> <button
)} className="page-link"
{!isLoading && totalPages > 1 && ( onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
<nav> >
<ul className="pagination pagination-sm justify-content-end py-2"> &laquo;
<li className={`page-item ${currentPage === 1 && "disabled"}`}> </button>
<button </li>
className="page-link" {[...Array(totalPages)].map((_, i) => (
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))} <li
> key={i}
&laquo; className={`page-item ${currentPage === i + 1 && "active"}`}
</button> >
</li> <button
{[...Array(totalPages)].map((_, i) => ( className="page-link"
onClick={() => setCurrentPage(i + 1)}
>
{i + 1}
</button>
</li>
))}
<li <li
key={i} className={`page-item ${currentPage === totalPages && "disabled"
className={`page-item ${currentPage === i + 1 && "active"}`} }`}
> >
<button <button
className="page-link" className="page-link"
onClick={() => setCurrentPage(i + 1)} onClick={() =>
setCurrentPage((p) => Math.min(totalPages, p + 1))
}
> >
{i + 1} &raquo;
</button> </button>
</li> </li>
))} </ul>
<li </nav>
className={`page-item ${ )}
currentPage === totalPages && "disabled" </div>
}`}
>
<button
className="page-link"
onClick={() =>
setCurrentPage((p) => Math.min(totalPages, p + 1))
}
>
&raquo;
</button>
</li>
</ul>
</nav>
)}
</div> </div>
); );
}; };