feat: implement resource management ID handling in Hrm and AssetManagement components

This commit is contained in:
2025-08-25 17:05:24 +05:30
parent b54268a89b
commit 6aeef163d2
5 changed files with 62 additions and 25 deletions

View File

@@ -3,6 +3,8 @@ import { ClockThreeIcon, LocationPinIcon, TargetIcon } from '../../../../icons/E
import { useSceneContext } from '../../../../../modules/scene/sceneContext';
import { useProductContext } from '../../../../../modules/simulation/products/productContext';
import RenameInput from '../../../../ui/inputs/RenameInput';
import { useResourceManagementId } from '../../../../../store/builder/store';
import { set } from 'immer/dist/internal';
// import NavigateCatagory from '../NavigateCatagory'
const Hrm = () => {
@@ -13,6 +15,7 @@ const Hrm = () => {
const { products, getProductById } = productStore();
const { selectedProductStore } = useProductContext();
const { selectedProduct } = selectedProductStore();
const { setResourceManagementId } = useResourceManagementId();
useEffect(() => {
if (selectedProduct) {
@@ -25,6 +28,7 @@ const Hrm = () => {
employee: {
image: "",
name: worker.modelName,
modelId: worker.modelUuid,
employee_id: `HR-${204 + index}`,
status: "Active",
},
@@ -54,7 +58,7 @@ const Hrm = () => {
}, [selectedProduct, getProductById]);
useEffect(() => {
// console.log("Workers data updated:", workers);
//
}, [workers]);
@@ -147,9 +151,14 @@ const Hrm = () => {
// },
// ]
function handleRenameWorker(newName: string) {
// console.log('newName: ', newName);
//
}
function handleHumanClick(employee: any) {
if (employee.modelId) {
setResourceManagementId(employee.modelId);
}
}
return (
@@ -173,14 +182,14 @@ const Hrm = () => {
<img className='user-image' src={employee.employee.image} alt="" />
<div className={`status ${employee.employee.status}`}></div>
</div>
<div className="details">
<div className="details" >
{/* <div className="employee-name">{employee.employee.name}</div> */}
<RenameInput value={employee.employee.name} onRename={handleRenameWorker} />
<div className="employee-id">{employee.employee.employee_id}</div>
</div>
</div>
<div className="see-more">View more</div>
<div className="see-more" onClick={() => { handleHumanClick(employee.employee) }}>View in Scene</div>
</header>
<div className="content">

View File

@@ -5,6 +5,7 @@ import assetImage from "../../../../../../assets/image/asset-image.png"
import { useSceneContext } from '../../../../../../modules/scene/sceneContext';
import { useProductContext } from '../../../../../../modules/simulation/products/productContext';
import RenameInput from '../../../../../ui/inputs/RenameInput';
import { useResourceManagementId } from '../../../../../../store/builder/store';
const AssetManagement = () => {
// const [selectedCategory, setSelectedCategory] = useState("All Assets");
const [expandedAssetId, setExpandedAssetId] = useState<string | null>(null);
@@ -14,6 +15,7 @@ const AssetManagement = () => {
const { products, getProductById } = productStore();
const { selectedProductStore } = useProductContext();
const { selectedProduct } = selectedProductStore();
const { setResourceManagementId } = useResourceManagementId();
@@ -26,7 +28,7 @@ const AssetManagement = () => {
if (asset.type === "storageUnit" || asset.type === "human") return;
if (!grouped[asset.modelName]) {
grouped[asset.modelName] = {
id: asset.assetId,
id: asset.modelUuid,
name: asset.modelName,
model: asset.modelCode || "N/A",
status: asset.status || "Online",
@@ -47,7 +49,7 @@ const AssetManagement = () => {
}, [selectedProduct]);
function handleRenameAsset(newName: string) {
// console.log('newName: ', newName);
//
// if (expandedAssetId) {
// setAssets(prevAssets =>
// prevAssets.map(asset =>
@@ -62,6 +64,12 @@ const AssetManagement = () => {
}, [assets]);
function handleAssetClick(id: string) {
setResourceManagementId(id);
}
// const dummyAssets = [
// {
// id: '1',
@@ -105,10 +113,10 @@ const AssetManagement = () => {
return (
<>
{/* <NavigateCatagory
category={["All Assets", "Machines", "Workstation", "Vehicles"]}
selectedCategory={selectedCategory}
setSelectedCategory={setSelectedCategory}
/> */}
category={["All Assets", "Machines", "Workstation", "Vehicles"]}
selectedCategory={selectedCategory}
setSelectedCategory={setSelectedCategory}
/> */}
<div className='assetManagement-container assetManagement-wrapper'>
{assets.map((asset, index) => (
@@ -122,15 +130,13 @@ const AssetManagement = () => {
<div className="icon"><ForkLiftIcon /></div>
}
<div className="asset-details-container">
<div className="asset-details">
<div className="asset-details" >
{/* <div className="asset-name">{asset.name}</div> */}
<RenameInput value={asset.name} onRename={handleRenameAsset} />
{asset.count !== 1 && <div>
<span className="asset-id-label">x</span>
<span className="asset-id">{asset.count}</span>
</div>}
<div className="asset-model">{asset.model}</div>
</div>
<div className="asset-status-wrapper">
@@ -163,7 +169,7 @@ const AssetManagement = () => {
<div className="asset-estimate__view-button" onClick={() => setExpandedAssetId(null)}>
<EyeIcon isClosed={false} />
<div className="asset-estimate__view-text">View in Scene</div>
<div className="asset-estimate__view-text" onClick={() => handleAssetClick(asset.id)}>View in Scene</div>
</div>
</div>

View File

@@ -57,6 +57,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
const { zoneStore } = useSceneContext();
const { zones, setZoneName } = zoneStore();
useEffect(() => {
useSelectedZoneStore.getState().setSelectedZone({
zoneName: "",
@@ -121,6 +122,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
}
function handleAssetClick(asset: Asset) {
setZoneAssetId(asset);
}
@@ -157,8 +159,9 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
modelUuid: zoneAssetId.id,
modelName: newName,
projectId,
versionId: selectedVersion?.versionId || ''
});
// console.log("response: ", response);
setName(zoneAssetId.id, response.modelName);
}
@@ -255,9 +258,8 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
}}
>
<div
className={`list-item ${
selectedZone.zoneUuid === item.id ? "active" : ""
}`}
className={`list-item ${selectedZone.zoneUuid === item.id ? "active" : ""
}`}
>
<div className="zone-header">
<button className="value" id="zone-name">
@@ -301,9 +303,8 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
{item.assets.map((asset) => (
<li
key={`asset-${asset.id}`}
className={`list-container asset-item ${
zoneAssetId?.id === asset.id ? "active" : ""
}`}
className={`list-container asset-item ${zoneAssetId?.id === asset.id ? "active" : ""
}`}
onClick={() => handleAssetClick(asset)}
>
<div className="list-item">

View File

@@ -3,7 +3,7 @@ import { CameraControls } from '@react-three/drei';
import { ThreeEvent, useThree } from '@react-three/fiber';
import { useCallback, useEffect, useRef } from 'react';
import { useActiveTool, useDeletableFloorItem, useSelectedFloorItem, useToggleView, useZoneAssetId } from '../../../../../../store/builder/store';
import { useActiveTool, useDeletableFloorItem, useResourceManagementId, useSelectedFloorItem, useToggleView, useZoneAssetId } from '../../../../../../store/builder/store';
import useModuleStore, { useSubModuleStore } from '../../../../../../store/useModuleStore';
import { useSocketStore } from '../../../../../../store/builder/store';
import { useSceneContext } from '../../../../../scene/sceneContext';
@@ -36,6 +36,7 @@ export function useModelEventHandlers({
const { push3D } = undoRedo3DStore();
const { getAssetById, removeAsset } = assetStore();
const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
const { resourceManagementId, setResourceManagementId } = useResourceManagementId();
const { removeEvent, getEventByModelUuid } = eventStore();
const { getIsEventInProduct, addPoint, deleteEvent } = productStore();
const { setSelectedAsset, clearSelectedAsset } = useSelectedAsset();
@@ -74,7 +75,17 @@ export function useModelEventHandlers({
if (zoneAssetId.id === asset.modelUuid) {
handleDblClick(asset);
}
}, [zoneAssetId])
useEffect(() => {
if (!resourceManagementId) return
if (resourceManagementId === asset.modelUuid) {
handleDblClick(asset);
}
}, [resourceManagementId])
useEffect(() => {
if (!selectedFloorItem) {
@@ -83,10 +94,8 @@ export function useModelEventHandlers({
}, [selectedFloorItem])
const handleDblClick = (asset: Asset) => {
if (asset && activeTool === "cursor" && boundingBox && groupRef.current && activeModule === 'builder') {
if (asset && activeTool === "cursor" && boundingBox && groupRef.current && (activeModule === 'builder' || (activeModule === 'simulation' && resourceManagementId))) {
const frontView = false;
if (frontView) {
const size = boundingBox.getSize(new THREE.Vector3());
const center = boundingBox.getCenter(new THREE.Vector3());
@@ -107,6 +116,7 @@ export function useModelEventHandlers({
paddingBottom: 5,
paddingRight: 5,
});
} else {
const collisionPos = new THREE.Vector3();
@@ -127,6 +137,7 @@ export function useModelEventHandlers({
}
setSelectedFloorItem(groupRef.current);
setResourceManagementId("");
}
};

View File

@@ -436,6 +436,16 @@ export const useZoneAssetId = create<ZoneAssetState>((set) => ({
setZoneAssetId: (asset) => set({ zoneAssetId: asset }),
}));
interface ResourceManagementState {
resourceManagementId: string;
setResourceManagementId: (id: string) => void;
}
export const useResourceManagementId = create<ResourceManagementState>((set) => ({
resourceManagementId: "", // default value
setResourceManagementId: (id: string) => set({ resourceManagementId: id }),
}));
// version visible hidden
interface VersionHistoryState {
viewVersionHistory: boolean;