Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-10 07:25:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix edit modal for widgets not working

Browse Source
This commit is contained in:
Meierschlumpf
2022-12-19 19:01:29 +01:00
parent f625fdba78
commit e723c1d374
4 changed files with 60 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx
View File

@@ -1,5 +1,5 @@
import { Group, Space, Stack, Text, UnstyledButton } from '@mantine/core'; import { Group, Space, Stack, Text, UnstyledButton } from '@mantine/core';
import { IconBox, IconPlug, IconTextResize } from '@tabler/icons'; import { IconBox, IconStack, IconTextResize } from '@tabler/icons';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
@@ -13,7 +13,7 @@ interface AvailableElementTypesProps {
} }
export const AvailableElementTypes = ({ export const AvailableElementTypes = ({
onOpenIntegrations, onOpenIntegrations: onOpenWidgets,
onOpenStaticElements, onOpenStaticElements,
}: AvailableElementTypesProps) => { }: AvailableElementTypesProps) => {
const { t } = useTranslation('layout/element-selector/selector'); const { t } = useTranslation('layout/element-selector/selector');
@@ -27,57 +27,55 @@ export const AvailableElementTypes = ({
name="Apps" name="Apps"
icon={<IconBox size={40} strokeWidth={1.3} />} icon={<IconBox size={40} strokeWidth={1.3} />}
onClick={() => { onClick={() => {
openContextModalGeneric<{ app: AppType; allowAppNamePropagation: boolean }>( openContextModalGeneric<{ app: AppType; allowAppNamePropagation: boolean }>({
{ modal: 'editApp',
modal: 'editApp', innerProps: {
innerProps: { app: {
app: { id: uuidv4(),
id: uuidv4(), name: 'Your app',
name: 'Your app', url: 'https://homarr.dev',
url: 'https://homarr.dev', appearance: {
appearance: { iconUrl: '/imgs/logo/logo.png',
iconUrl: '/imgs/logo/logo.png', },
}, network: {
network: { enabledStatusChecker: false,
enabledStatusChecker: false, okStatus: [],
okStatus: [], },
}, behaviour: {
behaviour: { isOpeningNewTab: true,
isOpeningNewTab: true, onClickUrl: '',
onClickUrl: '', },
}, area: {
area: { type: 'sidebar',
type: 'sidebar', properties: {
properties: { location: 'right',
location: 'right',
},
},
shape: {
location: {
x: 0,
y: 0,
},
size: {
height: 1,
width: 1,
},
},
integration: {
type: null,
properties: [],
}, },
}, },
allowAppNamePropagation: true, shape: {
location: {
x: 0,
y: 0,
},
size: {
height: 1,
width: 1,
},
},
integration: {
type: null,
properties: [],
},
}, },
size: 'xl', allowAppNamePropagation: true,
} },
); size: 'xl',
});
}} }}
/> />
<ElementItem <ElementItem
name="Integration" name="Widgets"
icon={<IconPlug size={40} strokeWidth={1.3} />} icon={<IconStack size={40} strokeWidth={1.3} />}
onClick={onOpenIntegrations} onClick={onOpenWidgets}
/> />
<ElementItem <ElementItem
name="Static Element" name="Static Element"

1
src/components/Dashboard/Modals/SelectElement/Components/StaticElementsTab/AvailableStaticElementsTab.tsx
View File

@@ -24,6 +24,7 @@ export const AvailableStaticTypes = ({ onClickBack }: AvailableStaticTypesProps)
name="Static Text" name="Static Text"
description="Display a fixed string on your dashboard" description="Display a fixed string on your dashboard"
image={IconCursorText} image={IconCursorText}
handleAddition={/* TODO: add something? */ async () => {}}
/> />
</Grid> </Grid>
</> </>

28
src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
View File

@@ -8,7 +8,7 @@ import { useConfigStore } from '../../../../config/store';
import { IWidget } from '../../../../widgets/widgets'; import { IWidget } from '../../../../widgets/widgets';
export type WidgetEditModalInnerProps = { export type WidgetEditModalInnerProps = {
integration: string; widgetId: string;
options: IWidget<string, any>['properties']; options: IWidget<string, any>['properties'];
}; };
@@ -19,7 +19,7 @@ export const WidgetsEditModal = ({
id, id,
innerProps, innerProps,
}: ContextModalProps<WidgetEditModalInnerProps>) => { }: ContextModalProps<WidgetEditModalInnerProps>) => {
const { t } = useTranslation([`modules/${innerProps.integration}`, 'common']); const { t } = useTranslation([`modules/${innerProps.widgetId}`, 'common']);
const [moduleProperties, setModuleProperties] = useState(innerProps.options); const [moduleProperties, setModuleProperties] = useState(innerProps.options);
const items = Object.entries(moduleProperties ?? {}) as [string, IntegrationOptionsValueType][]; const items = Object.entries(moduleProperties ?? {}) as [string, IntegrationOptionsValueType][];
@@ -37,7 +37,7 @@ export const WidgetsEditModal = ({
}; };
const getMutliselectData = (option: string) => { const getMutliselectData = (option: string) => {
const currentWidgetDefinition = Widgets[innerProps.integration as keyof typeof Widgets]; const currentWidgetDefinition = Widgets[innerProps.widgetId as keyof typeof Widgets];
if (!Widgets) return []; if (!Widgets) return [];
const options = currentWidgetDefinition.options as any; const options = currentWidgetDefinition.options as any;
@@ -45,19 +45,15 @@ export const WidgetsEditModal = ({
}; };
const handleSave = () => { const handleSave = () => {
updateConfig(configName, (prev) => ({ updateConfig(configName, (prev) => {
...prev, let currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
widgets: { currentWidget!.properties = moduleProperties;
...prev.widgets,
[innerProps.integration]: return {
'properties' in (prev.widgets[innerProps.integration] ?? {}) ...prev,
? { widgets: [...prev.widgets.filter((x) => x.id !== innerProps.widgetId), currentWidget!],
...prev.widgets[innerProps.integration], };
properties: moduleProperties, });
}
: prev.widgets[innerProps.integration],
},
}));
context.closeModal(id); context.closeModal(id);
}; };

4
src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx
View File

@@ -26,7 +26,7 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
modal: 'integrationRemove', modal: 'integrationRemove',
title: <Title order={4}>{t('descriptor.remove.title')}</Title>, title: <Title order={4}>{t('descriptor.remove.title')}</Title>,
innerProps: { innerProps: {
integration, widgetId: integration,
}, },
}); });
}; };
@@ -48,7 +48,7 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
modal: 'integrationOptions', modal: 'integrationOptions',
title: <Title order={4}>{t('descriptor.settings.title')}</Title>, title: <Title order={4}>{t('descriptor.settings.title')}</Title>,
innerProps: { innerProps: {
integration, widgetId: integration,
options: widget.properties, options: widget.properties,
}, },
}); });