Upgrade to Angular 16

Merge `angular-update-16` into `dev` branch

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

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="activateCenterForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <mat-form-field fxFlex (click)="activationDatePicker.open()">
+        <mat-form-field class="flex-fill" (click)="activationDatePicker.open()">
           <mat-label>{{ 'labels.inputs.Activated On Date' | translate }}</mat-label>
           <input
             matInput
@@ -21,7 +21,7 @@
         </mat-form-field>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

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

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="centerMeetingForm">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="startDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Meeting Start Date' | translate }}</mat-label>
             <input
@@ -66,12 +66,12 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>
         <button mat-raised-button color="primary" [disabled]="!centerMeetingForm.valid" (click)="submit()">
-          {{"labels.buttons.Submit | translate}}
+          {{ 'labels.buttons.Submit' | translate }}
         </button>
       </mat-card-actions>
     </form>

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

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="centerAssignStaffForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
-          <mat-form-field fxFlex="48%">
+        <div class="layout-column">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of staffData" [value]="staff.id">
@@ -18,7 +18,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

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

@@ -1,6 +1,6 @@
 <div class="container">
-  <mat-card fxLayout="column" fxLayoutGap="3%">
-    <mat-form-field fxFlex>
+  <mat-card class="layout-column gap-3percent">
+    <mat-form-field class="flex-fill">
       <mat-label>{{ 'labels.inputs.Meeting Date' | translate }}</mat-label>
       <mat-select [formControl]="meetingDate">
         <mat-option *ngFor="let date of meetingDates" [value]="date">
@@ -37,7 +37,7 @@
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
 
-    <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+    <mat-card-actions class="layout-row align-center gap-5px responsive-column">
       <button type="button" mat-raised-button [routerLink]="['../../']">
         {{ 'labels.buttons.Cancel' | translate }}
       </button>

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

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="closeCenterForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="closureDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Closed On Date' | translate }}</mat-label>
             <input
@@ -21,7 +21,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Closure Reason' | translate }}</mat-label>
             <mat-select formControlName="closureReasonId">
               <mat-option *ngFor="let reason of closureData" [value]="reason.id">
@@ -36,7 +36,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

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

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="centerEditMeetingScheduleForm">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Existing Meeting Date' | translate }}</mat-label>
             <mat-select formControlName="presentMeetingDate">
@@ -36,7 +36,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

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

@@ -1,4 +1,4 @@
-<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end">
+<div class="container m-b-20 layout-row align-end">
   <button mat-raised-button color="primary" (click)="editSchedule()">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Edit Schedule' | translate }}
@@ -9,7 +9,7 @@
   <mat-card>
     <form [formGroup]="centerEditMeetingForm">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Repetition Frequency' | translate }}</mat-label>
             <mat-select formControlName="frequency">
@@ -72,7 +72,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

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

@@ -1,6 +1,6 @@
-<div class="container" fxLayout="row" fxLayoutGap="3%">
-  <mat-card fxFlex class="group-card" fxLayout="column" fxLayoutGap="2%">
-    <mat-form-field fxFlex="30%">
+<div class="container layout-row gap-3percent">
+  <mat-card class="group-card flex-fill layout-column gap-2percent">
+    <mat-form-field class="flex-30">
       <mat-label>{{ 'labels.inputs.Add Groups' | translate }}</mat-label>
       <input matInput [formControl]="groupChoice" [matAutocomplete]="groupsAutocomplete" />
     </mat-form-field>
@@ -33,13 +33,13 @@
     </div>
   </mat-card>
 
-  <mat-card fxFlex="40%">
+  <mat-card class="flex-40">
     <h3 matSubheader>{{ 'labels.heading.Group Members' | translate }}</h3>
 
     <mat-nav-list *ngIf="groupMembers?.length">
       <div mat-list-item *ngFor="let group of groupMembers; index as i">
         <span matLine class="p-t-10">{{ group.name }}</span>
-        <div fxFlex></div>
+        <div class="flex-fill"></div>
         <button mat-icon-button color="warn" (click)="removeGroup(i, group)">
           <fa-icon icon="trash"></fa-icon>
         </button>

src/app/centers/centers-view/centers-view.component.html

@@ -1,5 +1,5 @@
 <mat-card class="center-card">
-  <mat-card-header fxLayout="column" class="header">
+  <mat-card-header class="header layout-column">
     <mat-card-title-group class="header-title-group">
       <div class="profile-image-container">
         <div>
@@ -8,7 +8,7 @@
       </div>
       <div class="mat-typography center-card-title">
         <mat-card-title>
-          <h3 fxFlex="95%">
+          <h3 class="flex-95">
             <i
               class="fa fa-stop"
               matTooltip="{{ centerViewData.status.value }}"
@@ -16,7 +16,7 @@
             ></i>
             <b>{{ 'labels.heading.Center Name' | translate }} :</b> {{ centerViewData.name }}
           </h3>
-          <div fxFlex="5%" *ngIf="!(centerViewData.status.value === 'Closed')">
+          <div class="flex-5" *ngIf="!(centerViewData.status.value === 'Closed')">
             <button mat-icon-button [matMenuTriggerFor]="centerMenu" aria-label="Center actions" yPosition="below">
               <mat-icon matListIcon class="actions-menu">
                 <fa-icon icon="bars" size="sm"></fa-icon>
@@ -25,8 +25,8 @@
           </div>
         </mat-card-title>
         <mat-card-subtitle>
-          <div fxLayout="row" fxLayout.lt-md="column">
-            <div fxFlex="50%">
+          <div class="layout-row responsive-column">
+            <div class="flex-50">
               <p>
                 {{ 'labels.inputs.Account' | translate }} #:{{ centerViewData.accountNo }} <br />
                 {{ 'labels.inputs.Office' | translate }}: {{ centerViewData.officeName }} <br />
@@ -43,7 +43,7 @@
                 }}<br />
               </p>
             </div>
