Skip to content

Commit aa206d1

Browse files
AnthonyGressAnthonyGress
committed
fix alignment in group widgets
1 parent 53d1917 commit aa206d1

File tree

4 files changed

+45
-19
lines changed

4 files changed

+45
-19
lines changed

‎frontend/src/components/dashboard/base-items/widgets/GroupWidget.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -647,10 +647,12 @@ const GroupWidget: React.FC<GroupWidgetProps> = ({
647647
sx={{
648648
flex: 1,
649649
display: 'grid',
650-
gridTemplateColumns: layout === '2x3' ? 'repeat(2, 1fr)' : layout === '4x2' ? 'repeat(4, 1fr)' : 'repeat(3, 1fr)', // Explicit grid columns
651-
gap: 1, // 8px gap between items
652-
justifyItems: 'center',
653-
alignItems: 'center',
650+
gridTemplateColumns: layout === '2x3' ? 'repeat(2, 1fr)' : layout === '4x2' ? 'repeat(4, 1fr)' : 'repeat(3, 1fr)',
651+
gridTemplateRows: layout === '2x3' ? 'repeat(3, 1fr)' : 'repeat(2, 1fr)',
652+
gap: 1,
653+
gridAutoFlow: 'row', // Fill row by row (left to right, top to bottom)
654+
justifyItems: 'stretch', // Items fill their grid cells
655+
alignItems: 'stretch',
654656
overflowY: 'hidden',
655657
overflowX: 'hidden',
656658
p: { lg: 2 },
@@ -664,8 +666,10 @@ const GroupWidget: React.FC<GroupWidgetProps> = ({
664666
sx={{
665667
display: 'flex',
666668
justifyContent: 'center',
669+
alignItems: 'center',
667670
maxWidth: gridSettings.maxWidth,
668-
width: '100%'
671+
width: '100%',
672+
height: '100%'
669673
}}
670674
>
671675
<SortableGroupItem
@@ -727,8 +731,10 @@ const GroupWidget: React.FC<GroupWidgetProps> = ({
727731
sx={{
728732
display: 'flex',
729733
justifyContent: 'center',
734+
alignItems: 'center',
730735
maxWidth: gridSettings.maxWidth,
731-
width: '100%'
736+
width: '100%',
737+
height: '100%'
732738
}}
733739
>
734740
<Box

‎frontend/src/components/dashboard/sortable-items/widgets/SortableGroupWidget.tsx‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,8 @@ export const SortableGroupWidget: React.FC<Props> = ({
7575

7676
// Handle item changes (reordering within the group)
7777
const handleItemsChange = useCallback(async (newItems: GroupItem[]) => {
78-
if (!config) return;
78+
// Ensure config exists with defaults for new groups
79+
const safeConfig = config || { maxItems: '3', showLabel: true, items: [] };
7980

8081
// Update the group widget config directly using saveLayout instead of updateItem
8182
// to avoid triggering any unexpected state changes
@@ -84,7 +85,8 @@ export const SortableGroupWidget: React.FC<Props> = ({
8485
return {
8586
...layoutItem,
8687
config: {
87-
...layoutItem.config,
88+
...safeConfig, // Use safeConfig which includes defaults
89+
...layoutItem.config, // Preserve any existing config
8890
items: newItems
8991
}
9092
};
@@ -97,7 +99,7 @@ export const SortableGroupWidget: React.FC<Props> = ({
9799

98100
// Update local state to reflect the change
99101
setDashboardLayout(updatedLayout);
100-
}, [id, config, dashboardLayout, saveLayout, setDashboardLayout]);
102+
}, [id, dashboardLayout, saveLayout, setDashboardLayout, config]);
101103

102104
// Get a group item as a dashboard item for editing
103105
const getItemAsDashboardItem = useCallback((itemId: string): DashboardItem | null => {
@@ -150,7 +152,9 @@ export const SortableGroupWidget: React.FC<Props> = ({
150152

151153
// Function to update a group item after it has been edited
152154
const updateGroupItem = useCallback(async (itemId: string, updatedItem: DashboardItem) => {
153-
if (!config?.items) return;
155+
// Ensure config exists with defaults for new groups
156+
const safeConfig = config || { maxItems: '3', showLabel: true, items: [] };
157+
const currentItems = safeConfig.items || [];
154158

155159
// Create an updated GroupItem from the updated DashboardItem
156160
const updatedGroupItem: GroupItem = {
@@ -176,7 +180,7 @@ export const SortableGroupWidget: React.FC<Props> = ({
176180
}
177181

178182
// Replace the item in the group's items array
179-
const updatedItems = config.items.map(item =>
183+
const updatedItems = currentItems.map(item =>
180184
item.id === itemId ? updatedGroupItem : item
181185
);
182186

@@ -187,7 +191,8 @@ export const SortableGroupWidget: React.FC<Props> = ({
187191
return {
188192
...layoutItem,
189193
config: {
190-
...layoutItem.config,
194+
...safeConfig, // Use safeConfig which includes defaults
195+
...layoutItem.config, // Preserve any existing config
191196
items: updatedItems
192197
}
193198
};
@@ -200,7 +205,7 @@ export const SortableGroupWidget: React.FC<Props> = ({
200205

201206
// Update local state to reflect the change
202207
setDashboardLayout(updatedLayout);
203-
}, [config, id, dashboardLayout, saveLayout, setDashboardLayout]);
208+
}, [id, dashboardLayout, saveLayout, setDashboardLayout, config]);
204209

205210
// Function to notify about dragging a group item
206211
const notifyGroupItemDrag = useCallback((isDragging: boolean, itemId?: string) => {
@@ -320,17 +325,22 @@ export const SortableGroupWidget: React.FC<Props> = ({
320325

321326
// Add an app shortcut to the group
322327
const addAppShortcutToGroup = useCallback((shortcutItem: DashboardItem) => {
323-
if (!config || !dashboardLayout) {
324-
console.error('Missing config or dashboardLayout');
328+
if (!dashboardLayout) {
329+
console.error('Missing dashboardLayout');
325330
return;
326331
}
327332

333+
// Ensure config exists with defaults for new groups
334+
const safeConfig = config || { maxItems: '3', showLabel: true, items: [] };
335+
328336
// Use the configured maxItems or parse from the special format strings
329-
const maxItemsStr = String(config.maxItems || 3);
337+
const maxItemsStr = String(safeConfig.maxItems || 3);
330338
let MAX_ITEMS = 3;
331339

332340
if (maxItemsStr === '6_2x3' || maxItemsStr === '6_3x2') {
333341
MAX_ITEMS = 6;
342+
} else if (maxItemsStr === '8_4x2') {
343+
MAX_ITEMS = 8;
334344
} else {
335345
MAX_ITEMS = parseInt(maxItemsStr, 10) || 3;
336346
}
@@ -400,7 +410,8 @@ export const SortableGroupWidget: React.FC<Props> = ({
400410
}
401411

402412
updatedGroupWidget.config = {
403-
...updatedGroupWidget.config,
413+
...safeConfig, // Use safeConfig which includes defaults
414+
...updatedGroupWidget.config, // Preserve any existing config
404415
items: updatedItems
405416
};
406417

@@ -411,7 +422,7 @@ export const SortableGroupWidget: React.FC<Props> = ({
411422

412423
// Save to server
413424
saveLayout(updatedLayout);
414-
}, [dashboardLayout, config, id, ensureItems, setDashboardLayout, saveLayout]);
425+
}, [dashboardLayout, id, ensureItems, setDashboardLayout, saveLayout, config]);
415426

416427
// Get maximum items allowed in the group
417428
const getMaxItems = useCallback(() => {

‎frontend/src/components/forms/AddEditForm.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -975,6 +975,9 @@ export const AddEditForm = ({ handleClose, existingItem, onSubmit }: Props) => {
975975
} else if (data.widgetType === ITEM_TYPE.RADARR_WIDGET) {
976976
// Radarr widget configuration
977977
config = await createWidgetConfig(ITEM_TYPE.RADARR_WIDGET, data);
978+
} else if (data.widgetType === ITEM_TYPE.GROUP_WIDGET) {
979+
// Group widget configuration
980+
config = await createWidgetConfig(ITEM_TYPE.GROUP_WIDGET, data);
978981
} else if (data.widgetType === ITEM_TYPE.DUAL_WIDGET) {
979982
// Check if DualWidgetConfig component has already built the config
980983
const existingConfig = (formContext as any).getValues('config');
@@ -1656,6 +1659,12 @@ export const AddEditForm = ({ handleClose, existingItem, onSubmit }: Props) => {
16561659
}
16571660
};
16581661
}
1662+
} else if (widgetType === ITEM_TYPE.GROUP_WIDGET) {
1663+
return {
1664+
maxItems: data.maxItems || '3', // Default to 3 items layout
1665+
showLabel: data.showLabel !== undefined ? data.showLabel : true, // Default to showing label
1666+
items: existingItem?.config?.items || [] // Preserve existing items or start with empty array
1667+
};
16591668
}
16601669

16611670
return {};

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "lab-dash",
3-
"version": "1.2.1",
3+
"version": "1.2.2",
44
"description": "This is an open-source user interface designed to manage your server and homelab",
55
"main": "index.js",
66
"scripts": {

0 commit comments

Comments
 (0)