Upgrade to Angular 16

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

src/app/shared/accounting/gl-account-display/gl-account-display.component.html

@@ -1,13 +1,13 @@
-<span *ngIf="accountTitle">
-  <div fxFlex="{{ withTitle }}" class="header">
+<span class="layout-row" *ngIf="accountTitle">
+  <div [ngClass]="getWithClass(withTitle)" class="header">
     {{ 'labels.inputs.' + accountTitle | translate }}
   </div>
 
-  <div fxFlex="{{ withAccount }}">
+  <div [ngClass]="getWithClass(withAccount)">
     {{ glAccountValue() }}
   </div>
 </span>
 
-<div fxFlex="100%" *ngIf="!accountTitle">
+<div class="flex-100" *ngIf="!accountTitle">
   {{ glAccountValue() }}
 </div>

src/app/shared/accounting/gl-account-display/gl-account-display.component.ts

@@ -25,4 +25,8 @@ export class GlAccountDisplayComponent {
     }
     return '';
   }
+
+  getWithClass(value: string): string {
+    return 'flex-' + value.replace('%', '');
+  }
 }

src/app/shared/accounting/gl-account-selector/gl-account-selector.component.html

@@ -1,38 +1,40 @@
-<mat-form-field fxFlex="100%" *ngIf="required">
-  <mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
+<div class="layout-column">
+  <mat-form-field class="flex-100" *ngIf="required">
+    <mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
 
-  <mat-select required [formControl]="inputFormControl">
-    <mat-option>
-      <ngx-mat-select-search
-        placeholderLabel="{{ placeHolderLabel }}"
-        noEntriesFoundLabel="{{ noEntriesFoundLabel }}"
-        [formControl]="filterFormCtrl"
-      ></ngx-mat-select-search>
-    </mat-option>
-    <mat-option *ngFor="let glAccount of glAccountData | async" [value]="glAccount.id">
-      {{ '(' + glAccount.glCode + ') ' + glAccount.name }}
-    </mat-option>
-  </mat-select>
-  <mat-error *ngIf="inputFormControl.hasError('required')">
-    {{ 'labels.inputs.Account' | translate }} {{ 'labels.commons.is' | translate }}
-    <strong>{{ 'labels.commons.required' | translate }}</strong>
-  </mat-error>
-</mat-form-field>
+    <mat-select required [formControl]="inputFormControl">
+      <mat-option>
+        <ngx-mat-select-search
+          placeholderLabel="{{ placeHolderLabel }}"
+          noEntriesFoundLabel="{{ noEntriesFoundLabel }}"
+          [formControl]="filterFormCtrl"
+        ></ngx-mat-select-search>
+      </mat-option>
+      <mat-option *ngFor="let glAccount of glAccountData | async" [value]="glAccount.id">
+        {{ '(' + glAccount.glCode + ') ' + glAccount.name }}
+      </mat-option>
+    </mat-select>
+    <mat-error *ngIf="inputFormControl.hasError('required')">
+      {{ 'labels.inputs.Account' | translate }} {{ 'labels.commons.is' | translate }}
+      <strong>{{ 'labels.commons.required' | translate }}</strong>
+    </mat-error>
+  </mat-form-field>
 
-<mat-form-field fxFlex="100%" *ngIf="!required">
-  <mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
+  <mat-form-field class="flex-100" *ngIf="!required">
+    <mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
 
