added bootstrap accordation
This commit is contained in:
Pramod Mahajan
parent
db098f9fdc
commit
4fb337533e
@ -2,37 +2,31 @@ import React, { useEffect, useState } from "react";
|
||||
import WorkItem from "./WorkItem";
|
||||
import { useProjectDetails } from "../../../hooks/useProjects";
|
||||
import { cacheData, getCachedData } from "../../../slices/apiDataManager";
|
||||
import {useDispatch} from "react-redux";
|
||||
import {refreshData} from "../../../slices/localVariablesSlice";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { refreshData } from "../../../slices/localVariablesSlice";
|
||||
import ProjectRepository from "../../../repositories/ProjectRepository";
|
||||
import showToast from "../../../services/toastService";
|
||||
|
||||
const WorkArea = ({ workArea, floor, forBuilding }) => {
|
||||
const [ workItems, setWorkItems ] = useState( [] );
|
||||
const dispatch = useDispatch()
|
||||
const [ Project, setProject ] = useState()
|
||||
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
|
||||
const toggleExpand = () => setIsExpanded(!isExpanded);
|
||||
const [workItems, setWorkItems] = useState([]);
|
||||
const dispatch = useDispatch();
|
||||
const [Project, setProject] = useState();
|
||||
|
||||
useEffect(() => {
|
||||
const project = getCachedData( "projectInfo" );
|
||||
setProject(project)
|
||||
const project = getCachedData("projectInfo");
|
||||
setProject(project);
|
||||
|
||||
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 ] );
|
||||
}, [workArea, floor, floor]);
|
||||
|
||||
const HanldeDeleteActivity = async (workItemId) => {
|
||||
|
||||
try
|
||||
{
|
||||
const HanldeDeleteActivity = async (workItemId) => {
|
||||
try {
|
||||
const updatedProject = { ...Project.data };
|
||||
const response = await ProjectRepository.deleteProjectTask( workItemId);
|
||||
const response = await ProjectRepository.deleteProjectTask(workItemId);
|
||||
const newProject = {
|
||||
...updatedProject,
|
||||
buildings: updatedProject?.buildings.map((building) =>
|
||||
@ -66,104 +60,163 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
|
||||
cacheData("projectInfo", {
|
||||
projectId: newProject.id,
|
||||
data: newProject,
|
||||
} );
|
||||
});
|
||||
|
||||
dispatch(refreshData(true));
|
||||
|
||||
|
||||
showToast("Activity Deleted Successfully", "success");
|
||||
} catch (error) {
|
||||
const message =
|
||||
error.response?.data?.message ||
|
||||
error.message ||
|
||||
"An unexpected error occurred";
|
||||
showToast(message, "error");
|
||||
showToast(message, "error");
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const toggleButtons = document.querySelectorAll(".accordion-button");
|
||||
|
||||
toggleButtons.forEach((btn) => {
|
||||
const icon = btn.querySelector(".toggle-icon");
|
||||
|
||||
btn.addEventListener("click", () => {
|
||||
setTimeout(() => {
|
||||
if (btn.classList.contains("collapsed")) {
|
||||
icon.classList.remove("bx-minus-circle");
|
||||
icon.classList.add("bx-plus-circle");
|
||||
} else {
|
||||
icon.classList.remove("bx-plus-circle");
|
||||
icon.classList.add("bx-minus-circle");
|
||||
}
|
||||
}, 300); // allow Bootstrap collapse to complete
|
||||
});
|
||||
});
|
||||
|
||||
return () => {
|
||||
toggleButtons.forEach((btn) => {
|
||||
btn.removeEventListener("click", () => {});
|
||||
});
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<React.Fragment key={workArea.id}>
|
||||
<tr>
|
||||
<td colSpan="4" className="text-start table-cell">
|
||||
<div className="row ps-2 ">
|
||||
|
||||
{/* <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 && (
|
||||
<tr>
|
||||
<td colSpan="4" className="p-0">
|
||||
<div
|
||||
className="accordion border-none"
|
||||
id={`accordion-${workArea.id}`}
|
||||
>
|
||||
<div className="accordion-item background border-0">
|
||||
{/* Accordion Header */}
|
||||
<p
|
||||
className="accordion-header mb-0"
|
||||
id={`heading-${workArea.id}`}
|
||||
>
|
||||
<button
|
||||
className="btn p-0"
|
||||
onClick={toggleExpand}
|
||||
className={`accordion-button text-start px-2 py-2 custom-accordion-btn ${
|
||||
workItems && workItems.length > 0 ? "collapsed" : "disabled"
|
||||
}`}
|
||||
type="button"
|
||||
data-bs-toggle={
|
||||
workItems && workItems.length > 0 ? "collapse" : ""
|
||||
}
|
||||
data-bs-target={
|
||||
workItems && workItems.length > 0
|
||||
? `#collapse-${workArea.id}`
|
||||
: undefined
|
||||
}
|
||||
aria-expanded="false"
|
||||
aria-controls={`collapse-${workArea.id}`}
|
||||
disabled={!(workItems && workItems.length > 0)}
|
||||
>
|
||||
{isExpanded ? <i className="bx bx-minus-circle" /> : <i className="bx bx-plus-circle" />}
|
||||
<i
|
||||
className={`bx me-2 toggle-icon ${
|
||||
workItems && workItems.length > 0
|
||||
? "bx-plus-circle"
|
||||
: "bx-block"
|
||||
}`}
|
||||
style={{
|
||||
fontSize: "1.2rem",
|
||||
color:
|
||||
workItems && workItems.length > 0 ? "" : "transparent",
|
||||
}}
|
||||
></i>
|
||||
|
||||
<div className="d-flex justify-content-start gap-12">
|
||||
<div className="d-flex">
|
||||
<span className="fw-semibold small">Floor: </span>
|
||||
<span className="fw-normal text-darkgreen small">
|
||||
{floor.floorName}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-start ">
|
||||
<span className="fw-semibold text-primary small">
|
||||
Work Area:
|
||||
</span>
|
||||
<span className="fw-normal text-darkgreen small">
|
||||
{workArea.areaName}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
{/* <span className="fw-semibold text-primary text-start ps-2">Floor: </span> */}
|
||||
<span className={`fw-semibold text-primary text-start ${workArea?.workItems?.length > 0 ? "ps-2" : "ps-7" }`}>Floor: </span>
|
||||
<span className="fw-normal text-darkgreen">{floor.floorName}</span>
|
||||
<span className="ms-10 fw-semibold text-primary">Work Area: </span>
|
||||
<span className="fw-normal text-darkgreen">{workArea.areaName}</span>
|
||||
</p>
|
||||
|
||||
{/* Accordion Body */}
|
||||
{workItems && workItems.length > 0 && (
|
||||
<div
|
||||
id={`collapse-${workArea.id}`}
|
||||
className="accordion-collapse collapse"
|
||||
aria-labelledby={`heading-${workArea.id}`}
|
||||
>
|
||||
<div className="accordion-body p-0">
|
||||
<table className="table table-sm mx-1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="infra-activity-table-header-first">
|
||||
Activity
|
||||
</th>
|
||||
<th className="infra-activity-table-header d-sm-table-cell d-md-none">
|
||||
Status
|
||||
</th>
|
||||
<th className="infra-activity-table-header d-none d-md-table-cell">
|
||||
Category
|
||||
</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-2">Actions</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="table-border-bottom-0">
|
||||
{workArea.workItems.map((workItem) => (
|
||||
<WorkItem
|
||||
key={workItem.workItemId}
|
||||
workItem={workItem}
|
||||
forBuilding={forBuilding}
|
||||
forFloor={floor}
|
||||
forWorkArea={workArea}
|
||||
deleteHandleTask={HanldeDeleteActivity}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{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>
|
||||
<th className="infra-activity-table-header-first">
|
||||
Category
|
||||
</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.map((workItem) => (
|
||||
<WorkItem
|
||||
key={workItem.workItemId}
|
||||
workItem={workItem}
|
||||
forBuilding={forBuilding}
|
||||
forFloor={floor}
|
||||
forWorkArea={workArea}
|
||||
deleteHandleTask={HanldeDeleteActivity}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{isExpanded && (!workArea?.workItems || workArea?.workItems.length === 0) && (
|
||||
<tr>
|
||||
<td colSpan="4" className="text-center">No Data</td>
|
||||
</tr>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user