From 779ed8dd0760d453dc69b145aad37e54a4aae9df Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Sun, 15 Jan 2023 11:54:15 +0100
Subject: [PATCH] feat(web/input): multi-select row

---
 web/src/features/dialog/InputDialog.tsx       |  6 +-
 .../dialog/components/fields/select.tsx       | 55 +++++++++++++------
 web/src/interfaces/dialog.ts                  |  4 +-
 3 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/web/src/features/dialog/InputDialog.tsx b/web/src/features/dialog/InputDialog.tsx
index 9bcc329..62b8416 100644
--- a/web/src/features/dialog/InputDialog.tsx
+++ b/web/src/features/dialog/InputDialog.tsx
@@ -73,7 +73,7 @@ const InputDialog: React.FC = () => {
         } || { value: null }
       );
       // Backwards compat with new Select data type
-      if (row.type === 'select') {
+      if (row.type === 'select' || row.type === 'multi-select') {
         row.options = row.options.map((option) =>
           !option.label ? { ...option, label: option.value } : option
         ) as Array<OptionValue>;
@@ -140,7 +140,9 @@ const InputDialog: React.FC = () => {
                       index={index}
                     />
                   )}
-                  {row.type === 'select' && <SelectField row={row} index={index} control={form.control} />}
+                  {(row.type === 'select' || row.type === 'multi-select') && (
+                    <SelectField row={row} index={index} control={form.control} />
+                  )}
                   {row.type === 'number' && <NumberField control={form.control} row={row} index={index} />}
                   {row.type === 'slider' && <SliderField control={form.control} row={row} index={index} />}
                   {row.type === 'color' && <ColorField control={form.control} row={row} index={index} />}
diff --git a/web/src/features/dialog/components/fields/select.tsx b/web/src/features/dialog/components/fields/select.tsx
index d910bc7..f4d5316 100644
--- a/web/src/features/dialog/components/fields/select.tsx
+++ b/web/src/features/dialog/components/fields/select.tsx
@@ -1,4 +1,4 @@
-import { Select } from '@mantine/core';
+import { MultiSelect, Select } from '@mantine/core';
 import { ISelect } from '../../../../interfaces/dialog';
 import { Control, FieldValues, useController, UseFormRegisterReturn, UseFormSetValue } from 'react-hook-form';
 import { FormValues } from '../../InputDialog';
@@ -14,25 +14,48 @@ const SelectField: React.FC<Props> = (props) => {
   const controller = useController({
     name: `test.${props.index}.value`,
     control: props.control,
-    defaultValue: props.row.default || props.row.options[0].value,
+    defaultValue: props.row.default || props.row.type !== 'multi-select' ? props.row.options[0].value : undefined,
     rules: { required: props.row.required },
   });
 
   return (
-    <Select
-      data={props.row.options}
-      value={controller.field.value}
-      name={controller.field.name}
-      ref={controller.field.ref}
-      onBlur={controller.field.onBlur}
-      onChange={controller.field.onChange}
-      disabled={props.row.disabled}
-      label={props.row.label}
-      description={props.row.description}
-      withAsterisk={props.row.required}
-      clearable={props.row.clearable}
-      icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
-    />
+    <>
+      {props.row.type === 'select' ? (
+        <Select
+          data={props.row.options}
+          value={controller.field.value}
+          name={controller.field.name}
+          ref={controller.field.ref}
+          onBlur={controller.field.onBlur}
+          onChange={controller.field.onChange}
+          disabled={props.row.disabled}
+          label={props.row.label}
+          description={props.row.description}
+          withAsterisk={props.row.required}
+          clearable={props.row.clearable}
+          icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
+        />
+      ) : (
+        <>
+          {props.row.type === 'multi-select' && (
+            <MultiSelect
+              data={props.row.options}
+              value={controller.field.value}
+              name={controller.field.name}
+              ref={controller.field.ref}
+              onBlur={controller.field.onBlur}
+              onChange={controller.field.onChange}
+              disabled={props.row.disabled}
+              label={props.row.label}
+              description={props.row.description}
+              withAsterisk={props.row.required}
+              clearable={props.row.clearable}
+              icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
+            />
+          )}
+        </>
+      )}
+    </>
   );
 };
 
diff --git a/web/src/interfaces/dialog.ts b/web/src/interfaces/dialog.ts
index ef268da..9882499 100644
--- a/web/src/interfaces/dialog.ts
+++ b/web/src/interfaces/dialog.ts
@@ -23,9 +23,9 @@ export interface ICheckbox {
 
 export type OptionValue = { value: string; label?: string };
 export interface ISelect {
-  type: 'select';
+  type: 'select' | 'multi-select';
   label: string;
-  default?: string;
+  default?: string | string[];
   options: Array<OptionValue>;
   disabled?: boolean;
   description?: string;