From 91a2e71fff2bef993273b509dce5b7948d6d5c65 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 27 Feb 2024 15:52:07 +0800
Subject: [PATCH] feat: if comparasion

---
 .../nodes/_base/components/selector.tsx       |  2 +-
 .../if-else/components/condition-item.tsx     | 70 ++++++++++++++++++-
 .../workflow/nodes/if-else/node.tsx           | 11 +--
 .../workflow/nodes/if-else/utils.ts           | 10 +++
 4 files changed, 81 insertions(+), 12 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/selector.tsx b/web/app/components/workflow/nodes/_base/components/selector.tsx
index 799ca08a39..5580dd7b1a 100644
--- a/web/app/components/workflow/nodes/_base/components/selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/selector.tsx
@@ -37,7 +37,7 @@ const TypeSelector: FC<Props> = ({
     setHide()
   }, ref)
   return (
-    <div className='relative left-[-8px]' ref={ref}>
+    <div className={cn(!trigger && 'left-[-8px]', 'relative')} ref={ref}>
       {trigger
         ? (
           <div
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-item.tsx b/web/app/components/workflow/nodes/if-else/components/condition-item.tsx
index 78dc7ba6bd..3166bbc181 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-item.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-item.tsx
@@ -4,11 +4,13 @@ import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
 import VarReferencePicker from '../../_base/components/variable/var-reference-picker'
+import { isComparisonOperatorNeedTranslate } from '../utils'
 import type { Condition } from '@/app/components/workflow/nodes/if-else/types'
-import { LogicalOperator } from '@/app/components/workflow/nodes/if-else/types'
+import { ComparisonOperator, LogicalOperator } from '@/app/components/workflow/nodes/if-else/types'
 import type { ValueSelector } from '@/app/components/workflow/types'
 import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
 import { RefreshCw05 } from '@/app/components/base/icons/src/vender/line/arrows'
+import Selector from '@/app/components/workflow/nodes/_base/components/selector'
 const i18nPrefix = 'workflow.nodes.ifElse'
 
 const Line = (
@@ -23,6 +25,44 @@ const Line = (
   </svg>
 )
 
+const getOperators = (type: string) => {
+  switch (type) {
+    case 'string':
+      return [
+        ComparisonOperator.contains,
+        ComparisonOperator.notContains,
+        ComparisonOperator.startWith,
+        ComparisonOperator.endWith,
+        ComparisonOperator.is,
+        ComparisonOperator.isNot,
+        ComparisonOperator.empty,
+        ComparisonOperator.notEmpty,
+      ]
+    case 'number':
+      return [
+        ComparisonOperator.equal,
+        ComparisonOperator.notEqual,
+        ComparisonOperator.largerThan,
+        ComparisonOperator.lessThan,
+        ComparisonOperator.largerThanOrEqual,
+        ComparisonOperator.lessThanOrEqual,
+        ComparisonOperator.is,
+        ComparisonOperator.isNot,
+        ComparisonOperator.empty,
+        ComparisonOperator.notEmpty,
+      ]
+    case 'array':
+      return [
+        ComparisonOperator.is,
+        ComparisonOperator.isNot,
+        ComparisonOperator.empty,
+        ComparisonOperator.notEmpty,
+      ]
+    default:
+      return []
+  }
+}
+
 type ItemProps = {
   readonly: boolean
   payload: Condition
@@ -51,6 +91,7 @@ const Item: FC<ItemProps> = ({
       ...payload,
       variable_selector: value,
     })
+    // TODO: handle value type change will effect the comparisonOperators
   }, [onChange, payload])
 
   const handleValueChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
@@ -60,6 +101,13 @@ const Item: FC<ItemProps> = ({
     })
   }, [onChange, payload])
 
+  const handleComparisonOperatorChange = useCallback((v: ComparisonOperator) => {
+    onChange({
+      ...payload,
+      comparison_operator: v,
+    })
+  }, [onChange, payload])
+
   return (
     <div className='space-y-2'>
       {isShowLogicalOperator && (
@@ -90,12 +138,30 @@ const Item: FC<ItemProps> = ({
           onChange={handleVarReferenceChange}
         />
 
+        <Selector
+          popupClassName='top-[34px]'
+          trigger={
+            <div className='shrink-0 whitespace-nowrap flex items-center h-8 justify-between px-2.5 rounded-lg bg-gray-100 capitalize'>
+              <div className='text-[13px] font-normal text-gray-900'>{isComparisonOperatorNeedTranslate(payload.comparison_operator) ? t(`${i18nPrefix}.comparisonOperator.${payload.comparison_operator}`) : payload.comparison_operator}</div>
+            </div>
+          }
+          readonly={readonly}
+          value={payload.comparison_operator}
+          options={getOperators('string').map((o) => {
+            return {
+              label: isComparisonOperatorNeedTranslate(o) ? t(`${i18nPrefix}.comparisonOperator.${o}`) : o,
+              value: o,
+            }
+          })}
+          onChange={handleComparisonOperatorChange}
+        />
+
         <input
           readOnly={readonly}
           value={payload.value}
           onChange={handleValueChange}
           placeholder={t(`${i18nPrefix}.enterValue`)!}
-          className='w-[144px] h-8 leading-8 px-2.5  rounded-lg border-0 bg-gray-100  text-gray-900 text-[13px]  placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
+          className='max-w-[144px] h-8 leading-8 px-2.5  rounded-lg border-0 bg-gray-100  text-gray-900 text-[13px]  placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
           type='text'
         />
 
diff --git a/web/app/components/workflow/nodes/if-else/node.tsx b/web/app/components/workflow/nodes/if-else/node.tsx
index 3e4267819c..a1cca8cbde 100644
--- a/web/app/components/workflow/nodes/if-else/node.tsx
+++ b/web/app/components/workflow/nodes/if-else/node.tsx
@@ -3,17 +3,10 @@ import { useTranslation } from 'react-i18next'
 import type { NodeProps } from 'reactflow'
 import { NodeSourceHandle } from '../_base/components/node-handle'
 import { mockData } from './mock'
-import { ComparisonOperator } from './types'
-import { isEmptyRelatedOperator } from './utils'
+import { isComparisonOperatorNeedTranslate, isEmptyRelatedOperator } from './utils'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 const i18nPrefix = 'workflow.nodes.ifElse'
 
-const notTranslateKey = [
-  ComparisonOperator.equal, ComparisonOperator.notEqual,
-  ComparisonOperator.largerThan, ComparisonOperator.largerThanOrEqual,
-  ComparisonOperator.lessThan, ComparisonOperator.lessThanOrEqual,
-]
-
 const IfElseNode: FC<Pick<NodeProps, 'id' | 'data'>> = (props) => {
   const { t } = useTranslation()
   const { conditions, logical_operator } = mockData
@@ -35,7 +28,7 @@ const IfElseNode: FC<Pick<NodeProps, 'id' | 'data'>> = (props) => {
             <div className='flex items-center h-6 bg-gray-100 rounded-md  px-1 space-x-1 text-xs font-normal text-gray-700'>
               <Variable02 className='w-3.5 h-3.5 text-primary-500' />
               <span>{condition.variable_selector.slice(-1)[0]}</span>
-              <span className='text-gray-500'>{notTranslateKey.includes(condition.comparison_operator) ? condition.comparison_operator : t(`${i18nPrefix}.comparisonOperator.${condition.comparison_operator}`)}</span>
+              <span className='text-gray-500'>{isComparisonOperatorNeedTranslate(condition.comparison_operator) ? condition.comparison_operator : t(`${i18nPrefix}.comparisonOperator.${condition.comparison_operator}`)}</span>
               {!isEmptyRelatedOperator(condition.comparison_operator) && <span>{condition.value}</span>}
             </div>
             {i !== conditions.length - 1 && (
diff --git a/web/app/components/workflow/nodes/if-else/utils.ts b/web/app/components/workflow/nodes/if-else/utils.ts
index e6a3a0f5c0..55b1f656f6 100644
--- a/web/app/components/workflow/nodes/if-else/utils.ts
+++ b/web/app/components/workflow/nodes/if-else/utils.ts
@@ -8,3 +8,13 @@ export const isEmptyRelatedOperator = (operator: ComparisonOperator) => {
 export const checkNodeValid = (payload: IfElseNodeType) => {
   return true
 }
+
+const notTranslateKey = [
+  ComparisonOperator.equal, ComparisonOperator.notEqual,
+  ComparisonOperator.largerThan, ComparisonOperator.largerThanOrEqual,
+  ComparisonOperator.lessThan, ComparisonOperator.lessThanOrEqual,
+]
+
+export const isComparisonOperatorNeedTranslate = (operator: ComparisonOperator) => {
+  return !notTranslateKey.includes(operator)
+}