Consolidated commit message to v22 signals

overlord/src/app/role/role-detail/role-detail.component.ts

@@ -1,5 +1,5 @@
-import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild, OnDestroy } from '@angular/core';
-import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, afterNextRender, effect, input, computed, linkedSignal } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
@@ -7,10 +7,11 @@ import { MatDividerModule } from '@angular/material/divider';
 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 { Router } from '@angular/router';
 
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 import { Role } from '../role';
 import { RoleService } from '../role.service';
 
@@ -18,126 +19,96 @@ import { RoleService } from '../role.service';
   selector: 'app-role-detail',
   templateUrl: './role-detail.component.html',
   styleUrls: ['./role-detail.component.css'],
+
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDividerModule,
     MatCheckboxModule,
     MatButtonModule,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class RoleDetailComponent implements OnInit, AfterViewInit, OnDestroy {
-  private route = inject(ActivatedRoute);
+export class RoleDetailComponent {
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+
   private router = inject(Router);
   private snackBar = inject(MatSnackBar);
   private dialog = inject(MatDialog);
   private ser = inject(RoleService);
 
-  private destroyed$ = new Subject<void>();
+  itemResource = this.ser.get(this.id);
+  item = computed(() => this.itemResource.value() ?? new Role());
 
-  @ViewChild('nameElement', { static: true }) nameElement!: ElementRef<HTMLInputElement>;
-  form: FormGroup<{
-    name: FormControl<string | null>;
-    permissions: FormArray<
-      FormGroup<{
-        permission: FormControl<boolean>;
-      }>
-    >;
-    includedRoles: FormArray<
-      FormGroup<{
-        role: FormControl<boolean>;
-      }>
-    >;
-  }>;
+  model = linkedSignal({
+    source: this.item,
+    computation: (itemVal) => ({
+      name: itemVal.name ?? '',
+      permissions: itemVal.permissions.map((x) => ({
+        permission: x.enabled,
+        disabled: false,
+      })),
+      includedRoles: itemVal.includedRoles.map((x) => ({
+        role: x.enabled,
+      })),
+    }),
+  });
 
-  item: Role = new Role();
+  form = createForm(this.model);
 
   constructor() {
-    this.form = new FormGroup({
-      name: new FormControl<string | null>(null),
-      permissions: new FormArray<FormGroup<{ permission: FormControl<boolean> }>>([]),
-      includedRoles: new FormArray<FormGroup<{ role: FormControl<boolean> }>>([]),
+    afterNextRender(() => {
+      this.form.name().focusBoundControl();
     });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { item: Role };
-      this.item = data.item;
-
-      this.form.controls.name.setValue(this.item.name);
-      this.form.controls.permissions.clear();
-      this.item.permissions.forEach((x) =>
-        this.form.controls.permissions.push(
-          new FormGroup({
-            permission: new FormControl<boolean>(x.enabled, { nonNullable: true }),
-          }),
-        ),
-      );
-
-      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
+    effect(() => {
+      // Track changes to includedRoles explicitly
+      this.model().includedRoles.map((x) => x.role);
       this.applyIncludedRolePermissionLocks();
     });
   }
 
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.nameElement.nativeElement.focus();
-    }, 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.model.update((currentModel) => {
+      const implied = new Set<string>();
+      const currentItem = this.item();
 
-    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));
-      }
-    });
+      currentItem.includedRoles.forEach((roleOpt, idx) => {
+        const checked = currentModel.includedRoles[idx]?.role;
+        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 newPerms = [...currentModel.permissions];
+      let changed = false;
 
-      const isImplied = implied.has(perm.id as string);
-      const isDirect = perm.enabled === true; // from backend: direct assignment
+      currentItem.permissions.forEach((perm, idx) => {
+        const isImplied = implied.has(perm.id as string);
+        const isDirect = perm.enabled === true;
 
-      if (isImplied) {
-        // must be checked + disabled
-        ctrl.setValue(true, { emitEvent: false });
-        ctrl.disable({ emitEvent: false });
-      } else {
-        // not implied -> enable checkbox
-        ctrl.enable({ emitEvent: false });
+        if (!newPerms[idx]) return;
 
-        // restore to direct-enabled state (so user sees what is explicitly on the role)
-        ctrl.setValue(isDirect, { emitEvent: false });
+        if (isImplied) {
+          if (!newPerms[idx].permission || !newPerms[idx].disabled) {
+            newPerms[idx] = { permission: true, disabled: true };
+            changed = true;
+          }
+        } else {
+          if (newPerms[idx].permission !== isDirect || newPerms[idx].disabled) {
+            newPerms[idx] = { permission: isDirect, disabled: false };
+            changed = true;
+          }
+        }
+      });
+
+      if (changed) {
+        return { ...currentModel, permissions: newPerms };
       }
+      return currentModel;
     });
   }
 
@@ -148,19 +119,19 @@ export class RoleDetailComponent implements OnInit, AfterViewInit, OnDestroy {
         this.router.navigateByUrl('/roles');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   delete() {
-    this.ser.delete(this.item.id as string).subscribe({
+    this.ser.delete(this.item().id as string).subscribe({
       next: () => {
         this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/roles');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
@@ -179,24 +150,22 @@ export class RoleDetailComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   getItem(): Role {
-    const formModel = this.form.value;
-    this.item.name = formModel.name ?? '';
-    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
+    const formModel = this.model();
+    const currentItem = this.item();
+    currentItem.name = formModel.name ?? '';
+    const permArray = formModel.permissions;
+
+    currentItem.permissions.forEach((p, index) => {
+      if (permArray[index]?.disabled) {
         return;
       }
-      p.enabled = permArray.at(index).controls.permission.value;
+      p.enabled = permArray[index]?.permission ?? false;
     });
-    // 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;
+
+    const includeArray = formModel.includedRoles;
+    currentItem.includedRoles.forEach((r, index) => {
+      r.enabled = includeArray[index]?.role ?? false;
     });
-    return this.item;
+    return currentItem;
   }
 }