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