-            <div fxFlex="45%" class="center-meeting" fxLayoutAlign="start start">
+            <div class="center-meeting flex-45 align-start-start">
               <div *ngIf="centerViewData.collectionMeetingCalendar; else unassigned">
                 <p>
                   {{ 'labels.inputs.Next Meeting on' | translate }}:
@@ -140,7 +140,7 @@
     </mat-card-title-group>
   </mat-card-header>
   <mat-card-content>
-    <nav mat-tab-nav-bar class="navigation-tabs">
+    <nav mat-tab-nav-bar class="navigation-tabs" [tabPanel]="tabPanel">
       <a
         mat-tab-link
         [routerLink]="['./general']"
@@ -173,6 +173,8 @@
         </a>
       </span>
     </nav>
-    <router-outlet></router-outlet>
+    <mat-tab-nav-panel #tabPanel>
+      <router-outlet></router-outlet>
+    </mat-tab-nav-panel>
   </mat-card-content>
 </mat-card>

src/app/centers/centers-view/general-tab/general-tab.component.html

@@ -3,7 +3,7 @@
     <h3 class="closedCenter">{{ 'labels.heading.Center Closed' | translate }}</h3>
   </div>
   <h3>{{ 'labels.heading.Summary Details' | translate }}</h3>
-  <div fxLayout="row" fxLayoutGap="32px" class="summary-details-container">
+  <div class="layout-row gap-32px summary-details-container">
     <p>
       {{ 'labels.inputs.Active Clients' | translate }}: {{ centerSummaryData.activeClients }}<br />
       {{ 'labels.inputs.Active Group Loans' | translate }}: {{ centerSummaryData.activeGroupLoans }}<br />

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

@@ -4,12 +4,10 @@
     <form
       #formRef="ngForm"
       [formGroup]="noteForm"
-      fxLayout="row"
-      fxLayoutAlign="start baseline"
-      fxLayoutGap="20px"
+      class="layout-row align-start-baseline gap-20px"
       (ngSubmit)="submit()"
     >
-      <mat-form-field fxFlex="calc(90%-20px)">
+      <mat-form-field class="flex-90-minus-20px">
         <textarea
           formControlName="note"
           matInput
@@ -18,7 +16,7 @@
       </mat-form-field>
       <button
         mat-raised-button
-        fxFlex
+        class="flex-fill"
         color="primary"
         [disabled]="!noteForm.valid"
         *mifosxHasPermission="'CREATE_GROUPNOTE'"
@@ -36,7 +34,7 @@
         ><br />
         <span>{{ 'labels.inputs.Date' | translate }}: {{ centerNote.createdOn | dateFormat }}</span>
       </p>
-      <div fxLayout="row" fxLayoutAlign="flex-start">
+      <div class="layout-row align-start">
         <button mat-button color="primary" (click)="editNote(centerNote.id, centerNote.note, i)">
           <fa-icon icon="edit"></fa-icon>
         </button>

src/app/centers/centers.component.html

@@ -1,5 +1,5 @@
 <mat-card class="container">
-  <div fxLayout="row" fxLayoutAlign="start center">
+  <div class="layout-row align-start-center">
     <div class="search-box">
       <mat-form-field>
         <input matInput placeholder="Search by Name" [formControl]="name" />
@@ -11,7 +11,7 @@
         {{ 'labels.inputs.Show Closed Centers' | translate }}
       </mat-checkbox>
     </div>
-    <div class="action-button" fxLayoutGap="25px">
+    <div class="action-button gap-25px">
       <button
         mat-raised-button
         color="primary"

src/app/centers/centers.component.ts

@@ -1,6 +1,7 @@
 /** Angular Imports */
 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 { UntypedFormControl } from '@angular/forms';

src/app/centers/centers.module.ts

