feat: add type obj, array to variables

Author: hi02102002

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

@@ -1,6 +1,13 @@
 import { useErrorsLngChange } from '@/hooks/use-errors-lng-change'
 import { TFlowInput, useFlowInputSchema } from '@/lib/schema/flow-input'
-import { isStringBoolean, isStringNumber, toBoolean } from '@/utils'
+import {
+  isStringArray,
+  isStringBoolean,
+  isStringNumber,
+  isStringObject,
+  toArray,
+  toBoolean,
+} from '@/utils'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { toNumber } from 'lodash'
 import { X } from 'lucide-react'
@@ -21,20 +28,74 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
+  Textarea,
 } from '../ui'
 
+const closeChars = new Map([
+  ['{', '}'],
+  ['[', ']'],
+  ['(', ')'],
+])
+
 type Props = {
   id?: string
   onSubmit?: (data: TFlowInput) => void
   defaultValues?: TFlowInput
 }
 
-const parseVariableValue = (value: string) => {
-  if (isStringNumber(value)) return toNumber(value)
-  if (isStringBoolean(value)) return toBoolean(value)
+const parseVariableValue = (value: string, type: string) => {
+  if (isStringNumber(value) && type === 'number') return toNumber(value)
+  if (isStringBoolean(value) && type === 'boolean') return toBoolean(value)
+
+  if (isStringArray(value) && type === 'array') return toArray(value)
+
+  if (isStringObject(value) && type === 'object') return JSON.parse(value)
+
   return value
 }
 
+const handleJsonChange = (
+  e: React.ChangeEvent<HTMLTextAreaElement>,
+  onChange: (value: any) => void,
+) => {
+  const cursorPosition = e.target.selectionStart
+
+  const val = [...e.target.value]
+
+  const char = val.slice(cursorPosition - 1, cursorPosition)[0]
+
+  const closeChar = closeChars.get(char)
+
+  if (closeChar) {
+    val.splice(cursorPosition, 0, closeChar)
+    e.target.value = val.join('')
+    e.target.selectionEnd = cursorPosition
+  }
+
+  onChange(e.target.value)
+}
+
+const handleJsonKeyDown = (
+  e: React.KeyboardEvent<HTMLTextAreaElement>,
+  onChange: (value: any) => void,
+) => {
+  if (e.key === 'Tab') {
+    e.preventDefault()
+
+    const cursorPosition = e.currentTarget.selectionStart
+    const value = e.currentTarget.value
+    e.currentTarget.value =
+      value.substring(0, cursorPosition) +
+      '  ' +
+      value.substring(cursorPosition, value.length)
+
+    e.currentTarget.selectionStart = cursorPosition + 2
+    e.currentTarget.selectionEnd = cursorPosition + 2
+
+    onChange(e.currentTarget.value)
+  }
+}
+
 export const VariablesSettingForm = ({
   id = 'variables-setting-form',
   onSubmit,
@@ -47,19 +108,22 @@ export const VariablesSettingForm = ({
     mode: 'onChange',
     defaultValues: {
       ...defaultValues,
+      variables: defaultValues?.variables?.map((variable) => ({
+        ...variable,
+        value: JSON.stringify(variable.value),
+      })),
     },
   })
+
+  const variablesWatch = form.watch('variables')
+
   const {
     fields: variables,
     append,
-    prepend,
     remove,
-    swap,
-    move,
-    insert,
   } = useFieldArray({
     control: form.control,
-    name: 'variables', // unique name for your Field Array
+    name: 'variables',
   })
 
   useErrorsLngChange(form)
@@ -70,7 +134,7 @@ export const VariablesSettingForm = ({
         ...data,
         variables: data.variables?.map((variable) => ({
           ...variable,
-          value: parseVariableValue(variable.value),
+          value: parseVariableValue(variable.value, variable.type as string),
         })),
       })
     }
@@ -123,11 +187,27 @@ export const VariablesSettingForm = ({
                         return (
                           <FormItem className='w-full'>
                             <FormControl>
-                              <Input
-                                {...field}
-                                autoComplete='off'
-                                placeholder={t('variable_value.placeholder')}
-                              />
+                              {variablesWatch?.[index]?.type === 'object' ? (
+                                <Textarea
+                                  {...field}
+                                  onChange={(e) => {
+                                    handleJsonChange(e, field.onChange)
+                                  }}
+                                  onKeyDown={(e) =>
+                                    handleJsonKeyDown(e, field.onChange)
+                                  }
+                                  autoComplete='off'
+                                  placeholder={t('variable_value.placeholder')}
+                                  className='hidden-scroll resize-none'
+                                  rows={5}
+                                />
+                              ) : (
+                                <Input
+                                  {...field}
+                                  autoComplete='off'
+                                  placeholder={t('variable_value.placeholder')}
+                                />
+                              )}
                             </FormControl>
                             <FormMessage />
                           </FormItem>
@@ -152,7 +232,13 @@ export const VariablesSettingForm = ({
                                 </SelectTrigger>
                               </FormControl>
                               <SelectContent>
-                                {['string', 'number', 'boolean'].map((type) => (
+                                {[
+                                  'string',
+                                  'number',
+                                  'boolean',
+                                  'array',
+                                  'object',
+                                ].map((type) => (
                                   <SelectItem key={type} value={type}>
                                     {type}
                                   </SelectItem>

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

@@ -1,4 +1,9 @@
-import { isStringBoolean, isStringNumber } from '@/utils'
+import {
+  isStringArray,
+  isStringBoolean,
+  isStringNumber,
+  isStringObject,
+} from '@/utils'
 import { useTranslation } from 'react-i18next'
 import * as z from 'zod'
 
@@ -16,7 +21,7 @@ export const useVariableInputSchema = () => {
         }),
       value: z.any().optional(),
       type: z
-        .enum(['string', 'number', 'boolean'])
+        .enum(['string', 'number', 'boolean', 'array', 'object'])
         .default('string')
         .optional(),
     })
@@ -38,6 +43,22 @@ export const useVariableInputSchema = () => {
           path: ['value'],
         })
       }
+
+      if (type === 'array' && !isStringArray(value)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: t('variable_value.errors.array'),
+          path: ['value'],
+        })
+      }
+
+      if (type === 'object' && !isStringObject(value)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: t('variable_value.errors.object'),
+          path: ['value'],
+        })
+      }
     })
 }
 

client/src/locales/en/forms.json

@@ -121,7 +121,9 @@
     "errors": {
       "required": "Please enter variable value.",
       "number": "Please enter a valid number.",
-      "boolean": "Please enter a valid boolean value."
+      "boolean": "Please enter a valid boolean value.",
+      "array": "Please enter a valid array value. (e.g. a,b,c)",
+      "object": "Please enter a valid object value. (e.g. {\"key\": \"value\"})"
     }
   },
   "variable_type": {

client/src/locales/vi/forms.json

@@ -119,7 +119,11 @@
     "label": "Giá trị {{index}}",
     "placeholder": "Nhập giá trị biến",
     "errors": {
-      "required": "Vui lòng nhập giá trị biến."
+      "required": "Vui lòng nhập giá trị biến.",
+      "number": "Vu lòng nhập một giá trị số.",
+      "boolean": "Vui lòng nhập một giá trị boolean.",
+      "array": "Vui lòng nhập một giá trị mảng. (e.g. a,b,c)",
+      "object": "Vui lòng nhập một giá trị object."
     }
   },
   "variable_type": {

client/src/utils/index.ts

@@ -121,3 +121,26 @@ export const toBoolean = (value: string | number) => {
 
   return Boolean(value)
 }
+
+export const isStringArray = (value: string) => {
+  return /^[^,]+(,[^,]+)+$/g.test(value)
+}
+
+export const toArray = (value: string) => {
+  if (!isStringArray(value)) throw new Error('Invalid array')
+
+  return value.split(',').map((v) => {
+    if (isStringNumber(v)) return Number(v)
+    if (isStringBoolean(v)) return toBoolean(v)
+    return v
+  })
+}
+
+export const isStringObject = (value: string) => {
+  try {
+    JSON.parse(value)
+    return true
+  } catch (error) {
+    return false
+  }
+}

server/src/i18n/i18n-node.ts

@@ -8,10 +8,6 @@ import type { Locales, Translations, TranslationFunctions } from './i18n-types'
 
 loadAllLocales()
 
-export const L: LocaleTranslationFunctions<
-  Locales,
-  Translations,
-  TranslationFunctions
-> = i18n()
+export const L: LocaleTranslationFunctions<Locales, Translations, TranslationFunctions> = i18n()
 
 export default L