-  <mat-select [formControl]="inputFormControl">
-    <mat-option>
-      <ngx-mat-select-search
-        [formControl]="filterFormCtrl"
-        placeholderLabel="{{ placeHolderLabel }}"
-        noEntriesFoundLabel="{{ noEntriesFoundLabel }}"
-      >
-      </ngx-mat-select-search>
-    </mat-option>
-    <mat-option *ngFor="let glAccount of glAccountData | async" [value]="glAccount.id">
-      {{ '(' + glAccount.glCode + ') ' + glAccount.name }}
-    </mat-option>
-  </mat-select>
-</mat-form-field>
+    <mat-select [formControl]="inputFormControl">
+      <mat-option>
+        <ngx-mat-select-search
+          [formControl]="filterFormCtrl"
+          placeholderLabel="{{ placeHolderLabel }}"
+          noEntriesFoundLabel="{{ noEntriesFoundLabel }}"
+        >
+        </ngx-mat-select-search>
+      </mat-option>
+      <mat-option *ngFor="let glAccount of glAccountData | async" [value]="glAccount.id">
+        {{ '(' + glAccount.glCode + ') ' + glAccount.name }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+</div>

src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="isJournalEntryLoaded">
-  <div fxLayout="row" fxLayoutAlign="end" class="container m-b-20" *ngIf="dataSource?.data[0].manualEntry">
+  <div *ngIf="dataSource?.data[0].manualEntry" class="layout-row layout-align-end container m-b-20">
     <button
       mat-raised-button
       color="primary"
@@ -17,36 +17,36 @@
   <div class="container m-b-20" *ngIf="isViewTransaction()">
     <mat-card class="mat-elevation-z8" *ngIf="dataSource">
       <mat-card-content>
-        <div fxLayout="row wrap" class="content">
-          <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+        <div class="layout-row-wrap">
+          <div class="flex-25 header">
             {{ 'labels.inputs.Office' | translate }}
           </div>
 
-          <div fxFlex="25%" fxFlex.lt-md="50%">
+          <div class="flex-25">
             {{ dataSource.data[0].officeName }}
           </div>
 
-          <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+          <div class="flex-25 header">
             {{ 'labels.inputs.Transaction Date' | translate }}
           </div>
 
-          <div fxFlex="25%" fxFlex.lt-md="50%">
+          <div class="flex-25">
             {{ dataSource.data[0].transactionDate | dateFormat }}
           </div>
 
-          <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+          <div class="flex-25 header">
             {{ 'labels.inputs.Created By' | translate }}
           </div>
 
-          <div fxFlex="25%" fxFlex.lt-md="50%">
+          <div class="flex-25">
             {{ dataSource.data[0].createdByUserName }}
           </div>
 
-          <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+          <div class="flex-25 header">
             {{ 'labels.inputs.Submitted on' | translate }}
           </div>
 
-          <div fxFlex="25%" fxFlex.lt-md="50%">
+          <div class="flex-25">
             {{ dataSource.data[0].submittedOnDate | datetimeFormat }}
           </div>
         </div>
@@ -54,7 +54,7 @@
     </mat-card>
   </div>
 
-  <div class="mat-elevation-z8 container" fxLayoutAlign="center" fxLayout="row wrap">
+  <div class="mat-elevation-z8 container layout-align-center layout-row-wrap">
     <table mat-table [dataSource]="dataSource" matSort>
       <ng-container matColumnDef="id">
         <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
@@ -115,7 +115,7 @@
       ></tr>
     </table>
 
-    <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" class="m-t-15 m-b-15">
+    <div class="layout-row layout-align-center m-t-15 m-b-15 gap-5px layout-xs-column">
       <button type="button" color="primary" mat-raised-button (click)="goBack()">
         {{ 'labels.buttons.Back' | translate }}
       </button>
@@ -131,7 +131,7 @@
     </div>
   </div>
 
-  <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" class="m-t-15 m-b-15">
+  <div class="layout-row layout-align-center m-t-15 m-b-15 gap-5px layout-xs-column">
     <button type="button" color="primary" mat-raised-button (click)="goBack()">
       {{ 'labels.buttons.Back' | translate }}
     </button>

src/app/shared/accounting/view-savings-accounting-details/view-savings-accounting-details.component.html

@@ -1,20 +1,20 @@
-<div fxLayout="row wrap" fxLayout.lt-md="column">
-  <div fxFlexFill fxFlex="98%" *ngIf="accountingRule" fxLayout="row wrap" fxLayout.lt-md="column">
-    <span fxFlex="40%">{{ 'labels.inputs.Type' | translate }}:</span>
-    <span fxFlex="60%">{{ 'labels.accounting.' + getAccountingRuleName(accountingRule.value) | translate }}</span>
+<div class="layout-row-wrap responsive-column">
+  <div *ngIf="accountingRule" class="layout-row-wrap responsive-column flex-fill flex-98">
+    <span class="flex-40">{{ 'labels.inputs.Type' | translate }}:</span>
+    <span class="flex-60">{{ 'labels.accounting.' + getAccountingRuleName(accountingRule.value) | translate }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="isCashOrAccrualAccounting()" fxLayout="row wrap" fxLayout.lt-md="column">
-    <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Assets' | translate }}</h4>
+  <div *ngIf="isCashOrAccrualAccounting()" class="layout-row-wrap responsive-column flex-fill">
+    <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Assets' | translate }}</h4>
     <mifosx-gl-account-display
-      fxFlex="100%"
+      class="flex-100"
       [accountTitle]="'Saving reference'"
       [glAccount]="accountingMappings.savingsReferenceAccount"
       [withTitle]="'40%'"
     >
     </mifosx-gl-account-display>
     <mifosx-gl-account-display
-      fxFlex="100%"
+      class="flex-100"
       [accountTitle]="'Overdraft portfolio'"
       *ngIf="accountingMappings.overdraftPortfolioControl"
       [glAccount]="accountingMappings.overdraftPortfolioControl"
@@ -22,7 +22,7 @@
     >
     </mifosx-gl-account-display>
     <mifosx-gl-account-display
-      fxFlex="100%"
+      class="flex-100"
       [accountTitle]="'Fees Receivable'"
       *ngIf="isAccrualAccounting()"
       [glAccount]="accountingMappings.feeReceivableAccount"
@@ -30,7 +30,7 @@
     >
     </mifosx-gl-account-display>
     <mifosx-gl-account-display
-      fxFlex="100%"
+      class="flex-100"
       [accountTitle]="'Penalties Receivable'"
       *ngIf="isAccrualAccounting()"
       [glAccount]="accountingMappings.penaltyReceivableAccount"
@@ -38,23 +38,23 @@
     >
     </mifosx-gl-account-display>
 
-    <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Liabilities' | translate }}</h4>
+    <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Liabilities' | translate }}</h4>
     <mifosx-gl-account-display
-      fxFlex="100%"
+      class="flex-100"
       [accountTitle]="'Saving control'"
       [glAccount]="accountingMappings.savingsControlAccount"
       [withTitle]="'40%'"
     >
     </mifosx-gl-account-display>
     <mifosx-gl-account-display
-      fxFlex="100%"
+      class="flex-100"
       [accountTitle]="'Savings transfers in suspense'"
       [glAccount]="accountingMappings.transfersInSuspenseAccount"
       [withTitle]="'40%'"
     >
     </mifosx-gl-account-display>
     <mifosx-gl-account-display
-      fxFlex="100%"
+      class="flex-100"
       [accountTitle]="'Interest Payable'"
       *ngIf="isAccrualAccounting()"
       [glAccount]="accountingMappings.interestPayableAccount"
@@ -62,7 +62,7 @@
     >
     </mifosx-gl-account-display>
     <mifosx-gl-account-display
-      fxFlex="100%"
+      class="flex-100"
       [accountTitle]="'Escheat liability'"
       *ngIf="accountingMappings.escheatLiabilityAccount"
       [glAccount]="accountingMappings.escheatLiabilityAccount"
@@ -70,23 +70,23 @@
     >
     </mifosx-gl-account-display>
 
-    <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Income' | translate }}</h4>
+    <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Income' | translate }}</h4>
     <mifosx-gl-account-display
-      fxFlex="100%"
+      class="flex-100"
       [accountTitle]="'Income from fees'"
       [glAccount]="accountingMappings.incomeFromFeeAccount"
       [withTitle]="'40%'"
     >
     </mifosx-gl-account-display>
     <mifosx-gl-account-display
-      fxFlex="100%"
+      class="flex-100"
       [accountTitle]="'Income from penalties'"
       [glAccount]="accountingMappings.incomeFromPenaltyAccount"
       [withTitle]="'40%'"
     >
     </mifosx-gl-account-display>
     <mifosx-gl-account-display
-      fxFlex="100%"
+      class="flex-100"
       [accountTitle]="'Income from Interest'"
       *ngIf="accountingMappings.incomeFromInterest"
       [glAccount]="accountingMappings.incomeFromInterest"
@@ -94,16 +94,16 @@
     >
     </mifosx-gl-account-display>
 
-    <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Expenses' | translate }}</h4>
+    <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Expenses' | translate }}</h4>
     <mifosx-gl-account-display
-      fxFlex="100%"
+      class="flex-100"
       [accountTitle]="'Interest on savings'"
       [glAccount]="accountingMappings.interestOnSavingsAccount"
       [withTitle]="'40%'"
     >
     </mifosx-gl-account-display>
     <mifosx-gl-account-display
-      fxFlex="100%"
+      class="flex-100"
       [accountTitle]="'Write-off'"
       *ngIf="accountingMappings.writeOffAccount"
       [glAccount]="accountingMappings.writeOffAccount"