created new projectListView component
This commit is contained in:
Pramod Mahajan
parent
d4fed67912
commit
1cdfb47c39
196
src/pages/project/ProjectListView.jsx
Normal file
196
src/pages/project/ProjectListView.jsx
Normal file
@ -0,0 +1,196 @@
|
|||||||
|
import React from "react";
|
||||||
|
import moment from "moment";
|
||||||
|
import { useProjects } from "../../hooks/useProjects";
|
||||||
|
|
||||||
|
const ProjectListView = () => {
|
||||||
|
const { projects } = useProjects();
|
||||||
|
|
||||||
|
const getProgress = (planned, completed) => {
|
||||||
|
return (completed * 100) / planned + "%";
|
||||||
|
};
|
||||||
|
const getProgressInNumber = (planned, completed) => {
|
||||||
|
return (completed * 100) / planned;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getProjectStatusName = (statusId) => {
|
||||||
|
switch (statusId) {
|
||||||
|
case 1:
|
||||||
|
return "Active";
|
||||||
|
case 2:
|
||||||
|
return "On Hold";
|
||||||
|
// case 3:
|
||||||
|
// return "Suspended";
|
||||||
|
case 3:
|
||||||
|
return "Inactive";
|
||||||
|
case 4:
|
||||||
|
return "Completed";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getProjectStatusColor = (statusId) => {
|
||||||
|
switch (statusId) {
|
||||||
|
case 1:
|
||||||
|
return "bg-label-success";
|
||||||
|
case 2:
|
||||||
|
return "bg-label-warning";
|
||||||
|
case 3:
|
||||||
|
return "bg-label-info";
|
||||||
|
case 4:
|
||||||
|
return "bg-label-secondary";
|
||||||
|
case 5:
|
||||||
|
return "bg-label-dark";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="table-responsive text-nowrap py-2 overflow-auto">
|
||||||
|
<table className="table px-2">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th className="text-start" colSpan={5}>
|
||||||
|
Project Name
|
||||||
|
</th>
|
||||||
|
<th className="mx-2">Project Manger</th>
|
||||||
|
<th className="mx-2">START DATE</th>
|
||||||
|
<th className="mx-2">DEADLINE</th>
|
||||||
|
<th className="mx-2">Task</th>
|
||||||
|
<th className="mx-2">Progress</th>
|
||||||
|
<th className="mx-2">
|
||||||
|
<div class="dropdown">
|
||||||
|
<a
|
||||||
|
class="dropdown-toggle hide-arrow cursor-pointer"
|
||||||
|
data-bs-toggle="dropdown"
|
||||||
|
aria-expanded="false"
|
||||||
|
|
||||||
|
>
|
||||||
|
Status <i class="bx bx-filter"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu px-3 py-2">
|
||||||
|
<li>
|
||||||
|
<div class="form-check form-check-success mb-1">
|
||||||
|
<input
|
||||||
|
name="statusRadio"
|
||||||
|
class="form-check-input"
|
||||||
|
type="radio"
|
||||||
|
value="active"
|
||||||
|
id="statusActive"
|
||||||
|
checked
|
||||||
|
/>
|
||||||
|
<label class="form-check-label text-success" for="statusActive">
|
||||||
|
Active
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="form-check form-check-warning mb-1">
|
||||||
|
<input
|
||||||
|
name="statusRadio"
|
||||||
|
class="form-check-input"
|
||||||
|
type="radio"
|
||||||
|
value="onhold"
|
||||||
|
id="statusOnHold"
|
||||||
|
checked
|
||||||
|
/>
|
||||||
|
<label class="form-check-label text-warning" for="statusOnHold">
|
||||||
|
On-Hold
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="form-check form-check-info mb-1">
|
||||||
|
<input
|
||||||
|
name="statusRadio"
|
||||||
|
class="form-check-input"
|
||||||
|
type="radio"
|
||||||
|
value="inactive"
|
||||||
|
id="statusInactive"
|
||||||
|
checked
|
||||||
|
/>
|
||||||
|
<label class="form-check-label text-info" for="statusInactive">
|
||||||
|
Inactive
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="form-check form-check-secondary mb-1">
|
||||||
|
<input
|
||||||
|
name="customRadioSecondary" class="form-check-input" type="radio" value="" id="customRadioSecondary" checked
|
||||||
|
/>
|
||||||
|
<label class="form-check-label text-secondary" for="statusCompleted">
|
||||||
|
Completed
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<th className="mx-2">Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="table-border-bottom-0">
|
||||||
|
{projects.map((project) => (
|
||||||
|
<tr className="py-8">
|
||||||
|
<td className="text-start" colSpan={5}>
|
||||||
|
<strong className="text-primary"> {project.name}</strong>
|
||||||
|
</td>
|
||||||
|
<td className="text-start">{project.contactPerson}</td>
|
||||||
|
<td className="small text-start">
|
||||||
|
<small>
|
||||||
|
{" "}
|
||||||
|
{project.startDate
|
||||||
|
? moment(project.startDate).format("DD-MMM-YYYY")
|
||||||
|
: "NA"}
|
||||||
|
</small>
|
||||||
|
</td>
|
||||||
|
<td className="mx-2 text-start">
|
||||||
|
{project.endDate
|
||||||
|
? moment(project.endDate).format("DD-MMM-YYYY")
|
||||||
|
: "NA"}
|
||||||
|
</td>
|
||||||
|
<td className="mx-2 text-start">{project.plannedWork}</td>
|
||||||
|
|
||||||
|
<td className="py-6 mx-2 text-start">
|
||||||
|
<div
|
||||||
|
className="progress rounded align-items-center"
|
||||||
|
style={{ height: "8px" }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="progress-bar rounded"
|
||||||
|
role="progressbar"
|
||||||
|
style={{
|
||||||
|
width: getProgress(
|
||||||
|
project.plannedWork,
|
||||||
|
project.completedWork
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
aria-valuenow={project.completedWork}
|
||||||
|
aria-valuemin="0"
|
||||||
|
aria-valuemax={project.plannedWork}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="mx-6 ">
|
||||||
|
<p className="mb-0">
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
`badge ` + getProjectStatusColor(project.projectStatusId)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{getProjectStatusName(project.projectStatusId)}
|
||||||
|
</span>
|
||||||
|
</p>{" "}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td className="mx-2 ">
|
||||||
|
{" "}
|
||||||
|
<i className="bx bx-dots-vertical-rounded bx-sm text-muted"></i>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProjectListView;
|
||||||
Loading…
x
Reference in New Issue
Block a user