From 5628b293f8de9bf1f6befdddeae792230f96830c Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 21 Aug 2024 14:54:06 +0800
Subject: [PATCH] feat: sub var if condindion postion

---
 .../condition-list/condition-item.tsx         | 10 +++--
 .../components/condition-list/index.tsx       | 37 +++++++++++++------
 .../if-else/components/condition-wrap.tsx     |  2 +-
 3 files changed, 32 insertions(+), 17 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 6f06619c98..02b4f36f85 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
@@ -37,6 +37,7 @@ import { Variable02 } from '@/app/components/base/icons/src/vender/solid/develop
 const optionNameI18NPrefix = 'workflow.nodes.ifElse.optionName'
 
 type ConditionItemProps = {
+  className?: string
   disabled?: boolean
   caseId: string
   conditionId: string // in isSubVariableKey it's the value of the parent condition's id
@@ -55,6 +56,7 @@ type ConditionItemProps = {
   numberVariables: NodeOutPutVar[]
 }
 const ConditionItem = ({
+  className,
   disabled,
   caseId,
   conditionId,
@@ -151,7 +153,7 @@ const ConditionItem = ({
   }, [caseId, condition, conditionId, isSubVariableKey, onRemoveCondition, onRemoveSubVariableCondition])
 
   return (
-    <div className='flex mb-1 last-of-type:mb-0'>
+    <div className={cn('flex mb-1 last-of-type:mb-0', className)}>
       <div className={cn(
         'grow bg-components-input-bg-normal rounded-lg',
         isHovered && 'bg-state-destructive-hover',
@@ -170,9 +172,9 @@ const ConditionItem = ({
                   renderTrigger={item => (
                     item
                       ? <div className='flex justify-start cursor-pointer'>
-                        <div className='inline-flex px-1.5 items-center h-6 rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark shadow-xs text-text-accent'>
-                          <Variable02 className='w-3.5 h-3.5 text-text-accent' />
-                          <div className='ml-0.5 system-xs-medium'>{item?.name}</div>
+                        <div className='inline-flex max-w-full px-1.5 items-center h-6 rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark shadow-xs text-text-accent'>
+                          <Variable02 className='shrink-0 w-3.5 h-3.5 text-text-accent' />
+                          <div className='ml-0.5 truncate system-xs-medium'>{item?.name}</div>
                         </div>
                       </div>
                       : <div className='text-gray-300 system-xs-medium'>{t('common.placeholder.select')}</div>
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 4eb95e8749..bc67f807c3 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
@@ -1,14 +1,15 @@
 import { RiLoopLeftLine } from '@remixicon/react'
-import { useCallback } from 'react'
-import type {
-  CaseItem,
-  HandleAddSubVariableCondition,
-  HandleRemoveCondition,
-  HandleToggleConditionLogicalOperator,
-  HandleToggleSubVariableConditionLogicalOperator,
-  HandleUpdateCondition,
-  HandleUpdateSubVariableCondition,
-  handleRemoveSubVariableCondition,
+import { useCallback, useMemo } from 'react'
+import {
+  type CaseItem,
+  type HandleAddSubVariableCondition,
+  type HandleRemoveCondition,
+  type HandleToggleConditionLogicalOperator,
+  type HandleToggleSubVariableConditionLogicalOperator,
+  type HandleUpdateCondition,
+  type HandleUpdateSubVariableCondition,
+  LogicalOperator,
+  type handleRemoveSubVariableCondition,
 } from '../../types'
 import ConditionItem from './condition-item'
 import type {
@@ -62,15 +63,26 @@ const ConditionList = ({
       onToggleConditionLogicalOperator?.(caseId)
   }, [caseId, conditionId, isSubVariable, onToggleConditionLogicalOperator, onToggleSubVariableConditionLogicalOperator])
 
+  const conditionItemClassName = useMemo(() => {
+    if (!isSubVariable)
+      return ''
+    if (conditions.length < 2)
+      return ''
+    return logical_operator === LogicalOperator.and ? 'pl-[51px]' : 'pl-[42px]'
+  }, [conditions.length, isSubVariable, logical_operator])
   return (
     <div className={cn('relative', !isSubVariable && 'pl-[60px]')}>
       {
         conditions.length > 1 && (
-          <div className='absolute top-0 bottom-0 left-0 w-[60px]'>
+          <div className={cn(
+            'absolute top-0 bottom-0 left-0 w-[60px]',
+            isSubVariable && logical_operator === LogicalOperator.and && 'left-[-10px]',
+            isSubVariable && logical_operator === LogicalOperator.or && 'left-[-18px]',
+          )}>
             <div className='absolute top-4 bottom-4 left-[46px] w-2.5 border border-divider-deep rounded-l-[8px] border-r-0'></div>
             <div className='absolute top-1/2 -translate-y-1/2 right-0 w-4 h-[29px] bg-components-panel-bg'></div>
             <div
-              className='absolute top-1/2 right-1 -translate-y-1/2 flex items-center px-1 h-[21px] rounded-md border-[0.5px] border-components-button-secondary-border shadow-xs bg-components-button-secondary-bg text-text-accent-secondary text-[10px] font-semibold cursor-pointer'
+              className='absolute top-1/2 right-1 -translate-y-1/2 flex items-center px-1 h-[21px] rounded-md border-[0.5px] border-components-button-secondary-border shadow-xs bg-components-button-secondary-bg text-text-accent-secondary text-[10px] font-semibold cursor-pointer select-none'
               onClick={doToggleConditionLogicalOperator}
             >
               {logical_operator.toUpperCase()}
@@ -83,6 +95,7 @@ const ConditionList = ({
         caseItem.conditions.map(condition => (
           <ConditionItem
             key={condition.id}
+            className={conditionItemClassName}
             disabled={disabled}
             caseId={caseId}
             conditionId={isSubVariable ? conditionId! : condition.id}
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 67a4f728d1..e797b6a69b 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
@@ -91,7 +91,7 @@ const ConditionWrap: FC<Props> = ({
                   'group relative rounded-[10px] bg-components-panel-bg',
                   willDeleteCaseId === item.case_id && 'bg-state-destructive-hover',
                   !isSubVariable && 'py-1 px-3 min-h-[40px] ',
-                  isSubVariable && 'p-2 pr-1',
+                  isSubVariable && 'px-1 py-2',
                 )}
               >
                 {!isSubVariable && (