🎨 Moved integrations in widgets directory

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

@@ -0,0 +1,122 @@
+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';
+
+export type WidgetEditModalInnerProps<
+  TIntegrationKey extends keyof IntegrationsType = keyof IntegrationsType
+> = {
+  integration: TIntegrationKey;
+  options: IntegrationOptions<TIntegrationKey> | undefined;
+  labels: IntegrationOptionLabels<IntegrationOptions<TIntegrationKey>>;
+};
+
+export const WidgetsEditModal = ({
+  context,
+  id,
+  innerProps,
+}: ContextModalProps<WidgetEditModalInnerProps>) => {
+  const translationKey = integrationModuleTranslationsMap.get(innerProps.integration);
+  const { t } = useTranslation([translationKey ?? '', 'common']);
+  const [moduleProperties, setModuleProperties] = useState(innerProps.options);
+  const items = Object.entries(moduleProperties ?? {}) as [
+    keyof typeof innerProps.options,
+    IntegrationOptionsValueType
+  ][];
+
+  const { name: configName } = useConfigContext();
+  const updateConfig = useConfigStore((x) => x.updateConfig);
+
+  if (!configName || !innerProps.options) return null;
+
+  const handleChange = (key: string, value: IntegrationOptionsValueType) => {
+    setModuleProperties((prev) => {
+      const copyOfPrev: any = { ...prev };
+      copyOfPrev[key] = value;
+      return copyOfPrev;
+    });
+  };
+
+  const handleSave = () => {
+    updateConfig(configName, (prev) => ({
+      ...prev,
+      integrations: {
+        ...prev.integrations,
+        [innerProps.integration]:
+          'properties' in (prev.integrations[innerProps.integration] ?? {})
+            ? {
+                ...prev.integrations[innerProps.integration],
+                properties: moduleProperties,
+              }
+            : prev.integrations[innerProps.integration],
+      },
+    }));
+    context.closeModal(id);
+  };
+
+  return (
+    <Stack>
+      {items.map(([key, value]) => (
+        <>
+          {typeof value === 'boolean' ? (
+            <Switch
+              label={t(innerProps.labels[key as keyof typeof innerProps.labels])}
+              checked={value}
+              onChange={(ev) => handleChange(key, ev.currentTarget.checked)}
+            />
+          ) : null}
+          {typeof value === 'string' ? (
+            <TextInput
+              label={t(innerProps.labels[key])}
+              value={value}
+              onChange={(ev) => handleChange(key, ev.currentTarget.value)}
+            />
+          ) : null}
+          {typeof value === 'object' && Array.isArray(value) ? (
+            <MultiSelect
+              data={['cpu', 'gpu', 'ram', 'storage', 'network']}
+              value={value}
+              onChange={(v) => handleChange(key, v as DashDotGraphType[])}
+            />
+          ) : null}
+        </>
+      ))}
+
+      <Group position="right">
+        <Button onClick={() => context.closeModal(id)} variant="light">
+          {t('common:actions.cancel')}
+        </Button>
+        <Button onClick={handleSave}>{t('common:actions.save')}</Button>
+      </Group>
+    </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

@@ -0,0 +1,79 @@
+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 { GenericTileMenu } from '../GenericTileMenu';
+import { WidgetsRemoveModalInnerProps } from './WidgetsRemoveModal';
+import {
+  WidgetEditModalInnerProps,
+  integrationModuleTranslationsMap,
+  IntegrationOptionLabels,
+  IntegrationOptions,
+} from './WidgetsEditModal';
+
+export type WidgetChangePositionModalInnerProps = {
+  integration: keyof IntegrationsType;
+  module: TileBaseType;
+};
+
+interface WidgetsMenuProps<TIntegrationKey extends keyof IntegrationsType> {
+  integration: TIntegrationKey;
+  module: TileBaseType | undefined;
+  options: IntegrationOptions<TIntegrationKey> | undefined;
+  labels: IntegrationOptionLabels<IntegrationOptions<TIntegrationKey>>;
+}
+
+export const WidgetsMenu = <TIntegrationKey extends keyof IntegrationsType>({
+  integration,
+  options,
+  labels,
+  module,
+}: WidgetsMenuProps<TIntegrationKey>) => {
+  const { t } = useTranslation(integrationModuleTranslationsMap.get(integration));
+
+  if (!module) return null;
+
+  const handleDeleteClick = () => {
+    openContextModalGeneric<WidgetsRemoveModalInnerProps>({
+      modal: 'integrationRemove',
+      title: <Title order={4}>{t('descriptor.remove.title')}</Title>,
+      innerProps: {
+        integration,
+      },
+    });
+  };
+
+  const handleChangeSizeClick = () => {
+    openContextModalGeneric<WidgetChangePositionModalInnerProps>({
+      modal: 'changeIntegrationPositionModal',
+      size: 'xl',
+      title: null,
+      innerProps: {
+        integration,
+        module,
+      },
+    });
+  };
+
+  const handleEditClick = () => {
+    openContextModalGeneric<WidgetEditModalInnerProps<TIntegrationKey>>({
+      modal: 'integrationOptions',
+      title: <Title order={4}>{t('descriptor.settings.title')}</Title>,
+      innerProps: {
+        integration,
+        options,
+        labels,
+      },
+    });
+  };
+
+  return (
+    <GenericTileMenu
+      handleClickEdit={handleEditClick}
+      handleClickChangePosition={handleChangeSizeClick}
+      handleClickDelete={handleDeleteClick}
+      displayEdit={options !== undefined}
+    />
+  );
+};

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

@@ -0,0 +1,35 @@
+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;
+};
+
+export const WidgetsRemoveModal = ({
+  context,
+  id,
+  innerProps,
+}: ContextModalProps<WidgetsRemoveModalInnerProps>) => {
+  const translationKey = integrationModuleTranslationsMap.get(innerProps.integration);
+  const { t } = useTranslation([translationKey ?? '', 'common']);
+  const handleDeletion = () => {
+    // TODO: remove tile
+    context.closeModal(id);
+  };
+
+  return (
+    <Stack>
+      <Text>{t('descriptor.remove.confirm')}</Text>
+      <Group position="right">
+        <Button onClick={() => context.closeModal(id)} variant="light">
+          {t('common:actions.cancel')}
+        </Button>
+        <Button onClick={() => handleDeletion()}>{t('common:actions.ok')}</Button>
+      </Group>
+    </Stack>
+  );
+};