Skip to content

Commit b5774c8

Browse files
hi02102002hi02102002
committed
feat: add multiple asssinVar
1 parent bf4636c commit b5774c8

File tree

3 files changed

+135
-154
lines changed

3 files changed

+135
-154
lines changed

‎client/src/components/pages/flow-detail/node-dialog/http-request.tsx‎

Lines changed: 2 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export const HttpRequestDialogContent = () => {
7474

7575
const handleAddKeyVal = (
7676
fieldArray: any,
77-
key: 'params' | 'headers' | 'query' | 'body',
77+
key: 'params' | 'headers' | 'body',
7878
) => {
7979
form.trigger(key)
8080
if (
@@ -193,10 +193,9 @@ export const HttpRequestDialogContent = () => {
193193
)}
194194
/>
195195
<Tabs defaultValue='params'>
196-
<TabsList className='grid w-full grid-cols-4'>
196+
<TabsList className='grid w-full grid-cols-3'>
197197
<TabsTrigger value='params'>Params</TabsTrigger>
198198
<TabsTrigger value='headers'>Headers</TabsTrigger>
199-
<TabsTrigger value='query'>Query</TabsTrigger>
200199
<TabsTrigger value='body'>Body</TabsTrigger>
201200
</TabsList>
202201
<TabsContent value='params'>
@@ -348,80 +347,6 @@ export const HttpRequestDialogContent = () => {
348347
</Button>
349348
</div>
350349
</TabsContent>
351-
<TabsContent value='query'>
352-
<div className='space-y-3'>
353-
<div
354-
className={cn(
355-
'max-h-[128px] overflow-y-auto hidden-scroll px-[2px] space-y-3',
356-
{
357-
'py-1': queryFieldArray.fields.length,
358-
},
359-
)}
360-
>
361-
{queryFieldArray.fields.map((field, index) => {
362-
return (
363-
<div key={field.id} className='flex gap-3'>
364-
<FormField
365-
control={form.control}
366-
name={`query.${index}.key`}
367-
render={({ field }) => {
368-
return (
369-
<FormItem className='w-full'>
370-
<FormControl>
371-
<Input
372-
{...field}
373-
placeholder={t('key.placeholder')}
374-
/>
375-
</FormControl>
376-
<FormMessage />
377-
</FormItem>
378-
)
379-
}}
380-
/>
381-
<FormField
382-
control={form.control}
383-
name={`query.${index}.value`}
384-
render={({ field }) => {
385-
return (
386-
<FormItem className='w-full'>
387-
<FormControl>
388-
<Input
389-
{...field}
390-
placeholder={t('value.placeholder')}
391-
/>
392-
</FormControl>
393-
<FormMessage />
394-
</FormItem>
395-
)
396-
}}
397-
/>
398-
<Button
399-
variant='destructive'
400-
size='icon'
401-
className='flex-shrink-0'
402-
type='button'
403-
onClick={() => {
404-
queryFieldArray.remove(index)
405-
}}
406-
>
407-
<X />
408-
</Button>
409-
</div>
410-
)
411-
})}
412-
</div>
413-
<Button
414-
type='button'
415-
onClick={() => {
416-
handleAddKeyVal(queryFieldArray, 'query')
417-
}}
418-
variant='outline'
419-
className='w-full'
420-
>
421-
{t('common:add')}
422-
</Button>
423-
</div>
424-
</TabsContent>
425350
<TabsContent value='body'>
426351
<div className='space-y-3'>
427352
<div

‎client/src/components/pages/flow-detail/node-dialog/subflow.tsx‎

Lines changed: 133 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
Button,
23
Label,
34
Select,
45
SelectContent,
@@ -13,6 +14,7 @@ import {
1314
} from '@/lib/query-options/flow'
1415
import { useQuery } from '@tanstack/react-query'
1516
import _ from 'lodash'
17+
import { X } from 'lucide-react'
1618
import { useTranslation } from 'react-i18next'
1719
import { useParams } from 'react-router-dom'
1820
import { useFlowCtx } from '..'
@@ -59,83 +61,138 @@ export const SubFlowContent = () => {
5961
</SelectContent>
6062
</Select>
6163
</div>
62-
<div className='flex gap-3'>
63-
<div className='space-y-2 w-full'>
64-
<Label>{t('assign_var.label')}</Label>
65-
<Select
66-
value={selectedNode?.data?.assignTo || NOT_CHOOSE}
67-
onValueChange={(value) => {
68-
if (!selectedNode) return
69-
70-
const cloneSelectedNode = _.cloneDeep(selectedNode)
71-
72-
if (value === NOT_CHOOSE) {
73-
delete cloneSelectedNode.data.assignTo
74-
} else {
75-
cloneSelectedNode.data.assignTo = value
76-
}
77-
78-
handleChangeSelectedNode(cloneSelectedNode)
79-
}}
80-
>
81-
<SelectTrigger>
82-
<SelectValue placeholder={t('assign_var.placeholder')} />
83-
</SelectTrigger>
84-
<SelectContent>
85-
<SelectItem value={NOT_CHOOSE}>
86-
{t('assign_var.placeholder')}
87-
</SelectItem>
88-
{flow.variables?.map((variable, index) => {
89-
return (
90-
<SelectItem
91-
key={`${variable.name}-${index}`}
92-
value={variable.name}
93-
>
94-
{variable.name}
95-
</SelectItem>
96-
)
97-
})}
98-
</SelectContent>
99-
</Select>
100-
</div>
101-
<div className='space-y-2 w-full'>
102-
<Label>{t('output_var.label')}</Label>
103-
<Select
104-
value={selectedNode?.data?.outputVar || NOT_CHOOSE}
105-
onValueChange={(value) => {
106-
if (!selectedNode) return
107-
108-
const cloneSelectedNode = _.cloneDeep(selectedNode)
109-
110-
if (value === NOT_CHOOSE) {
111-
delete cloneSelectedNode.data.outputVar
112-
} else {
113-
cloneSelectedNode.data.outputVar = value
114-
}
115-
116-
handleChangeSelectedNode(cloneSelectedNode)
117-
}}
118-
>
119-
<SelectTrigger>
120-
<SelectValue placeholder={t('output_var.placeholder')} />
121-
</SelectTrigger>
122-
<SelectContent>
123-
<SelectItem value={NOT_CHOOSE}>
124-
{t('output_var.placeholder')}
125-
</SelectItem>
126-
{subflow?.variables?.map((variable, index) => {
127-
return (
128-
<SelectItem
129-
key={`${variable.name}-${index}`}
130-
value={variable.name}
131-
>
132-
{variable.name}
133-
</SelectItem>
134-
)
135-
})}
136-
</SelectContent>
137-
</Select>
64+
<div className='flex gap-3 flex-col'>
65+
<div className='flex gap-3 w-full'>
66+
<Label className='w-full'>{t('output_var.label')}</Label>
67+
<Label className='w-full'>{t('assign_var.label')}</Label>
13868
</div>
69+
{selectedNode?.data?.assignVars?.map((_item: any, index: number) => {
70+
return (
71+
<div key={index} className='flex gap-3'>
72+
<div className='space-y-2 w-full'>
73+
<Select
74+
value={
75+
selectedNode?.data?.assignVars[index]?.assignTo ||
76+
NOT_CHOOSE
77+
}
78+
onValueChange={(value) => {
79+
if (!selectedNode) return
80+
81+
const cloneSelectedNode = _.cloneDeep(selectedNode)
82+
83+
cloneSelectedNode.data.assignVars[index].assignTo =
84+
value === NOT_CHOOSE ? undefined : value
85+
86+
handleChangeSelectedNode(cloneSelectedNode)
87+
}}
88+
>
89+
<SelectTrigger>
90+
<SelectValue placeholder={t('assign_var.placeholder')} />
91+
</SelectTrigger>
92+
<SelectContent>
93+
<SelectItem value={NOT_CHOOSE}>
94+
{t('assign_var.placeholder')}
95+
</SelectItem>
96+
{flow.variables?.map((variable, index) => {
97+
return (
98+
<SelectItem
99+
key={`${variable.name}-${index}`}
100+
value={variable.name}
101+
>
102+
{variable.name}
103+
</SelectItem>
104+
)
105+
})}
106+
</SelectContent>
107+
</Select>
108+
</div>
109+
<div className='space-y-2 w-full'>
110+
<Select
111+
value={
112+
selectedNode?.data?.assignVars[index]?.outputVar ||
113+
NOT_CHOOSE
114+
}
115+
onValueChange={(value) => {
116+
if (!selectedNode) return
117+
118+
const cloneSelectedNode = _.cloneDeep(selectedNode)
119+
120+
cloneSelectedNode.data.assignVars[index].outputVar =
121+
value === NOT_CHOOSE ? undefined : value
122+
123+
handleChangeSelectedNode(cloneSelectedNode)
124+
}}
125+
>
126+
<SelectTrigger>
127+
<SelectValue placeholder={t('output_var.placeholder')} />
128+
</SelectTrigger>
129+
<SelectContent>
130+
<SelectItem value={NOT_CHOOSE}>
131+
{t('output_var.placeholder')}
132+
</SelectItem>
133+
{subflow?.variables?.map((variable, index) => {
134+
return (
135+
<SelectItem
136+
key={`${variable.name}-${index}`}
137+
value={variable.name}
138+
>
139+
{variable.name}
140+
</SelectItem>
141+
)
142+
})}
143+
</SelectContent>
144+
</Select>
145+
</div>
146+
<Button
147+
variant='destructive'
148+
size='icon'
149+
className='flex-shrink-0'
150+
onClick={() => {
151+
if (!selectedNode) return
152+
153+
const cloneSelectedNode = _.cloneDeep(selectedNode)
154+
155+
cloneSelectedNode.data.assignVars.splice(index, 1)
156+
157+
handleChangeSelectedNode(cloneSelectedNode)
158+
}}
159+
>
160+
<X />
161+
</Button>
162+
</div>
163+
)
164+
})}
165+
<Button
166+
variant='outline'
167+
onClick={() => {
168+
if (!selectedNode) return
169+
170+
const cloneSelectedNode = _.cloneDeep(selectedNode)
171+
172+
if (!cloneSelectedNode.data.assignVars) {
173+
cloneSelectedNode.data.assignVars = []
174+
}
175+
176+
if (
177+
cloneSelectedNode.data.assignVars.length > 0 &&
178+
cloneSelectedNode.data.assignVars.some(
179+
(item: any) =>
180+
item.assignTo === NOT_CHOOSE || item.outputVar === NOT_CHOOSE,
181+
)
182+
) {
183+
return
184+
}
185+
186+
cloneSelectedNode.data.assignVars.push({
187+
assignTo: undefined,
188+
outputVar: undefined,
189+
})
190+
191+
handleChangeSelectedNode(cloneSelectedNode)
192+
}}
193+
>
194+
Add
195+
</Button>
139196
</div>
140197
</div>
141198
)

‎client/src/lib/schema/request-options.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ export const useRequestOptionsSchema = () => {
3434
}),
3535
headers: z.array(keyValSchema).optional(),
3636
params: z.array(keyValSchema).optional(),
37-
query: z.array(keyValSchema).optional(),
3837
body: z.array(keyValSchema).optional(),
3938
assignUserResponse: z.string().optional(),
4039
})

0 commit comments

Comments
 (0)