Consolidated commit message to v22 signals

overlord/src/app/settings/lock-datasource.ts

@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable } from 'rxjs';
-
-import { LockInfo } from './lock-info';
-
-export class LockDataSource extends DataSource<LockInfo> {
-  constructor(private data: Observable<LockInfo[]>) {
-    super();
-  }
-
-  connect(): Observable<LockInfo[]> {
-    return this.data;
-  }
-
-  disconnect() {}
-}

overlord/src/app/settings/lock-information.resolver.ts

@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { LockInfo } from './lock-info';
-import { SettingsService } from './settings.service';
-
-export const lockInformationResolver: ResolveFn<[LockInfo]> = () => {
-  return inject(SettingsService).getLockInformation();
-};

overlord/src/app/settings/maintenance.resolver.ts

@@ -1,8 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { SettingsService } from './settings.service';
-
-export const maintenanceResolver: ResolveFn<{ enabled: boolean; user: string }> = () => {
-  return inject(SettingsService).getMaintenance();
-};

overlord/src/app/settings/settings.component.html

@@ -1,64 +1,68 @@
 <mat-tab-group>
   <mat-tab label="Lock Dates">
-    <form [formGroup]="lockInfoForm" class="flex flex-col">
+    <form class="flex flex-col" [formRoot]="lockInfoForm">
       <div class="row-container">
