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

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

@ -15,8 +15,15 @@ const Floor = ({ floor, workAreas, forBuilding }) => {
) : ( ) : (
<tr> <tr>
<td colSpan="4" className="text-start table-cell"> <td colSpan="4" className="text-start table-cell">
<div className="row ps-2"> <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="row">
<div className="col"> <div className="col">
{" "} {" "}

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

@ -10,8 +10,11 @@ import showToast from "../../../services/toastService";
const WorkArea = ({ workArea, floor, forBuilding }) => { const WorkArea = ({ workArea, floor, forBuilding }) => {
const [ workItems, setWorkItems ] = useState( [] ); const [ workItems, setWorkItems ] = useState( [] );
const dispatch = useDispatch() const dispatch = useDispatch()
const [Project,setProject] = useState() const [ Project, setProject ] = useState()
const [isExpanded, setIsExpanded] = useState(false);
const toggleExpand = () => setIsExpanded(!isExpanded);
useEffect(() => { useEffect(() => {
const project = getCachedData( "projectInfo" ); const project = getCachedData( "projectInfo" );
@ -80,86 +83,73 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
return ( return (
<React.Fragment key={workArea.id}> <React.Fragment key={workArea.id}>
<tr> <tr>
<td colSpan="4" className="text-start table-cell"> <td colSpan="4" className="text-start table-cell">
<div className="row ps-2"> <div className="row ps-2 ">
<div className="col-6">
<div className="row"> {/* <div className="col-1 col-md-1 d-flex justify-content-between align-items-center " >
<div className="col">
{" "}
<span className="fw-semibold text-primary"> </div> */}
Floor:&nbsp; <div className="text-start col-11 col-md-11" >
</span>{" "} {workArea?.workItems?.length > 0 && (
<span className="fw-normal text-darkgreen"> <button
{floor.floorName} className="btn p-0"
</span> onClick={toggleExpand}
</div> >
<div className="col"> {isExpanded ? <i className="bx bx-minus-circle" /> : <i className="bx bx-plus-circle" />}
<span className="ms-10 fw-semibold text-primary"> </button>
Work Area:&nbsp; )}
</span>{" "} {/* <span className="fw-semibold text-primary text-start ps-2">Floor:&nbsp;</span> */}
<span className=" fw-normal text-darkgreen"> <span className={`fw-semibold text-primary text-start ${workArea?.workItems?.length > 0 ? "ps-2" : "ps-7" }`}>Floor:&nbsp;</span>
{workArea.areaName} <span className="fw-normal text-darkgreen">{floor.floorName}</span>
</span> <span className="ms-10 fw-semibold text-primary">Work Area:&nbsp;</span>
</div> <span className="fw-normal text-darkgreen">{workArea.areaName}</span>
</div>
</div>
</div> </div>
</td>
</tr> </div>
</td>
</tr>
{workItems && workItems.length > 0 && ( {isExpanded && workArea?.workItems?.length > 0 && (
<tr className="overflow-auto"> <tr className="overflow-auto">
<td colSpan={4}> <td colSpan={4}>
<table className="table mx-1"> <table className="table mx-1">
<thead> <thead>
<tr> <tr>
<th className="infra-activity-table-header-first"> <th className="infra-activity-table-header-first">Activity</th>
Activity <th className="infra-activity-table-header d-sm-none d-sm-table-cell">Status</th>
</th> <th className="infra-activity-table-header d-none d-md-table-cell">Planned</th>
{/* for mobile view */} <th className="infra-activity-table-header d-none d-md-table-cell">Completed</th>
<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">Progress</th>
<th className="infra-activity-table-header text-end "> <th className="infra-activity-table-header text-end">
<span className="px-3">Actions</span> <span className="px-3">Actions</span>
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody className="table-border-bottom-0"> <tbody className="table-border-bottom-0">
{workArea?.workItems && workArea.workItems.length > 0 ? ( {workArea.workItems.map((workItem) => (
workArea.workItems.map((workItem) => ( <WorkItem
<WorkItem key={workItem.workItemId}
key={workItem.workItemId} workItem={workItem}
workItem={workItem} forBuilding={forBuilding}
forBuilding={forBuilding} forFloor={floor}
forFloor={floor} forWorkArea={workArea}
forWorkArea={workArea} deleteHandleTask={HanldeDeleteActivity}
deleteHandleTask={HanldeDeleteActivity} />
/> ))}
))
) : (
<tr>
<td colSpan="4" className="text-center">
No Data
</td>
</tr>
)}
</tbody> </tbody>
</table> </table>
</td> </td>
</tr> </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> </React.Fragment>
); );
}; };