From f554086785811e8646882a5b0da00efa83c843a3 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Thu, 10 Oct 2024 07:07:29 +0530
Subject: [PATCH] feat(wip): del pair

---
 src/components/organisms/RightSidePanel.tsx | 30 +++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx
index b938dbb8..21f5308b 100644
--- a/src/components/organisms/RightSidePanel.tsx
+++ b/src/components/organisms/RightSidePanel.tsx
@@ -20,6 +20,7 @@ import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
 import { emptyWorkflow } from "../../shared/constants";
 import { getActiveWorkflow } from "../../api/workflow";
+import DeleteIcon from '@mui/icons-material/Delete';
 
 const fetchWorkflow = (id: string, callback: (response: WorkflowFile) => void) => {
   getActiveWorkflow(id).then(
@@ -52,6 +53,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
   const [showCaptureScreenshot, setShowCaptureScreenshot] = useState(true);
   const [showCaptureText, setShowCaptureText] = useState(true);
   const [captureStage, setCaptureStage] = useState<'initial' | 'pagination' | 'limit' | 'complete'>('initial');
+  const [hoverStates, setHoverStates] = useState<{ [id: string]: boolean }>({});
 
   const { lastAction, notify } = useGlobalInfoStore();
   const { getText, startGetText, stopGetText, getScreenshot, startGetScreenshot, stopGetScreenshot, getList, startGetList, stopGetList, startPaginationMode, stopPaginationMode, paginationType, updatePaginationType, limitType, customLimit, updateLimitType, updateCustomLimit, stopLimitMode, startLimitMode } = useActionContext();
@@ -110,6 +112,24 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
     setShowCaptureText(!(hasScrapeListAction || hasScreenshotAction));
   }, [workflow]);
 
+  const handleMouseEnter = (id: number) => {
+    setHoverStates(prev => ({ ...prev, [id]: true }));
+  };
+
+  const handleMouseLeave = (id: number) => {
+    setHoverStates(prev => ({ ...prev, [id]: false }));
+  };
+
+  const handlePairDelete = () => {
+  //   deletePair(index - 1).then((updatedWorkflow) => {
+  //     updateWorkflow(updatedWorkflow);
+  //   }).catch((error) => {
+  //     console.error(error);
+  //   });
+  // };
+  console.log("handlePairDelete")	
+  }	
+
   const handleTextLabelChange = (id: number, label: string, listId?: number, fieldKey?: string) => {
     if (listId !== undefined && fieldKey !== undefined) {
       // Prevent editing if the field is confirmed
@@ -453,12 +473,22 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
                     margin="normal"
                     error={!!errors[step.id]}
                     helperText={errors[step.id]}
+                    onMouseEnter={() => handleMouseEnter(step.id)}
+                    onMouseLeave={() => handleMouseLeave(step.id)}
                     InputProps={{
                       readOnly: confirmedTextSteps[step.id],
                       startAdornment: (
                         <InputAdornment position="start">
                           <EditIcon />
                         </InputAdornment>
+                      ),
+                      endAdornment: confirmedTextSteps[step.id] && hoverStates[step.id] && (
+                        <InputAdornment position="end">
+                          <DeleteIcon 
+                            onClick={() => handlePairDelete()}
+                            sx={{ cursor: 'pointer', color: 'red' }}
+                          />
+                        </InputAdornment>
                       )
                     }}
                   />