fix/checkbox and limit name size (#103)

* fix(checkbox): logic * fix(form): limit
RomainDreidemy · Sep 7, 2023 · d35e83b · d35e83b
1 parent f0b16c9
commit d35e83b
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 21 deletions.
diff --git a/front/src/forms/editor.structure.ts b/front/src/forms/editor.structure.ts
@@ -13,6 +13,7 @@ export type EditorStructure = {
 
 export enum TypeList {
   TEXT = 'text',
+  CHECKBOX = 'checkbox',
   NUMBER = 'number',
   CUSTOM = 'custom',
 }
@@ -23,8 +24,10 @@ export interface EditorForm {
   label: string
   key: string
   type: TypeList
-  validator?: any
   component: any
+
+  validator?: any
+  maxLength?: number
 }
 
 export const LINKER_STRUCTURE: EditorForm[] = [
@@ -95,7 +98,8 @@ export const DRAWER_TYPE_STRUCTURES: EditorStructure = {
       key: 'name',
       type: TypeList.TEXT,
       component: Input,
-      validator: string().nullable()
+      validator: string().nullable(),
+      maxLength: 15
     },
     {
       label: 'Docker Image',
@@ -125,13 +129,6 @@ export const DRAWER_TYPE_STRUCTURES: EditorStructure = {
       component: TextArea,
       validator: string().nullable()
     },
-    {
-      label: 'External',
-      key: 'isExternal',
-      type: TypeList.TEXT,
-      component: Checkbox,
-      validator: boolean().nullable()
-    },
     {
       label: 'Env variables',
       type: TypeList.CUSTOM,
@@ -157,7 +154,8 @@ export const DRAWER_TYPE_STRUCTURES: EditorStructure = {
       key: 'name',
       type: TypeList.TEXT,
       component: Input,
-      validator: string().nullable()
+      validator: string().nullable(),
+      maxLength: 15
     },
     {
       label: 'Description',
@@ -169,7 +167,7 @@ export const DRAWER_TYPE_STRUCTURES: EditorStructure = {
     {
       label: 'External',
       key: 'isExternal',
-      type: TypeList.TEXT,
+      type: TypeList.CHECKBOX,
       component: Checkbox,
       validator: boolean().nullable()
     },
@@ -187,7 +185,8 @@ export const DRAWER_TYPE_STRUCTURES: EditorStructure = {
       key: 'name',
       type: TypeList.TEXT,
       component: Input,
-      validator: string().nullable()
+      validator: string().nullable(),
+      maxLength: 15
     },
     {
       label: 'Description',

diff --git a/front/src/hooks/useForm.ts b/front/src/hooks/useForm.ts
@@ -13,10 +13,17 @@ export interface IForm<T> {
 const useForm = <T>(initialForm: T, formStructure: EditorForm[]): IForm<T> => {
   const [form, setForm] = useState<T>(initialForm)
 
+  const convertByType = (event: TOnChange): number | string | boolean => {
+    const { type, value, checked }: HTMLInputElement = event.target
+
+    if (type === TypeList.NUMBER) return +value
+    if (type === TypeList.CHECKBOX) return checked
+
+    return value
+  }
+
   const onChange: (event: TOnChange) => void = (event: TOnChange): void => {
-    const value = event.target.type !== TypeList.NUMBER
-      ? event.target.value
-      : +event.target.value
+    const value = convertByType(event)
 
     setForm({ ...form, [event.target.name]: value })
   }

diff --git a/front/src/interfaces/Forms/Checkbox.interface.ts b/front/src/interfaces/Forms/Checkbox.interface.ts
@@ -3,7 +3,7 @@ import type React from 'react'
 export interface CheckboxProps {
   label?: string
   name?: string
-  value?: string
+  value?: boolean
   className?: string
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
   onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void

diff --git a/front/src/interfaces/Forms/Input.interface.ts b/front/src/interfaces/Forms/Input.interface.ts
@@ -8,8 +8,9 @@ export interface InputProps {
   value?: string
   className?: string
   required?: boolean
+  maxLength?: number
   onChange?: (e: TOnChange) => void
   onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
 }
 
-export type TOnChange = React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+export type TOnChange = React.ChangeEvent<HTMLInputElement & HTMLTextAreaElement>
diff --git a/front/src/views/atoms/forms/Checkbox.atom.tsx b/front/src/views/atoms/forms/Checkbox.atom.tsx
@@ -1,15 +1,26 @@
 import React from 'react'
 import { type CheckboxProps } from '../../../interfaces/Forms/Checkbox.interface'
+import useToggle from '../../../hooks/useToggle'
+
+const Checkbox = ({ label, name, value = false, className = '', onChange, onKeyDown }: CheckboxProps): JSX.Element => {
+  const [checked, toggle] = useToggle(value)
+
+  const onUpdate = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    toggle()
+
+    if (onChange == null) return
+
+    onChange(event)
+  }
 
-const Checkbox = ({ label, name, value, className = '', onChange, onKeyDown }: CheckboxProps): JSX.Element => {
   return (
         <label className={`label cursor-pointer ${className}`} style={{ justifyContent: 'unset', gap: '10px' }}>
             <input
                 type="checkbox"
                 name={name}
-                value={value}
+                checked={checked}
                 className={'checkbox'}
-                onChange={onChange}
+                onChange={onUpdate}
                 onKeyDown={onKeyDown}
             />
             <span className="label-text">

diff --git a/front/src/views/atoms/forms/Input.atom.tsx b/front/src/views/atoms/forms/Input.atom.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { type InputProps } from '../../../interfaces/Forms/Input.interface'
 
-const Input = ({ label, type, placeholder, name, value, className = '', onChange, onKeyDown, required = false }: InputProps): JSX.Element => {
+const Input = ({ label, type, placeholder, name, value, className = '', onChange, onKeyDown, maxLength, required = false }: InputProps): JSX.Element => {
   return (
         <>
             {(label != null) && <label className="font-semibold text-sm text-gray-600 pb-1 block">{label}</label> }
@@ -12,6 +12,7 @@ const Input = ({ label, type, placeholder, name, value, className = '', onChange
                 value={value}
                 onChange={onChange}
                 onKeyDown={onKeyDown}
+                maxLength={maxLength}
                 className={`input input-bordered w-full max-w-xs mt-1 ${className}`}
                 required={required}
             />

diff --git a/front/src/views/organisms/Editor.organism.tsx b/front/src/views/organisms/Editor.organism.tsx
@@ -38,6 +38,7 @@ const EditorOrganism = ({ entity, stackId, useEditor }: {
                 label={field.label}
                 type={field.type}
                 name={field.key}
+                maxLength={field.maxLength}
                 entity={entity}
                 value={value}
                 onChange={onChange}