-        <mat-checkbox formControlName="lockOlder" class="flex-auto basis-1-5">Lock Older</mat-checkbox>
-        @if (lockOlder) {
-          <mat-checkbox formControlName="olderRolling" class="flex-auto basis-1-5"> Is Rolling </mat-checkbox>
+        <mat-checkbox [formField]="lockInfoForm.lockOlder" class="flex-auto basis-1-5">Lock Older</mat-checkbox>
+        @if (lockOlder()) {
+          <mat-checkbox [formField]="lockInfoForm.olderRolling" class="flex-auto basis-1-5"> Is Rolling </mat-checkbox>
         }
-        @if (lockOlder && !olderRolling) {
+        @if (lockOlder() && !olderRolling()) {
           <mat-form-field class="flex-auto basis-3-5">
             <mat-label>Date</mat-label>
-            <input matInput [matDatepicker]="olderDate" formControlName="olderDate" autocomplete="off" />
+            <input matInput [matDatepicker]="olderDate" [formField]="lockInfoForm.olderDate" autocomplete="off" />
             <mat-datepicker-toggle matSuffix [for]="olderDate"></mat-datepicker-toggle>
             <mat-datepicker #olderDate></mat-datepicker>
           </mat-form-field>
         }
-        @if (lockOlder && olderRolling) {
+        @if (lockOlder() && olderRolling()) {
           <mat-form-field class="flex-auto basis-3-5">
             <mat-label>Days</mat-label>
-            <input matInput formControlName="olderDays" autocomplete="off" />
+            <input matInput type="number" [formField]="lockInfoForm.olderDays" autocomplete="off" />
           </mat-form-field>
         }
       </div>
       <div class="row-container">
-        <mat-checkbox formControlName="lockNewer" class="flex-auto basis-1-5">Lock Newer</mat-checkbox>
-        @if (lockNewer) {
-          <mat-checkbox formControlName="newerRolling" class="flex-auto basis-1-5"> Is Rolling </mat-checkbox>
+        <mat-checkbox [formField]="lockInfoForm.lockNewer" class="flex-auto basis-1-5">Lock Newer</mat-checkbox>
+        @if (lockNewer()) {
+          <mat-checkbox [formField]="lockInfoForm.newerRolling" class="flex-auto basis-1-5"> Is Rolling </mat-checkbox>
         }
-        @if (lockNewer && !newerRolling) {
+        @if (lockNewer() && !newerRolling()) {
           <mat-form-field class="flex-auto basis-3-5">
-            <input
-              matInput
-              [matDatepicker]="newerDate"
-              placehnewer="Date"
-              formControlName="newerDate"
-              autocomplete="off"
-            />
+            <mat-label>Date</mat-label>
+            <input matInput [matDatepicker]="newerDate" [formField]="lockInfoForm.newerDate" autocomplete="off" />
             <mat-datepicker-toggle matSuffix [for]="newerDate"></mat-datepicker-toggle>
             <mat-datepicker #newerDate></mat-datepicker>
           </mat-form-field>
         }
-        @if (lockNewer && newerRolling) {
+        @if (lockNewer() && newerRolling()) {
           <mat-form-field class="flex-auto basis-3-5">
-            <input matInput placehnewer="Days" formControlName="newerDays" autocomplete="off" />
+            <mat-label>Days</mat-label>
+            <input matInput type="number" [formField]="lockInfoForm.newerDays" autocomplete="off" />
           </mat-form-field>
         }
       </div>
       <div class="row-container">
-        <div formArrayName="accountTypes">
+        <div>
           <h3>Account Types</h3>
-          @for (at of accountTypes; track at; let i = $index) {
-            <div [formGroupName]="i" class="flex flex-row justify-around content-start items-start">
-              <mat-checkbox formControlName="accountType" class="flex-auto">{{ at.name }}</mat-checkbox>
+          @for (at of accountTypes(); track at; let i = $index) {
+            <div class="flex flex-row justify-around content-start items-start">
+              @if (lockInfoForm.accountTypes[i]) {
+                <mat-checkbox [formField]="lockInfoForm.accountTypes[i].accountType" class="flex-auto">{{
+                  at.name
+                }}</mat-checkbox>
+              }
             </div>
           }
         </div>
-        <div formArrayName="voucherTypes">
+        <div>
           <h3>Voucher Types</h3>
-          @for (vt of voucherTypes; track vt; let j = $index) {
-            <div [formGroupName]="j" class="flex flex-row justify-around content-start items-start">
-              <mat-checkbox formControlName="voucherType" class="flex-auto">{{ vt.name }}</mat-checkbox>
+          @for (vt of voucherTypes(); track vt; let j = $index) {
+            <div class="flex flex-row justify-around content-start items-start">
+              @if (lockInfoForm.voucherTypes[j]) {
+                <mat-checkbox [formField]="lockInfoForm.voucherTypes[j].voucherType" class="flex-auto">{{
+                  vt.name
+                }}</mat-checkbox>
+              }
             </div>
           }
         </div>
@@ -66,23 +70,23 @@
       <div class="row-container">
         <mat-form-field class="flex-auto basis-30">
           <mat-label>Valid From</mat-label>
-          <input matInput [matDatepicker]="validFrom" formControlName="validFrom" autocomplete="off" />
+          <input matInput [matDatepicker]="validFrom" [formField]="lockInfoForm.validFrom" autocomplete="off" />
           <mat-datepicker-toggle matSuffix [for]="validFrom"></mat-datepicker-toggle>
           <mat-datepicker #validFrom></mat-datepicker>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-30">
           <mat-label>Valid Till</mat-label>
-          <input matInput [matDatepicker]="validTill" formControlName="validTill" autocomplete="off" />
+          <input matInput [matDatepicker]="validTill" [formField]="lockInfoForm.validTill" autocomplete="off" />
           <mat-datepicker-toggle matSuffix [for]="validTill"></mat-datepicker-toggle>
           <mat-datepicker #validTill></mat-datepicker>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1-5">
           <mat-label>Index</mat-label>
-          <input type="text" matInput formControlName="index" autocomplete="off" />
+          <input type="number" matInput [formField]="lockInfoForm.index" autocomplete="off" />
         </mat-form-field>
         <button mat-raised-button color="primary" (click)="saveLock()" class="flex-auto basis-1-5">Add</button>
       </div>
-      <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
+      <mat-table #table [dataSource]="this.lockInformation()">
         <!-- Index Column -->
         <ng-container matColumnDef="index">
           <mat-header-cell *matHeaderCellDef>Index</mat-header-cell>
@@ -149,7 +153,7 @@
     </form>
   </mat-tab>
   <mat-tab label="Rebase Data">
-    <form [formGroup]="rebaseDataForm" class="flex flex-col">
+    <form class="flex flex-col" [formRoot]="rebaseDataForm">
       <div class="row-container">
         <mat-form-field class="flex-auto basis-4-5">
           <mat-label>Date</mat-label>
@@ -157,7 +161,7 @@
             matInput
             [matDatepicker]="rebaseDataDate"
             (focus)="rebaseDataDate.open()"
-            formControlName="date"
+            [formField]="rebaseDataForm.date"
             autocomplete="off"
           />
           <mat-datepicker-toggle matSuffix [for]="rebaseDataDate"></mat-datepicker-toggle>
@@ -169,23 +173,23 @@
     </form>
   </mat-tab>
   <mat-tab label="Maintenance Mode">
-    @if (maintenance.enabled) {
+    @if (maintenance().enabled) {
       <div class="row-container">
-        Maintenance mode is <strong>ENABLED</strong> by user <strong>{{ maintenance.user }}</strong
+        Maintenance mode is <strong>ENABLED</strong> by user <strong>{{ maintenance().user }}</strong
         >.
       </div>
     }
-    @if (!maintenance.enabled) {
+    @if (!maintenance().enabled) {
       <div class="row-container">Maintenance mode is <strong>DISABLED</strong>.</div>
     }
 
     <button
       mat-raised-button
-      [color]="maintenance.enabled ? 'warn' : 'primary'"
+      [color]="maintenance().enabled ? 'warn' : 'primary'"
       (click)="toggleMaintenance()"
       class="flex-auto"
     >
-      {{ maintenance.enabled ? 'Disable' : 'Enable' }}
+      {{ maintenance().enabled ? 'Disable' : 'Enable' }}
     </button>
   </mat-tab>
 </mat-tab-group>

overlord/src/app/settings/settings.component.ts

@@ -1,5 +1,5 @@
-import { Component, inject, OnInit } from '@angular/core';
-import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { signal, computed, linkedSignal, Component, inject } 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 { MatDatepickerModule } from '@angular/material/datepicker';
@@ -11,17 +11,33 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
-import { BehaviorSubject } from 'rxjs';
 
+import { AccountTypeService } from '../account/account-type.service';
 import { environment } from '../app.environment';
 import { AuthService } from '../auth/auth.service';
 import { AccountType } from '../core/account-type';
 import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
-import { LockDataSource } from './lock-datasource';
 import { LockInfo } from './lock-info';
 import { SettingsService } from './settings.service';
+import { VoucherTypeService } from './voucher-type.service';
+
+export interface LockInfoFormData {
+  validFrom: moment.Moment | null;
+  validTill: moment.Moment | null;
+  index: number;
+  lockOlder: boolean;
+  olderRolling: boolean;
+  olderDate: moment.Moment;
+  olderDays: number;
+  lockNewer: boolean;
+  newerRolling: boolean;
+  newerDate: moment.Moment;
+  newerDays: number;
+  accountTypes: { accountType: boolean }[];
+  voucherTypes: { voucherType: boolean }[];
+}
 
 @Component({
   selector: 'app-settings',
@@ -29,8 +45,8 @@ import { SettingsService } from './settings.service';
   styleUrls: ['./settings.component.css'],
   imports: [
     MatTabsModule,
-
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatCheckboxModule,
     MatFormFieldModule,
     MatInputModule,
@@ -41,173 +57,113 @@ import { SettingsService } from './settings.service';
     MatIconModule,
   ],
 })
-export class SettingsComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class SettingsComponent {
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
   auth = inject(AuthService);
   private ser = inject(SettingsService);
+  private accTypeSer = inject(AccountTypeService);
+  private voucherTypeSer = inject(VoucherTypeService);
 
-  public lockObservable = new BehaviorSubject<LockInfo[]>([]);
-  dataSource: LockDataSource = new LockDataSource(this.lockObservable);
+  maintenanceResource = this.ser.getMaintenance();
+  lockInformationResource = this.ser.getLockInformation();
+  accountTypesResource = this.accTypeSer.list();
+  voucherTypesResource = this.voucherTypeSer.list();
 
-  accountTypes: AccountType[] = [];
-  voucherTypes: AccountType[] = [];
+  accountTypes = computed(() => this.accountTypesResource.value() ?? []);
+  voucherTypes = computed(() => this.voucherTypesResource.value() ?? []);
 
-  lockInfoForm: FormGroup<{
-    validFrom: FormControl<moment.Moment | null>;
-    validTill: FormControl<moment.Moment | null>;
-    index: FormControl<number>;
-    lockOlder: FormControl<boolean>;
-    olderRolling: FormControl<boolean>;
-    olderDate: FormControl<moment.Moment | null>;
-    olderDays: FormControl<number | null>;
-    lockNewer: FormControl<boolean>;
-    newerRolling: FormControl<boolean>;
-    newerDate: FormControl<moment.Moment | null>;
-    newerDays: FormControl<number | null>;
-    accountTypes: FormArray<FormGroup<{ accountType: FormControl<boolean> }>>;
-    voucherTypes: FormArray<FormGroup<{ voucherType: FormControl<boolean> }>>;
-  }>;
+  lockInfoSource = computed(() => ({
+    accTypes: this.accountTypes(),
+    vchTypes: this.voucherTypes(),
+  }));
 
-  lockInformation: LockInfo[];
-  lockOlder = false;
-  olderRolling = false;
-  lockNewer = false;
-  newerRolling = false;
+  lockInfoModel = linkedSignal({
+    source: this.lockInfoSource,
+    computation: (s): LockInfoFormData => ({
+      validFrom: null as moment.Moment | null,
+      validTill: null as moment.Moment | null,
+      index: 0,
+      lockOlder: false,
+      olderRolling: false,
+      olderDate: moment().date(moment().date(1).daysInMonth()),
+      olderDays: 0,
+      lockNewer: false,
+      newerRolling: false,
+      newerDate: moment().date(moment().date(1).daysInMonth()),
+      newerDays: 0,
+      accountTypes: s.accTypes.map(() => ({ accountType: false })),
+      voucherTypes: s.vchTypes.map(() => ({ voucherType: false })),
+    }),
+  });
 
-  rebaseDataForm: FormGroup<{
-    date: FormControl<moment.Moment>;
-  }>;
+  lockInfoForm = createForm(this.lockInfoModel);
 
-  maintenance: { enabled: boolean; user: string };
+  lockInformation = linkedSignal<LockInfo[]>(() => this.lockInformationResource.value() ?? []);
+
+  lockOlder = computed(() => this.lockInfoModel().lockOlder);
+  olderRolling = computed(() => this.lockInfoModel().olderRolling);
+  lockNewer = computed(() => this.lockInfoModel().lockNewer);
+  newerRolling = computed(() => this.lockInfoModel().newerRolling);
+
+  rebaseDataModel = signal({
+    date: moment(),
+  });
+
+  rebaseDataForm = createForm(this.rebaseDataModel);
+
+  maintenance = linkedSignal(() => this.maintenanceResource.value() ?? { enabled: false, user: '' });
 
   displayedColumns = ['index', 'validity', 'voucherTypes', 'accountTypes', 'lock', 'action'];
 
   version: string;
 
   constructor() {
-    const startDate = moment().date(1);
-    const finishDate = moment().date(startDate.daysInMonth());
-    this.lockInfoForm = new FormGroup({
-      validFrom: new FormControl<moment.Moment | null>(null),
-      validTill: new FormControl<moment.Moment | null>(null),
-      index: new FormControl<number>(0, { nonNullable: true }),
-      lockOlder: new FormControl<boolean>(false, { nonNullable: true }),
-      olderRolling: new FormControl<boolean>(false, { nonNullable: true }),
-      olderDate: new FormControl<moment.Moment | null>(finishDate),
-      olderDays: new FormControl<number | null>(0),
-      lockNewer: new FormControl<boolean>(false, { nonNullable: true }),
-      newerRolling: new FormControl<boolean>(false, { nonNullable: true }),
-      newerDate: new FormControl<moment.Moment | null>(finishDate),
-      newerDays: new FormControl<number | null>(0),
-      accountTypes: new FormArray<FormGroup<{ accountType: FormControl<boolean> }>>([]),
-      voucherTypes: new FormArray<FormGroup<{ voucherType: FormControl<boolean> }>>([]),
-    });
-    this.lockInformation = [];
-    this.rebaseDataForm = new FormGroup({
-      date: new FormControl<moment.Moment>(moment(), { nonNullable: true }),
-    });
-
-    this.listenToLockForm();
-    this.maintenance = { enabled: false, user: '' };
     this.version = environment.version;
   }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as {
-        maintenance: { enabled: boolean; user: string };
-        lockInformation: [LockInfo];
-        accountTypes: AccountType[];
-        voucherTypes: AccountType[];
-      };
-      this.accountTypes = data.accountTypes;
-      this.voucherTypes = data.voucherTypes;
-      this.initLockAccountVoucherTypes();
-      this.showLockInformation(data.lockInformation);
-      this.maintenance = data.maintenance;
-    });
-  }
-
-  initLockAccountVoucherTypes() {
-    this.lockInfoForm.controls.accountTypes.clear();
-    this.accountTypes.forEach(() =>
-      this.lockInfoForm.controls.accountTypes.push(
-        new FormGroup({
-          accountType: new FormControl<boolean>(false, { nonNullable: true }),
-        }),
-      ),
-    );
-    this.lockInfoForm.controls.voucherTypes.clear();
-    this.voucherTypes.forEach(() =>
-      this.lockInfoForm.controls.voucherTypes.push(
-        new FormGroup({
-          voucherType: new FormControl<boolean>(false, { nonNullable: true }),
-        }),
-      ),
-    );
-  }
-
   showLockInformation(info: LockInfo[]) {
-    this.lockInformation = info;
-    this.dataSource = new LockDataSource(this.lockObservable);
-    this.lockObservable.next(this.lockInformation);
-  }
-
-  listenToLockForm() {
-    this.lockInfoForm.controls.lockOlder.valueChanges.subscribe((x) => {
-      this.lockOlder = x;
-    });
-    this.lockInfoForm.controls.lockNewer.valueChanges.subscribe((x) => {
-      this.lockNewer = x;
-    });
-    this.lockInfoForm.controls.olderRolling.valueChanges.subscribe((x) => {
-      this.olderRolling = x;
-    });
-    this.lockInfoForm.controls.newerRolling.valueChanges.subscribe((x) => {
-      this.newerRolling = x;
-    });
+    this.lockInformation.set(info);
   }
 
   saveLock() {
     const item = new LockInfo();
-    if (this.lockOlder && this.olderRolling) {
-      item.start.days = this.lockInfoForm.value.olderDays ?? 0;
-    } else if (this.lockOlder && !this.olderRolling) {
-      item.start.date = (this.lockInfoForm.value.olderDate ?? moment()).format('DD-MMM-YYYY');
+    const model = this.lockInfoModel();
+    if (this.lockOlder() && this.olderRolling()) {
+      item.start.days = model.olderDays ?? 0;
+    } else if (this.lockOlder() && !this.olderRolling()) {
+      item.start.date = (model.olderDate ?? moment()).format('DD-MMM-YYYY');
     }
-    if (this.lockNewer && this.newerRolling) {
-      item.finish.days = this.lockInfoForm.value.newerDays ?? 0;
+    if (this.lockNewer() && this.newerRolling()) {
+      item.finish.days = model.newerDays ?? 0;
     }
-    if (this.lockNewer && !this.newerRolling) {
-      item.finish.date = (this.lockInfoForm.value.newerDate ?? moment()).format('DD-MMM-YYYY');
+    if (this.lockNewer() && !this.newerRolling()) {
+      item.finish.date = (model.newerDate ?? moment()).format('DD-MMM-YYYY');
     }
-    const atArray = this.lockInfoForm.controls.accountTypes;
-    this.accountTypes.forEach((at, index) => {
-      if (atArray.controls[index].value.accountType) {
+
+    this.accountTypes().forEach((at: AccountType, index: number) => {
+      if (model.accountTypes[index]?.accountType) {
         item.accountTypes.push({ id: at.id, name: at.name });
       }
     });
 
-    const vtArray = this.lockInfoForm.controls.voucherTypes;
-    this.voucherTypes.forEach((vt, index) => {
-      if (vtArray.controls[index].value.voucherType) {
+    this.voucherTypes().forEach((vt: AccountType, index: number) => {
+      if (model.voucherTypes[index]?.voucherType) {
         item.voucherTypes.push({ id: vt.id, name: vt.name });
       }
     });
 
-    const validFrom = this.lockInfoForm.value.validFrom;
+    const validFrom = model.validFrom;
     if (validFrom) {
       item.validFrom = moment(validFrom).format('DD-MMM-YYYY');
     }
 
-    const validTill = this.lockInfoForm.value.validTill;
+    const validTill = model.validTill;
     if (validTill) {
       item.validTill = moment(validTill).format('DD-MMM-YYYY');
     }
-    item.index = this.lockInfoForm.value.index ?? 0;
+    item.index = model.index ?? 0;
 
     this.ser.setLockInformation(item).subscribe({
       next: (result) => {
@@ -215,7 +171,7 @@ export class SettingsComponent implements OnInit {
         this.snackBar.open('Lock information Updated', 'Success');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
@@ -227,7 +183,7 @@ export class SettingsComponent implements OnInit {
   }
 
   confirmRebase(): void {
-    const rebaseDate = (this.rebaseDataForm.value.date ?? moment()).format('DD-MMM-YYYY');
+    const rebaseDate = (this.rebaseDataModel().date ?? moment()).format('DD-MMM-YYYY');
     const dialogRef = this.dialog.open(ConfirmDialogComponent, {
       width: '250px',
       data: {
@@ -249,14 +205,14 @@ export class SettingsComponent implements OnInit {
         this.snackBar.open('Data has been rebased!', 'Success');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   toggleMaintenance() {
-    this.ser.setMaintenance(!this.maintenance.enabled).subscribe((x) => {
-      this.maintenance = x;
+    this.ser.setMaintenance(!this.maintenance().enabled).subscribe((x) => {
+      this.maintenance.set(x);
     });
   }
 }

overlord/src/app/settings/settings.routes.ts

@@ -1,11 +1,7 @@
 import { Routes } from '@angular/router';
 
-import { accountTypeResolver } from '../account/account-type.resolver';
 import { authGuard } from '../auth/auth-guard.service';
-import { lockInformationResolver } from './lock-information.resolver';
-import { maintenanceResolver } from './maintenance.resolver';
 import { SettingsComponent } from './settings.component';
-import { voucherTypeResolver } from './voucher-type.resolver';
 
 export const routes: Routes = [
   {
@@ -15,12 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Maintenance', // 'Lock Date'
     },
-    resolve: {
-      maintenance: maintenanceResolver,
-      lockInformation: lockInformationResolver,
-      accountTypes: accountTypeResolver,
-      voucherTypes: voucherTypeResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];

overlord/src/app/settings/settings.service.ts

@@ -1,4 +1,4 @@
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, httpResource } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
@@ -6,66 +6,57 @@ import { catchError } from 'rxjs/operators';
 import { ErrorLoggerService } from '../core/error-logger.service';
 import { LockInfo } from './lock-info';
 
-const serviceName = 'SettingsService';
-
 @Injectable({ providedIn: 'root' })
 export class SettingsService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  getLockInformation(): Observable<[LockInfo]> {
+  getLockInformation() {
     const url = '/api/lock-information';
-    return this.http
-      .get<[LockInfo]>(url)
-      .pipe(catchError(this.log.handleError(serviceName, 'getLockInformation'))) as Observable<[LockInfo]>;
+    return httpResource<[LockInfo]>(() => url);
   }
 
   setLockInformation(lockInformation: LockInfo): Observable<LockInfo[]> {
     const url = '/api/lock-information';
     return this.http
       .post<LockInfo[]>(url, lockInformation)
-      .pipe(catchError(this.log.handleError(serviceName, 'setLockInformation'))) as Observable<LockInfo[]>;
+      .pipe(catchError(this.log.handleError('SettingsService', 'setLockInformation'))) as Observable<LockInfo[]>;
   }
 
   deleteLockInformation(id: string): Observable<LockInfo[]> {
     const url = '/api/lock-information';
     return this.http
       .delete<LockInfo[]>(`${url}/${id}`)
-      .pipe(catchError(this.log.handleError(serviceName, 'deleteLockInformation'))) as Observable<LockInfo[]>;
+      .pipe(catchError(this.log.handleError('SettingsService', 'deleteLockInformation'))) as Observable<LockInfo[]>;
   }
 
   rebaseDatabase(date: string): Observable<Record<string, never>> {
     const url = '/api/rebase';
     return this.http
       .post<Record<string, never>>(`${url}/${date}`, {})
-      .pipe(catchError(this.log.handleError(serviceName, 'rebaseDatabase'))) as Observable<Record<string, never>>;
+      .pipe(catchError(this.log.handleError('SettingsService', 'rebaseDatabase'))) as Observable<Record<string, never>>;
   }
 
   setMaintenance(enable: boolean): Observable<{ enabled: boolean; user: string }> {
     const url = '/api/maintenance';
     return this.http
       .post<{ enabled: boolean; user: string }>(url, { enabled: enable })
-      .pipe(catchError(this.log.handleError(serviceName, 'setMaintenance'))) as Observable<{
+      .pipe(catchError(this.log.handleError('SettingsService', 'setMaintenance'))) as Observable<{
       enabled: boolean;
       user: string;
     }>;
   }
 
-  getMaintenance(): Observable<{ enabled: boolean; user: string }> {
+  getMaintenance() {
     const url = '/api/maintenance';
-    return this.http
-      .get<{ enabled: boolean; user: string }>(url)
-      .pipe(catchError(this.log.handleError(serviceName, 'getMaintenance'))) as Observable<{
-      enabled: boolean;
-      user: string;
-    }>;
+    return httpResource<{ enabled: boolean; user: string }>(() => url);
   }
 
   checkDatabaseIntegrity(): Observable<{ attendanceCount: number }> {
     const url = '/api/db-integrity';
     return this.http
       .post<{ attendanceCount: number }>(url, {})
-      .pipe(catchError(this.log.handleError(serviceName, 'checkDatabaseIntegrity'))) as Observable<{
+      .pipe(catchError(this.log.handleError('SettingsService', 'checkDatabaseIntegrity'))) as Observable<{
       attendanceCount: number;
     }>;
   }

overlord/src/app/settings/voucher-type.resolver.ts

@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { AccountType } from '../core/account-type';
-import { VoucherTypeService } from './voucher-type.service';
-
-export const voucherTypeResolver: ResolveFn<AccountType[]> = () => {
-  return inject(VoucherTypeService).list();
-};

overlord/src/app/settings/voucher-type.service.ts

@@ -1,14 +1,10 @@
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, httpResource } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { catchError } from 'rxjs/operators';
 
 import { AccountType } from '../core/account-type';
 import { ErrorLoggerService } from '../core/error-logger.service';
 
 const url = '/api/voucher-types';
-const serviceName = 'VoucherTypeService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -16,9 +12,7 @@ export class VoucherTypeService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  list(): Observable<AccountType[]> {
-    return this.http.get<AccountType[]>(url).pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<
-      AccountType[]
-    >;
+  list() {
+    return httpResource<AccountType[]>(() => url);
   }
 }