feat: check variable dialog

Author: hi02102002

client/src/components/forms/variables-setting.tsx

@@ -9,10 +9,10 @@ import {
   toBoolean,
 } from '@/utils'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { toNumber } from 'lodash'
+import _, { toNumber } from 'lodash'
 import { X } from 'lucide-react'
 import { useCallback } from 'react'
-import { useFieldArray, useForm } from 'react-hook-form'
+import { useFieldArray, useForm, useWatch } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import {
   Button,
@@ -73,8 +73,6 @@ export const VariablesSettingForm = ({
     },
   })
 
-  const variablesWatch = form.watch('variables')
-
   const {
     fields: variables,
     append,
@@ -98,11 +96,22 @@ export const VariablesSettingForm = ({
     }
   }
 
+  const variablesWatch = useWatch({
+    control: form.control,
+    name: 'variables',
+  })
+
   const handleAddVariable = useCallback(() => {
     form.trigger()
 
+    if (
+      !_.isEmpty(form.formState.errors.variables) ||
+      variablesWatch?.some((field) => !field.name || !field.value)
+    )
+      return
+
     append({ name: '', value: '', type: 'string' })
-  }, [append, form])
+  }, [append, form, variablesWatch])
 
   const handleJsonChange = (
     e: React.ChangeEvent<HTMLTextAreaElement>,
@@ -146,12 +155,19 @@ export const VariablesSettingForm = ({
     }
   }
 
+  const variablesError = form.formState.errors.variables
+
   return (
     <div className='space-y-3'>
       <div className='space-y-2 max-h-[25rem] overflow-y-auto pb-1 overflow-x-auto hidden-scroll pl-[2px]'>
         <Label>
           <span>{t('common:variables')}</span>
         </Label>
+        {variablesError?.root?.message && (
+          <div className='text-center p-1 rounded-md border border-destructive text-sm text-destructive bg-red-50'>
+            {variablesError?.root?.message}
+          </div>
+        )}
         <Form {...form}>
           <form
             className='space-y-3 '

client/src/components/pages/flow-detail/constant.tsx

@@ -11,7 +11,7 @@ import {
   Workflow,
 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
-import { MessageDialogContent } from './node-dialog'
+import { CheckVariablesContent, MessageDialogContent } from './node-dialog'
 
 export const MAP_ACTION_TO_LABEL: Record<EActionTypes, string> = {
   [EActionTypes.MESSAGE]: i18n.t('flowDetail:actions.items.message') as string,
@@ -70,12 +70,12 @@ export const MAP_ACTION: Record<
   [EActionTypes.PROMPT_AND_COLLECT]: {
     icon: () => <HelpCircle className='w-4 h-4' />,
     label: 'Prompt and collect',
-    dialogContent: () => <div>Prompt and collect</div>,
+    dialogContent: () => <MessageDialogContent />,
   },
   [EActionTypes.CHECK_VARIABLES]: {
     icon: () => <Variable className='w-4 h-4' />,
     label: 'Check variables',
-    dialogContent: () => <div>Check variables</div>,
+    dialogContent: () => <CheckVariablesContent />,
   },
   [EActionTypes.HTTP_REQUEST]: {
     icon: () => <GitPullRequest className='w-4 h-4' />,

client/src/components/pages/flow-detail/node-dialog/check-variables.tsx

@@ -0,0 +1,52 @@
+import {
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui'
+import _ from 'lodash'
+import { useTranslation } from 'react-i18next'
+import { useFlowCtx } from '..'
+
+export const CheckVariablesContent = () => {
+  const { flow, selectedNode, handleChangeSelectedNode } = useFlowCtx()
+  const { t } = useTranslation(['flowDetail', 'forms'])
+
+  return (
+    <div className='space-y-2'>
+      <Label>{t('forms:variable.label')}</Label>
+      <Select
+        value={selectedNode?.data?.variable}
+        onValueChange={(value) => {
+          if (!selectedNode) return
+
+          const cloneSelectedNode = _.cloneDeep(selectedNode)
+
+          cloneSelectedNode.data.variable = value
+
+          handleChangeSelectedNode(cloneSelectedNode)
+        }}
+      >
+        <SelectTrigger>
+          <SelectValue placeholder={t('forms:variable.placeholder')} />
+        </SelectTrigger>
+        <SelectContent>
+          {flow.variables?.map((variable, index) => {
+            return (
+              <SelectItem
+                key={`${variable.name}-${index}`}
+                value={variable.name}
+              >
+                {variable.name}
+              </SelectItem>
+            )
+          })}
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
+
+export default CheckVariablesContent

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

@@ -1,2 +1,3 @@
+export * from './check-variables'
 export * from './message'
 export * from './node-dialog'

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

@@ -67,7 +67,7 @@ export const NodeDialog = () => {
       <DialogTrigger asChild>
         <div className='!hidden'></div>
       </DialogTrigger>
-      <DialogContent className='max-w-3xl'>
+      <DialogContent className='max-w-xl'>
         <DialogHeader>
           <DialogTitle>{selectedNode?.data.label}</DialogTitle>
           <DialogDescription>{t('node_dialog.desc')}</DialogDescription>
@@ -83,28 +83,30 @@ export const NodeDialog = () => {
               placeholder={t('forms:name.placeholder')}
             />
           </div>
-          <div className='space-y-2'>
-            <Label>{t('forms:bot_lang.label')}</Label>
-            <Select
-              onValueChange={(value) => {
-                handleChangeLang(value)
-              }}
-              value={currentLang}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder={t('forms:bot_lang.placeholder')} />
-              </SelectTrigger>
-              <SelectContent>
-                {Object.keys(LANGS).map((lang) => {
-                  return (
-                    <SelectItem key={lang} value={lang}>
-                      {LANGS[lang]}
-                    </SelectItem>
-                  )
-                })}
-              </SelectContent>
-            </Select>
-          </div>
+          {selectedNode.data.action !== EActionTypes.CHECK_VARIABLES && (
+            <div className='space-y-2'>
+              <Label>{t('forms:bot_lang.label')}</Label>
+              <Select
+                onValueChange={(value) => {
+                  handleChangeLang(value)
+                }}
+                value={currentLang}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder={t('forms:bot_lang.placeholder')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {Object.keys(LANGS).map((lang) => {
+                    return (
+                      <SelectItem key={lang} value={lang}>
+                        {LANGS[lang]}
+                      </SelectItem>
+                    )
+                  })}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
           {selectedNode &&
             MAP_ACTION[
               selectedNode.data.action as unknown as EActionTypes

client/src/lib/schema/flow-input.ts

@@ -7,21 +7,35 @@ export const useFlowInputSchema = () => {
 
   const variableSchema = useVariableInputSchema()
 
-  return z.object({
-    name: z
-      .string({
-        required_error: t('name.errors.required'),
-      })
-      .min(1, {
-        message: t('name.errors.required'),
-      }),
-    edges: z.array(z.record(z.any())).optional(),
-    nodes: z.array(z.record(z.any())).optional(),
-    settings: z.array(z.record(z.any())).optional(),
-    variables: z.array(variableSchema).optional(),
-    flows: z.array(z.record(z.any())).optional(),
-    channelIds: z.array(z.string()).optional(),
-  })
+  return z
+    .object({
+      name: z
+        .string({
+          required_error: t('name.errors.required'),
+        })
+        .min(1, {
+          message: t('name.errors.required'),
+        }),
+      edges: z.array(z.record(z.any())).optional(),
+      nodes: z.array(z.record(z.any())).optional(),
+      settings: z.array(z.record(z.any())).optional(),
+      variables: z.array(variableSchema).optional(),
+      flows: z.array(z.record(z.any())).optional(),
+      channelIds: z.array(z.string()).optional(),
+    })
+    .superRefine(({ variables }, ctx) => {
+      if (!variables) return
+
+      const names = variables.map((variable) => variable.name)
+
+      if (new Set(names).size !== names.length) {
+        return ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: t('variable_name.errors.unique'),
+          path: ['variables'],
+        })
+      }
+    })
 }
 
 export type TFlowInput = z.infer<ReturnType<typeof useFlowInputSchema>>

client/src/lib/schema/variable-input.ts

@@ -18,6 +18,9 @@ export const useVariableInputSchema = () => {
         })
         .min(1, {
           message: t('variable_name.errors.required'),
+        })
+        .regex(/^[a-zA-Z][a-zA-Z\d_]*$/, {
+          message: t('variable_name.errors.invalid'),
         }),
       value: z.any().optional(),
       type: z

client/src/locales/en/forms.json

@@ -112,7 +112,9 @@
     "label": "Variable {{index}}",
     "placeholder": "Enter variable name",
     "errors": {
-      "required": "Please enter variable name."
+      "required": "Please enter variable name.",
+      "invalid": "Please enter a valid variable name.",
+      "unique": "Variable name must be unique."
     }
   },
   "variable_value": {
@@ -176,5 +178,12 @@
     "errors": {
       "required": "Please enter image URL."
     }
+  },
+  "variable": {
+    "label": "Variable",
+    "placeholder": "Select variable",
+    "errors": {
+      "required": "Please select variable."
+    }
   }
 }

client/src/locales/vi/forms.json

@@ -112,7 +112,9 @@
     "label": "Biến {{index}}",
     "placeholder": "Nhập tên biến",
     "errors": {
-      "required": "Vui lòng nhập tên biến."
+      "required": "Vui lòng nhập tên biến.",
+      "invalid": "Tên biến không hợp lệ.",
+      "unique": "Tên biến đã tồn tại."
     }
   },
   "variable_value": {
@@ -169,5 +171,12 @@
     "errors": {
       "required": "Vui lòng nhập phụ đề."
     }
+  },
+  "variable": {
+    "label": "Biến",
+    "placeholder": "Chọn biến",
+    "errors": {
+      "required": "Vui lòng chọn biến."
+    }
   }
 }