diff --git a/src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx b/src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx index 241503adb..439460cfa 100644 --- a/src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx +++ b/src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx @@ -28,7 +28,7 @@ export const ChangeWidgetPositionModal = ({ updateConfig( configName, (prev) => { - const currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId); + const currentWidget = prev.widgets.find((x) => x.type === innerProps.widgetType); currentWidget!.shape[shapeSize] = { location: { x, @@ -42,7 +42,10 @@ export const ChangeWidgetPositionModal = ({ return { ...prev, - widgets: [...prev.widgets.filter((x) => x.id !== innerProps.widgetId), currentWidget!], + widgets: [ + ...prev.widgets.filter((x) => x.type !== innerProps.widgetType), + currentWidget!, + ], }; }, true @@ -54,8 +57,8 @@ export const ChangeWidgetPositionModal = ({ closeModal(id); }; - const widthData = useWidthData(innerProps.widgetId); - const heightData = useHeightData(innerProps.widgetId); + const widthData = useWidthData(innerProps.widgetType); + const heightData = useHeightData(innerProps.widgetType); return ( { const { t } = useTranslation('layout/element-selector/selector'); - const activeWidgets = useConfigContext().config?.widgets ?? []; return ( <> @@ -23,11 +21,9 @@ export const AvailableIntegrationElements = ({ - {Object.entries(widgets) - .filter(([widgetId]) => !activeWidgets.some((aw) => aw.id === widgetId)) - .map(([k, v]) => ( - - ))} + {Object.entries(widgets).map(([k, v]) => ( + + ))} ); diff --git a/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx b/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx index ce3a2b708..8ff521b09 100644 --- a/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx +++ b/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx @@ -2,6 +2,7 @@ import { useModals } from '@mantine/modals'; import { showNotification } from '@mantine/notifications'; import { IconChecks, TablerIcon } from '@tabler/icons'; import { useTranslation } from 'next-i18next'; +import { v4 as uuidv4 } from 'uuid'; import { useConfigContext } from '../../../../../../config/provider'; import { useConfigStore } from '../../../../../../config/store'; import { IWidget, IWidgetDefinition } from '../../../../../../widgets/widgets'; @@ -32,9 +33,10 @@ export const WidgetElementType = ({ id, image, disabled, widget }: WidgetElement (prev) => ({ ...prev, widgets: [ - ...prev.widgets.filter((w) => w.id !== widget.id), + ...prev.widgets, { - id: widget.id, + id: uuidv4(), + type: widget.id, properties: Object.entries(widget.options).reduce((prev, [k, v]) => { const newPrev = prev; newPrev[k] = v.defaultValue; diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx index f58f30750..f92409919 100644 --- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx +++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx @@ -25,7 +25,7 @@ import { IWidget } from '../../../../widgets/widgets'; import { DraggableList } from './DraggableList'; export type WidgetEditModalInnerProps = { - widgetId: string; + widgetType: string; options: IWidget['properties']; widgetOptions: IWidget['properties']; }; @@ -37,7 +37,8 @@ export const WidgetsEditModal = ({ id, innerProps, }: ContextModalProps) => { - const { t } = useTranslation([`modules/${innerProps.widgetId}`, 'common']); + console.log('?'); + const { t } = useTranslation([`modules/${innerProps.widgetType}`, 'common']); const [moduleProperties, setModuleProperties] = useState(innerProps.options); const items = Object.entries(innerProps.widgetOptions ?? {}) as [ string, @@ -45,7 +46,7 @@ export const WidgetsEditModal = ({ ][]; // Find the Key in the "Widgets" Object that matches the widgetId - const currentWidgetDefinition = Widgets[innerProps.widgetId as keyof typeof Widgets]; + const currentWidgetDefinition = Widgets[innerProps.widgetType as keyof typeof Widgets]; const { name: configName } = useConfigContext(); const updateConfig = useConfigStore((x) => x.updateConfig); @@ -63,12 +64,15 @@ export const WidgetsEditModal = ({ updateConfig( configName, (prev) => { - const currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId); + const currentWidget = prev.widgets.find((x) => x.type === innerProps.widgetType); currentWidget!.properties = moduleProperties; return { ...prev, - widgets: [...prev.widgets.filter((x) => x.id !== innerProps.widgetId), currentWidget!], + widgets: [ + ...prev.widgets.filter((x) => x.type !== innerProps.widgetType), + currentWidget!, + ], }; }, true @@ -76,6 +80,8 @@ export const WidgetsEditModal = ({ context.closeModal(id); }; + console.log('??'); + return ( {items.map(([key, _], index) => { @@ -100,7 +106,7 @@ export const WidgetsEditModal = ({ ; wrapperColumnCount: number; }; @@ -27,8 +27,8 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => { // Match widget.id with WidgetsDefinitions // First get the keys const keys = Object.keys(WidgetsDefinitions); - // Then find the key that matches the widget.id - const widgetDefinition = keys.find((key) => key === widget.id); + // Then find the key that matches the widget.type + const widgetDefinition = keys.find((key) => key === widget.type); // Then get the widget definition const widgetDefinitionObject = WidgetsDefinitions[widgetDefinition as keyof typeof WidgetsDefinitions]; @@ -38,7 +38,7 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => { modal: 'integrationRemove', title: {t('common:remove')}, innerProps: { - widgetId: integration, + widgetType: integration, }, styles: { inner: { @@ -55,37 +55,24 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => { size: 'xl', title: null, innerProps: { - widgetId: integration, + widgetType: integration, widget, wrapperColumnCount, }, - styles: { - inner: { - position: 'sticky', - top: 30, - }, - }, }); }; const handleEditClick = () => { openContextModalGeneric({ modal: 'integrationOptions', - title: {t('descriptor.settings.title')}, + title: t('descriptor.settings.title'), innerProps: { - widgetId: integration, + widgetType: integration, options: widget.properties, // Cast as the right type for the correct widget widgetOptions: widgetDefinitionObject.options as any, }, zIndex: 5, - styles: { - inner: { - position: 'sticky', - top: 30, - maxHeight: '100%', - }, - }, }); }; diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx index f92e34380..336bb1034 100644 --- a/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx +++ b/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx @@ -6,7 +6,7 @@ import { useConfigContext } from '../../../../config/provider'; import { useConfigStore } from '../../../../config/store'; export type WidgetsRemoveModalInnerProps = { - widgetId: string; + widgetType: string; }; export const WidgetsRemoveModal = ({ @@ -14,7 +14,7 @@ export const WidgetsRemoveModal = ({ id, innerProps, }: ContextModalProps) => { - const { t } = useTranslation([`modules/${innerProps.widgetId}`, 'common']); + const { t } = useTranslation([`modules/${innerProps.widgetType}`, 'common']); const { name: configName } = useConfigContext(); if (!configName) return null; const updateConfig = useConfigStore((x) => x.updateConfig); @@ -23,7 +23,7 @@ export const WidgetsRemoveModal = ({ configName, (prev) => ({ ...prev, - widgets: prev.widgets.filter((w) => w.id !== innerProps.widgetId), + widgets: prev.widgets.filter((w) => w.type !== innerProps.widgetType), }), true ); @@ -35,7 +35,7 @@ export const WidgetsRemoveModal = ({ ]} - values={{ item: innerProps.widgetId }} + values={{ item: innerProps.widgetType }} />