From 9b3a4e72539b1184b1161f215d9173ac9f3d3795 Mon Sep 17 00:00:00 2001 From: Gomathi9520 Date: Tue, 20 May 2025 15:49:45 +0530 Subject: [PATCH] Refactor various components: remove console logs, adjust visibility logic, and enhance styling for active list items --- .../properties/ZoneProperties.tsx | 2 +- app/src/components/ui/list/DropDownList.tsx | 1 + app/src/components/ui/list/List.tsx | 82 +++++++++++++++++-- app/src/modules/builder/groups/zoneGroup.tsx | 2 +- .../widgets/3d/Dropped3dWidget.tsx | 77 ++++++++++++----- .../widgets/3d/cards/ProductionCapacity.tsx | 24 +++--- .../widgets/3d/cards/ReturnOfInvestment.tsx | 12 +-- .../widgets/3d/cards/StateWorking.tsx | 4 +- .../widgets/3d/cards/Throughput.tsx | 4 +- .../floating/DroppedFloatingWidgets.tsx | 1 - .../visualization/zone/DisplayZone.tsx | 2 +- app/src/styles/components/lists.scss | 9 ++ 12 files changed, 171 insertions(+), 49 deletions(-) diff --git a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx index 31c7761..e116c15 100644 --- a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx @@ -57,7 +57,7 @@ const ZoneProperties: React.FC = () => { }; // Call your API to update the zone let response = await zoneCameraUpdate(zonesdata, organization); - console.log("response: ", response); + // console.log("response: ", response); if (response.message === "updated successfully") { setZones((prevZones: any[]) => prevZones.map((zone) => diff --git a/app/src/components/ui/list/DropDownList.tsx b/app/src/components/ui/list/DropDownList.tsx index 3ec828e..1947138 100644 --- a/app/src/components/ui/list/DropDownList.tsx +++ b/app/src/components/ui/list/DropDownList.tsx @@ -98,6 +98,7 @@ const DropDownList: React.FC = ({ assets: assetsInZone, }; }); + setZoneDataList(updatedZoneList); }, [zones, floorItems]); diff --git a/app/src/components/ui/list/List.tsx b/app/src/components/ui/list/List.tsx index 8ec9dcc..d5db7fb 100644 --- a/app/src/components/ui/list/List.tsx +++ b/app/src/components/ui/list/List.tsx @@ -19,6 +19,7 @@ import { } from "../../../store/builder/store"; import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation"; import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi"; +import OuterClick from "../../../utils/outerClick"; interface Asset { id: string; @@ -43,13 +44,14 @@ const List: React.FC = ({ items = [], remove }) => { const { activeModule } = useModuleStore(); const { selectedZone, setSelectedZone } = useSelectedZoneStore(); const { zoneAssetId, setZoneAssetId } = useZoneAssetId(); - const { zones } = useZones(); + const { zones, setZones } = useZones(); const { setSubModule } = useSubModuleStore(); const [expandedZones, setExpandedZones] = useState>( {} ); const { setFloorItems } = useFloorItems(); + useEffect(() => { useSelectedZoneStore.getState().setSelectedZone({ zoneName: "", @@ -82,7 +84,6 @@ const List: React.FC = ({ items = [], remove }) => { const organization = email?.split("@")[1]?.split(".")[0] ?? ""; let response = await getZoneData(id, organization); - setSelectedZone({ zoneName: response?.zoneName, activeSides: response?.activeSides ?? [], @@ -125,6 +126,14 @@ const List: React.FC = ({ items = [], remove }) => { const response = await zoneCameraUpdate(zonesdata, organization); if (response.message === "updated successfully") { setSelectedZone((prev) => ({ ...prev, zoneName: newName })); + + setZones((prevZones: any[]) => + prevZones.map((zone) => + zone.zoneId === selectedZone.zoneId + ? { ...zone, zoneName: newName } + : zone + ) + ); } } @@ -138,7 +147,7 @@ const List: React.FC = ({ items = [], remove }) => { zoneAssetId.id, newName ); - console.log("response: ", response); + // console.log("response: ", response); setFloorItems((prevFloorItems: any[]) => prevFloorItems.map((floorItems) => floorItems.modelUuid === zoneAssetId.id @@ -156,6 +165,69 @@ const List: React.FC = ({ items = [], remove }) => { ); }; + useEffect(() => { + let drag = false; + let isLeftMouseDown = false; + + const contextClassNames = ["list-wrapper", "zone-properties-container", "list-container"]; + + const isOutsideClick = (target: EventTarget | null) => { + if (!(target instanceof HTMLElement)) return true; + return !contextClassNames.some(className => + target.closest(`.${className}`) + ); + }; + + const onMouseDown = (evt: MouseEvent) => { + if (evt.button === 0) { + isLeftMouseDown = true; + drag = false; + } + }; + + const onMouseMove = () => { + if (isLeftMouseDown) { + drag = true; + } + }; + + const onMouseUp = (evt: MouseEvent) => { + if (evt.button === 0) { + isLeftMouseDown = false; + if (drag) return; + + if (isOutsideClick(evt.target)) { + // Clear selected zone + setSelectedZone({ + zoneId: '', + zoneName: '', + activeSides: [], + panelOrder: [], + lockedPanels: [], + widgets: [], + zoneViewPortTarget: [], + zoneViewPortPosition: [] + }); + setZoneAssetId({ + id: '', + name: '', + }); + } + } + }; + + document.addEventListener('mousedown', onMouseDown); + document.addEventListener('mousemove', onMouseMove); + document.addEventListener('mouseup', onMouseUp); + + return () => { + document.removeEventListener('mousedown', onMouseDown); + document.removeEventListener('mousemove', onMouseMove); + document.removeEventListener('mouseup', onMouseUp); + }; + }, []); + + return ( <> {items?.length > 0 ? ( @@ -169,7 +241,7 @@ const List: React.FC = ({ items = [], remove }) => { toggleZoneExpansion(item.id); }} > -
+