✨ Migrated widget modals from integration modals

src/components/Dashboard/Modals/ChangePosition/ChangeIntegrationPositionModal.tsx

@@ -2,10 +2,10 @@ import { SelectItem } from '@mantine/core';
 import { closeModal, ContextModalProps } from '@mantine/modals';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
-import { IntegrationsType } from '../../../../types/integration';
 import { WidgetChangePositionModalInnerProps } from '../../Tiles/Widgets/WidgetsMenu';
 import { Tiles } from '../../Tiles/tilesDefinitions';
 import { ChangePositionModal } from './ChangePositionModal';
+import widgets from '../../../../widgets';
 
 export const ChangeIntegrationPositionModal = ({
   context,
@@ -63,20 +63,22 @@ export const ChangeIntegrationPositionModal = ({
   );
 };
 
-const useWidthData = (integration: keyof IntegrationsType): SelectItem[] => {
-  const tileDefinitions = Tiles[integration];
-  const offset = tileDefinitions.minWidth ?? 2;
-  const length = (tileDefinitions.maxWidth ?? 12) - offset;
+const useWidthData = (integration: string): SelectItem[] => {
+  const currentWidget = widgets[integration as keyof typeof widgets];
+  if (!currentWidget) return [];
+  const offset = currentWidget.gridstack.minWidth ?? 2;
+  const length = (currentWidget.gridstack.maxWidth ?? 12) - offset;
   return Array.from({ length }, (_, i) => i + offset).map((n) => ({
     value: n.toString(),
     label: `${64 * n}px`,
   }));
 };
 
-const useHeightData = (integration: keyof IntegrationsType): SelectItem[] => {
-  const tileDefinitions = Tiles[integration];
-  const offset = tileDefinitions.minHeight ?? 2;
-  const length = (tileDefinitions.maxHeight ?? 12) - offset;
+const useHeightData = (integration: string): SelectItem[] => {
+  const currentWidget = widgets[integration as keyof typeof widgets];
+  if (!currentWidget) return [];
+  const offset = currentWidget.gridstack.minHeight ?? 2;
+  const length = (currentWidget.gridstack.maxHeight ?? 12) - offset;
   return Array.from({ length }, (_, i) => i + offset).map((n) => ({
     value: n.toString(),
     label: `${64 * n}px`,

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

@@ -1,31 +1,27 @@
+import Widgets from '../../../../widgets';
 import { Button, Group, MultiSelect, Stack, Switch, TextInput } from '@mantine/core';
 import { ContextModalProps } from '@mantine/modals';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
-import { DashDotGraphType, IntegrationsType } from '../../../../types/integration';
+import { IWidget } from '../../../../widgets/widgets';
 
-export type WidgetEditModalInnerProps<
-  TIntegrationKey extends keyof IntegrationsType = keyof IntegrationsType
-> = {
-  integration: TIntegrationKey;
-  options: IntegrationOptions<TIntegrationKey> | undefined;
-  labels: IntegrationOptionLabels<IntegrationOptions<TIntegrationKey>>;
+export type WidgetEditModalInnerProps = {
+  integration: string;
+  options: IWidget<string, any>['properties'];
 };
 
+type IntegrationOptionsValueType = IWidget<string, any>['properties'][string];
+
 export const WidgetsEditModal = ({
   context,
   id,
   innerProps,
 }: ContextModalProps<WidgetEditModalInnerProps>) => {
-  const translationKey = integrationModuleTranslationsMap.get(innerProps.integration);
-  const { t } = useTranslation([translationKey ?? '', 'common']);
+  const { t } = useTranslation([`modules/${innerProps.integration}`, 'common']);
   const [moduleProperties, setModuleProperties] = useState(innerProps.options);
-  const items = Object.entries(moduleProperties ?? {}) as [
-    keyof typeof innerProps.options,
-    IntegrationOptionsValueType
-  ][];
+  const items = Object.entries(moduleProperties ?? {}) as [string, IntegrationOptionsValueType][];
 
   const { name: configName } = useConfigContext();
   const updateConfig = useConfigStore((x) => x.updateConfig);
@@ -40,6 +36,14 @@ export const WidgetsEditModal = ({
     });
   };
 
+  const getMutliselectData = (option: string) => {
+    const currentWidgetDefinition = Widgets[innerProps.integration as keyof typeof Widgets];
+    if (!Widgets) return [];
+
+    const options = currentWidgetDefinition.options as any;
+    return options[option]?.data ?? [];
+  };
+
   const handleSave = () => {
     updateConfig(configName, (prev) => ({
       ...prev,
@@ -63,23 +67,24 @@ export const WidgetsEditModal = ({
         <>
           {typeof value === 'boolean' ? (
             <Switch
-              label={t(innerProps.labels[key as keyof typeof innerProps.labels])}
+              label={t(`descriptor.settings.${key}.label`)}
               checked={value}
               onChange={(ev) => handleChange(key, ev.currentTarget.checked)}
             />
           ) : null}
           {typeof value === 'string' ? (
             <TextInput
-              label={t(innerProps.labels[key])}
+              label={t(`descriptor.settings.${key}.label`)}
               value={value}
               onChange={(ev) => handleChange(key, ev.currentTarget.value)}
             />
           ) : null}
           {typeof value === 'object' && Array.isArray(value) ? (
             <MultiSelect
-              data={['cpu', 'gpu', 'ram', 'storage', 'network']}
+              data={getMutliselectData(key)}
+              label={t(`descriptor.settings.${key}.label`)}
               value={value}
-              onChange={(v) => handleChange(key, v as DashDotGraphType[])}
+              onChange={(v) => handleChange(key, v)}
             />
           ) : null}
         </>
@@ -94,29 +99,3 @@ export const WidgetsEditModal = ({
     </Stack>
   );
 };
-
-type PropertiesOf<
-  TKey extends keyof IntegrationsType,
-  T extends IntegrationsType[TKey]
-> = T extends { properties: unknown } ? T['properties'] : {};
-
-export type IntegrationOptions<TKey extends keyof IntegrationsType> = PropertiesOf<
-  TKey,
-  IntegrationsType[TKey]
->;
-
-export type IntegrationOptionLabels<TIntegrationOptions> = {
-  [key in keyof TIntegrationOptions]: string;
-};
-
-type IntegrationOptionsValueType = boolean | string | DashDotGraphType[];
-
-export const integrationModuleTranslationsMap = new Map<keyof IntegrationsType, string>([
-  ['calendar', 'modules/calendar'],
-  ['clock', 'modules/date'],
-  ['weather', 'modules/weather'],
-  ['dashDot', 'modules/dashdot'],
-  ['bitTorrent', 'modules/torrents-status'],
-  ['useNet', 'modules/usenet'],
-  ['torrentNetworkTraffic', 'modules/dlspeed'],
-]);

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

@@ -1,36 +1,23 @@
 import { Title } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import { openContextModalGeneric } from '../../../../tools/mantineModalManagerExtensions';
-import { IntegrationsType } from '../../../../types/integration';
-import { TileBaseType } from '../../../../types/tile';
+import { IWidget } from '../../../../widgets/widgets';
 import { GenericTileMenu } from '../GenericTileMenu';
+import { WidgetEditModalInnerProps } from './WidgetsEditModal';
 import { WidgetsRemoveModalInnerProps } from './WidgetsRemoveModal';
-import {
-  WidgetEditModalInnerProps,
-  integrationModuleTranslationsMap,
-  IntegrationOptionLabels,
-  IntegrationOptions,
-} from './WidgetsEditModal';
 
 export type WidgetChangePositionModalInnerProps = {
-  integration: keyof IntegrationsType;
-  module: TileBaseType;
+  integration: string;
+  module: IWidget<string, any>;
 };
 
-interface WidgetsMenuProps<TIntegrationKey extends keyof IntegrationsType> {
-  integration: TIntegrationKey;
-  module: TileBaseType | undefined;
-  options: IntegrationOptions<TIntegrationKey> | undefined;
-  labels: IntegrationOptionLabels<IntegrationOptions<TIntegrationKey>>;
+interface WidgetsMenuProps {
+  integration: string;
+  module: IWidget<string, any> | undefined;
 }
 
-export const WidgetsMenu = <TIntegrationKey extends keyof IntegrationsType>({
-  integration,
-  options,
-  labels,
-  module,
-}: WidgetsMenuProps<TIntegrationKey>) => {
-  const { t } = useTranslation(integrationModuleTranslationsMap.get(integration));
+export const WidgetsMenu = ({ integration, module }: WidgetsMenuProps) => {
+  const { t } = useTranslation(`modules/${integration}`);
 
   if (!module) return null;
 
@@ -57,13 +44,12 @@ export const WidgetsMenu = <TIntegrationKey extends keyof IntegrationsType>({
   };
 
   const handleEditClick = () => {
-    openContextModalGeneric<WidgetEditModalInnerProps<TIntegrationKey>>({
+    openContextModalGeneric<WidgetEditModalInnerProps>({
       modal: 'integrationOptions',
       title: <Title order={4}>{t('descriptor.settings.title')}</Title>,
       innerProps: {
         integration,
-        options,
-        labels,
+        options: module.properties,
       },
     });
   };
@@ -73,7 +59,7 @@ export const WidgetsMenu = <TIntegrationKey extends keyof IntegrationsType>({
       handleClickEdit={handleEditClick}
       handleClickChangePosition={handleChangeSizeClick}
       handleClickDelete={handleDeleteClick}
-      displayEdit={options !== undefined}
+      displayEdit={module.properties !== undefined}
     />
   );
 };

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

@@ -2,11 +2,9 @@ import React from 'react';
 import { Button, Group, Stack, Text } from '@mantine/core';
 import { ContextModalProps } from '@mantine/modals';
 import { useTranslation } from 'next-i18next';
-import { IntegrationsType } from '../../../../types/integration';
-import { integrationModuleTranslationsMap } from './WidgetsEditModal';
 
 export type WidgetsRemoveModalInnerProps = {
-  integration: keyof IntegrationsType;
+  integration: string;
 };
 
 export const WidgetsRemoveModal = ({
@@ -14,8 +12,7 @@ export const WidgetsRemoveModal = ({
   id,
   innerProps,
 }: ContextModalProps<WidgetsRemoveModalInnerProps>) => {
-  const translationKey = integrationModuleTranslationsMap.get(innerProps.integration);
-  const { t } = useTranslation([translationKey ?? '', 'common']);
+  const { t } = useTranslation([`modules/${innerProps.integration}`, 'common']);
   const handleDeletion = () => {
     // TODO: remove tile
     context.closeModal(id);

src/components/Dashboard/Tiles/tilesDefinitions.tsx

@@ -1,5 +1,5 @@
 import calendarDefinition from '../../../widgets/calendar/CalendarTile';
-import clockDefinition from '../../../widgets/clock/ClockTile';
+import clockDefinition from '../../../widgets/date/DateTile';
 import dashDotDefinition from '../../../widgets/dashDot/DashDotTile';
 import useNetDefinition from '../../../widgets/useNet/UseNetTile';
 import weatherDefinition from '../../../widgets/weather/WeatherTile';