From 573f653789839b8f86242543ef4b4dbafa543ab6 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 1 Aug 2024 11:40:55 +0800
Subject: [PATCH] feat: order by

---
 .../list-filter/components/limit-config.tsx   | 50 ++++++++++---------
 .../workflow/nodes/list-filter/default.ts     | 11 +++-
 .../workflow/nodes/list-filter/panel.tsx      | 38 +++++++++++++-
 .../workflow/nodes/list-filter/use-config.ts  | 20 +++++++-
 web/i18n/en-US/workflow.ts                    |  3 ++
 web/i18n/zh-Hans/workflow.ts                  |  3 ++
 6 files changed, 98 insertions(+), 27 deletions(-)

diff --git a/web/app/components/workflow/nodes/list-filter/components/limit-config.tsx b/web/app/components/workflow/nodes/list-filter/components/limit-config.tsx
index 6e40346e50..10a5493f6a 100644
--- a/web/app/components/workflow/nodes/list-filter/components/limit-config.tsx
+++ b/web/app/components/workflow/nodes/list-filter/components/limit-config.tsx
@@ -71,30 +71,32 @@ const LimitConfig: FC<Props> = ({
           />
         }
       >
-        {payload && (
-          <div className='flex justify-between items-center h-8 space-x-2'>
-            <input
-              value={(payload?.size || LIMIT_SIZE_DEFAULT) as number}
-              className='shrink-0 block pl-3 w-12 h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900'
-              type='number'
-              min={LIMIT_SIZE_MIN}
-              max={LIMIT_SIZE_MAX}
-              step={1}
-              onChange={e => handleLimitSizeChange(e.target.value)}
-              onBlur={handleBlur}
-              disabled={readonly || !payload?.enabled}
-            />
-            <Slider
-              className='grow'
-              value={(payload?.size || LIMIT_SIZE_DEFAULT) as number}
-              min={LIMIT_SIZE_MIN}
-              max={LIMIT_SIZE_MAX}
-              step={1}
-              onChange={handleLimitSizeChange}
-              disabled={readonly || !payload?.enabled}
-            />
-          </div>
-        )}
+        {payload?.enabled
+          ? (
+            <div className='flex justify-between items-center h-8 space-x-2'>
+              <input
+                value={(payload?.size || LIMIT_SIZE_DEFAULT) as number}
+                className='shrink-0 block pl-3 w-12 h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900'
+                type='number'
+                min={LIMIT_SIZE_MIN}
+                max={LIMIT_SIZE_MAX}
+                step={1}
+                onChange={e => handleLimitSizeChange(e.target.value)}
+                onBlur={handleBlur}
+                disabled={readonly || !payload?.enabled}
+              />
+              <Slider
+                className='grow'
+                value={(payload?.size || LIMIT_SIZE_DEFAULT) as number}
+                min={LIMIT_SIZE_MIN}
+                max={LIMIT_SIZE_MAX}
+                step={1}
+                onChange={handleLimitSizeChange}
+                disabled={readonly || !payload?.enabled}
+              />
+            </div>
+          )
+          : null}
       </Field>
     </div>
   )
diff --git a/web/app/components/workflow/nodes/list-filter/default.ts b/web/app/components/workflow/nodes/list-filter/default.ts
index 5fe4b44a8d..899e3e7117 100644
--- a/web/app/components/workflow/nodes/list-filter/default.ts
+++ b/web/app/components/workflow/nodes/list-filter/default.ts
@@ -1,12 +1,21 @@
 import { BlockEnum } from '../../types'
 import type { NodeDefault } from '../../types'
