feat: workflow new nodes (#4683)
Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: Patryk Garstecki <patryk20120@yahoo.pl> Co-authored-by: Sebastian.W <thiner@gmail.com> Co-authored-by: 呆萌闷油瓶 <253605712@qq.com> Co-authored-by: takatost <takatost@users.noreply.github.com> Co-authored-by: rechardwang <wh_goodjob@163.com> Co-authored-by: Nite Knite <nkCoding@gmail.com> Co-authored-by: Chenhe Gu <guchenhe@gmail.com> Co-authored-by: Joshua <138381132+joshua20231026@users.noreply.github.com> Co-authored-by: Weaxs <459312872@qq.com> Co-authored-by: Ikko Eltociear Ashimine <eltociear@gmail.com> Co-authored-by: leejoo0 <81673835+leejoo0@users.noreply.github.com> Co-authored-by: JzoNg <jzongcode@gmail.com> Co-authored-by: sino <sino2322@gmail.com> Co-authored-by: Vikey Chen <vikeytk@gmail.com> Co-authored-by: wanghl <Wang-HL@users.noreply.github.com> Co-authored-by: Haolin Wang-汪皓临 <haolin.wang@atlaslovestravel.com> Co-authored-by: Zixuan Cheng <61724187+Theysua@users.noreply.github.com> Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com> Co-authored-by: Bowen Liang <bowenliang@apache.org> Co-authored-by: Bowen Liang <liangbowen@gf.com.cn> Co-authored-by: fanghongtai <42790567+fanghongtai@users.noreply.github.com> Co-authored-by: wxfanghongtai <wxfanghongtai@gf.com.cn> Co-authored-by: Matri <qjp@bithuman.io> Co-authored-by: Benjamin <benjaminx@gmail.com>
This commit is contained in:
zxhlyh
@@ -1,17 +1,17 @@
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
// import cn from 'classnames'
|
||||
// import Field from '../_base/components/field'
|
||||
import RemoveEffectVarConfirm from '../_base/components/remove-effect-var-confirm'
|
||||
import useConfig from './use-config'
|
||||
import VarList from './components/var-list'
|
||||
import type { VariableAssignerNodeType } from './types'
|
||||
import Field from '@/app/components/workflow/nodes/_base/components/field'
|
||||
import Selector from '@/app/components/workflow/nodes/_base/components/selector'
|
||||
import AddButton from '@/app/components/base/button/add-button'
|
||||
import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
|
||||
import type { NodePanelProps } from '@/app/components/workflow/types'
|
||||
import { VarType } from '@/app/components/workflow/types'
|
||||
import VarGroupItem from './components/var-group-item'
|
||||
import { type NodePanelProps } from '@/app/components/workflow/types'
|
||||
import Split from '@/app/components/workflow/nodes/_base/components/split'
|
||||
import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
|
||||
// import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
|
||||
// import Switch from '@/app/components/base/switch'
|
||||
import AddButton from '@/app/components/workflow/nodes/_base/components/add-button'
|
||||
|
||||
const i18nPrefix = 'workflow.nodes.variableAssigner'
|
||||
const Panel: FC<NodePanelProps<VariableAssignerNodeType>> = ({
|
||||
@@ -23,70 +23,105 @@ const Panel: FC<NodePanelProps<VariableAssignerNodeType>> = ({
|
||||
const {
|
||||
readOnly,
|
||||
inputs,
|
||||
handleOutputTypeChange,
|
||||
handleVarListChange,
|
||||
handleAddVariable,
|
||||
handleOnVarOpen,
|
||||
handleListOrTypeChange,
|
||||
isEnableGroup,
|
||||
// handleGroupEnabledChange,
|
||||
handleAddGroup,
|
||||
handleListOrTypeChangeInGroup,
|
||||
handleGroupRemoved,
|
||||
handleVarGroupNameChange,
|
||||
isShowRemoveVarConfirm,
|
||||
hideRemoveVarConfirm,
|
||||
onRemoveVarConfirm,
|
||||
getAvailableVars,
|
||||
filterVar,
|
||||
} = useConfig(id, data)
|
||||
|
||||
const typeOptions = [
|
||||
{ label: t(`${i18nPrefix}.type.string`), value: VarType.string },
|
||||
{ label: t(`${i18nPrefix}.type.number`), value: VarType.number },
|
||||
{ label: t(`${i18nPrefix}.type.object`), value: VarType.object },
|
||||
{ label: t(`${i18nPrefix}.type.array`), value: VarType.array },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className='mt-2'>
|
||||
<div className='px-4 pb-4 space-y-4'>
|
||||
<Field
|
||||
title={t(`${i18nPrefix}.outputVarType`)}
|
||||
>
|
||||
<Selector
|
||||
readonly={readOnly}
|
||||
value={inputs.output_type}
|
||||
options={typeOptions}
|
||||
onChange={handleOutputTypeChange}
|
||||
trigger={
|
||||
<div className='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'>{inputs.output_type}</div>
|
||||
{!readOnly && <ChevronDown className='w-3.5 h-3.5 text-gray-700' />}
|
||||
</div>
|
||||
}
|
||||
popupClassName='!top-[36px] !w-[387px]'
|
||||
showChecked
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
title={t(`${i18nPrefix}.title`)}
|
||||
operations={
|
||||
!readOnly ? <AddButton onClick={handleAddVariable} /> : undefined
|
||||
}
|
||||
>
|
||||
<VarList
|
||||
readonly={readOnly}
|
||||
nodeId={id}
|
||||
list={inputs.variables}
|
||||
onChange={handleVarListChange}
|
||||
onOpen={handleOnVarOpen}
|
||||
onlyLeafNodeVar
|
||||
filterVar={filterVar}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
<Split />
|
||||
<div className='px-4 pt-4 pb-2'>
|
||||
<OutputVars>
|
||||
<>
|
||||
<VarItem
|
||||
name='output'
|
||||
type={inputs.output_type}
|
||||
description={t(`${i18nPrefix}.outputVars.output`)}
|
||||
{!isEnableGroup
|
||||
? (
|
||||
<VarGroupItem
|
||||
readOnly={readOnly}
|
||||
nodeId={id}
|
||||
payload={{
|
||||
output_type: inputs.output_type,
|
||||
variables: inputs.variables,
|
||||
}}
|
||||
onChange={handleListOrTypeChange}
|
||||
groupEnabled={false}
|
||||
availableVars={getAvailableVars(id, 'target', filterVar(inputs.output_type))}
|
||||
/>
|
||||
</>
|
||||
</OutputVars>
|
||||
)
|
||||
: (<div>
|
||||
<div className='space-y-2'>
|
||||
{inputs.advanced_settings?.groups.map((item, index) => (
|
||||
<div key={item.groupId}>
|
||||
<VarGroupItem
|
||||
readOnly={readOnly}
|
||||
nodeId={id}
|
||||
payload={item}
|
||||
onChange={handleListOrTypeChangeInGroup(item.groupId)}
|
||||
groupEnabled
|
||||
canRemove={!readOnly && inputs.advanced_settings?.groups.length > 1}
|
||||
onRemove={handleGroupRemoved(item.groupId)}
|
||||
onGroupNameChange={handleVarGroupNameChange(item.groupId)}
|
||||
availableVars={getAvailableVars(id, item.groupId, filterVar(item.output_type))}
|
||||
/>
|
||||
{index !== inputs.advanced_settings?.groups.length - 1 && <Split className='my-4' />}
|
||||
</div>
|
||||
|
||||
))}
|
||||
</div>
|
||||
<AddButton
|
||||
className='mt-2'
|
||||
text={t(`${i18nPrefix}.addGroup`)}
|
||||
onClick={handleAddGroup}
|
||||
/>
|
||||
</div>)}
|
||||
</div>
|
||||
{/* <Split /> */}
|
||||
{/* <div className={cn('px-4 pt-4', isEnableGroup ? 'pb-4' : 'pb-2')}>
|
||||
<Field
|
||||
title={t(`${i18nPrefix}.aggregationGroup`)}
|
||||
tooltip={t(`${i18nPrefix}.aggregationGroupTip`)!}
|
||||
operations={
|
||||
<Switch
|
||||
defaultValue={isEnableGroup}
|
||||
onChange={handleGroupEnabledChange}
|
||||
size='md'
|
||||
disabled={readOnly}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div> */}
|
||||
{/* {isEnableGroup && (
|
||||
<>
|
||||
<Split />
|
||||
<div className='px-4 pt-4 pb-2'>
|
||||
<OutputVars>
|
||||
<>
|
||||
{inputs.advanced_settings?.groups.map((item, index) => (
|
||||
<VarItem
|
||||
key={index}
|
||||
name={`${item.group_name}.output`}
|
||||
type={item.output_type}
|
||||
description={t(`${i18nPrefix}.outputVars.varDescribe`, {
|
||||
groupName: item.group_name,
|
||||
})}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
</OutputVars>
|
||||
</div>
|
||||
</>
|
||||
)} */}
|
||||
<RemoveEffectVarConfirm
|
||||
isShow={isShowRemoveVarConfirm}
|
||||
onCancel={hideRemoveVarConfirm}
|
||||
onConfirm={onRemoveVarConfirm}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user