Merge remote-tracking branch 'origin/v2-ui' into v2

app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import {
+  useSelectedAsset,
   useSelectedEventData,
   useSelectedEventSphere,
   useSelectedProduct,
@@ -11,6 +12,7 @@ import RoboticArmMechanics from "./mechanics/roboticArmMechanics";
 import MachineMechanics from "./mechanics/machineMechanics";
 import StorageMechanics from "./mechanics/storageMechanics";
 import { AddIcon } from "../../../../icons/ExportCommonIcons";
+import { handleAddEventToProduct } from "../../../../../modules/simulation/events/points/functions/handleAddEventToProduct";
 
 const EventProperties: React.FC = () => {
   const { selectedEventData } = useSelectedEventData();
@@ -20,8 +22,10 @@ const EventProperties: React.FC = () => {
     null
   );
   const [assetType, setAssetType] = useState<string | null>(null);
-  const { products } = useProductStore();
+  const { products, addEvent } = useProductStore();
   const { selectedEventSphere } = useSelectedEventSphere();
+
+  const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
   useEffect(() => {
     const event = getCurrentEventData();
     setCurrentEventData(event);
@@ -91,7 +95,19 @@ const EventProperties: React.FC = () => {
             <ul>
               {products.map((product) => (
                 <li key={product.productId}>
-                  <button>
+                  <button
+                    onClick={() =>
+                      handleAddEventToProduct({
+                        selectedAsset,
+                        addEvent,
+                        selectedProduct: {
+                          productId: product.productId,
+                          productName: product.productName,
+                        },
+                        clearSelectedAsset,
+                      })
+                    }
+                  >
                     <AddIcon />
                     {product.productName}
                   </button>

app/src/components/layout/sidebarRight/simulation/Simulations.tsx

@@ -7,12 +7,16 @@ import {
 } from "../../../icons/ExportCommonIcons";
 import RenameInput from "../../../ui/inputs/RenameInput";
 import { handleResize } from "../../../../functions/handleResizePannel";
-import { useSelectedAsset, useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
+import {
+  useSelectedAsset,
+  useSelectedProduct,
+} from "../../../../store/simulation/useSimulationStore";
 import { useProductStore } from "../../../../store/simulation/useProductStore";
 import { generateUUID } from "three/src/math/MathUtils";
 import RenderOverlay from "../../../templates/Overlay";
 import EditWidgetOption from "../../../ui/menu/EditWidgetOption";
 import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi";
+import { handleAddEventToProduct } from "../../../../modules/simulation/events/points/functions/handleAddEventToProduct";
 
 interface Event {
   pathName: string;
@@ -25,16 +29,21 @@ interface ListProps {
 const List: React.FC<ListProps> = ({ val }) => {
   return (
     <div className="process-container">
-            <div className="value">
+      <div className="value">{val.pathName}</div>
-                {val.pathName}
-            </div>
     </div>
   );
 };
 
 const Simulations: React.FC = () => {
   const productsContainerRef = useRef<HTMLDivElement>(null);
-    const { products, addProduct, removeProduct, renameProduct, addEvent, removeEvent } = useProductStore();
+  const {
+    products,
+    addProduct,
+    removeProduct,
+    renameProduct,
+    addEvent,
+    removeEvent,
+  } = useProductStore();
   const { selectedProduct, setSelectedProduct } = useSelectedProduct();
   const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
 
@@ -43,10 +52,10 @@ const Simulations: React.FC = () => {
   };
 
   const handleRemoveProduct = (productId: string) => {
-        const currentIndex = products.findIndex(p => p.productId === productId);
+    const currentIndex = products.findIndex((p) => p.productId === productId);
     const isSelected = selectedProduct.productId === productId;
 
-        const updatedProducts = products.filter(p => p.productId !== productId);
+    const updatedProducts = products.filter((p) => p.productId !== productId);
 
     if (isSelected) {
       if (updatedProducts.length > 0) {
@@ -59,7 +68,7 @@ const Simulations: React.FC = () => {
           updatedProducts[newSelectedIndex].productName
         );
       } else {
-                setSelectedProduct('', '');
+        setSelectedProduct("", "");
       }
     }
 
@@ -73,18 +82,6 @@ const Simulations: React.FC = () => {
     }
   };
 
-    const handleAddEventToProduct = () => {
-        if (selectedAsset) {
-            addEvent(selectedProduct.productId, selectedAsset);
-            // upsertProductOrEventApi({
-            //     productName: selectedProduct.productName,
-            //     productId: selectedProduct.productId,
-            //     eventDatas: selectedAsset
-            // });
-            clearSelectedAsset();
-        }
-    };
-
   const handleRemoveEventFromProduct = () => {
     if (selectedAsset) {
       removeEvent(selectedProduct.productId, selectedAsset.modelUuid);
@@ -96,7 +93,8 @@ const Simulations: React.FC = () => {
     (product) => product.productId === selectedProduct.productId
   );
 
-    const events: Event[] = selectedProductData?.eventDatas.map((event) => ({
+  const events: Event[] =
+    selectedProductData?.eventDatas.map((event) => ({
       pathName: event.modelName,
     })) || [];
 
@@ -120,11 +118,17 @@ const Simulations: React.FC = () => {
               {products.map((product, index) => (
                 <div
                   key={product.productId}
-                                    className={`list-item ${selectedProduct.productId === product.productId ? "active" : ""}`}
+                  className={`list-item ${
+                    selectedProduct.productId === product.productId
+                      ? "active"
+                      : ""
+                  }`}
                 >
                   <div
                     className="value"
-                                        onClick={() => setSelectedProduct(product.productId, product.productName)}
+                    onClick={() =>
+                      setSelectedProduct(product.productId, product.productName)
+                    }
                   >
                     <input
                       type="radio"
@@ -134,7 +138,9 @@ const Simulations: React.FC = () => {
                     />
                     <RenameInput
                       value={product.productName}
-                                            onRename={(newName) => handleRenameProduct(product.productId, newName)}
+                      onRename={(newName) =>
+                        handleRenameProduct(product.productId, newName)
+                      }
                     />
                   </div>
                   {products.length > 1 && (
@@ -175,7 +181,8 @@ const Simulations: React.FC = () => {
             Need to Compare Layout?
           </div>
           <div className="content">
-                        Click <span>'Compare'</span> to review and analyze the layout differences between them.
+            Click <span>'Compare'</span> to review and analyze the layout
+            differences between them.
           </div>
           <div className="input">
             <input type="button" value={"Compare"} className="submit" />
@@ -183,20 +190,25 @@ const Simulations: React.FC = () => {
         </div>
       </div>
 
-            {selectedAsset &&
+      {selectedAsset && (
         <RenderOverlay>
           <EditWidgetOption
-                        options={['Add to Product', 'Remove from Product']}
+            options={["Add to Product", "Remove from Product"]}
             onClick={(option) => {
-                            if (option === 'Add to Product') {
+              if (option === "Add to Product") {
-                                handleAddEventToProduct();
+                handleAddEventToProduct({
+                  selectedAsset,
+                  addEvent,
+                  selectedProduct,
+                  clearSelectedAsset,
+                });
               } else {
                 handleRemoveEventFromProduct();
               }
             }}
           />
         </RenderOverlay>
-            }
+      )}
     </div>
   );
 };

app/src/modules/simulation/events/points/functions/handleAddEventToProduct.ts

@@ -0,0 +1,28 @@
+interface HandleAddEventToProductParams {
+    selectedAsset: any; // Replace `any` with specific type if you have it
+    addEvent: (productId: string, asset: any) => void;
+    selectedProduct: {
+        productId: string;
+        productName: string;
+        // Add other fields if needed
+    };
+    clearSelectedAsset: () => void;
+}
+
+export const handleAddEventToProduct = ({
+    selectedAsset,
+    addEvent,
+    selectedProduct,
+    clearSelectedAsset,
+}: HandleAddEventToProductParams) => {
+    console.log('selectedProduct: ', selectedProduct);
+    if (selectedAsset) {
+        addEvent(selectedProduct.productId, selectedAsset);
+        // upsertProductOrEventApi({
+        //     productName: selectedProduct.productName,
+        //     productId: selectedProduct.productId,
+        //     eventDatas: selectedAsset
+        // });
+        clearSelectedAsset();
+    }
+};