The list action node adds methods to extract specific list objects (#10421)

Co-authored-by: luowei <glpat-EjySCyNjWiLqAED-YmwM>
Co-authored-by: crazywoola <427733928@qq.com>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
This commit is contained in:
Charlie.Wei
2024-11-11 12:10:21 +08:00
committed by GitHub
parent 55edd5047e
commit fbee41f8c7
10 changed files with 148 additions and 7 deletions

View File

@@ -0,0 +1,51 @@
'use client'
import type { FC } from 'react'
import React, { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { VarType } from '../../../types'
import type { Var } from '../../../types'
import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
import cn from '@/utils/classnames'
import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
type Props = {
nodeId: string
readOnly: boolean
value: string
onChange: (value: string) => void
}
const ExtractInput: FC<Props> = ({
nodeId,
readOnly,
value,
onChange,
}) => {
const { t } = useTranslation()
const [isFocus, setIsFocus] = useState(false)
const { availableVars, availableNodesWithParent } = useAvailableVarList(nodeId, {
onlyLeafNodeVar: false,
filterVar: (varPayload: Var) => {
return [VarType.number].includes(varPayload.type)
},
})
return (
<div className='flex items-start space-x-1'>
<Input
instanceId='http-extract-number'
className={cn(isFocus ? 'shadow-xs bg-gray-50 border-gray-300' : 'bg-gray-100 border-gray-100', 'w-0 grow rounded-lg px-3 py-[6px] border')}
value={value}
onChange={onChange}
readOnly={readOnly}
nodesOutputVars={availableVars}
availableNodes={availableNodesWithParent}
onFocusChange={setIsFocus}
placeholder={!readOnly ? t('workflow.nodes.http.extractListPlaceholder')! : ''}
placeholderClassName='!leading-[21px]'
/>
</div >
)
}
export default React.memo(ExtractInput)

View File

@@ -12,6 +12,10 @@ const nodeDefault: NodeDefault<ListFilterNodeType> = {
enabled: false,
conditions: [],
},
extract_by: {
enabled: false,
serial: '1',
},
order_by: {
enabled: false,
key: '',

View File

@@ -13,6 +13,7 @@ import FilterCondition from './components/filter-condition'
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'
import ExtractInput from '@/app/components/workflow/nodes/list-operator/components/extract-input'
const i18nPrefix = 'workflow.nodes.listFilter'
@@ -32,6 +33,8 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
filterVar,
handleFilterEnabledChange,
handleFilterChange,
handleExtractsEnabledChange,
handleExtractsChange,
handleLimitChange,
handleOrderByEnabledChange,
handleOrderByKeyChange,
@@ -79,6 +82,41 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
: null}
</Field>
<Split />
<Field
title={t(`${i18nPrefix}.extractsCondition`)}
operations={
<Switch
defaultValue={inputs.extract_by?.enabled}
onChange={handleExtractsEnabledChange}
size='md'
disabled={readOnly}
/>
}
>
{inputs.extract_by?.enabled
? (
<div className='flex items-center justify-between'>
{hasSubVariable && (
<div className='grow mr-2'>
<ExtractInput
value={inputs.extract_by.serial as string}
onChange={handleExtractsChange}
readOnly={readOnly}
nodeId={id}
/>
</div>
)}
</div>
)
: null}
</Field>
<Split />
<LimitConfig
config={inputs.limit}
onChange={handleLimitChange}
readonly={readOnly}
/>
<Split />
<Field
title={t(`${i18nPrefix}.orderBy`)}
operations={
@@ -118,13 +156,7 @@ 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>
<>

View File

@@ -25,6 +25,10 @@ export type ListFilterNodeType = CommonNodeType & {
enabled: boolean
conditions: Condition[]
}
extract_by: {
enabled: boolean
serial?: string
}
order_by: {
enabled: boolean
key: ValueSelector | string

View File

@@ -119,6 +119,22 @@ const useConfig = (id: string, payload: ListFilterNodeType) => {
setInputs(newInputs)
}, [inputs, setInputs])
const handleExtractsEnabledChange = useCallback((enabled: boolean) => {
const newInputs = produce(inputs, (draft) => {
draft.extract_by.enabled = enabled
if (enabled)
draft.extract_by.serial = '1'
})
setInputs(newInputs)
}, [inputs, setInputs])
const handleExtractsChange = useCallback((value: string) => {
const newInputs = produce(inputs, (draft) => {
draft.extract_by.serial = value
})
setInputs(newInputs)
}, [inputs, setInputs])
const handleOrderByEnabledChange = useCallback((enabled: boolean) => {
const newInputs = produce(inputs, (draft) => {
draft.order_by.enabled = enabled
@@ -162,6 +178,8 @@ const useConfig = (id: string, payload: ListFilterNodeType) => {
handleOrderByEnabledChange,
handleOrderByKeyChange,
handleOrderByTypeChange,
handleExtractsEnabledChange,
handleExtractsChange,
}
}