- @for (p of item.permissions; track p; let i = $index) {
-
- {{ p.name }}
-
- }
+
+
+
Permissions
+ @for (p of item.permissions; track p; let i = $index) {
+
+ {{ p.name }}
+
+ }
+
+
+
+
Includes Roles
+ @for (r of item.includedRoles; track r; let i = $index) {
+
+ {{ r.name }}
+
+ }
+
diff --git a/overlord/src/app/role/role-detail/role-detail.component.ts b/overlord/src/app/role/role-detail/role-detail.component.ts
index b9b8b6e7..3f0fe251 100644
--- a/overlord/src/app/role/role-detail/role-detail.component.ts
+++ b/overlord/src/app/role/role-detail/role-detail.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -8,6 +8,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSnackBar } from '@angular/material/snack-bar';
import { ActivatedRoute, Router } from '@angular/router';
+import { Subject, takeUntil } from 'rxjs';
import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
import { Role } from '../role';
@@ -26,13 +27,15 @@ import { RoleService } from '../role.service';
MatButtonModule,
],
})
-export class RoleDetailComponent implements OnInit, AfterViewInit {
+export class RoleDetailComponent implements OnInit, AfterViewInit, OnDestroy {
private route = inject(ActivatedRoute);
private router = inject(Router);
private snackBar = inject(MatSnackBar);
private dialog = inject(MatDialog);
private ser = inject(RoleService);
+ private destroyed$ = new Subject
();
+
@ViewChild('nameElement', { static: true }) nameElement!: ElementRef;
form: FormGroup<{
name: FormControl;
@@ -41,6 +44,11 @@ export class RoleDetailComponent implements OnInit, AfterViewInit {
permission: FormControl;
}>
>;
+ includedRoles: FormArray<
+ FormGroup<{
+ role: FormControl;
+ }>
+ >;
}>;
item: Role = new Role();
@@ -49,6 +57,7 @@ export class RoleDetailComponent implements OnInit, AfterViewInit {
this.form = new FormGroup({
name: new FormControl(null),
permissions: new FormArray }>>([]),
+ includedRoles: new FormArray }>>([]),
});
}
@@ -66,6 +75,26 @@ export class RoleDetailComponent implements OnInit, AfterViewInit {
}),
),
);
+
+ this.form.controls.includedRoles.clear();
+ this.item.includedRoles.forEach((x) =>
+ this.form.controls.includedRoles.push(
+ new FormGroup({
+ role: new FormControl(x.enabled, { nonNullable: true }),
+ }),
+ ),
+ );
+
+ // Rebind listeners (important when route data changes)
+ this.destroyed$.next();
+
+ // When included roles change, recompute locks
+ this.form.controls.includedRoles.valueChanges.pipe(takeUntil(this.destroyed$)).subscribe(() => {
+ this.applyIncludedRolePermissionLocks();
+ });
+
+ // Apply initial locks immediately
+ this.applyIncludedRolePermissionLocks();
});
}
@@ -75,6 +104,43 @@ export class RoleDetailComponent implements OnInit, AfterViewInit {
}, 0);
}
+ ngOnDestroy(): void {
+ this.destroyed$.next();
+ this.destroyed$.complete();
+ }
+
+ private applyIncludedRolePermissionLocks(): void {
+ // 1) collect all permission IDs implied by enabled included roles
+ const implied = new Set();
+
+ this.item.includedRoles.forEach((roleOpt, idx) => {
+ const checked = this.form.controls.includedRoles.at(idx).controls.role.value;
+ if (checked) {
+ (roleOpt.permissionIds || []).forEach((pid) => implied.add(pid));
+ }
+ });
+
+ // 2) apply to permission checkboxes
+ this.item.permissions.forEach((perm, idx) => {
+ const ctrl = this.form.controls.permissions.at(idx).controls.permission;
+
+ const isImplied = implied.has(perm.id as string);
+ const isDirect = perm.enabled === true; // from backend: direct assignment
+
+ if (isImplied) {
+ // must be checked + disabled
+ ctrl.setValue(true, { emitEvent: false });
+ ctrl.disable({ emitEvent: false });
+ } else {
+ // not implied -> enable checkbox
+ ctrl.enable({ emitEvent: false });
+
+ // restore to direct-enabled state (so user sees what is explicitly on the role)
+ ctrl.setValue(isDirect, { emitEvent: false });
+ }
+ });
+ }
+
save() {
this.ser.saveOrUpdate(this.getItem()).subscribe({
next: () => {
@@ -115,9 +181,21 @@ export class RoleDetailComponent implements OnInit, AfterViewInit {
getItem(): Role {
const formModel = this.form.value;
this.item.name = formModel.name ?? '';
- const array = this.form.controls.permissions;
- this.item.permissions.forEach((item, index) => {
- item.enabled = array.controls[index].value.permission ?? false;
+ const permArray = this.form.controls.permissions;
+ this.item.permissions.forEach((p, index) => {
+ // If disabled, keep p.enabled as it was originally direct (don’t accidentally mark direct)
+ if (permArray.at(index).controls.permission.disabled) {
+ // leave p.enabled unchanged
+ return;
+ }
+ p.enabled = permArray.at(index).controls.permission.value;
+ });
+ // this.item.permissions.forEach((item, index) => {
+ // item.enabled = permArray.controls[index].value.permission ?? false;
+ // });
+ const includeArray = this.form.controls.includedRoles;
+ this.item.includedRoles.forEach((r, index) => {
+ r.enabled = includeArray.controls[index]?.value.role ?? false;
});
return this.item;
}
diff --git a/overlord/src/app/role/role-list/role-list.component.html b/overlord/src/app/role/role-list/role-list.component.html
index 7f3810bf..bd084d44 100644
--- a/overlord/src/app/role/role-list/role-list.component.html
+++ b/overlord/src/app/role/role-list/role-list.component.html
@@ -15,9 +15,25 @@
>
+
+
+ Includes
+
+ @if (row.includedRoles?.length) {
+
+ @for (r of row.includedRoles; track r) {
+ - {{ r }}
+ }
+
+ } @else {
+ -
+ }
+
+
+
- Permissions
+ Permissions
@for (permission of row.permissions; track permission) {
diff --git a/overlord/src/app/role/role-list/role-list.component.ts b/overlord/src/app/role/role-list/role-list.component.ts
index 0fb2a60f..4e77d4a5 100644
--- a/overlord/src/app/role/role-list/role-list.component.ts
+++ b/overlord/src/app/role/role-list/role-list.component.ts
@@ -22,7 +22,7 @@ export class RoleListComponent implements OnInit {
list: Role[] = [];
dataSource: RoleListDatasource = new RoleListDatasource(this.list, this.paginator, this.sort);
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
- displayedColumns = ['name', 'permissions'];
+ displayedColumns = ['name', 'includedRoles', 'permissions'];
ngOnInit() {
this.route.data.subscribe((value) => {
diff --git a/overlord/src/app/role/role.ts b/overlord/src/app/role/role.ts
index 648cb8fb..0282091b 100644
--- a/overlord/src/app/role/role.ts
+++ b/overlord/src/app/role/role.ts
@@ -1,13 +1,32 @@
import { Permission } from './permission';
+export class RoleItem {
+ id: string | undefined;
+ name: string;
+ enabled: boolean;
+
+ permissionIds: string[];
+
+ public constructor(init?: Partial) {
+ this.id = undefined;
+ this.name = '';
+ this.enabled = false;
+ this.permissionIds = [];
+
+ Object.assign(this, init);
+ }
+}
export class Role {
id: string | undefined;
name: string;
permissions: Permission[];
+ includedRoles: RoleItem[];
public constructor(init?: Partial) {
+ this.id = undefined;
this.name = '';
this.permissions = [];
+ this.includedRoles = [];
Object.assign(this, init);
}
}