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

added accordionn for floor

Browse Source
This commit is contained in:
Pramod Mahajan 2025-05-12 16:34:44 +05:30
parent 634dc12e5b
commit bf797503f5
2 changed files with 63 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Project/Infrastructure/Floor.jsx
View File

@ -16,7 +16,14 @@ const Floor = ({ floor, workAreas, forBuilding }) => {
<tr>
<td colSpan="4" className="text-start table-cell">
<div className="row ps-2">
<div className="col-6">
{/* <div className="col-1 col-md-1 d-flex justify-content-between align-items-center " >
<button
className="btn me-2"
>
</button>
</div> */}
<div className="col-12 ps-10">
<div className="row">
<div className="col">
{" "}

84
src/components/Project/Infrastructure/WorkArea.jsx
View File

@ -12,6 +12,9 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
const dispatch = useDispatch()
const [ Project, setProject ] = useState()
const [isExpanded, setIsExpanded] = useState(false);
const toggleExpand = () => setIsExpanded(!isExpanded);
useEffect(() => {
const project = getCachedData( "projectInfo" );
@ -83,52 +86,42 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
<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:&nbsp;
</span>{" "}
<span className="fw-normal text-darkgreen">
{floor.floorName}
</span>
</div>
<div className="col">
<span className="ms-10 fw-semibold text-primary">
Work Area:&nbsp;
</span>{" "}
<span className=" fw-normal text-darkgreen">
{workArea.areaName}
</span>
</div>
</div>
{/* <div className="col-1 col-md-1 d-flex justify-content-between align-items-center " >
</div> */}
<div className="text-start col-11 col-md-11" >
{workArea?.workItems?.length > 0 && (
<button
className="btn p-0"
onClick={toggleExpand}
>
{isExpanded ? <i className="bx bx-minus-circle" /> : <i className="bx bx-plus-circle" />}
</button>
)}
{/* <span className="fw-semibold text-primary text-start ps-2">Floor:&nbsp;</span> */}
<span className={`fw-semibold text-primary text-start ${workArea?.workItems?.length > 0 ? "ps-2" : "ps-7" }`}>Floor:&nbsp;</span>
<span className="fw-normal text-darkgreen">{floor.floorName}</span>
<span className="ms-10 fw-semibold text-primary">Work Area:&nbsp;</span>
<span className="fw-normal text-darkgreen">{workArea.areaName}</span>
</div>
</div>
</td>
</tr>
{workItems && workItems.length > 0 && (
{isExpanded && workArea?.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-first">Activity</th>
<th className="infra-activity-table-header d-sm-none d-sm-table-cell">Status</th>
<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>
@ -136,8 +129,7 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
</tr>
</thead>
<tbody className="table-border-bottom-0">
{workArea?.workItems && workArea.workItems.length > 0 ? (
workArea.workItems.map((workItem) => (
{workArea.workItems.map((workItem) => (
<WorkItem
key={workItem.workItemId}
workItem={workItem}
@ -146,20 +138,18 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
forWorkArea={workArea}
deleteHandleTask={HanldeDeleteActivity}
/>
))
) : (
<tr>
<td colSpan="4" className="text-center">
No Data
</td>
</tr>
)}
))}
</tbody>
</table>
</td>
</tr>
)}
{!workItems && <p>No item</p>}
{isExpanded && (!workArea?.workItems || workArea?.workItems.length === 0) && (
<tr>
<td colSpan="4" className="text-center">No Data</td>
</tr>
)}
</React.Fragment>
);
};