Consolidated commit message to v22 signals

overlord/src/app/employee-functions/employee-functions.component.ts

@@ -1,5 +1,5 @@
-import { Component, inject } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, signal } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepicker, MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -16,8 +16,8 @@ import { EmployeeFunctionsService } from './employee-functions.service';
   styleUrls: ['./employee-functions.component.css'],
   imports: [
     MatTabsModule,
-
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -28,46 +28,44 @@ export class EmployeeFunctionsComponent {
   private snackBar = inject(MatSnackBar);
   private ser = inject(EmployeeFunctionsService);
 
-  creditSalaryForm: FormGroup<{
-    date: FormControl<moment.Moment>;
-  }>;
+  creditSalaryModel = signal({
+    date: moment().date(moment().daysInMonth()),
+  });
 
-  attendanceRecordForm: FormGroup<{
-    startDate: FormControl<moment.Moment>;
-    finishDate: FormControl<moment.Moment>;
-  }>;
+  creditSalaryForm = createForm(this.creditSalaryModel);
+
+  attendanceRecordModel = signal({
+    startDate: moment(),
+    finishDate: moment(),
+  });
+
+  attendanceRecordForm = createForm(this.attendanceRecordModel);
 
   fingerprintFile: File | null = null;
 
   constructor() {
     const startDate = moment().date(1);
     const finishDate = moment().date(startDate.daysInMonth());
-    this.creditSalaryForm = new FormGroup({
-      date: new FormControl(finishDate, { nonNullable: true }),
-    });
-    this.attendanceRecordForm = new FormGroup({
-      startDate: new FormControl(moment(), { nonNullable: true }),
-      finishDate: new FormControl(moment(), { nonNullable: true }),
-    });
+    this.creditSalaryModel.set({ date: finishDate });
   }
 
   chosenYearHandler(normalizedYear: moment.Moment) {
-    const ctrlValue = this.creditSalaryForm.value.date ?? moment();
+    const ctrlValue = this.creditSalaryModel().date ?? moment();
     ctrlValue.year(normalizedYear.year());
     ctrlValue.date(ctrlValue.daysInMonth());
-    this.creditSalaryForm.setValue({ date: ctrlValue });
+    this.creditSalaryModel.update((m) => ({ ...m, date: ctrlValue }));
   }
 
   chosenMonthHandler(normlizedMonth: moment.Moment, datepicker: MatDatepicker<moment.Moment>) {
-    const ctrlValue = this.creditSalaryForm.value.date ?? moment();
+    const ctrlValue = this.creditSalaryModel().date ?? moment();
     ctrlValue.month(normlizedMonth.month());
     ctrlValue.date(ctrlValue.daysInMonth());
-    this.creditSalaryForm.setValue({ date: ctrlValue });
+    this.creditSalaryModel.update((m) => ({ ...m, date: ctrlValue }));
     datepicker.close();
   }
 
   creditSalary() {
-    const date = (this.creditSalaryForm.value.date ?? moment()).format('DD-MMM-YYYY');
+    const date = (this.creditSalaryModel().date ?? moment()).format('DD-MMM-YYYY');
     if (!date) {
       this.snackBar.open('Please choose a valid date.', 'Danger');
       return;
@@ -77,14 +75,14 @@ export class EmployeeFunctionsComponent {
         this.snackBar.open('Salaries Credited', 'Success');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   attendanceRecordUrl() {
-    const startDate = (this.attendanceRecordForm.value.startDate ?? moment()).format('DD-MMM-YYYY');
-    const finishDate = (this.attendanceRecordForm.value.finishDate ?? moment()).format('DD-MMM-YYYY');
+    const startDate = (this.attendanceRecordModel().startDate ?? moment()).format('DD-MMM-YYYY');
+    const finishDate = (this.attendanceRecordModel().finishDate ?? moment()).format('DD-MMM-YYYY');
     if (!startDate || !finishDate) {
       // this.snackBar.open('Please choose a start and finish date.', 'Danger');
       return '';
@@ -93,8 +91,8 @@ export class EmployeeFunctionsComponent {
   }
 
   fingerPrintUrl() {
-    const startDate = (this.attendanceRecordForm.value.startDate ?? moment()).format('DD-MMM-YYYY');
-    const finishDate = (this.attendanceRecordForm.value.finishDate ?? moment()).format('DD-MMM-YYYY');
+    const startDate = (this.attendanceRecordModel().startDate ?? moment()).format('DD-MMM-YYYY');
+    const finishDate = (this.attendanceRecordModel().finishDate ?? moment()).format('DD-MMM-YYYY');
     if (!startDate || !finishDate) {
       // this.snackBar.open('Please choose a start and finish date.', 'Danger');
       return '';
@@ -116,7 +114,7 @@ export class EmployeeFunctionsComponent {
         this.snackBar.open('Fingerprints uploaded', 'Success');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }