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

Add colors to floor and workarea in infra panel to identify them easily

Browse Source
This commit is contained in:
Vikas Nale 2025-05-03 13:15:24 +05:30
parent 7d5d262728
commit 9aaedede20
3 changed files with 36 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/assets/css/default.css
View File

@ -171,3 +171,7 @@
inset-block-start: 1.5rem;
inset-inline-end: 1.5rem;
}
.text-darkgreen {
color: #16a085;
}

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

@ -20,8 +20,12 @@ const Floor = ({ floor, workAreas, forBuilding }) => {
<div className="row">
<div className="col">
{" "}
<span className="fw-semibold">Floor:&nbsp;</span>{" "}
<span class="fw-normal">{floor.floorName}</span>
<span className="fw-semibold text-primary">
Floor:&nbsp;
</span>{" "}
<span class="fw-normal text-darkgreen">
{floor.floorName}
</span>
</div>
</div>
</div>

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

@ -1,22 +1,21 @@
import React, { useEffect,useState } from "react";
import React, { useEffect, useState } from "react";
import WorkItem from "./WorkItem";
import {useProjectDetails} from "../../../hooks/useProjects";
import {getCachedData} from "../../../slices/apiDataManager";
import { useProjectDetails } from "../../../hooks/useProjects";
import { getCachedData } from "../../../slices/apiDataManager";
const WorkArea = ( {workArea, floor, forBuilding} ) =>{
const [workItems,setWorkItems] =useState([])
const WorkArea = ({ workArea, floor, forBuilding }) => {
const [workItems, setWorkItems] = useState([]);
useEffect( () =>
{
const project = getCachedData( "projectInfo" )
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);
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] );
setWorkItems(workAreas?.workItems || []);
}, [workArea, floor, floor]);
return (
<React.Fragment key={workArea.id}>
@ -27,12 +26,20 @@ const WorkArea = ( {workArea, floor, forBuilding} ) =>{
<div className="row">
<div className="col">
{" "}
<span className="fw-semibold">Floor:&nbsp;</span>{" "}
<span class="fw-normal">{floor.floorName}</span>
<span className="fw-semibold text-primary">
Floor:&nbsp;
</span>{" "}
<span class="fw-normal text-darkgreen">
{floor.floorName}
</span>
</div>
<div className="col">
<span className="ms-10 fw-semibold">Work Area:&nbsp;</span>{" "}
<span class=" fw-normal">{workArea.areaName}</span>
<span className="ms-10 fw-semibold text-primary">
Work Area:&nbsp;
</span>{" "}
<span class=" fw-normal text-darkgreen">
{workArea.areaName}
</span>
</div>
</div>
</div>
@ -40,7 +47,7 @@ const WorkArea = ( {workArea, floor, forBuilding} ) =>{
</td>
</tr>
{(workItems && workItems.length > 0) && (
{workItems && workItems.length > 0 && (
<tr className="overflow-auto">
<td colSpan={4}>
<table className="table mx-1">
@ -88,7 +95,7 @@ const WorkArea = ( {workArea, floor, forBuilding} ) =>{
</td>
</tr>
)}
{!workItems && <p>No item</p>}
{!workItems && <p>No item</p>}
</React.Fragment>
);
};