Update default config

src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx

@@ -3,6 +3,7 @@ import { ContextModalProps } from '@mantine/modals';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 import Widgets from '../../../../widgets';
+import type { IWidgetOptionValue } from '../../../../widgets/widgets';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { IWidget } from '../../../../widgets/widgets';
@@ -23,6 +24,8 @@ export const WidgetsEditModal = ({
   const [moduleProperties, setModuleProperties] = useState(innerProps.options);
   const items = Object.entries(moduleProperties ?? {}) as [string, IntegrationOptionsValueType][];
 
+  // Find the Key in the "Widgets" Object that matches the widgetId
+  const currentWidgetDefinition = Widgets[innerProps.widgetId as keyof typeof Widgets];
   const { name: configName } = useConfigContext();
   const updateConfig = useConfigStore((x) => x.updateConfig);
 
@@ -63,33 +66,38 @@ export const WidgetsEditModal = ({
 
   return (
     <Stack>
-      {items.map(([key, value]) => (
-        <>
-          {typeof value === 'boolean' ? (
-            <Switch
-              label={t(`descriptor.settings.${key}.label`)}
-              checked={value}
-              onChange={(ev) => handleChange(key, ev.currentTarget.checked)}
-            />
-          ) : null}
-          {typeof value === 'string' ? (
-            <TextInput
-              label={t(`descriptor.settings.${key}.label`)}
-              value={value}
-              onChange={(ev) => handleChange(key, ev.currentTarget.value)}
-            />
-          ) : null}
-          {typeof value === 'object' && Array.isArray(value) ? (
-            <MultiSelect
-              data={getMutliselectData(key)}
-              label={t(`descriptor.settings.${key}.label`)}
-              value={value}
-              onChange={(v) => handleChange(key, v)}
-            />
-          ) : null}
-        </>
-      ))}
-
+      {items.map(([key, value]) => {
+        const option = (currentWidgetDefinition as any).options[key] as IWidgetOptionValue;
+        switch (option.type) {
+          case 'switch':
+            return (
+              <Switch
+                label={t(`descriptor.settings.${key}.label`)}
+                checked={value as boolean}
+                onChange={(ev) => handleChange(key, ev.currentTarget.checked)}
+              />
+            );
+          case 'text':
+            return (
+              <TextInput
+                label={t(`descriptor.settings.${key}.label`)}
+                value={value as string}
+                onChange={(ev) => handleChange(key, ev.currentTarget.value)}
+              />
+            );
+          case 'multi-select':
+            return (
+              <MultiSelect
+                data={getMutliselectData(key)}
+                label={t(`descriptor.settings.${key}.label`)}
+                value={value as string[]}
+                onChange={(v) => handleChange(key, v)}
+              />
+            );
+          default:
+            return null;
+        }
+      })}
       <Group position="right">
         <Button onClick={() => context.closeModal(id)} variant="light">
           {t('common:cancel')}
@@ -99,3 +107,41 @@ export const WidgetsEditModal = ({
     </Stack>
   );
 };
+
+//     <Stack>
+//       {items.map(([key, value]) => (
+//         <>
+//           {typeof value === 'boolean' ? (
+//             <Switch
+//               label={t(`descriptor.settings.${key}.label`)}
+//               checked={value}
+//               onChange={(ev) => handleChange(key, ev.currentTarget.checked)}
+//             />
+//           ) : null}
+//           {typeof value === 'string' ? (
+//             <TextInput
+//               label={t(`descriptor.settings.${key}.label`)}
+//               value={value}
+//               onChange={(ev) => handleChange(key, ev.currentTarget.value)}
+//             />
+//           ) : null}
+//           {typeof value === 'object' && Array.isArray(value) ? (
+// <MultiSelect
+//   data={getMutliselectData(key)}
+//   label={t(`descriptor.settings.${key}.label`)}
+//   value={value}
+//   onChange={(v) => handleChange(key, v)}
+// />
+//           ) : null}
+//         </>
+//       ))}
+
+//       <Group position="right">
+//         <Button onClick={() => context.closeModal(id)} variant="light">
+//           {t('common:cancel')}
+//         </Button>
+//         <Button onClick={handleSave}>{t('common:save')}</Button>
+//       </Group>
+//     </Stack>
+//   );
+// };