From 876ea90fe9bc841fcf50ee8232929e535a4bf0f5 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 19 Aug 2024 11:43:52 +0800
Subject: [PATCH] feat: support update sub variable value

---
 .../condition-list/condition-item.tsx         | 19 +++++++++++++------
 .../components/condition-list/index.tsx       | 11 ++++++++++-
 .../if-else/components/condition-wrap.tsx     | 11 ++++++++---
 .../workflow/nodes/if-else/panel.tsx          |  2 ++
 .../workflow/nodes/if-else/types.ts           |  1 +
 .../workflow/nodes/if-else/use-config.ts      | 18 ++++++++++++++++++
 6 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
index 13f3f4bea2..ce642e44c8 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
@@ -12,6 +12,7 @@ import type {
   HandleAddSubVariableCondition,
   HandleRemoveCondition,
   HandleUpdateCondition,
+  HandleUpdateSubVariableCondition,
 } from '../../types'
 import {
   ComparisonOperator,
@@ -35,11 +36,14 @@ const optionNameI18NPrefix = 'workflow.nodes.ifElse.optionName'
 type ConditionItemProps = {
   disabled?: boolean
   caseId: string
-  condition: Condition
+  conditionId: string // in isSubVariableKey it's the value of the parent condition's id
+  condition: Condition // condition may the condition of case or condition of sub variable
   file?: { key: string }
   isSubVariableKey?: boolean
+  subVariableKeyCaseId?: string
   onRemoveCondition: HandleRemoveCondition
   onUpdateCondition: HandleUpdateCondition
+  onUpdateSubVariableCondition?: HandleUpdateSubVariableCondition
   nodesOutputVars: NodeOutPutVar[]
   availableNodes: Node[]
   numberVariables: NodeOutPutVar[]
@@ -48,11 +52,13 @@ type ConditionItemProps = {
 const ConditionItem = ({
   disabled,
   caseId,
+  conditionId,
   condition,
   file,
   isSubVariableKey,
   onRemoveCondition,
   onUpdateCondition,
+  onUpdateSubVariableCondition,
   nodesOutputVars,
   availableNodes,
   numberVariables,
@@ -120,8 +126,8 @@ const ConditionItem = ({
     const newCondition = produce(condition, (draft) => {
       draft.key = key
     })
-    onUpdateCondition(caseId, condition.id, newCondition)
-  }, [caseId, condition, onUpdateCondition])
+    onUpdateSubVariableCondition?.(caseId, conditionId, condition.id, newCondition)
+  }, [caseId, condition, conditionId, onUpdateSubVariableCondition])
 
   return (
     <div className='flex mb-1 last-of-type:mb-0'>
@@ -136,7 +142,7 @@ const ConditionItem = ({
                 <Select
                   wrapperClassName='h-6'
                   className='pl-0 text-xs'
-                  defaultValue={condition.value}
+                  defaultValue={condition.key}
                   items={subVarOptions}
                   onSelect={item => handleSubVarKeyChange(item.value as string)}
                 />
@@ -202,15 +208,16 @@ const ConditionItem = ({
             <div className='p-1'>
               <ConditionWrap
                 isSubVariable
-                conditionId={condition.id}
                 caseId={caseId}
+                conditionId={conditionId}
                 readOnly={!!disabled}
                 nodeId=''
                 cases={condition.sub_variable_condition ? [condition.sub_variable_condition] : []}
                 handleAddSubVariableCondition={onAddSubVariableCondition}
                 handleRemoveCase={() => { }}
                 handleAddCondition={() => { }}
-                handleUpdateCondition={() => { }}
+                handleUpdateCondition={onUpdateCondition}
+                handleUpdateSubVariableCondition={onUpdateSubVariableCondition}
                 handleRemoveCondition={() => { }}
                 handleUpdateConditionLogicalOperator={() => { }}
                 nodesOutputVars={[]}
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
index 5bc0d53e60..2eb27883ed 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
@@ -6,6 +6,7 @@ import type {
   HandleRemoveCondition,
   HandleUpdateCondition,
   HandleUpdateConditionLogicalOperator,
+  HandleUpdateSubVariableCondition,
 } from '../../types'
 import ConditionItem from './condition-item'
 import type {
@@ -16,6 +17,8 @@ import type {
 type ConditionListProps = {
   isSubVariable?: boolean
   disabled?: boolean
+  caseId: string
+  conditionId?: string
   caseItem: CaseItem
   onUpdateCondition: HandleUpdateCondition
   onUpdateConditionLogicalOperator: HandleUpdateConditionLogicalOperator
@@ -25,10 +28,13 @@ type ConditionListProps = {
   numberVariables: NodeOutPutVar[]
   varsIsVarFileAttribute: Record<string, boolean>
   onAddSubVariableCondition?: HandleAddSubVariableCondition
+  onUpdateSubVariableCondition?: HandleUpdateSubVariableCondition
 }
 const ConditionList = ({
   isSubVariable,
   disabled,
+  caseId,
+  conditionId,
   caseItem,
   onUpdateCondition,
   onUpdateConditionLogicalOperator,
@@ -38,6 +44,7 @@ const ConditionList = ({
   numberVariables,
   varsIsVarFileAttribute,
   onAddSubVariableCondition,
+  onUpdateSubVariableCondition,
 }: ConditionListProps) => {
   const { conditions, logical_operator } = caseItem
 
@@ -65,7 +72,8 @@ const ConditionList = ({
           <ConditionItem
             key={condition.id}
             disabled={disabled}
-            caseId={caseItem.case_id}
+            caseId={caseId}
+            conditionId={isSubVariable ? conditionId! : condition.id}
             condition={condition}
             onUpdateCondition={onUpdateCondition}
             onRemoveCondition={onRemoveCondition}
@@ -75,6 +83,7 @@ const ConditionList = ({
             file={varsIsVarFileAttribute[condition.id] ? { key: (condition.variable_selector || []).slice(-1)[0] } : undefined}
             isSubVariableKey={isSubVariable}
             onAddSubVariableCondition={onAddSubVariableCondition}
+            onUpdateSubVariableCondition={onUpdateSubVariableCondition}
           />
         ))
       }
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
index 758f1f1b5d..2c1604dc2b 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
@@ -8,7 +8,7 @@ import {
   RiDeleteBinLine,
   RiDraggable,
 } from '@remixicon/react'
-import type { CaseItem, HandleAddCondition, HandleAddSubVariableCondition, HandleRemoveCondition, HandleUpdateCondition, HandleUpdateConditionLogicalOperator } from '../types'
+import type { CaseItem, HandleAddCondition, HandleAddSubVariableCondition, HandleRemoveCondition, HandleUpdateCondition, HandleUpdateConditionLogicalOperator, HandleUpdateSubVariableCondition } from '../types'
 import type { Node, NodeOutPutVar, Var } from '../../../types'
 import { VarType } from '../../../types'
 import { useGetAvailableVars } from '../../variable-assigner/hooks'
@@ -19,8 +19,8 @@ import Button from '@/app/components/base/button'
 
 type Props = {
   isSubVariable?: boolean
-  conditionId?: string
   caseId?: string
+  conditionId?: string
   nodeId: string
   cases: CaseItem[]
   readOnly: boolean
@@ -28,6 +28,7 @@ type Props = {
   handleRemoveCase: (caseId: string) => void
   handleAddCondition?: HandleAddCondition
   handleAddSubVariableCondition?: HandleAddSubVariableCondition
+  handleUpdateSubVariableCondition?: HandleUpdateSubVariableCondition
   handleUpdateCondition: HandleUpdateCondition
   handleRemoveCondition: HandleRemoveCondition
   handleUpdateConditionLogicalOperator: HandleUpdateConditionLogicalOperator
@@ -39,8 +40,8 @@ type Props = {
 
 const ConditionWrap: FC<Props> = ({
   isSubVariable,
-  conditionId: parentConditionId,
   caseId: conditionParentCaseId,
+  conditionId: parentConditionId,
   nodeId: id,
   cases = [],
   readOnly,
@@ -50,6 +51,7 @@ const ConditionWrap: FC<Props> = ({
   handleAddCondition,
   handleRemoveCondition,
   handleAddSubVariableCondition,
+  handleUpdateSubVariableCondition,
   handleUpdateConditionLogicalOperator,
   nodesOutputVars,
   availableNodes,
@@ -116,6 +118,8 @@ const ConditionWrap: FC<Props> = ({
                       <ConditionList
                         disabled={readOnly}
                         caseItem={item}
+                        caseId={isSubVariable ? conditionParentCaseId! : item.case_id}
+                        conditionId={parentConditionId}
                         onUpdateCondition={handleUpdateCondition}
                         onRemoveCondition={handleRemoveCondition}
                         onUpdateConditionLogicalOperator={handleUpdateConditionLogicalOperator}
@@ -124,6 +128,7 @@ const ConditionWrap: FC<Props> = ({
                         numberVariables={getAvailableVars(id, '', filterNumberVar)}
                         varsIsVarFileAttribute={varsIsVarFileAttribute}
                         onAddSubVariableCondition={handleAddSubVariableCondition}
+                        onUpdateSubVariableCondition={handleUpdateSubVariableCondition}
                         isSubVariable={isSubVariable}
                       />
                     </div>
diff --git a/web/app/components/workflow/nodes/if-else/panel.tsx b/web/app/components/workflow/nodes/if-else/panel.tsx
index 77a1772761..c83e66954d 100644
--- a/web/app/components/workflow/nodes/if-else/panel.tsx
+++ b/web/app/components/workflow/nodes/if-else/panel.tsx
@@ -31,6 +31,7 @@ const Panel: FC<NodePanelProps<IfElseNodeType>> = ({
     handleUpdateCondition,
     handleRemoveCondition,
     handleAddSubVariableCondition,
+    handleUpdateSubVariableCondition,
     handleUpdateConditionLogicalOperator,
     nodesOutputVars,
     availableNodes,
@@ -51,6 +52,7 @@ const Panel: FC<NodePanelProps<IfElseNodeType>> = ({
         handleRemoveCondition={handleRemoveCondition}
         handleUpdateConditionLogicalOperator={handleUpdateConditionLogicalOperator}
         handleAddSubVariableCondition={handleAddSubVariableCondition}
+        handleUpdateSubVariableCondition={handleUpdateSubVariableCondition}
         nodesOutputVars={nodesOutputVars}
         availableNodes={availableNodes}
         varsIsVarFileAttribute={varsIsVarFileAttribute}
diff --git a/web/app/components/workflow/nodes/if-else/types.ts b/web/app/components/workflow/nodes/if-else/types.ts
index d0b1aca4a0..0530c32ed9 100644
--- a/web/app/components/workflow/nodes/if-else/types.ts
+++ b/web/app/components/workflow/nodes/if-else/types.ts
@@ -61,4 +61,5 @@ export type HandleAddCondition = (caseId: string, valueSelector: ValueSelector,
 export type HandleAddSubVariableCondition = (caseId: string, conditionId: string) => void
 export type HandleRemoveCondition = (caseId: string, conditionId: string) => void
 export type HandleUpdateCondition = (caseId: string, conditionId: string, newCondition: Condition) => void
+export type HandleUpdateSubVariableCondition = (caseId: string, conditionId: string, subConditionId: string, newSubCondition: Condition) => void
 export type HandleUpdateConditionLogicalOperator = (caseId: string, value: LogicalOperator) => void
diff --git a/web/app/components/workflow/nodes/if-else/use-config.ts b/web/app/components/workflow/nodes/if-else/use-config.ts
index 16911ca89b..b01295bbf2 100644
--- a/web/app/components/workflow/nodes/if-else/use-config.ts
+++ b/web/app/components/workflow/nodes/if-else/use-config.ts
@@ -13,6 +13,7 @@ import type {
   HandleRemoveCondition,
   HandleUpdateCondition,
   HandleUpdateConditionLogicalOperator,
+  HandleUpdateSubVariableCondition,
   IfElseNodeType,
 } from './types'
 import {
@@ -165,6 +166,22 @@ const useConfig = (id: string, payload: IfElseNodeType) => {
     })
     setInputs(newInputs)
   }, [inputs, setInputs])
+  // console.log(inputs.cases)
+
+  const handleUpdateSubVariableCondition = useCallback<HandleUpdateSubVariableCondition>((caseId, conditionId, subConditionId, newSubCondition) => {
+    const newInputs = produce(inputs, (draft) => {
+      const targetCase = draft.cases?.find(item => item.case_id === caseId)
+      if (targetCase) {
+        const targetCondition = targetCase.conditions.find(item => item.id === conditionId)
+        if (targetCondition && targetCondition.sub_variable_condition) {
+          const targetSubCondition = targetCondition.sub_variable_condition.conditions.find(item => item.id === subConditionId)
+          if (targetSubCondition)
+            Object.assign(targetSubCondition, newSubCondition)
+        }
+      }
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
 
   const handleAddSubVariableCondition = useCallback<HandleAddSubVariableCondition>((caseId: string, conditionId: string) => {
     const newInputs = produce(inputs, (draft) => {
@@ -217,6 +234,7 @@ const useConfig = (id: string, payload: IfElseNodeType) => {
     handleRemoveCondition,
     handleUpdateCondition,
     handleAddSubVariableCondition,
+    handleUpdateSubVariableCondition,
     handleUpdateConditionLogicalOperator,
     nodesOutputVars: availableVars,
     availableNodes: availableNodesWithParent,