matthias/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(permissions): flatten permission matrix table to fix column alignment and scroll lag

Browse Source
This commit is contained in:
Matthias Hochmeister
2026-04-18 16:20:44 +02:00
parent fa9f50d982
commit bef5a685a8
1 changed files with 51 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
frontend/src/components/admin/PermissionMatrixTab.tsx
View File

@@ -460,67 +460,57 @@ function PermissionMatrixTab() {
})}
</TableRow>
<TableRow>
<TableCell colSpan={2 + nonAdminGroups.length} sx={{ p: 0 }}>
<Collapse in={isExpanded} timeout="auto" unmountOnExit>
<Table size="small">
<TableBody>
{(() => {
let lastSubGroup: string | null | undefined = undefined;
return fgPerms.map((perm: Permission) => {
const depTooltip = getDepTooltip(perm.id);
const tooltipText = [perm.description, depTooltip].filter(Boolean).join('\n');
const subGroup = getSubGroupLabel(fg.id, perm.id);
const showSubGroupHeader = subGroup !== lastSubGroup && subGroup !== null;
lastSubGroup = subGroup;
return (
<React.Fragment key={perm.id}>
{showSubGroupHeader && (
<TableRow>
<TableCell
colSpan={2 + nonAdminGroups.length}
sx={{ pl: 5, py: 0.5, bgcolor: 'action.selected', position: 'sticky', left: 0, zIndex: 1 }}
>
<Typography variant="caption" sx={{ fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, color: 'text.secondary' }}>
{subGroup}
</Typography>
</TableCell>
</TableRow>
)}
<TableRow hover>
<TableCell sx={{ pl: 6, minWidth: 250, position: 'sticky', left: 0, zIndex: 1, bgcolor: 'background.paper' }}>
<Tooltip title={tooltipText || ''} placement="right"><span>{perm.label}</span></Tooltip>
</TableCell>
<TableCell align="center" sx={{ minWidth: 120 }}>
<Checkbox checked disabled sx={{ opacity: 0.3 }} />
</TableCell>
{nonAdminGroups.map(g => {
const isGranted = (grants[g] || []).includes(perm.id);
const curReverseDeps = reverseDeps[perm.id] || [];
const isRequiredByOther = isGranted && curReverseDeps.some(d => (grants[g] || []).includes(d));
return (
<TableCell key={g} align="center" sx={{ minWidth: 120 }}>
<Tooltip title={isRequiredByOther ? 'Wird von anderen Berechtigungen benötigt' : ''} placement="top">
<span>
<Checkbox checked={isGranted}
onChange={() => handlePermissionToggle(g, perm.id, grants, groups)}
disabled={permissionMutation.isPending} size="small"
sx={isRequiredByOther ? { color: 'warning.main', '&.Mui-checked': { color: 'warning.main' } } : undefined} />
</span>
</Tooltip>
</TableCell>
);
})}
</TableRow>
</React.Fragment>
);
});
})()}
</TableBody>
</Table>
</Collapse>
</TableCell>
</TableRow>
{isExpanded && (() => {
let lastSubGroup: string | null | undefined = undefined;
return fgPerms.map((perm: Permission) => {
const depTooltip = getDepTooltip(perm.id);
const tooltipText = [perm.description, depTooltip].filter(Boolean).join('\n');
const subGroup = getSubGroupLabel(fg.id, perm.id);
const showSubGroupHeader = subGroup !== lastSubGroup && subGroup !== null;
lastSubGroup = subGroup;
return (
<React.Fragment key={perm.id}>
{showSubGroupHeader && (
<TableRow>
<TableCell
colSpan={2 + nonAdminGroups.length}
sx={{ pl: 5, py: 0.5, bgcolor: 'action.selected' }}
>
<Typography variant="caption" sx={{ fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, color: 'text.secondary' }}>
{subGroup}
</Typography>
</TableCell>
</TableRow>
)}
<TableRow hover>
<TableCell sx={{ pl: 6, bgcolor: 'background.paper' }}>
<Tooltip title={tooltipText || ''} placement="right"><span>{perm.label}</span></Tooltip>
</TableCell>
<TableCell align="center">
<Checkbox checked disabled sx={{ opacity: 0.3 }} />
</TableCell>
{nonAdminGroups.map(g => {
const isGranted = (grants[g] || []).includes(perm.id);
const curReverseDeps = reverseDeps[perm.id] || [];
const isRequiredByOther = isGranted && curReverseDeps.some(d => (grants[g] || []).includes(d));
return (
<TableCell key={g} align="center">
<Tooltip title={isRequiredByOther ? 'Wird von anderen Berechtigungen benötigt' : ''} placement="top">
<span>
<Checkbox checked={isGranted}
onChange={() => handlePermissionToggle(g, perm.id, grants, groups)}
disabled={permissionMutation.isPending} size="small"
sx={isRequiredByOther ? { color: 'warning.main', '&.Mui-checked': { color: 'warning.main' } } : undefined} />
</span>
</Tooltip>
</TableCell>
);
})}
</TableRow>
</React.Fragment>
);
});
})()}
</React.Fragment>
);
})}