-import { type ListFilterNodeType } from './types'
+import { type ListFilterNodeType, OrderBy } from './types'
 import { ALL_CHAT_AVAILABLE_BLOCKS, ALL_COMPLETION_AVAILABLE_BLOCKS } from '@/app/components/workflow/constants'
 const i18nPrefix = 'workflow.errorMsg'
 
 const nodeDefault: NodeDefault<ListFilterNodeType> = {
   defaultValue: {
     variable: [],
+    orderBy: {
+      enabled: false,
+      key: '',
+      value: OrderBy.ASC,
+    },
+    limit: {
+      enabled: false,
+      size: 10,
+    },
   },
   getAvailablePrevNodes(isChatMode: boolean) {
     const nodes = isChatMode
diff --git a/web/app/components/workflow/nodes/list-filter/panel.tsx b/web/app/components/workflow/nodes/list-filter/panel.tsx
index 186fda5ae7..75082561e9 100644
--- a/web/app/components/workflow/nodes/list-filter/panel.tsx
+++ b/web/app/components/workflow/nodes/list-filter/panel.tsx
@@ -3,11 +3,13 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import VarReferencePicker from '../_base/components/variable/var-reference-picker'
 import OutputVars, { VarItem } from '../_base/components/output-vars'
+import OptionCard from '../_base/components/option-card'
 import useConfig from './use-config'
-import type { ListFilterNodeType } from './types'
+import { type ListFilterNodeType, OrderBy } from './types'
 import LimitConfig from './components/limit-config'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import { type NodePanelProps } from '@/app/components/workflow/types'
+import Switch from '@/app/components/base/switch'
 
 const i18nPrefix = 'workflow.nodes.listFilter'
 
@@ -23,6 +25,8 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
     handleVarChanges,
     filterVar,
     handleLimitChange,
+    handleOrderByEnabledChange,
+    handleOrderByTypeChange,
   } = useConfig(id, data)
 
   return (
@@ -41,6 +45,38 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
           />
         </Field>
 
+        <Field
+          title={t(`${i18nPrefix}.orderBy`)}
+          operations={
+            <Switch
+              defaultValue={inputs.orderBy?.enabled}
+              onChange={handleOrderByEnabledChange}
+              size='md'
+              disabled={readOnly}
+            />
+          }
+        >
+          {inputs.orderBy?.enabled
+            ? (
+              <div className='flex items-center justify-between'>
+                <div className='grow'>Variable Picker placeholder</div>
+                <div className='shrink-0 flex space-x-1'>
+                  <OptionCard
+                    title={t(`${i18nPrefix}.asc`)}
+                    onSelect={handleOrderByTypeChange(OrderBy.ASC)}
+                    selected={inputs.orderBy.value === OrderBy.ASC}
+                  />
+                  <OptionCard
+                    title={t(`${i18nPrefix}.desc`)}
+                    onSelect={handleOrderByTypeChange(OrderBy.DESC)}
+                    selected={inputs.orderBy.value === OrderBy.DESC}
+                  />
+                </div>
+              </div>
+            )
+            : null}
+        </Field>
+
         <LimitConfig
           config={inputs.limit}
           onChange={handleLimitChange}
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 7a0709343b..6377de4eff 100644
--- a/web/app/components/workflow/nodes/list-filter/use-config.ts
+++ b/web/app/components/workflow/nodes/list-filter/use-config.ts
@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 import produce from 'immer'
 import type { ValueSelector, Var } from '../../types'
 import { VarType } from '../../types'
-import type { Limit, ListFilterNodeType } from './types'
+import type { Limit, ListFilterNodeType, OrderBy } from './types'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 import {
   useNodesReadOnly,
@@ -31,12 +31,30 @@ const useConfig = (id: string, payload: ListFilterNodeType) => {
     setInputs(newInputs)
   }, [inputs, setInputs])
 
+  const handleOrderByEnabledChange = useCallback((enabled: boolean) => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.orderBy.enabled = enabled
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const handleOrderByTypeChange = useCallback((type: OrderBy) => {
+    return () => {
+      const newInputs = produce(inputs, (draft) => {
+        draft.orderBy.value = type
+      })
+      setInputs(newInputs)
+    }
+  }, [inputs, setInputs])
+
   return {
     readOnly,
     inputs,
     filterVar,
     handleVarChanges,
     handleLimitChange,
+    handleOrderByEnabledChange,
+    handleOrderByTypeChange,
   }
 }
 
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index 1c7db5d192..88c0668ccd 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -502,6 +502,9 @@ const translation = {
     listFilter: {
       inputVar: 'Input Variable',
       limit: 'Limit',
+      orderBy: 'Order by',
+      asc: 'ASC',
+      desc: 'DESC',
       outputVars: {
         result: 'Filter result',
         first_record: 'First record',
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index 359f95b89f..026be2241e 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -502,6 +502,9 @@ const translation = {
     listFilter: {
       inputVar: '输入变量',
       limit: '限制',
+      orderBy: '排序',
+      asc: '升序',
+      desc: '降序',
       outputVars: {
         result: '过滤结果',
         first_record: '第一条记录',