105 lines
3.7 KiB
JavaScript
105 lines
3.7 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import WorkItem from "./WorkItem";
|
|
import { useProjectDetails } from "../../../hooks/useProjects";
|
|
import { getCachedData } from "../../../slices/apiDataManager";
|
|
|
|
const WorkArea = ({ workArea, floor, forBuilding }) => {
|
|
const [workItems, setWorkItems] = useState([]);
|
|
|
|
useEffect(() => {
|
|
const project = getCachedData("projectInfo");
|
|
if (!project || !forBuilding?.id || !floor?.id || !workArea?.id) return;
|
|
|
|
const building = project.buildings?.find((b) => b.id === forBuilding.id);
|
|
const floors = building?.floors?.find((f) => f.id === floor.id);
|
|
const workAreas = floor?.workAreas?.find((wa) => wa.id === workArea.id);
|
|
|
|
setWorkItems(workAreas?.workItems || []);
|
|
}, [workArea, floor, floor]);
|
|
|
|
return (
|
|
<React.Fragment key={workArea.id}>
|
|
<tr>
|
|
<td colSpan="4" className="text-start table-cell">
|
|
<div className="row ps-2">
|
|
<div className="col-6">
|
|
<div className="row">
|
|
<div className="col">
|
|
{" "}
|
|
<span className="fw-semibold text-primary">
|
|
Floor:
|
|
</span>{" "}
|
|
<span className="fw-normal text-darkgreen">
|
|
{floor.floorName}
|
|
</span>
|
|
</div>
|
|
<div className="col">
|
|
<span className="ms-10 fw-semibold text-primary">
|
|
Work Area:
|
|
</span>{" "}
|
|
<span className=" fw-normal text-darkgreen">
|
|
{workArea.areaName}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
{workItems && workItems.length > 0 && (
|
|
<tr className="overflow-auto">
|
|
<td colSpan={4}>
|
|
<table className="table mx-1">
|
|
<thead>
|
|
<tr>
|
|
<th className="infra-activity-table-header-first">
|
|
Activity
|
|
</th>
|
|
{/* for mobile view */}
|
|
<th className="infra-activity-table-header d-sm-none d-sm-table-cell">
|
|
Status
|
|
</th>
|
|
{/* for greather than mobile view ************* */}
|
|
<th className="infra-activity-table-header d-none d-md-table-cell">
|
|
Planned
|
|
</th>
|
|
<th className="infra-activity-table-header d-none d-md-table-cell">
|
|
Completed
|
|
</th>
|
|
{/* ************************** */}
|
|
<th className="infra-activity-table-header">Progress</th>
|
|
<th className="infra-activity-table-header text-end ">
|
|
<span className="px-3"> Actions</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="table-border-bottom-0">
|
|
{workArea?.workItems && workArea.workItems.length > 0 ? (
|
|
workArea.workItems.map((workItem) => (
|
|
<WorkItem
|
|
key={workItem.workItemId}
|
|
workItem={workItem}
|
|
forBuilding={forBuilding}
|
|
forFloor={floor}
|
|
forWorkArea={workArea}
|
|
/>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td colSpan="4" className="text-center">
|
|
No Data
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
{!workItems && <p>No item</p>}
|
|
</React.Fragment>
|
|
);
|
|
};
|
|
export default WorkArea;
|