From 6a3336bd5a7369a5734b3e2c1ac3cd20b1c46c2b Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Wed, 11 Jan 2023 08:43:28 +0900
Subject: [PATCH] Add Select for option types

---
 .../Tiles/Widgets/WidgetsEditModal.tsx        | 29 +++++++++++--------
 src/widgets/widgets.ts                        | 16 +++++++++-
 2 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
index b5714c805..16bbb7457 100644
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
@@ -9,6 +9,7 @@ import {
   Text,
   NumberInput,
   Slider,
+  Select,
 } from '@mantine/core';
 import { ContextModalProps } from '@mantine/modals';
 import { IconAlertTriangle } from '@tabler/icons';
@@ -101,15 +102,7 @@ export const WidgetsEditModal = ({
             </Alert>
           );
         }
-        return WidgetOptionTypeSwitch(
-          option,
-          index,
-          t,
-          key,
-          value,
-          handleChange,
-          getMutliselectData
-        );
+        return WidgetOptionTypeSwitch(option, index, t, key, value, handleChange);
       })}
       <Group position="right">
         <Button onClick={() => context.closeModal(id)} variant="light">
@@ -130,8 +123,7 @@ function WidgetOptionTypeSwitch(
   t: any,
   key: string,
   value: string | number | boolean | string[],
-  handleChange: (key: string, value: IntegrationOptionsValueType) => void,
-  getMutliselectData: (option: string) => any
+  handleChange: (key: string, value: IntegrationOptionsValueType) => void
 ) {
   const { primaryColor, secondaryColor } = useColorTheme();
   switch (option.type) {
@@ -159,9 +151,22 @@ function WidgetOptionTypeSwitch(
         <MultiSelect
           color={primaryColor}
           key={`${option.type}-${index}`}
-          data={getMutliselectData(key)}
+          data={option.data}
           label={t(`descriptor.settings.${key}.label`)}
           value={value as string[]}
+          defaultValue={option.defaultValue}
+          onChange={(v) => handleChange(key, v)}
+        />
+      );
+    case 'select':
+      return (
+        <Select
+          color={primaryColor}
+          key={`${option.type}-${index}`}
+          defaultValue={option.defaultValue}
+          data={option.data}
+          label={t(`descriptor.settings.${key}.label`)}
+          value={value as string}
           onChange={(v) => handleChange(key, v)}
         />
       );
diff --git a/src/widgets/widgets.ts b/src/widgets/widgets.ts
index 10ef46858..4ef0453d0 100644
--- a/src/widgets/widgets.ts
+++ b/src/widgets/widgets.ts
@@ -34,13 +34,27 @@ export type IWidgetOptionValue =
   | ISwitchOptionValue
   | ITextInputOptionValue
   | ISliderInputOptionValue
+  | ISelectOptionValue
   | INumberInputOptionValue;
 
+// Interface for data type
+interface DataType {
+  label: string
+  value: string
+}
+
 // will show a multi-select with specified data
 export type IMultiSelectOptionValue = {
   type: 'multi-select';
   defaultValue: string[];
-  data: string[];
+  data: DataType[];
+};
+
+// will show a multi-select with specified data
+export type ISelectOptionValue = {
+  type: 'select';
+  defaultValue: string;
+  data: DataType[];
 };
 
 // will show a switch