@@ -25,6 +25,13 @@ import { EditCenterMeetingScheduleComponent } from './centers-view/center-action
 import { ManageGroupsComponent } from './centers-view/center-actions/manage-groups/manage-groups.component';
 import { StaffAssignmentHistoryComponent } from './centers-view/center-actions/staff-assignment-history/staff-assignment-history.component';
 import { EditCenterComponent } from './edit-center/edit-center.component';
+import { CenterViewResolver } from './common-resolvers/center-view.resolver';
+import { CenterDatatablesResolver } from './common-resolvers/center-datatables.resolver';
+import { CenterDatatableResolver } from './common-resolvers/center-datatable.resolver';
+import { CenterSummaryResolver } from './common-resolvers/center-summary.resolver';
+import { CenterResourceResolver } from './common-resolvers/center-resource.resolver';
+import { SavingsAccountResolver } from './common-resolvers/savings-account.resolver';
+import { CenterNotesResolver } from './common-resolvers/center-notes.resolver';
 
 /**
  * Centers Module
@@ -56,6 +63,15 @@ import { EditCenterComponent } from './edit-center/edit-center.component';
     ManageGroupsComponent,
     StaffAssignmentHistoryComponent,
     EditCenterComponent
+  ],
+  providers: [
+    CenterViewResolver,
+    CenterDatatableResolver,
+    CenterDatatablesResolver,
+    CenterSummaryResolver,
+    CenterResourceResolver,
+    SavingsAccountResolver,
+    CenterNotesResolver
   ]
 })
 export class CentersModule {}

src/app/centers/common-resolvers/center-actions.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { CentersService } from '../centers.service';
  * Group Actions data resolver.
  */
 @Injectable()
-export class CenterActionsResolver implements Resolve<Object> {
+export class CenterActionsResolver {
   /**
    * @param {CentersService} centersService Savings service.
    */

src/app/centers/common-resolvers/center-data-and-template.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { CentersService } from '../centers.service';
  * Centers data and template resolver.
  */
 @Injectable()
-export class CenterDataAndTemplateResolver implements Resolve<Object> {
+export class CenterDataAndTemplateResolver {
   /**
    * @param {CentersService} CentersService Centers service.
    */

src/app/centers/common-resolvers/center-datatable.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { CentersService } from '../centers.service';
  * Centers notes data resolver.
  */
 @Injectable()
-export class CenterDatatableResolver implements Resolve<Object> {
+export class CenterDatatableResolver {
   /**
    * @param {CentersService} CentersService Centers service.
    */

src/app/centers/common-resolvers/center-datatables.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { CentersService } from '../centers.service';
  * center datatables resolver.
  */
 @Injectable()
-export class CenterDatatablesResolver implements Resolve<Object> {
+export class CenterDatatablesResolver {
   /**
    * @param {centersService} centersService centers service.
    */

src/app/centers/common-resolvers/center-notes.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { CentersService } from '../centers.service';
  * Centers notes data resolver.
  */
 @Injectable()
-export class CenterNotesResolver implements Resolve<Object> {
+export class CenterNotesResolver {
   /**
    * @param {CentersService} CentersService Centers service.
    */

src/app/centers/common-resolvers/center-resource.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { CentersService } from '../centers.service';
  * Centers data resolver.
  */
 @Injectable()
-export class CenterResourceResolver implements Resolve<Object> {
+export class CenterResourceResolver {
   /**
    * @param {CentersService} CentersService Centers service.
    */

src/app/centers/common-resolvers/center-summary.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { CentersService } from '../centers.service';
  * Centers data resolver.
  */
 @Injectable()
-export class CenterSummaryResolver implements Resolve<Object> {
+export class CenterSummaryResolver {
   /**
    * @param {CentersService} CentersService Centers service.
    */

src/app/centers/common-resolvers/center-view.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { CentersService } from '../centers.service';
  * Centers data resolver.
  */
 @Injectable()
-export class CenterViewResolver implements Resolve<Object> {
+export class CenterViewResolver {
   /**
    * @param {CentersService} CentersService Centers service.
    */

src/app/centers/common-resolvers/savings-account.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { CentersService } from '../centers.service';
  * Centers data resolver.
  */
 @Injectable()
-export class SavingsAccountResolver implements Resolve<Object> {
+export class SavingsAccountResolver {
   /**
    * @param {CentersService} CentersService Centers service.
    */

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

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="centerForm">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
@@ -93,7 +93,7 @@
           </mat-form-field>
         </div>
 
-        <div fxLayout="row">
+        <div class="layout-row">
           <div class="mat-table" *ngIf="groupChoice.value">
             <div class="mat-header-row">
               <div class="mat-header-cell">{{ 'labels.inputs.Group Details' | translate }}</div>
@@ -127,7 +127,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

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

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="editCenterForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
@@ -52,7 +52,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../general']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>