Feature: Roles can include Roles.

bookie/src/app/roles/role-detail/role-detail.component.css

@@ -0,0 +1,8 @@
+.two-col {
+  display: flex;
+  gap: 16px;
+}
+.col {
+  flex: 1;
+  min-width: 0;
+}

bookie/src/app/roles/role-detail/role-detail.component.html

@@ -7,12 +7,24 @@
     </mat-form-field>
   </div>
 
-  <div formArrayName="permissions">
-    @for (p of item.permissions; track p; let i = $index) {
-      <div class="row-container" [formGroupName]="i">
-        <mat-checkbox formControlName="permission" class="flex-auto">{{ p.name }}</mat-checkbox>
-      </div>
-    }
+  <div class="two-col">
+    <div formArrayName="permissions" class="col">
+      <h3>Permissions</h3>
+      @for (p of item.permissions; track p; let i = $index) {
+        <div class="row-container" [formGroupName]="i">
+          <mat-checkbox formControlName="permission" class="flex-auto">{{ p.name }}</mat-checkbox>
+        </div>
+      }
+    </div>
+
+    <div formArrayName="includedRoles" class="col">
+      <h3>Includes Roles</h3>
+      @for (r of item.includedRoles; track r; let i = $index) {
+        <div class="row-container" [formGroupName]="i">
+          <mat-checkbox formControlName="role" class="flex-auto">{{ r.name }}</mat-checkbox>
+        </div>
+      }
+    </div>
   </div>
 </form>
 

bookie/src/app/roles/role-detail/role-detail.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
 import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -7,6 +7,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';
@@ -18,13 +19,15 @@ import { RoleService } from '../role.service';
   styleUrls: ['./role-detail.component.css'],
   imports: [MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule],
 })
-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;
   form: FormGroup<{
     name: FormControl<string>;
@@ -33,6 +36,11 @@ export class RoleDetailComponent implements OnInit, AfterViewInit {
         permission: FormControl<boolean>;
       }>
     >;
+    includedRoles: FormArray<
+      FormGroup<{
+        role: FormControl<boolean>;
+      }>
+    >;
   }>;
 
   item: Role = new Role();
@@ -42,6 +50,7 @@ export class RoleDetailComponent implements OnInit, AfterViewInit {
     this.form = new FormGroup({
       name: new FormControl<string>('', { nonNullable: true }),
       permissions: new FormArray<FormGroup<{ permission: FormControl<boolean> }>>([]),
+      includedRoles: new FormArray<FormGroup<{ role: FormControl<boolean> }>>([]),
     });
   }
 
@@ -51,7 +60,7 @@ export class RoleDetailComponent implements OnInit, AfterViewInit {
       this.item = data.item;
 
       this.form.controls.name.setValue(this.item.name);
-      this.form.controls.permissions.reset();
+      this.form.controls.permissions.clear();
       this.item.permissions.forEach((x) =>
         this.form.controls.permissions.push(
           new FormGroup({
@@ -59,6 +68,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();
     });
   }
 
@@ -70,6 +99,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: () => {
@@ -110,9 +176,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;
   }

bookie/src/app/roles/role-list/role-list.component.html

@@ -14,6 +14,22 @@
     >
   </ng-container>
 
+  <!-- Included Roles Column (NEW) -->
+  <ng-container matColumnDef="includedRoles">
+    <mat-header-cell *matHeaderCellDef>Includes</mat-header-cell>
+    <mat-cell *matCellDef="let row">
+      @if (row.includedRoles?.length) {
+        <ul>
+          @for (r of row.includedRoles; track r) {
+            <li>{{ r }}</li>
+          }
+        </ul>
+      } @else {
+        <span>-</span>
+      }
+    </mat-cell>
+  </ng-container>
+
   <!-- Permissions Column -->
   <ng-container matColumnDef="permissions">
     <mat-header-cell *matHeaderCellDef>Permissions</mat-header-cell>

bookie/src/app/roles/role-list/role-list.component.ts

@@ -19,7 +19,7 @@ export class RoleListComponent implements OnInit {
   list: Role[] = [];
   dataSource: RoleListDataSource = new RoleListDataSource(this.list);
   /** 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) => {

bookie/src/app/roles/role.ts

@@ -1,14 +1,32 @@
 import { Permission } from './permission';
 
+export class RoleItem {
+  id: string | undefined;
+  name: string;
+  enabled: boolean;
+
+  permissionIds: string[];
+
+  public constructor(init?: Partial<RoleItem>) {
+    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<Role>) {
     this.id = undefined;
     this.name = '';
     this.permissions = [];
+    this.includedRoles = [];
     Object.assign(this, init);
   }
 }