From e7a6a0ab01c69ca8a6d2de6924b99f482604208f Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 30 Aug 2024 14:44:16 +0800
Subject: [PATCH] chore: list filter operate ui

---
 .../components/condition-list/condition-operator.tsx        | 4 +++-
 .../nodes/list-filter/components/filter-condition.tsx       | 6 +++++-
 web/app/components/workflow/nodes/list-filter/panel.tsx     | 1 +
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
index 93a4c3cc08..97835e2666 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
@@ -17,6 +17,7 @@ import cn from '@/utils/classnames'
 const i18nPrefix = 'workflow.nodes.ifElse'
 
 type ConditionOperatorProps = {
+  className?: string
   disabled?: boolean
   varType: VarType
   file?: { key: string }
@@ -24,6 +25,7 @@ type ConditionOperatorProps = {
   onSelect: (value: ComparisonOperator) => void
 }
 const ConditionOperator = ({
+  className,
   disabled,
   varType,
   file,
@@ -55,7 +57,7 @@ const ConditionOperator = ({
     >
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
         <Button
-          className={cn('shrink-0', !selectedOption && 'opacity-50')}
+          className={cn('shrink-0', !selectedOption && 'opacity-50', className)}
           size='small'
           variant='ghost'
           disabled={disabled}
diff --git a/web/app/components/workflow/nodes/list-filter/components/filter-condition.tsx b/web/app/components/workflow/nodes/list-filter/components/filter-condition.tsx
index 10cbb26010..27faf71843 100644
--- a/web/app/components/workflow/nodes/list-filter/components/filter-condition.tsx
+++ b/web/app/components/workflow/nodes/list-filter/components/filter-condition.tsx
@@ -18,6 +18,7 @@ type Props = {
   onChange: (condition: Condition) => void
   varType: VarType
   hasSubVariable: boolean
+  readOnly: boolean
 }
 
 const FilterCondition: FC<Props> = ({
@@ -25,6 +26,7 @@ const FilterCondition: FC<Props> = ({
   varType,
   onChange,
   hasSubVariable,
+  readOnly,
 }) => {
   const { t } = useTranslation()
   const isSelect = [ComparisonOperator.in, ComparisonOperator.notIn, ComparisonOperator.allOf].includes(condition.comparison_operator)
@@ -74,10 +76,12 @@ const FilterCondition: FC<Props> = ({
       )}
       <div className='flex space-x-1'>
         <ConditionOperator
+          className='h-8 bg-components-input-bg-normal'
           varType={varType}
           value={condition.comparison_operator}
           onSelect={handleChange('comparison_operator')}
           file={hasSubVariable ? { key: condition.key } : undefined}
+          disabled={readOnly}
         />
         {!comparisonOperatorNotRequireValue(condition.comparison_operator) && (
           <>
@@ -87,7 +91,7 @@ const FilterCondition: FC<Props> = ({
                 defaultValue={condition.value}
                 onSelect={item => handleChange('value')(item.value)}
                 className='!text-[13px]'
-                wrapperClassName='grow'
+                wrapperClassName='grow h-8'
                 placeholder='Select value'
               />
             )}
diff --git a/web/app/components/workflow/nodes/list-filter/panel.tsx b/web/app/components/workflow/nodes/list-filter/panel.tsx
index cca58dc0af..9d25ec5bb7 100644
--- a/web/app/components/workflow/nodes/list-filter/panel.tsx
+++ b/web/app/components/workflow/nodes/list-filter/panel.tsx
@@ -61,6 +61,7 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
             onChange={handleFilterChange}
             varType={itemVarType}
             hasSubVariable={hasSubVariable}
+            readOnly={readOnly}
           />
         </Field>
         <Split />