From e43bfb6e982fc31d3c8c0465b490e7dfa45cfcd8 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Wed, 23 Apr 2025 18:25:55 +0530
Subject: [PATCH] feat: Add Trigger component and integrate it into
EventProperties; refactor PickAndPlaceAction for improved structure
---
.../eventProperties/EventProperties.tsx | 6 +-
.../actions/PickAndPlaceAction.tsx | 16 ++-
.../eventProperties/trigger/Trigger.tsx | 110 +++++++++++++++++-
3 files changed, 119 insertions(+), 13 deletions(-)
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
index e7444a0..c3ec6e7 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
@@ -18,6 +18,7 @@ import TravelAction from "./actions/TravelAction";
import PickAndPlaceAction from "./actions/PickAndPlaceAction";
import ProcessAction from "./actions/ProcessAction";
import StorageAction from "./actions/StorageAction";
+import Trigger from "./trigger/Trigger";
interface EventPropertiesProps {
assetType: string;
@@ -194,11 +195,14 @@ const EventProperties: React.FC<EventPropertiesProps> = ({
{activeOption === "swap" && <SwapAction />} {/* done */}
{activeOption === "despawn" && <DespawnAction />} {/* done */}
{activeOption === "travel" && <TravelAction />} {/* done */}
- {activeOption === "pickAndPlace" && <PickAndPlaceAction />}
+ {activeOption === "pickAndPlace" && <PickAndPlaceAction />} {/* done */}
{activeOption === "process" && <ProcessAction />} {/* done */}
{activeOption === "store" && <StorageAction />} {/* done */}
</div>
</div>
+ <div className="tirgger">
+ <Trigger />
+ </div>
</div>
);
};
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/PickAndPlaceAction.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/PickAndPlaceAction.tsx
index 0c3228f..9574669 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/PickAndPlaceAction.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/PickAndPlaceAction.tsx
@@ -1,9 +1,13 @@
-import React from 'react'
+import React from "react";
+import EyeDropInput from "../../../../../ui/inputs/EyeDropInput";
-const PickAndPlaceAction:React.FC = () => {
+const PickAndPlaceAction: React.FC = () => {
return (
- <div>PickAndPlaceAction</div>
- )
-}
+ <>
+ <EyeDropInput label="Pick Point" value="na" onChange={() => {}} />
+ <EyeDropInput label="Unload Point" value="na" onChange={() => {}} />
+ </>
+ );
+};
-export default PickAndPlaceAction
\ No newline at end of file
+export default PickAndPlaceAction;
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
index 6812257..f287b63 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
@@ -1,9 +1,107 @@
-import React from 'react'
+import React, { useState } from "react";
+import { AddIcon, RemoveIcon } from "../../../../../icons/ExportCommonIcons";
+import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
+
+const Trigger: React.FC = () => {
+ // State to hold the list of triggers
+ const [triggers, setTriggers] = useState<string[]>([]);
+ const [activeOption, setActiveOption] = useState("onComplete");
+
+ // States for dropdowns
+ const [triggeredModel, setTriggeredModel] = useState<string[]>([]);
+ const [triggeredPoint, setTriggeredPoint] = useState<string[]>([]);
+ const [triggeredAction, setTriggeredAction] = useState<string[]>([]);
+
+ // Function to handle adding a new trigger
+ const addTrigger = (): void => {
+ const newTrigger = `Trigger ${triggers.length + 1}`;
+ setTriggers([...triggers, newTrigger]); // Add new trigger to the state
+
+ // Initialize the states for the new trigger
+ setTriggeredModel([...triggeredModel, ""]);
+ setTriggeredPoint([...triggeredPoint, ""]);
+ setTriggeredAction([...triggeredAction, ""]);
+ };
+
+ // Function to handle removing a trigger
+ const removeTrigger = (index: number): void => {
+ setTriggers(triggers.filter((_, i) => i !== index)); // Remove trigger by index
+ setTriggeredModel(triggeredModel.filter((_, i) => i !== index));
+ setTriggeredPoint(triggeredPoint.filter((_, i) => i !== index));
+ setTriggeredAction(triggeredAction.filter((_, i) => i !== index));
+ };
-const Trigger = () => {
return (
- <div>Trigger</div>
- )
-}
+ <div className="trigger-wrapper">
+ <div className="header">
+ <div className="title">Trigger</div>
+ <div
+ className="add-button"
+ onClick={addTrigger}
+ style={{ cursor: "pointer" }}
+ >
+ <AddIcon /> Add
+ </div>
+ </div>
+ <div className="trigger-list">
+ {/* Map over triggers and render them */}
+ {triggers.map((trigger, index) => (
+ <div key={index} className="trigger-item">
+ <div className="trigger-name">
+ {trigger}
+ <div
+ className="remove-button"
+ onClick={() => removeTrigger(index)}
+ style={{ cursor: "pointer" }}
+ >
+ <RemoveIcon />
+ </div>
+ </div>
+ <LabledDropdown
+ defaultOption={activeOption}
+ options={["onComplete", "onStart", "onStop", "delay"]}
+ onSelect={(option) => setActiveOption(option)}
+ />
+ <div className="trigger-options">
+ <div>
+ <LabledDropdown
+ defaultOption={triggeredModel[index] || "Select Model"}
+ options={["Model 1", "Model 2", "Model 3"]}
+ onSelect={(option) => {
+ const newModel = [...triggeredModel];
+ newModel[index] = option;
+ setTriggeredModel(newModel);
+ }}
+ />
+ </div>
+ <div>
+ <LabledDropdown
+ defaultOption={triggeredPoint[index] || "Select Point"}
+ options={["Point 1", "Point 2", "Point 3"]}
+ onSelect={(option) => {
+ const newPoint = [...triggeredPoint];
+ newPoint[index] = option;
+ setTriggeredPoint(newPoint);
+ }}
+ />
+ </div>
+ <div>
+ <LabledDropdown
+ defaultOption={triggeredAction[index] || "Select Action"}
+ options={["Action 1", "Action 2", "Action 3"]}
+ onSelect={(option) => {
+ const newAction = [...triggeredAction];
+ newAction[index] = option;
+ setTriggeredAction(newAction);
+ }}
+ />
+ </div>
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ );
+};
-export default Trigger
\ No newline at end of file
+export default Trigger;