Roles can have included roles.

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<void>();
+
   @ViewChild('nameElement', { static: true }) nameElement!: ElementRef<HTMLInputElement>;
   form: FormGroup<{
     name: FormControl<string | null>;
@@ -41,6 +44,11 @@ export class RoleDetailComponent implements OnInit, AfterViewInit {
         permission: FormControl<boolean>;
       }>
     >;
+    includedRoles: FormArray<
+      FormGroup<{
+        role: FormControl<boolean>;
+      }>
+    >;
   }>;
 
   item: Role = new Role();
@@ -49,6 +57,7 @@ export class RoleDetailComponent implements OnInit, AfterViewInit {
     this.form = new FormGroup({
       name: new FormControl<string | null>(null),
       permissions: new FormArray<FormGroup<{ permission: FormControl<boolean> }>>([]),
+      includedRoles: new FormArray<FormGroup<{ role: FormControl<boolean> }>>([]),
     });
   }
 
@@ -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<boolean>(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<string>();
+
+    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;
   }