Consolidated commit message to v22 signals

overlord/src/app/user/user-detail/user-detail.component.html

@@ -1,33 +1,40 @@
 <h2>User</h2>
 
-<form [formGroup]="form" class="flex flex-col wrapped">
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Name</mat-label>
-      <input matInput #nameElement formControlName="name" />
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Password</mat-label>
-      <input matInput formControlName="password" [type]="hide ? 'password' : 'text'" />
-      <mat-icon matSuffix (click)="hide = !hide">{{ hide ? 'visibility' : 'visibility_off' }}</mat-icon>
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-checkbox formControlName="lockedOut" class="flex-auto">Is Locked Out?</mat-checkbox>
-  </div>
-  <mat-divider></mat-divider>
-  <div formArrayName="roles">
-    @for (r of item.roles; track r; let i = $index) {
-      <div [formGroupName]="i" class="flex flex-row justify-around content-start items-start">
-        <mat-checkbox formControlName="role" class="flex-auto">{{ r.name }}</mat-checkbox>
-      </div>
-    }
-  </div>
-</form>
+@if (itemResource.isLoading()) {
+  <app-skeleton-loader type="card" [count]="1" />
+  <app-skeleton-loader type="line" [count]="10" />
+} @else if (itemResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="itemResource.reload()" />
+} @else {
+  <form class="flex flex-col wrapped" [formRoot]="form">
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Name</mat-label>
+        <input matInput #nameElement [formField]="form.name" />
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Password</mat-label>
+        <input matInput [formField]="form.password" [type]="hide ? 'password' : 'text'" />
+        <mat-icon matSuffix (click)="hide = !hide">{{ hide ? 'visibility' : 'visibility_off' }}</mat-icon>
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      <mat-checkbox [formField]="form.lockedOut" class="flex-auto">Is Locked Out?</mat-checkbox>
+    </div>
+    <mat-divider></mat-divider>
+    <div>
+      @for (r of form.roles; track r; let i = $index) {
+        <div class="row-container">
+          <mat-checkbox [formField]="r.enabled" class="flex-auto">{{ r.name().value() }}</mat-checkbox>
+        </div>
+      }
+    </div>
+  </form>
 
-<div class="row-container">
-  <button mat-raised-button color="primary" (click)="save()">Save</button>
-  <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-</div>
+  <div class="row-container">
+    <button mat-raised-button color="primary" (click)="save()">Save</button>
+    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+  </div>
+}

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

@@ -1,5 +1,5 @@
-import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
-import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, input, computed, linkedSignal, afterNextRender } 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';
@@ -8,96 +8,80 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { User } from '../../core/user';
 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 { UserService } from '../user.service';
 
