feat(web/input): required fields

web/src/features/dialog/InputDialog.tsx

@@ -61,6 +61,7 @@ const InputDialog: React.FC = () => {
     setVisible(false);
     const values: any[] = [];
     Object.values(data.test).forEach((obj: { value: any }) => values.push(obj.value));
+    console.log(values);
     fetchNui('inputData', values);
     await new Promise((resolve) => setTimeout(resolve, 200));
     form.reset();
@@ -89,10 +90,18 @@ const InputDialog: React.FC = () => {
               return (
                 <React.Fragment key={item.id}>
                   {row.type === 'input' && (
-                    <InputField register={form.register(`test.${index}.value`)} row={row} index={index} />
+                    <InputField
+                      register={form.register(`test.${index}.value`, { required: row.required })}
+                      row={row}
+                      index={index}
+                    />
                   )}
                   {row.type === 'checkbox' && (
-                    <CheckboxField register={form.register(`test.${index}.value`)} row={row} index={index} />
+                    <CheckboxField
+                      register={form.register(`test.${index}.value`, { required: row.required })}
+                      row={row}
+                      index={index}
+                    />
                   )}
                   {row.type === 'select' && <SelectField row={row} index={index} control={form.control} />}
                   {row.type === 'number' && <NumberField control={form.control} row={row} index={index} />}
@@ -105,7 +114,7 @@ const InputDialog: React.FC = () => {
               <Button uppercase variant="default" onClick={handleClose} mr={3}>
                 {locale.ui.cancel}
               </Button>
-              <Button uppercase variant="light" onClick={handleClose} type="submit">
+              <Button uppercase variant="light" type="submit">
                 {locale.ui.confirm}
               </Button>
             </Group>

web/src/features/dialog/components/fields/checkbox.tsx

@@ -11,7 +11,13 @@ interface Props {
 
 const CheckboxField: React.FC<Props> = (props) => {
   return (
-    <Checkbox {...props.register} sx={{ display: 'flex' }} label={props.row.label} defaultChecked={props.row.checked} />
+    <Checkbox
+      {...props.register}
+      sx={{ display: 'flex' }}
+      required={props.row.required}
+      label={props.row.label}
+      defaultChecked={props.row.checked}
+    />
   );
 };
 

web/src/features/dialog/components/fields/color.tsx

@@ -14,6 +14,7 @@ const ColorField: React.FC<Props> = (props) => {
     name: `test.${props.index}.value`,
     control: props.control,
     defaultValue: props.row.default,
+    rules: { required: props.row.required },
   });
 
   return (
@@ -29,6 +30,7 @@ const ColorField: React.FC<Props> = (props) => {
       disabled={props.row.disabled}
       defaultValue={props.row.default}
       format={props.row.format}
+      withAsterisk={props.row.required}
     />
   );
 };

web/src/features/dialog/components/fields/input.tsx

@@ -30,6 +30,7 @@ const InputField: React.FC<Props> = (props) => {
           icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
           placeholder={props.row.placeholder}
           disabled={props.row.disabled}
+          withAsterisk={props.row.required}
         />
       ) : (
         <PasswordInput
@@ -40,6 +41,7 @@ const InputField: React.FC<Props> = (props) => {
           icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
           placeholder={props.row.placeholder}
           disabled={props.row.disabled}
+          withAsterisk={props.row.required}
           visibilityToggleIcon={({ reveal, size }) => (
             <FontAwesomeIcon
               icon={reveal ? 'eye-slash' : 'eye'}

web/src/features/dialog/components/fields/number.tsx

@@ -16,6 +16,7 @@ const NumberField: React.FC<Props> = (props) => {
     name: `test.${props.index}.value`,
     control: props.control,
     defaultValue: props.row.default,
+    rules: { required: props.row.required },
   });
 
   return (
@@ -32,6 +33,7 @@ const NumberField: React.FC<Props> = (props) => {
       max={props.row.max}
       disabled={props.row.disabled}
       icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
+      withAsterisk={props.row.required}
     />
   );
 };

web/src/features/dialog/components/fields/select.tsx

@@ -15,6 +15,7 @@ const SelectField: React.FC<Props> = (props) => {
     name: `test.${props.index}.value`,
     control: props.control,
     defaultValue: props.row.default,
+    rules: { required: props.row.required },
   });
 
   return (
@@ -28,6 +29,7 @@ const SelectField: React.FC<Props> = (props) => {
       disabled={props.row.disabled}
       label={props.row.label}
       description={props.row.description}
+      withAsterisk={props.row.required}
     />
   );
 };

web/src/interfaces/dialog.ts

@@ -10,6 +10,7 @@ export interface IInput {
   icon?: IconProp;
   disabled?: boolean;
   description?: string;
+  required?: boolean;
 }
 
 export interface ICheckbox {
@@ -18,6 +19,7 @@ export interface ICheckbox {
   checked?: boolean;
   disabled?: boolean;
   description?: string;
+  required?: boolean;
 }
 
 export interface ISelect {
@@ -27,6 +29,7 @@ export interface ISelect {
   options: Array<SelectItem>;
   disabled?: boolean;
   description?: string;
+  required?: boolean;
 }
 
 export interface INumber {
@@ -39,6 +42,7 @@ export interface INumber {
   max?: number;
   disabled?: boolean;
   description?: string;
+  required?: boolean;
 }
 
 export interface ISlider {
@@ -59,4 +63,5 @@ export interface IColorInput {
   disabled?: boolean;
   description?: string;
   format?: 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla';
+  required?: boolean;
 }