From dc919c2a6cd045cb345db87aa6a55ac15695887f Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 30 Aug 2024 15:06:57 +0800
Subject: [PATCH] feat: output item var type and filter condition triger

---
 .../components/sub-variable-picker.tsx            | 15 +++++++++++++++
 .../workflow/nodes/list-filter/panel.tsx          | 10 ++++++----
 .../workflow/nodes/list-filter/use-config.ts      |  7 +++++++
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/web/app/components/workflow/nodes/list-filter/components/sub-variable-picker.tsx b/web/app/components/workflow/nodes/list-filter/components/sub-variable-picker.tsx
index d9065c4928..ec67c8d288 100644
--- a/web/app/components/workflow/nodes/list-filter/components/sub-variable-picker.tsx
+++ b/web/app/components/workflow/nodes/list-filter/components/sub-variable-picker.tsx
@@ -51,6 +51,21 @@ const SubVariablePicker: FC<Props> = ({
         placeholder={t('workflow.nodes.listFilter.selectVariableKeyPlaceholder')!}
         optionClassName='pl-4 pr-5 py-0'
         renderOption={renderOption}
+        renderTrigger={item => (
+          <div className='group/sub-variable-picker flex items-center h-8 pl-1 rounded-lg bg-components-input-bg-normal hover:bg-state-base-hover-alt'>
+            {item
+              ? <div className='flex justify-start cursor-pointer'>
+                <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='pl-1 flex text-components-input-text-placeholder system-sm-regular  group-hover/sub-variable-picker:text-text-tertiary'>
+                <Variable02 className='mr-1 shrink-0 w-4 h-4' />
+                <span>{t('common.placeholder.select')}</span>
+              </div>}
+          </div>
+        )}
       />
     </div>
   )
diff --git a/web/app/components/workflow/nodes/list-filter/panel.tsx b/web/app/components/workflow/nodes/list-filter/panel.tsx
index 9d25ec5bb7..fa5699f923 100644
--- a/web/app/components/workflow/nodes/list-filter/panel.tsx
+++ b/web/app/components/workflow/nodes/list-filter/panel.tsx
@@ -26,6 +26,7 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
     readOnly,
     inputs,
     itemVarType,
+    itemVarTypeShowName,
     hasSubVariable,
     handleVarChanges,
     filterVar,
@@ -103,29 +104,30 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
             )
             : null}
         </Field>
-
+        <Split />
         <LimitConfig
           config={inputs.limit}
           onChange={handleLimitChange}
           readonly={readOnly}
         />
       </div>
+      <Split />
       <div className='px-4 pt-4 pb-2'>
         <OutputVars>
           <>
             <VarItem
               name='result'
-              type='Array[x]'
+              type={`Array[${itemVarTypeShowName}]`}
               description={t(`${i18nPrefix}.outputVars.result`)}
             />
             <VarItem
               name='first_record'
-              type='x'
+              type={itemVarTypeShowName}
               description={t(`${i18nPrefix}.outputVars.first_record`)}
             />
             <VarItem
               name='last_record'
-              type='x'
+              type={itemVarTypeShowName}
               description={t(`${i18nPrefix}.outputVars.last_record`)}
             />
           </>
diff --git a/web/app/components/workflow/nodes/list-filter/use-config.ts b/web/app/components/workflow/nodes/list-filter/use-config.ts
index 3642b4235a..5335d6eced 100644
--- a/web/app/components/workflow/nodes/list-filter/use-config.ts
+++ b/web/app/components/workflow/nodes/list-filter/use-config.ts
@@ -63,6 +63,12 @@ const useConfig = (id: string, payload: ListFilterNodeType) => {
 
   const { varType, itemVarType } = getType()
 
+  const itemVarTypeShowName = useMemo(() => {
+    if (!inputs.variable)
+      return '?'
+    return [itemVarType.substring(0, 1).toUpperCase(), itemVarType.substring(1)].join('')
+  }, [inputs.variable, itemVarType])
+
   const hasSubVariable = [VarType.arrayFile].includes(varType)
 
   const handleVarChanges = useCallback((variable: ValueSelector | string) => {
@@ -128,6 +134,7 @@ const useConfig = (id: string, payload: ListFilterNodeType) => {
     filterVar,
     varType,
     itemVarType,
+    itemVarTypeShowName,
     hasSubVariable,
     handleVarChanges,
     handleFilterChange,