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

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

@@ -460,12 +460,7 @@ function PermissionMatrixTab() {
})} })}
</TableRow> </TableRow>
<TableRow> {isExpanded && (() => {
<TableCell colSpan={2 + nonAdminGroups.length} sx={{ p: 0 }}>
<Collapse in={isExpanded} timeout="auto" unmountOnExit>
<Table size="small">
<TableBody>
{(() => {
let lastSubGroup: string | null | undefined = undefined; let lastSubGroup: string | null | undefined = undefined;
return fgPerms.map((perm: Permission) => { return fgPerms.map((perm: Permission) => {
const depTooltip = getDepTooltip(perm.id); const depTooltip = getDepTooltip(perm.id);
@@ -479,7 +474,7 @@ function PermissionMatrixTab() {
<TableRow> <TableRow>
<TableCell <TableCell
colSpan={2 + nonAdminGroups.length} colSpan={2 + nonAdminGroups.length}
sx={{ pl: 5, py: 0.5, bgcolor: 'action.selected', position: 'sticky', left: 0, zIndex: 1 }} sx={{ pl: 5, py: 0.5, bgcolor: 'action.selected' }}
> >
<Typography variant="caption" sx={{ fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, color: 'text.secondary' }}> <Typography variant="caption" sx={{ fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, color: 'text.secondary' }}>
{subGroup} {subGroup}
@@ -488,10 +483,10 @@ function PermissionMatrixTab() {
</TableRow> </TableRow>
)} )}
<TableRow hover> <TableRow hover>
<TableCell sx={{ pl: 6, minWidth: 250, position: 'sticky', left: 0, zIndex: 1, bgcolor: 'background.paper' }}> <TableCell sx={{ pl: 6, bgcolor: 'background.paper' }}>
<Tooltip title={tooltipText || ''} placement="right"><span>{perm.label}</span></Tooltip> <Tooltip title={tooltipText || ''} placement="right"><span>{perm.label}</span></Tooltip>
</TableCell> </TableCell>
<TableCell align="center" sx={{ minWidth: 120 }}> <TableCell align="center">
<Checkbox checked disabled sx={{ opacity: 0.3 }} /> <Checkbox checked disabled sx={{ opacity: 0.3 }} />
</TableCell> </TableCell>
{nonAdminGroups.map(g => { {nonAdminGroups.map(g => {
@@ -499,7 +494,7 @@ function PermissionMatrixTab() {
const curReverseDeps = reverseDeps[perm.id] || []; const curReverseDeps = reverseDeps[perm.id] || [];
const isRequiredByOther = isGranted && curReverseDeps.some(d => (grants[g] || []).includes(d)); const isRequiredByOther = isGranted && curReverseDeps.some(d => (grants[g] || []).includes(d));
return ( return (
<TableCell key={g} align="center" sx={{ minWidth: 120 }}> <TableCell key={g} align="center">
<Tooltip title={isRequiredByOther ? 'Wird von anderen Berechtigungen benötigt' : ''} placement="top"> <Tooltip title={isRequiredByOther ? 'Wird von anderen Berechtigungen benötigt' : ''} placement="top">
<span> <span>
<Checkbox checked={isGranted} <Checkbox checked={isGranted}
@@ -516,11 +511,6 @@ function PermissionMatrixTab() {
); );
}); });
})()} })()}
</TableBody>
</Table>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment> </React.Fragment>
); );
})} })}