Upgrade/angular 14 (#1853)

* Fix Loan product Payment Allocation

* Upgrade to Angular 14

---------

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>

src/app/centers/centers-view/center-actions/activate-center/activate-center.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -23,7 +23,7 @@ export class ActivateCenterComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Activate center form. */
-  activateCenterForm: FormGroup;
+  activateCenterForm: UntypedFormGroup;
   /** Group Account Id */
   centerId: any;
 
@@ -35,7 +35,7 @@ export class ActivateCenterComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private centersService: CentersService,
               private settingsService: SettingsService,
               private dateUtils: Dates,

src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -23,7 +23,7 @@ export class AttachCenterMeetingComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Center Meeting form. */
-  centerMeetingForm: FormGroup;
+  centerMeetingForm: UntypedFormGroup;
   /** Calnedar Template Data */
   calendarTemplate: any;
   /** Center Id */
@@ -44,7 +44,7 @@ export class AttachCenterMeetingComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private centersService: CentersService,
               private settingsService: SettingsService,
               private dateUtils: Dates,
@@ -80,8 +80,8 @@ export class AttachCenterMeetingComponent implements OnInit {
   buildDependencies() {
     this.centerMeetingForm.get('repeating').valueChanges.subscribe((value: boolean) => {
       if (value) {
-        this.centerMeetingForm.addControl('frequency', new FormControl());
-        this.centerMeetingForm.addControl('interval', new FormControl());
+        this.centerMeetingForm.addControl('frequency', new UntypedFormControl());
+        this.centerMeetingForm.addControl('interval', new UntypedFormControl());
         this.centerMeetingForm.get('frequency').valueChanges.subscribe((frequency: any) => {
           this.centerMeetingForm.removeControl('repeatsOnDay');
           switch (frequency) {
@@ -90,7 +90,7 @@ export class AttachCenterMeetingComponent implements OnInit {
             break;
             case 2: // Weekly
               this.repetitionIntervals = ['1', '2', '3'];
-              this.centerMeetingForm.addControl('repeatsOnDay', new FormControl('', Validators.required));
+              this.centerMeetingForm.addControl('repeatsOnDay', new UntypedFormControl('', Validators.required));
             break;
             case 3: // Monthly
               this.repetitionIntervals = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'];

src/app/centers/centers-view/center-actions/center-assign-staff/center-assign-staff.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -17,7 +17,7 @@ import { CentersService } from 'app/centers/centers.service';
 export class CenterAssignStaffComponent implements OnInit {
 
   /** Center Assign Staff form. */
-  centerAssignStaffForm: FormGroup;
+  centerAssignStaffForm: UntypedFormGroup;
   /** Field Officer Data */
   staffData: any;
   /** Center Data */
@@ -30,7 +30,7 @@ export class CenterAssignStaffComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private centersService: CentersService,
               private route: ActivatedRoute,
               private router: Router) {

src/app/centers/centers-view/center-actions/center-attendance/center-attendance.component.ts

@@ -2,7 +2,7 @@
 import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 
 /** Custom Services */
 import { CentersService } from 'app/centers/centers.service';
@@ -35,7 +35,7 @@ export class CenterAttendanceComponent implements OnInit {
   /** Columns to be displayed in member's attendance table. */
   displayedColumns: string[] = ['name', 'attendance'];
   /** Start Date Form Control */
-  meetingDate = new FormControl();
+  meetingDate = new UntypedFormControl();
   /** Meeting Dates Data */
   meetingDates: any[];
   /** Data source for client members table. */

src/app/centers/centers-view/center-actions/close-center/close-center.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -23,7 +23,7 @@ export class CloseCenterComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Close Share Account form. */
-  closeCenterForm: FormGroup;
+  closeCenterForm: UntypedFormGroup;
   /** Center Data */
   closureData: any;
   /** Center Id */
@@ -37,7 +37,7 @@ export class CloseCenterComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private centersService: CentersService,
               private settingsService: SettingsService,
               private dateUtils: Dates,

src/app/centers/centers-view/center-actions/edit-center-meeting-schedule/edit-center-meeting-schedule.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, FormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -23,7 +23,7 @@ export class EditCenterMeetingScheduleComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Center Meeting form. */
-  centerEditMeetingScheduleForm: FormGroup;
+  centerEditMeetingScheduleForm: UntypedFormGroup;
   /** Calendar Template Data */
   calendarTemplate: any;
   /** Center Id */
@@ -42,7 +42,7 @@ export class EditCenterMeetingScheduleComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private centersService: CentersService,
               private settingsService: SettingsService,
               private dateUtils: Dates,

src/app/centers/centers-view/center-actions/edit-center-meeting/edit-center-meeting.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -23,7 +23,7 @@ export class EditCenterMeetingComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Center Meeting form. */
-  centerEditMeetingForm: FormGroup;
+  centerEditMeetingForm: UntypedFormGroup;
   /** Calendar Template Data */
   calendarTemplate: any;
   /** Center Id */
@@ -46,7 +46,7 @@ export class EditCenterMeetingComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private centersService: CentersService,
               private settingsService: SettingsService,
               private dateUtils: Dates,
@@ -90,7 +90,7 @@ export class EditCenterMeetingComponent implements OnInit {
         break;
         case 2: // Weekly
           this.repetitionIntervals = ['1', '2', '3'];
-          this.centerEditMeetingForm.addControl('repeatsOnDay', new FormControl('', Validators.required));
+          this.centerEditMeetingForm.addControl('repeatsOnDay', new UntypedFormControl('', Validators.required));
           this.centerEditMeetingForm.get('repeatsOnDay').patchValue(this.calendarTemplate.repeatsOnDay.id);
         break;
         case 3: // Monthly

src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, AfterViewInit } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 
 /** Custom Dialogs */
@@ -26,7 +26,7 @@ export class ManageGroupsComponent implements AfterViewInit {
   /** Group Members. */
   groupMembers: any[] = [];
   /** GroupChoice. */
-  groupChoice = new FormControl('');
+  groupChoice = new UntypedFormControl('');
 
   /**
    * Fetches center action data from `resolve`

src/app/centers/centers-view/notes-tab/notes-tab.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 
 /** Custom Components */
 import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
@@ -20,12 +20,12 @@ export class NotesTabComponent implements OnInit {
   centerId: string;
   username: string;
   centerNotes: any;
-  noteForm: FormGroup;
+  noteForm: UntypedFormGroup;
   @ViewChild('formRef', { static: true }) formRef: any;
 
 
   constructor(private route: ActivatedRoute,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private centersService: CentersService,
     private authenticationService: AuthenticationService,
     private dialog: MatDialog) {

src/app/centers/centers.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /** rxjs Imports */
@@ -28,9 +28,9 @@ export class CentersComponent implements OnInit, AfterViewInit {
   @ViewChild('showClosedCenters', { static: true }) showClosedCenters: MatCheckbox;
 
   /** Name form control. */
-  name = new FormControl();
+  name = new UntypedFormControl();
   /** ExternalId form control. */
-  externalId = new FormControl();
+  externalId = new UntypedFormControl();
   /** Columns to be displayed in centers table. */
   displayedColumns =  ['name', 'accountNo', 'externalId', 'status', 'officeName'];
   /** Data source for centers table. */

src/app/centers/create-center/create-center.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, UntypedFormControl, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
@@ -24,7 +24,7 @@ export class CreateCenterComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Center form. */
-  centerForm: FormGroup;
+  centerForm: UntypedFormGroup;
   /** Office data. */
   officeData: any;
   /** Group data. */
@@ -34,7 +34,7 @@ export class CreateCenterComponent implements OnInit {
   /** Group Members. */
   groupMembers: any[] = [];
   /** Group Choice. */
-  groupChoice = new FormControl('');
+  groupChoice = new UntypedFormControl('');
 
   /**
    * Retrieves the offices data from `resolve`.
@@ -46,7 +46,7 @@ export class CreateCenterComponent implements OnInit {
    * @param {GroupsService} groupService GroupsService.
    * @param {Dates} dateUtils Date Utils to format date.
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private centerService: CentersService,
@@ -106,7 +106,7 @@ export class CreateCenterComponent implements OnInit {
     });
     this.centerForm.get('active').valueChanges.subscribe((bool: boolean) => {
       if (bool) {
-        this.centerForm.addControl('activationDate', new FormControl('', Validators.required));
+        this.centerForm.addControl('activationDate', new UntypedFormControl('', Validators.required));
       } else {
         this.centerForm.removeControl('activationDate');
       }

src/app/centers/edit-center/edit-center.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, UntypedFormControl, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
@@ -27,7 +27,7 @@ export class EditCenterComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Activate center form. */
-  editCenterForm: FormGroup;
+  editCenterForm: UntypedFormGroup;
 
   /**
    * Retrieves the center and template data from `resolve`.
@@ -38,7 +38,7 @@ export class EditCenterComponent implements OnInit {
    * @param {GroupsService} groupService GroupsService.
    * @param {Dates} dateUtils Date Utils to format date.
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private centersService: CentersService,
@@ -69,7 +69,7 @@ export class EditCenterComponent implements OnInit {
       'externalId': [this.centerData.externalId]
     });
     if (this.centerData.status.value === 'Pending') {
-      this.editCenterForm.addControl('activationDate', new FormControl(this.centerData.activationDate ? this.centerData.activationDate : new Date(), Validators.required));
+      this.editCenterForm.addControl('activationDate', new UntypedFormControl(this.centerData.activationDate ? this.centerData.activationDate : new Date(), Validators.required));
     }
   }