+export interface UserDetailFormData {
+  name: string;
+  password: string;
+  lockedOut: boolean;
+  roles: { id: string; name: string; enabled: boolean }[];
+}
 @Component({
   selector: 'app-user-detail',
   templateUrl: './user-detail.component.html',
   styleUrls: ['./user-detail.component.css'],
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatIconModule,
     MatCheckboxModule,
     MatDividerModule,
     MatButtonModule,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class UserDetailComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class UserDetailComponent {
+  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(UserService);
 
-  @ViewChild('nameElement', { static: true }) nameElement!: ElementRef<HTMLInputElement>;
-  form: FormGroup<{
-    name: FormControl<string | null>;
-    password: FormControl<string | null>;
-    lockedOut: FormControl<boolean>;
-    roles: FormArray<
-      FormGroup<{
-        role: FormControl<boolean>;
-      }>
-    >;
-  }>;
+  itemResource = this.ser.get(this.id);
 
-  item: User = new User();
-  hide: boolean;
+  item = computed(() => this.itemResource.value() ?? new User());
+
+  formModel = linkedSignal({
+    source: this.item,
+    computation: (itemVal): UserDetailFormData => ({
+      name: itemVal.name ?? '',
+      password: '',
+      lockedOut: itemVal.lockedOut,
+      roles: itemVal.roles.map((x) => ({ id: x.id ?? '', name: x.name, enabled: x.enabled })),
+    }),
+  });
+
+  form = createForm(this.formModel);
+
+  hide = true;
 
   constructor() {
-    this.hide = true;
-    this.form = new FormGroup({
-      name: new FormControl<string | null>(null),
-      password: new FormControl<string | null>(null),
-      lockedOut: new FormControl<boolean>(false, { nonNullable: true }),
-      roles: new FormArray<FormGroup<{ role: FormControl<boolean> }>>([]),
+    afterNextRender(() => {
+      this.form().focusBoundControl();
+      // this.form.name().focusBoundControl();
     });
   }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { item: User };
-
-      this.showItem(data.item);
-    });
-  }
-
-  showItem(item: User) {
-    this.item = item;
-    this.form.controls.name.setValue(item.name);
-    this.form.controls.password.setValue(null);
-    this.form.controls.lockedOut.setValue(item.lockedOut);
-    this.form.controls.roles.clear();
-    this.item.roles.forEach((x) =>
-      this.form.controls.roles.push(
-        new FormGroup({
-          role: new FormControl<boolean>(x.enabled, { nonNullable: true }),
-        }),
-      ),
-    );
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.nameElement.nativeElement.focus();
-    }, 0);
-  }
-
   save() {
-    if (this.route.snapshot.paramMap.get('id') === 'me') {
+    if (this.id() === 'me') {
       this.ser.updateMe(this.getItem()).subscribe({
         next: () => {
           this.snackBar.open('', 'Success');
           this.router.navigateByUrl('/');
         },
         error: (error) => {
-          this.snackBar.open(error, 'Danger');
+          this.snackBar.open(error as string, 'Danger');
         },
       });
     } else {
@@ -107,20 +91,20 @@ export class UserDetailComponent implements OnInit, AfterViewInit {
           this.router.navigateByUrl('/users');
         },
         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('/users');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
@@ -139,14 +123,13 @@ export class UserDetailComponent implements OnInit, AfterViewInit {
   }
 
   getItem(): User {
-    const formModel = this.form.value;
-    this.item.name = formModel.name ?? '';
-    this.item.password = formModel.password ?? '';
-    this.item.lockedOut = formModel.lockedOut ?? true;
-    const array = this.form.controls.roles;
-    this.item.roles.forEach((item, index) => {
-      item.enabled = array.controls[index].value.role ?? false;
+    const formModel = this.formModel();
+    return new User({
+      ...this.item(),
+      name: formModel.name ?? '',
+      password: formModel.password ?? '',
+      lockedOut: formModel.lockedOut ?? true,
+      roles: formModel.roles.map((x) => ({ id: x.id ?? '', name: x.name, enabled: x.enabled })),
     });
-    return this.item;
   }
 }

overlord/src/app/user/user-list.resolver.spec.ts

@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { User } from '../core/user';
-import { userListResolver } from './user-list.resolver';
-
-describe('userListResolver', () => {
-  const executeResolver: ResolveFn<User[]> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => userListResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});

overlord/src/app/user/user-list.resolver.ts

@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { User } from '../core/user';
-import { UserService } from './user.service';
-
-export const userListResolver: ResolveFn<User[]> = () => {
-  return inject(UserService).list();
-};

overlord/src/app/user/user-list/user-list-datasource.ts

@@ -1,70 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { User } from '../../core/user';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-
-export class UserListDataSource extends DataSource<User> {
-  constructor(
-    public data: User[],
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-  }
-
-  connect(): Observable<User[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    // Set the paginators length
-    if (this.paginator) {
-      this.paginator.length = this.data.length;
-    }
-
-    return merge(observableOf(this.data), ...dataMutations).pipe(
-      map(() => this.getPagedData(this.getSortedData([...this.data]))),
-    );
-  }
-
-  disconnect() {}
-
-  private getPagedData(data: User[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: User[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'name':
-          return compare(a.name, b.name, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}

overlord/src/app/user/user-list/user-list.component.html

@@ -6,50 +6,56 @@
   </a>
 </h2>
 
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Name Column -->
-  <ng-container matColumnDef="name">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-    <mat-cell *matCellDef="let row"
-      ><a [routerLink]="['/users', row.id]">{{ row.name }}</a></mat-cell
-    >
-  </ng-container>
+@if (listResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (listResource.error()) {
+  <app-error-state [message]="'Failed to load list.'" (retryAction)="listResource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+      <mat-cell *matCellDef="let row"
+        ><a [routerLink]="['/users', row.id]">{{ row.name }}</a></mat-cell
+      >
+    </ng-container>
 
-  <!-- Locked Out Column -->
-  <ng-container matColumnDef="lockedOut">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Is Locked Out?</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.lockedOut }}</mat-cell>
-  </ng-container>
+    <!-- Locked Out Column -->
+    <ng-container matColumnDef="lockedOut">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Is Locked Out?</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.lockedOut }}</mat-cell>
+    </ng-container>
 
-  <!-- Roles Column -->
-  <ng-container matColumnDef="roles">
-    <mat-header-cell *matHeaderCellDef>Roles</mat-header-cell>
-    <mat-cell *matCellDef="let row">
-      <ul>
-        @for (role of row.roles; track role) {
-          <li>{{ role }}</li>
-        }
-      </ul>
-    </mat-cell>
-  </ng-container>
+    <!-- Roles Column -->
+    <ng-container matColumnDef="roles">
+      <mat-header-cell *matHeaderCellDef>Roles</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        <ul>
+          @for (role of row.roles; track role) {
+            <li>{{ role }}</li>
+          }
+        </ul>
+      </mat-cell>
+    </ng-container>
 
-  <!-- Last Login Column -->
-  <ng-container matColumnDef="last">
-    <mat-header-cell *matHeaderCellDef>Last Login</mat-header-cell>
-    <mat-cell *matCellDef="let row"
-      >{{ row.lastDevice }} &#64; {{ row.lastDate ? (row.lastDate | localTime) : 'Never' }}</mat-cell
-    >
-  </ng-container>
+    <!-- Last Login Column -->
+    <ng-container matColumnDef="last">
+      <mat-header-cell *matHeaderCellDef>Last Login</mat-header-cell>
+      <mat-cell *matCellDef="let row"
+        >{{ row.lastDevice }} &#64; {{ row.lastDate ? (row.lastDate | localTime) : 'Never' }}</mat-cell
+      >
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="list().length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250]"
+  >
+  </mat-paginator>
+}

overlord/src/app/user/user-list/user-list.component.ts

@@ -1,35 +1,78 @@
-import { Component, inject, OnInit, ViewChild } from '@angular/core';
+import { Component, computed, inject, signal } from '@angular/core';
+import { MatButton } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterModule } from '@angular/router';
+import { RouterModule } from '@angular/router';
 
-import { User } from '../../core/user';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
 import { LocalTimePipe } from '../../shared/local-time.pipe';
-import { UserListDataSource } from './user-list-datasource';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
+import { UserService } from '../user.service';
 
 @Component({
   selector: 'app-user-list',
   templateUrl: './user-list.component.html',
   styleUrls: ['./user-list.component.css'],
-  imports: [RouterModule, MatTableModule, MatIconModule, MatSortModule, MatPaginatorModule, LocalTimePipe],
+  imports: [
+    RouterModule,
+    MatTableModule,
+    MatButton,
+    MatIconModule,
+    MatSortModule,
+    MatPaginatorModule,
+    LocalTimePipe,
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
+  ],
 })
-export class UserListComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class UserListComponent {
+  private ser = inject(UserService);
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+  listResource = this.ser.list();
+  list = computed(() => this.listResource.value() ?? []);
+  sortedList = computed(() => {
+    const data = this.list();
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'name':
+          return compare(a.name, b.name, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  list: User[] = [];
-  dataSource: UserListDataSource = new UserListDataSource(this.list);
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['name', 'lockedOut', 'roles', 'last'];
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { list: User[] };
-      this.list = data.list;
-    });
-    this.dataSource = new UserListDataSource(this.list, this.paginator, this.sort);
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
   }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);

overlord/src/app/user/user.resolver.spec.ts

@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { User } from '../core/user';
-import { userResolver } from './user.resolver';
-
-describe('userResolver', () => {
-  const executeResolver: ResolveFn<User> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => userResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});

overlord/src/app/user/user.resolver.ts

@@ -1,10 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { User } from '../core/user';
-import { UserService } from './user.service';
-
-export const userResolver: ResolveFn<User> = (route) => {
-  const id = route.paramMap.get('id');
-  return inject(UserService).get(id);
-};

overlord/src/app/user/user.routes.ts

@@ -2,9 +2,7 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { UserDetailComponent } from './user-detail/user-detail.component';
-import { userListResolver } from './user-list.resolver';
 import { UserListComponent } from './user-list/user-list.component';
-import { userResolver } from './user.resolver';
 
 export const routes: Routes = [
   {
@@ -14,9 +12,6 @@ export const routes: Routes = [
     data: {
       permission: 'Users',
     },
-    resolve: {
-      list: userListResolver,
-    },
   },
   {
     path: 'new',
@@ -25,16 +20,10 @@ export const routes: Routes = [
     data: {
       permission: 'Users',
     },
-    resolve: {
-      item: userResolver,
-    },
   },
   {
     path: ':id',
     component: UserDetailComponent,
     canActivate: [authGuard],
-    resolve: {
-      item: userResolver,
-    },
   },
 ];

overlord/src/app/user/user.service.ts

@@ -1,5 +1,5 @@
-import { HttpClient } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
+import { HttpClient, httpResource } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
 
@@ -7,8 +7,6 @@ import { ErrorLoggerService } from '../core/error-logger.service';
 import { User } from '../core/user';
 
 const url = '/api/users';
-const serviceName = 'UserService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -16,41 +14,37 @@ export class UserService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  get(id: string | null): Observable<User> {
-    const getUrl: string = id === null ? `${url}` : `${url}/${id}`;
-    return this.http
-      .get<User>(getUrl)
-      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<User>;
+  get(id: Signal<string | null>) {
+    return httpResource<User>(() => {
+      const getUrl: string = id() === null ? `${url}` : `${url}/${id()}`;
+      return getUrl;
+    });
   }
 
-  list(): Observable<User[]> {
-    return this.http
-      .get<User[]>(`${url}/list`)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<User[]>;
+  list() {
+    return httpResource<User[]>(() => `${url}/list`);
   }
 
-  listOfNames(): Observable<string[]> {
-    return this.http
-      .get<string[]>(`${url}/active`)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<string[]>;
+  listOfNames() {
+    return httpResource<string[]>(() => `${url}/active`);
   }
 
   save(user: User): Observable<User> {
     return this.http
       .post<User>(`${url}`, user)
-      .pipe(catchError(this.log.handleError(serviceName, 'save'))) as Observable<User>;
+      .pipe(catchError(this.log.handleError('UserService', 'save'))) as Observable<User>;
   }
 
   update(user: User): Observable<User> {
     return this.http
       .put<User>(`${url}/${user.id}`, user)
-      .pipe(catchError(this.log.handleError(serviceName, 'update'))) as Observable<User>;
+      .pipe(catchError(this.log.handleError('UserService', 'update'))) as Observable<User>;
   }
 
   updateMe(user: User): Observable<User> {
     return this.http
       .put<User>(`${url}/me`, user)
-      .pipe(catchError(this.log.handleError(serviceName, 'update'))) as Observable<User>;
+      .pipe(catchError(this.log.handleError('UserService', 'update'))) as Observable<User>;
   }
 
   saveOrUpdate(user: User): Observable<User> {
@@ -63,6 +57,6 @@ export class UserService {
   delete(id: string): Observable<User> {
     return this.http
       .delete<User>(`${url}/${id}`)
-      .pipe(catchError(this.log.handleError(serviceName, 'delete'))) as Observable<User>;
+      .pipe(catchError(this.log.handleError('UserService', 'delete'))) as Observable<User>;
   }
 }