added bootstrap accordation
This commit is contained in:
Pramod Mahajan
parent
db098f9fdc
commit
4fb337533e
@ -9,16 +9,12 @@ 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 dispatch = useDispatch();
|
||||
const [Project, setProject] = useState();
|
||||
|
||||
useEffect(() => {
|
||||
const project = getCachedData("projectInfo");
|
||||
setProject(project)
|
||||
setProject(project);
|
||||
|
||||
if (!project || !forBuilding?.id || !floor?.id || !workArea?.id) return;
|
||||
const building = project.buildings?.find((b) => b.id === forBuilding.id);
|
||||
@ -28,9 +24,7 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
|
||||
}, [workArea, floor, floor]);
|
||||
|
||||
const HanldeDeleteActivity = async (workItemId) => {
|
||||
|
||||
try
|
||||
{
|
||||
try {
|
||||
const updatedProject = { ...Project.data };
|
||||
const response = await ProjectRepository.deleteProjectTask(workItemId);
|
||||
const newProject = {
|
||||
@ -70,7 +64,6 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
|
||||
|
||||
dispatch(refreshData(true));
|
||||
|
||||
|
||||
showToast("Activity Deleted Successfully", "success");
|
||||
} catch (error) {
|
||||
const message =
|
||||
@ -81,64 +74,126 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
|
||||
}
|
||||
};
|
||||
|
||||
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 && (
|
||||
<button
|
||||
className="btn p-0"
|
||||
onClick={toggleExpand}
|
||||
<td colSpan="4" className="p-0">
|
||||
<div
|
||||
className="accordion border-none"
|
||||
id={`accordion-${workArea.id}`}
|
||||
>
|
||||
{isExpanded ? <i className="bx bx-minus-circle" /> : <i className="bx bx-plus-circle" />}
|
||||
<div className="accordion-item background border-0">
|
||||
{/* Accordion Header */}
|
||||
<p
|
||||
className="accordion-header mb-0"
|
||||
id={`heading-${workArea.id}`}
|
||||
>
|
||||
<button
|
||||
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)}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{isExpanded && workArea?.workItems?.length > 0 && (
|
||||
<tr className="overflow-auto">
|
||||
<td colSpan={4}>
|
||||
<table className="table mx-1">
|
||||
{/* 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>
|
||||
{/* for mobile view */}
|
||||
<th className="infra-activity-table-header d-sm-none d-sm-table-cell">
|
||||
<th className="infra-activity-table-header d-sm-table-cell d-md-none">
|
||||
Status
|
||||
</th>
|
||||
<th className="infra-activity-table-header-first">
|
||||
<th className="infra-activity-table-header d-none d-md-table-cell">
|
||||
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">
|
||||
Progress
|
||||
</th>
|
||||
<th className="infra-activity-table-header text-end">
|
||||
<span className="px-3">Actions</span>
|
||||
<span className="px-2">Actions</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -155,15 +210,13 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{isExpanded && (!workArea?.workItems || workArea?.workItems.length === 0) && (
|
||||
<tr>
|
||||
<td colSpan="4" className="text-center">No Data</td>
|
||||
</tr>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user