Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

threads in sidebar

Browse Source
This commit is contained in:
Poovizhi99
2025-10-16 14:45:26 +05:30
parent bf35e00df6
commit bb148f4801
5 changed files with 155 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
app/src/components/layout/sidebarRight/SideBarRight.tsx
View File

@@ -1,13 +1,22 @@
import React, { useEffect, useState } from "react";
import Header from "./Header";
import useModuleStore, { useSubModuleStore } from "../../../store/ui/useModuleStore";
import { AnalysisIcon, FilePackageIcon, MechanicsIcon, PropertiesIcon, SimulationIcon } from "../../icons/SimulationIcons";
import {
AnalysisIcon,
FilePackageIcon,
MechanicsIcon,
PropertiesIcon,
SimulationIcon,
} from "../../icons/SimulationIcons";
import { useToggleStore } from "../../../store/ui/useUIToggleStore";
import Visualization from "./visualization/Visualization";
import Analysis from "./analysis/Analysis";
import Simulations from "./simulation/Simulations";
import { useIsComparing, useToolMode } from "../../../store/builder/store";
import { useSelectedEventData, useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
import { useActiveTool, useIsComparing, useToolMode } from "../../../store/builder/store";
import {
useSelectedEventData,
useSelectedEventSphere,
} from "../../../store/simulation/useSimulationStore";
import { useBuilderStore } from "../../../store/builder/useBuilderStore";
import GlobalProperties from "./properties/GlobalProperties";
import AssetProperties from "./properties/AssetProperties";
@@ -25,6 +34,7 @@ import SelectedZoneProperties from "./properties/SelectedZoneProperties";
import ResourceManagement from "./resourceManagement/ResourceManagement";
import { useSceneContext } from "../../../modules/scene/sceneContext";
import ThreadDetails from "./properties/eventProperties/components/ThreadDetails";
type DisplayComponent =
| "versionHistory"
@@ -44,20 +54,26 @@ type DisplayComponent =
| "analysis"
| "visualization"
| "resourceManagement"
| "threadDetails"
| "none";
const SideBarRight: React.FC = () => {
const { activeModule } = useModuleStore();
const { activeTool } = useActiveTool();
console.log("activeTool: ", activeTool);
const { toggleUIRight } = useToggleStore();
const { toolMode } = useToolMode();
const { subModule, setSubModule } = useSubModuleStore();
const { selectedWall, selectedFloor, selectedAisle, selectedZone, selectedDecal } = useBuilderStore();
const { selectedWall, selectedFloor, selectedAisle, selectedZone, selectedDecal } =
useBuilderStore();
const { selectedEventData } = useSelectedEventData();
const { selectedEventSphere } = useSelectedEventSphere();
const { versionStore, assetStore } = useSceneContext();
const { versionStore, assetStore, threadStore } = useSceneContext();
const { selectedAssets } = assetStore();
const { viewVersionHistory, setVersionHistoryVisible } = versionStore();
const { isComparing } = useIsComparing();
const { threads } = threadStore();
console.log("threads: ", threads);
const [displayComponent, setDisplayComponent] = useState<DisplayComponent>("none");
@@ -104,7 +120,10 @@ const SideBarRight: React.FC = () => {
}
}
if (activeModule === "simulation" || activeModule === "builder") {
if (
activeModule === "simulation" ||
(activeModule === "builder" && activeTool !== "comment")
) {
if (subModule === "resourceManagement") {
setDisplayComponent("resourceManagement");
return;
@@ -116,31 +135,81 @@ const SideBarRight: React.FC = () => {
setDisplayComponent("assetProperties");
return;
}
if (selectedAssets.length !== 1 && !selectedFloor && !selectedAisle && !selectedDecal && !selectedZone && selectedWall) {
if (
selectedAssets.length !== 1 &&
!selectedFloor &&
!selectedAisle &&
!selectedDecal &&
!selectedZone &&
selectedWall
) {
setDisplayComponent("selectedWallProperties");
return;
}
if (selectedAssets.length !== 1 && !selectedWall && !selectedAisle && !selectedDecal && !selectedZone && selectedFloor) {
if (
selectedAssets.length !== 1 &&
!selectedWall &&
!selectedAisle &&
!selectedDecal &&
!selectedZone &&
selectedFloor
) {
setDisplayComponent("selectedFloorProperties");
return;
}
if (viewVersionHistory && selectedAssets.length !== 1 && !selectedWall && !selectedAisle && !selectedFloor && !selectedDecal && !selectedZone) {
if (
viewVersionHistory &&
selectedAssets.length !== 1 &&
!selectedWall &&
!selectedAisle &&
!selectedFloor &&
!selectedDecal &&
!selectedZone
) {
setDisplayComponent("versionHistory");
return;
}
if (selectedAssets.length !== 1 && !selectedFloor && !selectedAisle && !selectedWall && !selectedZone && selectedDecal) {
if (
selectedAssets.length !== 1 &&
!selectedFloor &&
!selectedAisle &&
!selectedWall &&
!selectedZone &&
selectedDecal
) {
setDisplayComponent("selectedDecalProperties");
return;
}
if (selectedAssets.length !== 1 && !selectedFloor && !selectedWall && !selectedDecal && !selectedZone && selectedAisle) {
if (
selectedAssets.length !== 1 &&
!selectedFloor &&
!selectedWall &&
!selectedDecal &&
!selectedZone &&
selectedAisle
) {
setDisplayComponent("selectedAisleProperties");
return;
}
if (selectedAssets.length !== 1 && !selectedFloor && !selectedWall && !selectedDecal && !selectedAisle && selectedZone) {
if (
selectedAssets.length !== 1 &&
!selectedFloor &&
!selectedWall &&
!selectedDecal &&
!selectedAisle &&
selectedZone
) {
setDisplayComponent("selectedZoneProperties");
return;
}
if (selectedAssets.length !== 1 && !selectedFloor && !selectedWall && !selectedDecal && !selectedAisle && !selectedZone) {
if (
selectedAssets.length !== 1 &&
!selectedFloor &&
!selectedWall &&
!selectedDecal &&
!selectedAisle &&
!selectedZone
) {
if (toolMode === "Aisle") {
setDisplayComponent("aisleProperties");
return;
@@ -161,10 +230,26 @@ const SideBarRight: React.FC = () => {
setDisplayComponent("globalProperties");
return;
}
if (activeModule === "builder" && activeTool === "comment") {
setDisplayComponent("threadDetails");
}
}
setDisplayComponent("none");
}, [viewVersionHistory, activeModule, subModule, isComparing, selectedAssets, selectedWall, selectedFloor, selectedAisle, toolMode, selectedDecal, selectedZone]);
}, [
viewVersionHistory,
activeModule,
subModule,
isComparing,
selectedAssets,
selectedWall,
selectedFloor,
selectedAisle,
toolMode,
selectedDecal,
selectedZone,
activeTool,
]);
const renderComponent = () => {
switch (displayComponent) {
@@ -202,13 +287,20 @@ const SideBarRight: React.FC = () => {
return <Visualization />;
case "resourceManagement":
return <ResourceManagement />;
case "threadDetails":
return <ThreadDetails />;
default:
return null;
}
};
return (
<div className={`sidebar-right-wrapper ${toggleUIRight && (!isComparing || activeModule !== "simulation") ? "open" : "closed"}`} onPointerDown={(e) => e.stopPropagation()}>
<div
className={`sidebar-right-wrapper ${
toggleUIRight && (!isComparing || activeModule !== "simulation") ? "open" : "closed"
}`}
onPointerDown={(e) => e.stopPropagation()}
>
<Header />
{toggleUIRight && (
<>
@@ -218,7 +310,9 @@ const SideBarRight: React.FC = () => {
<>
<button
id="sidebar-action-list-properties"
className={`sidebar-action-list ${subModule === "properties" ? "active" : ""}`}
className={`sidebar-action-list ${
subModule === "properties" ? "active" : ""
}`}
onClick={() => {
setSubModule("properties");
setVersionHistoryVisible(false);
@@ -234,7 +328,9 @@ const SideBarRight: React.FC = () => {
<>
<button
id="sidebar-action-list-simulation"
className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""}`}
className={`sidebar-action-list ${
subModule === "simulations" ? "active" : ""
}`}
onClick={() => {
setSubModule("simulations");
setVersionHistoryVisible(false);
@@ -245,7 +341,9 @@ const SideBarRight: React.FC = () => {
</button>
<button
id="sidebar-action-list-mechanics"
className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""}`}
className={`sidebar-action-list ${
subModule === "mechanics" ? "active" : ""
}`}
onClick={() => {
setSubModule("mechanics");
setVersionHistoryVisible(false);
@@ -256,7 +354,9 @@ const SideBarRight: React.FC = () => {
</button>
<button
id="sidebar-action-list-analysis"
className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""}`}
className={`sidebar-action-list ${
subModule === "analysis" ? "active" : ""
}`}
onClick={() => {
setSubModule("analysis");
setVersionHistoryVisible(false);
@@ -271,18 +371,26 @@ const SideBarRight: React.FC = () => {
{(activeModule === "builder" || activeModule === "simulation") && (
<button
id="sidebar-action-list-properties"
className={`sidebar-action-list ${subModule === "resourceManagement" ? "active" : ""}`}
className={`sidebar-action-list ${
subModule === "resourceManagement" ? "active" : ""
}`}
onClick={() => {
setSubModule("resourceManagement");
setVersionHistoryVisible(false);
}}
>
<div className="tooltip">Resource Management</div>
<FilePackageIcon isActive={subModule === "resourceManagement"} />
<FilePackageIcon
isActive={subModule === "resourceManagement"}
/>
</button>
)}
</div>
)}
{/* {activeModule === "builder" &&
activeTool === "comment" &&
threads &&
threads.map((val) => <p>{val.threadTitle}</p>)} */}
{displayComponent !== "none" && (
<div className="sidebar-right-container">

7
app/src/components/layout/sidebarRight/properties/eventProperties/components/ThreadDetails.tsx Normal file
View File

@@ -0,0 +1,7 @@
import React from "react";
const ThreadDetails = () => {
return <div></div>;
};
export default ThreadDetails;

2
app/src/modules/collaboration/socket/builderResponses.tsx
View File

@@ -546,6 +546,8 @@ function BuilderResponses() {
}, [builderSocket, selectedZone]);
//#endregion
return null;
}

19
app/src/modules/collaboration/socket/threadSocketResponses.dev.tsx
View File

@@ -14,7 +14,8 @@ interface ThreadSocketProps {
const ThreadSocketResponsesDev = ({ setMessages, modeRef, messages }: ThreadSocketProps) => {
const { threadSocket } = useSocketStore();
const { selectedComment, setSelectedComment, setCommentPositionState, commentPositionState } = useSelectedComment();
const { selectedComment, setSelectedComment, setCommentPositionState, commentPositionState } =
useSelectedComment();
const { threadStore } = useSceneContext();
const { threads, removeReply, addThread, addReply, updateThread, updateReply } = threadStore();
const { userId } = getUserData();
@@ -73,7 +74,9 @@ const ThreadSocketResponsesDev = ({ setMessages, modeRef, messages }: ThreadSock
setMessages((prev) =>
prev.map((message) => {
// 👈 log each message
return message.replyId === data.data?._id ? { ...message, comment: data.data?.comment } : message;
return message.replyId === data.data?._id
? { ...message, comment: data.data?.comment }
: message;
})
);
}
@@ -143,7 +146,17 @@ const ThreadSocketResponsesDev = ({ setMessages, modeRef, messages }: ThreadSock
threadSocket.off("v1-thread:response:delete", handleDeleteThread);
threadSocket.off("v1-thread:response:updateTitle", handleEditThread);
};
}, [threadSocket, selectedComment, commentPositionState, userId, setSelectedComment, setCommentPositionState, threads, modeRef.current, messages]);
}, [
threadSocket,
selectedComment,
commentPositionState,
userId,
setSelectedComment,
setCommentPositionState,
threads,
modeRef.current,
messages,
]);
return null;
};

1
app/src/services/factoryBuilder/collab/comments/getAllThreads.ts
View File

@@ -25,6 +25,7 @@ export const getAllThreads = async (projectId: string, versionId: string) => {
}
const result = await response.json();
console.log('result: ', result);
return result;
} catch {