build: Use prettier for html

Stop ignoring html files in prettier and fix existing issues.

src/app/savings/savings-account-view/charges-tab/charges-tab.component.html

@@ -1,100 +1,137 @@
 <div class="tab-container mat-typography">
-
   <div fxLayout="row" fxLayoutAlign="start">
     <div class="m-b-10">
       <h3>{{ 'labels.inputs.Charges' | translate }}</h3>
     </div>
     <div class="action-button m-b-20" *ngIf="this.chargesData">
       <button mat-raised-button color="primary" (click)="toggleCharges()">
-        {{showInactiveCharges ? viewAllChargeButtons('View Active Charges') : viewAllChargeButtons('View Inactive
-        Charges')}}</button>
+        {{
+          showInactiveCharges
+            ? viewAllChargeButtons('View Active Charges')
+            : viewAllChargeButtons(
+                'View Inactive
+        Charges'
+              )
+        }}
+      </button>
     </div>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
-
     <table mat-table #chargesTable [dataSource]="dataSource">
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.name }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="feeOrPenalty">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Charge Type' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.penalty ? 'Penalty' : 'Fee' | translateKey:'catalogs' }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Charge Type' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.penalty ? 'Penalty' : ('Fee' | translateKey: 'catalogs') }}</td>
       </ng-container>
 
       <ng-container matColumnDef="paymentDueAt">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Payment Due At' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value | translateKey:'catalogs' }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Payment Due At' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.chargeTimeType.value | translateKey: 'catalogs' }}</td>
       </ng-container>
 
       <ng-container matColumnDef="dueAsOf">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Due As Of' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate | dateFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Due As Of' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.dueDate | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="repeatsOn">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Repeats On (M/d)' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.feeOnMonthDay ? charge.feeOnMonthDay.join('/') : '' }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repeats On (M/d)' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.feeOnMonthDay ? charge.feeOnMonthDay.join('/') : '' }}</td>
       </ng-container>
 
       <ng-container matColumnDef="calculationType">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Calculation Type' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value | translateKey:'catalogs' }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Calculation Type' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}</td>
       </ng-container>
 
       <ng-container matColumnDef="due">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Due' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.amount | currency:charge.currency.code:'symbol-narrow':'1.2-2'}}
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Due' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.amount | currency: charge.currency.code : 'symbol-narrow' : '1.2-2' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="paid">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Paid' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.amountPaid |
-          currency:charge.currency.code:'symbol-narrow':'1.2-2'}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Paid' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.amountPaid | currency: charge.currency.code : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="waived">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Waived' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.amountWaived |
-          currency:charge.currency.code:'symbol-narrow':'1.2-2'}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Waived' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.amountWaived | currency: charge.currency.code : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="outstanding">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Outstanding' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.amountOutstanding |
-          currency:charge.currency.code:'symbol-narrow':'1.2-2'}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Outstanding' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.amountOutstanding | currency: charge.currency.code : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
           <span *ngIf="savingsAccountData.status.value === 'Submitted and pending approval'">
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Edit Charge' | translate }}"
-              *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); editCharge(charge)">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              matTooltip="{{ 'tooltips.Edit Charge' | translate }}"
+              *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'"
+              (click)="routeEdit($event); editCharge(charge)"
+            >
               <i class="fa fa-pencil"></i>
             </button>
-            <button class="account-action-button" mat-raised-button color="warn" matTooltip="{{ 'tooltips.Delete Charge' | translate }}"
-              *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); deleteCharge(charge.id)">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="warn"
+              matTooltip="{{ 'tooltips.Delete Charge' | translate }}"
+              *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'"
+              (click)="routeEdit($event); deleteCharge(charge.id)"
+            >
               <i class="fa fa-trash"></i>
             </button>
           </span>
           <span *ngIf="savingsAccountData.status.value === 'Active' && charge.amountOutstanding !== 0">
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Pay Charge' | translate }}"
-              *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); payCharge(charge.id)">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              matTooltip="{{ 'tooltips.Pay Charge' | translate }}"
+              *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'"
+              (click)="routeEdit($event); payCharge(charge.id)"
+            >
               <i class="fa fa-dollar"></i>
             </button>
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Waive Charge' | translate }}"
-              *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); waiveCharge(charge.id)">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              matTooltip="{{ 'tooltips.Waive Charge' | translate }}"
+              *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'"
+              (click)="routeEdit($event); waiveCharge(charge.id)"
+            >
               <i class="fa fa-flag"></i>
             </button>
             <ng-container *ngIf="isRecurringCharge(charge)">
-              <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Inactivate Charge' | translate }}"
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="primary"
+                matTooltip="{{ 'tooltips.Inactivate Charge' | translate }}"
                 *mifosxHasPermission="'INACTIVATE_SAVINGSACCOUNTCHARGE'"
-                (click)="routeEdit($event); inactivateCharge(charge.id)">
+                (click)="routeEdit($event); inactivateCharge(charge.id)"
+              >
                 <i class="fa fa-ban"></i>
               </button>
             </ng-container>
@@ -103,10 +140,7 @@
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.id]"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row" [routerLink]="[row.id]"></tr>
     </table>
-
   </div>
-
 </div>

src/app/savings/savings-account-view/custom-dialogs/calculate-interest-dialog/calculate-interest-dialog.component.html

@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{'labels.heading.Calculate Interest' | translate }}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Calculate Interest' | translate }}</h1>
 <div mat-dialog-content>
-  <p>{{'labels.text.Are you sure you want to calculate interest' | translate }} ?</p>
+  <p>{{ 'labels.text.Are you sure you want to calculate interest' | translate }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{'labels.buttons.Cancel' | translate}}</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">{{'labels.buttons.Confirm' | translate}}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>

src/app/savings/savings-account-view/custom-dialogs/inactivate-charge-dialog/inactivate-charge-dialog.component.html

@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{'tooltips.Inactivate Charge' | translate}}</h1>
+<h1 mat-dialog-title>{{ 'tooltips.Inactivate Charge' | translate }}</h1>
 <div mat-dialog-content>
-  <p>{{"labels.text.Are you sure you want to inactivate charge with id" | translate }}: {{ data.id }} ?</p>
+  <p>{{ 'labels.text.Are you sure you want to inactivate charge with id' | translate }}: {{ data.id }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{'labels.buttons.Cancel' | translate}}</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">{{'labels.buttons.Confirm' | translate}}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>

src/app/savings/savings-account-view/custom-dialogs/post-interest-dialog/post-interest-dialog.component.html

@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{"labels.heading.Post Interest" | translate }}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Post Interest' | translate }}</h1>
 <div mat-dialog-content>
-  <p>{{"labels.text.Are you sure you want to post interest" | translate }} ?</p>
+  <p>{{ 'labels.text.Are you sure you want to post interest' | translate }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">{{"labels.buttons.Confirm" | translate }}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>

src/app/savings/savings-account-view/custom-dialogs/release-amount-dialog/release-amount-dialog.component.html

@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{'labels.heading.Release Amount' | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Release Amount' | translate }}</h1>
 <div mat-dialog-content>
-  <p>{{'labels.text.Are you sure you want to release this amount' | translate}}</p>
+  <p>{{ 'labels.text.Are you sure you want to release this amount' | translate }}</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{'labels.buttons.Cancel' | translate}}</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">{{'labels.buttons.Confirm' | translate}}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>

src/app/savings/savings-account-view/custom-dialogs/toggle-withhold-tax-dialog/toggle-withhold-tax-dialog.component.html

@@ -1,8 +1,17 @@
-<h1 mat-dialog-title>{{ (data.isEnable ? 'labels.heading.Enable' : 'labels.heading.Disable') | translate }} {{"labels.heading.Withhold Tax" | translate }}</h1>
+<h1 mat-dialog-title>
+  {{ (data.isEnable ? 'labels.heading.Enable' : 'labels.heading.Disable') | translate }}
+  {{ 'labels.heading.Withhold Tax' | translate }}
+</h1>
 <div mat-dialog-content>
-  <p>{{"labels.text.Are you sure you want to" | translate }} {{ (data.isEnable ? 'labels.heading.Enable' : 'labels.heading.Disable') | translate }} {{"labels.text.withhold tax for this account" | translate }} ?</p>
+  <p>
+    {{ 'labels.text.Are you sure you want to' | translate }}
+    {{ (data.isEnable ? 'labels.heading.Enable' : 'labels.heading.Disable') | translate }}
+    {{ 'labels.text.withhold tax for this account' | translate }} ?
+  </p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{'labels.buttons.Cancel' | translate}}</button>
-  <button mat-raised-button color="{{ data.isEnable ? 'accent' : 'warn' }}" [mat-dialog-close]="{ confirm: true }">{{'labels.buttons.Confirm' | translate}}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="{{ data.isEnable ? 'accent' : 'warn' }}" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>

src/app/savings/savings-account-view/custom-dialogs/undo-transaction-dialog/undo-transaction-dialog.component.html

@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{'labels.heading.Undo Transaction' | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Undo Transaction' | translate }}</h1>
 <div mat-dialog-content>
-  <p>{{'labels.text.Are you sure you want to undo this transaction' | translate}}</p>
+  <p>{{ 'labels.text.Are you sure you want to undo this transaction' | translate }}</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{'labels.buttons.Cancel' | translate}}</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">{{'labels.buttons.Confirm' | translate}}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>

src/app/savings/savings-account-view/custom-dialogs/waive-charge-dialog/waive-charge-dialog.component.html

@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{"labels.buttons.Waive Charge" | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.buttons.Waive Charge' | translate }}</h1>
 <div mat-dialog-content>
-  <p>{{"labels.text.Are you sure you want to waive charge with id" | translate }}: {{ data.id }} ?</p>
+  <p>{{ 'labels.text.Are you sure you want to waive charge with id' | translate }}: {{ data.id }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{'labels.buttons.Cancel' | translate}}</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">{{'labels.buttons.Confirm' | translate}}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>

src/app/savings/savings-account-view/general-tab/general-tab.component.html

@@ -1,40 +1,49 @@
-
 <div *ngIf="isLoading" class="loader">
   <div class="loading"></div>
 </div>
 
 <div class="savings-account-tables" fxLayout="row" fxLayoutGap="2%" *ngIf="!isLoading">
-
   <div fxFlex="49%" fxLayout="column" fxLayoutGap="4%">
     <div
-      *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval; else alternateDetails">
-      <h4 class="table-headers">{{'labels.heading.Savings Details' | translate}}</h4>
+      *ngIf="
+        !savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval;
+        else alternateDetails
+      "
+    >
+      <h4 class="table-headers">{{ 'labels.heading.Savings Details' | translate }}</h4>
       <table>
         <tbody>
           <tr>
-            <td>{{'labels.inputs.External Id' | translate}}</td>
+            <td>{{ 'labels.inputs.External Id' | translate }}</td>
             <td *ngIf="savingsAccountData.externalId">
-              <mifosx-external-identifier externalId="{{savingsAccountData.externalId}}"></mifosx-external-identifier>
+              <mifosx-external-identifier externalId="{{ savingsAccountData.externalId }}"></mifosx-external-identifier>
             </td>
-            <td *ngIf="!savingsAccountData.externalId">{{'labels.inputs.Not Provided' | translate}}</td>
+            <td *ngIf="!savingsAccountData.externalId">{{ 'labels.inputs.Not Provided' | translate }}</td>
           </tr>
           <tr>
-            <td>{{'labels.inputs.Activated On' | translate}}</td>
-            <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate |
-              dateFormat) : 'Not Activated'}}</td>
+            <td>{{ 'labels.inputs.Activated On' | translate }}</td>
+            <td>
+              {{
+                savingsAccountData.timeline.activatedOnDate
+                  ? (savingsAccountData.timeline.activatedOnDate | dateFormat)
+                  : 'Not Activated'
+              }}
+            </td>
           </tr>
           <tr>
-            <td>{{'labels.inputs.Field Officer' | translate}}</td>
-            <td>{{savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned'}}</td>
+            <td>{{ 'labels.inputs.Field Officer' | translate }}</td>
+            <td>{{ savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned' }}</td>
           </tr>
           <tr>
-            <td>{{'labels.inputs.Currency' | translate}}</td>
-            <td>{{savingsAccountData.currency.name}} [{{savingsAccountData.currency.code}}]</td>
+            <td>{{ 'labels.inputs.Currency' | translate }}</td>
+            <td>{{ savingsAccountData.currency.name }} [{{ savingsAccountData.currency.code }}]</td>
           </tr>
           <tr>
-            <td>{{'labels.inputs.Nominal Interest Rate' | translate}}</td>
+            <td>{{ 'labels.inputs.Nominal Interest Rate' | translate }}</td>
             <td class="r-amount">
-              <span *ngIf="savingsAccountData.nominalAnnualInterestRate">{{savingsAccountData.nominalAnnualInterestRate | formatNumber}} %</span>
+              <span *ngIf="savingsAccountData.nominalAnnualInterestRate"
+                >{{ savingsAccountData.nominalAnnualInterestRate | formatNumber }} %</span
+              >
               <span *ngIf="!savingsAccountData.nominalAnnualInterestRate">0 %</span>
             </td>
           </tr>
@@ -44,16 +53,18 @@
 
     <ng-template #alternateDetails>
       <div>
-        <h4 class="table-headers">{{'labels.heading.Savings Details' | translate}}</h4>
+        <h4 class="table-headers">{{ 'labels.heading.Savings Details' | translate }}</h4>
         <table>
           <tbody>
             <tr>
-              <td>{{'labels.inputs.Field Officer' | translate}}</td>
-              <td>{{savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned'}}</td>
+              <td>{{ 'labels.inputs.Field Officer' | translate }}</td>
+              <td>{{ savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned' }}</td>
             </tr>
             <tr>
-              <td>{{'labels.inputs.Balance' | translate}}</td>
-              <td class="r-amount">{{savingsAccountData.summary.accountBalance | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+              <td>{{ 'labels.inputs.Balance' | translate }}</td>
+              <td class="r-amount">
+                {{ savingsAccountData.summary.accountBalance | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+              </td>
             </tr>
           </tbody>
         </table>
@@ -61,141 +72,175 @@
     </ng-template>
 
     <div *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval">
-      <h4 class="table-headers">{{'labels.heading.Performance History' | translate}}</h4>
+      <h4 class="table-headers">{{ 'labels.heading.Performance History' | translate }}</h4>
       <table>
         <tbody>
           <tr *ngIf="savingsAccountData.summary.totalDeposits">
-            <td>{{'labels.inputs.Total Deposits' | translate}}</td>
-            <td class="r-amount">{{savingsAccountData.summary.totalDeposits | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+            <td>{{ 'labels.inputs.Total Deposits' | translate }}</td>
+            <td class="r-amount">
+              {{ savingsAccountData.summary.totalDeposits | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+            </td>
           </tr>
           <tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
-            <td>{{'labels.inputs.Total Interest Earned' | translate}}</td>
-            <td class="r-amount">{{savingsAccountData.summary.totalInterestEarned | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+            <td>{{ 'labels.inputs.Total Interest Earned' | translate }}</td>
+            <td class="r-amount">
+              {{ savingsAccountData.summary.totalInterestEarned | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+            </td>
           </tr>
         </tbody>
       </table>
     </div>
   </div>
 
-  <div fxFlex="49%"
-    *ngIf="isActive; else alternateSummary">
-    <h4 class="table-headers">{{'labels.heading.Account Summary' | translate}}</h4>
+  <div fxFlex="49%" *ngIf="isActive; else alternateSummary">
+    <h4 class="table-headers">{{ 'labels.heading.Account Summary' | translate }}</h4>
     <table>
       <tbody>
         <tr *ngIf="savingsAccountData.summary.totalWithdrawals">
-          <td>{{'labels.inputs.Total Withdrawls' | translate}}</td>
-          <td class="r-amount">{{savingsAccountData.summary.totalWithdrawals | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          <td>{{ 'labels.inputs.Total Withdrawls' | translate }}</td>
+          <td class="r-amount">
+            {{ savingsAccountData.summary.totalWithdrawals | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.summary.totalWithdrawalFees">
-          <td>{{'labels.inputs.Withdrawals Fees' | translate}}</td>
-          <td class="r-amount">{{savingsAccountData.summary.totalWithdrawalFees | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          <td>{{ 'labels.inputs.Withdrawals Fees' | translate }}</td>
+          <td class="r-amount">
+            {{ savingsAccountData.summary.totalWithdrawalFees | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.summary.totalAnnualFees">
-          <td>{{'labels.inputs.Annual Fees' | translate}}</td>
-          <td class="r-amount">{{savingsAccountData.summary.totalAnnualFees | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          <td>{{ 'labels.inputs.Annual Fees' | translate }}</td>
+          <td class="r-amount">
+            {{ savingsAccountData.summary.totalAnnualFees | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
-          <td>{{'labels.inputs.Interest Earned' | translate}}</td>
-          <td class="r-amount">{{savingsAccountData.summary.totalInterestEarned | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          <td>{{ 'labels.inputs.Interest Earned' | translate }}</td>
+          <td class="r-amount">
+            {{ savingsAccountData.summary.totalInterestEarned | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.summary.totalInterestPosted">
-          <td>{{'labels.inputs.Interest Posted' | translate}}</td>
-          <td class="r-amount">{{savingsAccountData.summary.totalInterestPosted | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          <td>{{ 'labels.inputs.Interest Posted' | translate }}</td>
+          <td class="r-amount">
+            {{ savingsAccountData.summary.totalInterestPosted | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.summary.interestNotPosted >= 0">
-          <td>{{'labels.inputs.Interest Earned Not Posted' | translate}}</td>
-          <td class="r-amount">{{savingsAccountData.summary.interestNotPosted | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          <td>{{ 'labels.inputs.Interest Earned Not Posted' | translate }}</td>
+          <td class="r-amount">
+            {{ savingsAccountData.summary.interestNotPosted | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.summary.totalOverdraftInterestDerived">
-          <td>{{'labels.inputs.Interest On Overdraft' | translate}}</td>
+          <td>{{ 'labels.inputs.Interest On Overdraft' | translate }}</td>
           <td class="r-amount">
-            {{savingsAccountData.summary.totalOverdraftInterestDerived | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+            {{
+              savingsAccountData.summary.totalOverdraftInterestDerived
+                | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.summary.interestNotPosted < 0">
-          <td>{{'labels.inputs.Overdraft Interest Not Posted' | translate}}</td>
-          <td class="r-amount">{{savingsAccountData.summary.interestNotPosted | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          <td>{{ 'labels.inputs.Overdraft Interest Not Posted' | translate }}</td>
+          <td class="r-amount">
+            {{ savingsAccountData.summary.interestNotPosted | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.nominalAnnualInterestRate">
-          <td>{{'labels.inputs.Nominal Interest Rate' | translate}}</td>
-          <td class="r-amount">{{savingsAccountData.nominalAnnualInterestRate | formatNumber}} %</td>
+          <td>{{ 'labels.inputs.Nominal Interest Rate' | translate }}</td>
+          <td class="r-amount">{{ savingsAccountData.nominalAnnualInterestRate | formatNumber }} %</td>
         </tr>
         <tr>
-          <td>{{'labels.inputs.Interest Compounding Period' | translate}}</td>
-          <td>{{savingsAccountData.interestCompoundingPeriodType.value | translateKey:'catalogs'}}</td>
+          <td>{{ 'labels.inputs.Interest Compounding Period' | translate }}</td>
+          <td>{{ savingsAccountData.interestCompoundingPeriodType.value | translateKey: 'catalogs' }}</td>
         </tr>
         <tr>
-          <td>{{'labels.inputs.Interest Posting Period' | translate}}</td>
-          <td>{{savingsAccountData.interestPostingPeriodType.value | translateKey:'catalogs'}}</td>
+          <td>{{ 'labels.inputs.Interest Posting Period' | translate }}</td>
+          <td>{{ savingsAccountData.interestPostingPeriodType.value | translateKey: 'catalogs' }}</td>
         </tr>
         <tr>
-          <td>{{'labels.inputs.Interest Calculated Using' | translate}}</td>
-          <td>{{savingsAccountData.interestCalculationType.value | translateKey:'catalogs'}}</td>
+          <td>{{ 'labels.inputs.Interest Calculated Using' | translate }}</td>
+          <td>{{ savingsAccountData.interestCalculationType.value | translateKey: 'catalogs' }}</td>
         </tr>
         <tr>
-          <td>{{'labels.inputs.Days in Year' | translate}}</td>
-          <td>{{savingsAccountData.interestCalculationDaysInYearType.value | translateKey:'catalogs'}}</td>
+          <td>{{ 'labels.inputs.Days in Year' | translate }}</td>
+          <td>{{ savingsAccountData.interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}</td>
         </tr>
         <tr *ngIf="savingsAccountData.withdrawalFee">
-          <td>{{'labels.inputs.Withdrawal Fee' | translate}}</td>
-          <td class="r-amount">{{savingsAccountData.withdrawalFee.amount | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          <td>{{ 'labels.inputs.Withdrawal Fee' | translate }}</td>
+          <td class="r-amount">
+            {{ savingsAccountData.withdrawalFee.amount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.lastActiveTransactionDate">
-          <td>{{'labels.inputs.Last Active Transaction Date' | translate}}</td>
-          <td>{{savingsAccountData.lastActiveTransactionDate | dateFormat}}</td>
+          <td>{{ 'labels.inputs.Last Active Transaction Date' | translate }}</td>
+          <td>{{ savingsAccountData.lastActiveTransactionDate | dateFormat }}</td>
         </tr>
         <tr *ngIf="!(savingsAccountData.subStatus.id === 0)">
-          <td>{{'labels.inputs.Substatus' | translate}}</td>
-          <td>{{savingsAccountData.subStatus.value}}</td>
+          <td>{{ 'labels.inputs.Substatus' | translate }}</td>
+          <td>{{ savingsAccountData.subStatus.value }}</td>
         </tr>
         <tr *ngIf="savingsAccountData.daysToInactive">
-          <td>{{'labels.inputs.Days to Inactive' | translate}}</td>
-          <td>{{savingsAccountData.daysToInactive}}</td>
+          <td>{{ 'labels.inputs.Days to Inactive' | translate }}</td>
+          <td>{{ savingsAccountData.daysToInactive }}</td>
         </tr>
         <tr *ngIf="savingsAccountData.daysToDormancy">
-          <td>{{'labels.inputs.Days to Dormancy' | translate}}</td>
-          <td>{{savingsAccountData.daysToDormancy}}</td>
+          <td>{{ 'labels.inputs.Days to Dormancy' | translate }}</td>
+          <td>{{ savingsAccountData.daysToDormancy }}</td>
         </tr>
         <tr *ngIf="savingsAccountData.daysToEscheat">
-          <td>{{'labels.inputs.Days to Escheat' | translate}}</td>
-          <td>{{savingsAccountData.daysToEscheat}}</td>
+          <td>{{ 'labels.inputs.Days to Escheat' | translate }}</td>
+          <td>{{ savingsAccountData.daysToEscheat }}</td>
         </tr>
         <tr *ngIf="savingsAccountData.annualFee">
-          <td>{{'labels.inputs.Annual Fee' | translate}}</td>
+          <td>{{ 'labels.inputs.Annual Fee' | translate }}</td>
           <td class="r-amount">
-            {{savingsAccountData.annualFee.amount | currency:currency.code:'symbol-narrow':'1.2-2'}}
+            {{ savingsAccountData.annualFee.amount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
           </td>
         </tr>
         <tr *ngIf="savingsAccountData.allowOverdraft">
-          <td>{{'labels.inputs.Overdraft Limit' | translate}}</td>
-          <td class="r-amount">{{savingsAccountData.overdraftLimit | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          <td>{{ 'labels.inputs.Overdraft Limit' | translate }}</td>
+          <td class="r-amount">
+            {{ savingsAccountData.overdraftLimit | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.allowOverdraft">
-          <td>{{'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate}}</td>
-          <td>{{savingsAccountData.minOverdraftForInterestCalculation | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          <td>{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}</td>
+          <td>
+            {{
+              savingsAccountData.minOverdraftForInterestCalculation
+                | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.minBalanceForInterestCalculation">
-          <td>{{'labels.inputs.Min Balance Required for Interest Calculation' | translate}}</td>
-          <td>{{savingsAccountData.minBalanceForInterestCalculation | formatNumber}}</td>
+          <td>{{ 'labels.inputs.Min Balance Required for Interest Calculation' | translate }}</td>
+          <td>{{ savingsAccountData.minBalanceForInterestCalculation | formatNumber }}</td>
         </tr>
         <tr *ngIf="savingsAccountData.minRequiredBalance">
-          <td>{{'labels.inputs.Minimum Required Balance' | translate}}</td>
-          <td>{{savingsAccountData.minRequiredBalance | formatNumber}}</td>
+          <td>{{ 'labels.inputs.Minimum Required Balance' | translate }}</td>
+          <td>{{ savingsAccountData.minRequiredBalance | formatNumber }}</td>
         </tr>
         <tr *ngIf="savingsAccountData.enforceMinRequiredBalance">
-          <td>{{'labels.inputs.Enforce Minimum Required Balance' | translate}}</td>
-          <td>{{savingsAccountData.enforceMinRequiredBalance | yesNo}}</td>
+          <td>{{ 'labels.inputs.Enforce Minimum Required Balance' | translate }}</td>
+          <td>{{ savingsAccountData.enforceMinRequiredBalance | yesNo }}</td>
         </tr>
         <tr *ngIf="savingsAccountData.summary.lastInterestCalculationDate">
-          <td>{{'labels.inputs.Interest Recalculation Date' | translate}}</td>
-          <td>{{savingsAccountData.summary.lastInterestCalculationDate | dateFormat}}</td>
+          <td>{{ 'labels.inputs.Interest Recalculation Date' | translate }}</td>
+          <td>{{ savingsAccountData.summary.lastInterestCalculationDate | dateFormat }}</td>
         </tr>
         <tr *ngIf="savingsAccountData.onHoldFunds">
-          <td>{{'labels.inputs.On Hold Funds' | translate}}</td>
-          <td><a *mifosxHasPermission="'READ_SAVINGSACCOUNT'">{{savingsAccountData.onHoldFunds | currency:currency.code:'symbol-narrow':'1.2-2'}}</a></td>
+          <td>{{ 'labels.inputs.On Hold Funds' | translate }}</td>
+          <td>
+            <a *mifosxHasPermission="'READ_SAVINGSACCOUNT'">{{
+              savingsAccountData.onHoldFunds | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}</a>
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.withHoldTax">
-          <td>{{'labels.inputs.Withhold Tax Group' | translate}}</td>
-          <td>{{savingsAccountData.taxGroup.name}}</td>
+          <td>{{ 'labels.inputs.Withhold Tax Group' | translate }}</td>
+          <td>{{ savingsAccountData.taxGroup.name }}</td>
         </tr>
       </tbody>
     </table>
@@ -203,28 +248,32 @@
 
   <ng-template #alternateSummary>
     <div fxFlex="49%">
-      <h4 class="table-headers">{{'labels.heading.Account Summary' | translate}}</h4>
+      <h4 class="table-headers">{{ 'labels.heading.Account Summary' | translate }}</h4>
       <table>
         <tbody>
           <tr>
-            <td>{{'labels.inputs.External Id' | translate}}</td>
+            <td>{{ 'labels.inputs.External Id' | translate }}</td>
             <td *ngIf="savingsAccountData.externalId">
-              <mifosx-external-identifier externalId="{{savingsAccountData.externalId}}"></mifosx-external-identifier>
+              <mifosx-external-identifier externalId="{{ savingsAccountData.externalId }}"></mifosx-external-identifier>
             </td>
-            <td *ngIf="!savingsAccountData.externalId">{{'labels.inputs.Not Provided' | translate}}</td>
+            <td *ngIf="!savingsAccountData.externalId">{{ 'labels.inputs.Not Provided' | translate }}</td>
           </tr>
           <tr>
-            <td>{{'labels.inputs.Activated On' | translate}}</td>
-            <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate |
-              dateFormat) : 'Not Activated'}}</td>
+            <td>{{ 'labels.inputs.Activated On' | translate }}</td>
+            <td>
+              {{
+                savingsAccountData.timeline.activatedOnDate
+                  ? (savingsAccountData.timeline.activatedOnDate | dateFormat)
+                  : 'Not Activated'
+              }}
+            </td>
           </tr>
           <tr>
-            <td>{{'labels.inputs.Currency' | translate}}</td>
-            <td>{{savingsAccountData.currency.name}} [{{savingsAccountData.currency.code}}]</td>
+            <td>{{ 'labels.inputs.Currency' | translate }}</td>
+            <td>{{ savingsAccountData.currency.name }} [{{ savingsAccountData.currency.code }}]</td>
           </tr>
         </tbody>
       </table>
     </div>
   </ng-template>
-
 </div>

src/app/savings/savings-account-view/notes-tab/notes-tab.component.html

@@ -1,4 +1,5 @@
-<mifosx-entity-notes-tab [entityId]="entityId"
+<mifosx-entity-notes-tab
+  [entityId]="entityId"
   [entityNotes]="entityNotes"
   [callbackAdd]="addNote"
   [callbackEdit]="editNote"

src/app/savings/savings-account-view/savings-account-view.component.html

@@ -1,13 +1,14 @@
 <mat-card class="account-card">
-
   <mat-card-header fxLayout="column" class="header">
-
     <mat-card-title-group class="header-title-group">
-
       <div class="profile-image-container">
         <div>
-          <img mat-card-md-image class="profile-image" matTooltip="{{ 'tooltips.Savings Account' | translate}}"
-            [src]="'assets/images/savings_account_placeholder.png'">
+          <img
+            mat-card-md-image
+            class="profile-image"
+            matTooltip="{{ 'tooltips.Savings Account' | translate }}"
+            [src]="'assets/images/savings_account_placeholder.png'"
+          />
         </div>
       </div>
 
@@ -15,34 +16,55 @@
         <mat-card-title fxLayout="row" fxLayout.lt-md="column">
           <div fxFlex="60%">
             <h3>
-              <i class="fa fa-stop" [ngClass]="savingsAccountData.status.code | statusLookup"
-                [matTooltip]="savingsAccountData.status.value" *ngIf="!savingsAccountData.subStatus.block"></i>
-              <i class="fa fa-stop" [ngClass]="savingsAccountData.subStatus.value | statusLookup"
-                [matTooltip]="savingsAccountData.subStatus.value" *ngIf="savingsAccountData.subStatus.block"></i>
-                <span class="m-r-5">{{'labels.inputs.Savings Product' | translate}} :</span> 
-                <span class="m-r-5"><mifosx-long-text textValue="{{savingsAccountData.savingsProductName}}"></mifosx-long-text></span>
-                <mifosx-account-number accountNo="{{savingsAccountData.accountNo}}" display="left"></mifosx-account-number>
+              <i
+                class="fa fa-stop"
+                [ngClass]="savingsAccountData.status.code | statusLookup"
+                [matTooltip]="savingsAccountData.status.value"
+                *ngIf="!savingsAccountData.subStatus.block"
+              ></i>
+              <i
+                class="fa fa-stop"
+                [ngClass]="savingsAccountData.subStatus.value | statusLookup"
+                [matTooltip]="savingsAccountData.subStatus.value"
+                *ngIf="savingsAccountData.subStatus.block"
+              ></i>
+              <span class="m-r-5">{{ 'labels.inputs.Savings Product' | translate }} :</span>
+              <span class="m-r-5"
+                ><mifosx-long-text textValue="{{ savingsAccountData.savingsProductName }}"></mifosx-long-text
+              ></span>
+              <mifosx-account-number
+                accountNo="{{ savingsAccountData.accountNo }}"
+                display="left"
+              ></mifosx-account-number>
             </h3>
             <span class="account-overview">
-              {{'labels.text.' + entityType | translate}} {{"labels.inputs.name" | translate}}: {{savingsAccountData.clientName ||
-              savingsAccountData.groupName}}
+              {{ 'labels.text.' + entityType | translate }} {{ 'labels.inputs.name' | translate }}:
+              {{ savingsAccountData.clientName || savingsAccountData.groupName }}
               <span class="m-l-10" *ngIf="savingsAccountData.clientAccountNo">
-                <mifosx-account-number accountNo="{{savingsAccountData.clientAccountNo}}"></mifosx-account-number>
+                <mifosx-account-number accountNo="{{ savingsAccountData.clientAccountNo }}"></mifosx-account-number>
               </span>
             </span>
           </div>
 
           <div *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval">
-            <h3> {{"labels.heading.Account Overview" | translate}} </h3>
+            <h3>{{ 'labels.heading.Account Overview' | translate }}</h3>
             <table class="account-overview">
               <tbody>
                 <tr>
-                  <td>{{"labels.inputs.Current Balance" | translate }}</td>
-                  <td class="r-amount">{{savingsAccountData.summary.accountBalance | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                  <td>{{ 'labels.inputs.Current Balance' | translate }}</td>
+                  <td class="r-amount">
+                    {{
+                      savingsAccountData.summary.accountBalance | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                    }}
+                  </td>
                 </tr>
                 <tr>
-                  <td>{{"labels.inputs.Available Balance" | translate }}</td>
-                  <td class="r-amount">{{savingsAccountData.summary.availableBalance | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                  <td>{{ 'labels.inputs.Available Balance' | translate }}</td>
+                  <td class="r-amount">
+                    {{
+                      savingsAccountData.summary.availableBalance | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                    }}
+                  </td>
                 </tr>
               </tbody>
             </table>
@@ -51,8 +73,12 @@
           <span fxFlex="auto"></span>
 
           <div fxFlex="5%">
-            <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Loan account actions"
-              yPosition="below">
+            <button
+              mat-icon-button
+              [matMenuTriggerFor]="accountMenu"
+              aria-label="Loan account actions"
+              yPosition="below"
+            >
               <mat-icon matListIcon class="actions-menu">
                 <fa-icon icon="bars" size="sm"></fa-icon>
               </mat-icon>
@@ -65,68 +91,100 @@
         <ng-container *ngFor="let item of buttonConfig.singleButtons">
           <button mat-menu-item *mifosxHasPermission="item.taskPermissionName" (click)="doAction(item.name)">
             <mat-icon matListIcon>
-              <fa-icon icon="{{item.icon}}" size="sm"></fa-icon>
+              <fa-icon icon="{{ item.icon }}" size="sm"></fa-icon>
             </mat-icon>
-            <span> {{'labels.menus.' + item.name | translate}} </span>
+            <span> {{ 'labels.menus.' + item.name | translate }} </span>
           </button>
         </ng-container>
 
         <ng-container *ngIf="buttonConfig.options && !savingsAccountData.subStatus.block">
-          <button mat-menu-item [matMenuTriggerFor]="More">{{'labels.menus.More' | translate}}</button>
+          <button mat-menu-item [matMenuTriggerFor]="More">{{ 'labels.menus.More' | translate }}</button>
           <mat-menu #More="matMenu">
             <span *ngFor="let option of buttonConfig.options">
-              <button mat-menu-item *mifosxHasPermission="option.taskPermissionName"
-                (click)="doAction(option.name)">{{'labels.menus.' + option.name | translate}}</button>
+              <button mat-menu-item *mifosxHasPermission="option.taskPermissionName" (click)="doAction(option.name)">
+                {{ 'labels.menus.' + option.name | translate }}
+              </button>
             </span>
           </mat-menu>
         </ng-container>
       </mat-menu>
-
     </mat-card-title-group>
-
   </mat-card-header>
 
   <mat-card-content class="content">
-
     <nav mat-tab-nav-bar class="navigation-tabs" *ngIf="isActive">
-      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
-        [active]="general.isActive">
-        {{'labels.inputs.General' | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./general']"
+        routerLinkActive
+        #general="routerLinkActive"
+        [active]="general.isActive"
+      >
+        {{ 'labels.inputs.General' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
-        [active]="transactions.isActive">
-        {{'labels.inputs.Transactions' | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./transactions']"
+        routerLinkActive
+        #transactions="routerLinkActive"
+        [active]="transactions.isActive"
+      >
+        {{ 'labels.inputs.Transactions' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive"
-        [active]="charges.isActive">
-        {{'labels.inputs.Charges' | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./charges']"
+        routerLinkActive
+        #charges="routerLinkActive"
+        [active]="charges.isActive"
+      >
+        {{ 'labels.inputs.Charges' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./documents']" routerLinkActive #savingsDocuments="routerLinkActive"
-        [active]="savingsDocuments.isActive">
-        {{'labels.inputs.Documents' | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./documents']"
+        routerLinkActive
+        #savingsDocuments="routerLinkActive"
+        [active]="savingsDocuments.isActive"
+      >
+        {{ 'labels.inputs.Documents' | translate }}
       </a>
-      <a mat-tab-link *mifosxHasPermission="'READ_SAVINGSNOTE'" [routerLink]="['./notes']" routerLinkActive #notes="routerLinkActive"
-        [active]="notes.isActive">
-        {{'labels.inputs.Notes' | translate}}
+      <a
+        mat-tab-link
+        *mifosxHasPermission="'READ_SAVINGSNOTE'"
+        [routerLink]="['./notes']"
+        routerLinkActive
+        #notes="routerLinkActive"
+        [active]="notes.isActive"
+      >
+        {{ 'labels.inputs.Notes' | translate }}
       </a>
       <ng-container *mifosxHasPermission="'READ_SAVINGSACCOUNTCHARGE'">
-        <a mat-tab-link [routerLink]="['./standing-instructions']" routerLinkActive
-          #standingInstructions="routerLinkActive" [active]="standingInstructions.isActive"
-          *ngIf="savingsAccountData.clientId">
-          {{'labels.inputs.Standing Instructions' | translate}}
+        <a
+          mat-tab-link
+          [routerLink]="['./standing-instructions']"
+          routerLinkActive
+          #standingInstructions="routerLinkActive"
+          [active]="standingInstructions.isActive"
+          *ngIf="savingsAccountData.clientId"
+        >
+          {{ 'labels.inputs.Standing Instructions' | translate }}
         </a>
       </ng-container>
       <ng-container *ngFor="let savingsDatatable of savingsDatatables">
-        <a mat-tab-link *mifosxHasPermission="'READ_' + savingsDatatable.registeredTableName"
-          [routerLink]="['./datatables',savingsDatatable.registeredTableName]" routerLinkActive
-          #datatable="routerLinkActive" [active]="datatable.isActive">
-          {{savingsDatatable.registeredTableName}}
+        <a
+          mat-tab-link
+          *mifosxHasPermission="'READ_' + savingsDatatable.registeredTableName"
+          [routerLink]="['./datatables', savingsDatatable.registeredTableName]"
+          routerLinkActive
+          #datatable="routerLinkActive"
+          [active]="datatable.isActive"
+        >
+          {{ savingsDatatable.registeredTableName }}
         </a>
       </ng-container>
     </nav>
 
     <router-outlet></router-outlet>
-
   </mat-card-content>
-
 </mat-card>

src/app/savings/savings-account-view/savings-documents-tab/savings-documents-tab.component.html

@@ -1,4 +1,6 @@
-<mifosx-entity-documents-tab [entityType]="entityType" [entityId]="entityId"
+<mifosx-entity-documents-tab
+  [entityType]="entityType"
+  [entityId]="entityId"
   [entityDocuments]="entityDocuments"
   [callbackUpload]="uploadDocument"
   [callbackDownload]="downloadDocument"

src/app/savings/savings-account-view/standing-instructions-tab/standing-instructions-tab.component.html

@@ -1,70 +1,89 @@
 <div class="tab-container mat-typography">
-
   <div class="m-b-10">
-    <h3>{{"labels.heading.All Standing Instructions" | translate }}</h3>
+    <h3>{{ 'labels.heading.All Standing Instructions' | translate }}</h3>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
-
     <table mat-table #instructionsTable [dataSource]="dataSource">
-
       <ng-container matColumnDef="client">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Client' | translate}} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.fromClient.displayName}}-{{instruction.fromClient.id}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.fromClient.displayName }}-{{ instruction.fromClient.id }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="fromAccount">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.From Account' | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.fromAccount.accountNo}} ({{instruction.fromAccountType.value}})</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.From Account' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.fromAccount.accountNo }} ({{ instruction.fromAccountType.value }})
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="beneficiary">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Beneficiary' | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.toClient.displayName}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Beneficiary' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">{{ instruction.toClient.displayName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="toAccount">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.To Account' | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.toAccount.accountNo}} ({{instruction.toAccountType.value}})</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.To Account' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.toAccount.accountNo }} ({{ instruction.toAccountType.value }})
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Amount' | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.instructionType.value}}/{{instruction.amount}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">{{ instruction.instructionType.value }}/{{ instruction.amount }}</td>
       </ng-container>
 
       <ng-container matColumnDef="validity">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Validity' | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.validFrom | dateFormat}} {{ 'labels.inputs.To' | translate }} {{instruction.validTill | dateFormat}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Validity' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.validFrom | dateFormat }} {{ 'labels.inputs.To' | translate }}
+          {{ instruction.validTill | dateFormat }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let instruction">
-          <span *ngIf="instruction.status.value!=='Deleted'">
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Edit Standing Instruction' | translate }}"
-              *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'">
+          <span *ngIf="instruction.status.value !== 'Deleted'">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              matTooltip="{{ 'tooltips.Edit Standing Instruction' | translate }}"
+              *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'"
+            >
               <i class="fa fa-edit"></i>
             </button>
           </span>
-          <span *ngIf="instruction.status.value!=='Deleted'">
-            <button class="account-action-button" mat-raised-button color="warn" matTooltip="{{ 'tooltips.Delete Standing Instruction' | translate }}"
-              *mifosxHasPermission="'DELETE_STANDINGINSTRUCTION'" (click)="deleteStandingInstruction(instruction.id)">
+          <span *ngIf="instruction.status.value !== 'Deleted'">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="warn"
+              matTooltip="{{ 'tooltips.Delete Standing Instruction' | translate }}"
+              *mifosxHasPermission="'DELETE_STANDINGINSTRUCTION'"
+              (click)="deleteStandingInstruction(instruction.id)"
+            >
               <i class="fa fa-times"></i>
             </button>
           </span>
-          <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.View Standing Instruction' | translate }}"
-            *mifosxHasPermission="'READ_STANDINGINSTRUCTION'">
+          <button
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+            matTooltip="{{ 'tooltips.View Standing Instruction' | translate }}"
+            *mifosxHasPermission="'READ_STANDINGINSTRUCTION'"
+          >
             <i class="fa fa-eye"></i>
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
-
   </div>
-
 </div>

src/app/savings/savings-account-view/transactions-tab/export-transactions/export-transactions.component.html

@@ -1,35 +1,48 @@
 <form class="m-t-20" fxLayout="column" [formGroup]="transactionsReportForm" (ngSubmit)="generate()">
-
   <div fxLayout="row" fxLayoutGap="3%" fxLayoutAlign="center">
-
     <mat-form-field fxFlex="30%" (click)="fromDatePicker.open()">
       <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" required formControlName="fromDate">
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="fromDatePicker"
+        required
+        formControlName="fromDate"
+      />
       <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #fromDatePicker></mat-datepicker>
       <mat-error>
-        {{ 'labels.inputs.From Date' | translate }} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="30%" (click)="toDatePicker.open()">
       <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="toDate">
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="toDatePicker"
+        required
+        formControlName="toDate"
+      />
       <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #toDatePicker></mat-datepicker>
       <mat-error>
-        {{ 'labels.inputs.To Date' | translate }} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-
   </div>
 
   <div class="generate-button" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5%">
-    <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
+    <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
     <button mat-raised-button color="primary" [disabled]="!transactionsReportForm.valid">
-    <fa-icon icon="cogs" class="m-r-10"></fa-icon>{{ 'labels.buttons.Generate Report' | translate }} &nbsp;</button>
+      <fa-icon icon="cogs" class="m-r-10"></fa-icon>{{ 'labels.buttons.Generate Report' | translate }} &nbsp;
+    </button>
   </div>
-
 </form>
 
 <iframe *ngIf="!hideOutput" [src]="pentahoUrl" frameborder="0" width="100%" height="750px;"></iframe>

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html

@@ -1,113 +1,162 @@
 <div class="tab-container mat-typography">
-
   <div class="mat-elevation-z1 m-b-25" [hidden]="!accountWithTransactions">
     <div fxLayout="row" fxLayoutAlign="start">
       <div class="m-b-10">
-        <h3>{{"labels.heading.All Transactions" | translate }}</h3>
+        <h3>{{ 'labels.heading.All Transactions' | translate }}</h3>
       </div>
       <div class="action-button m-b-20" fxLayout="row" fxLayoutGap="20px" *ngIf="checkStatus()">
         <mat-checkbox [formControl]="hideReversedParam" (click)="hideReversed()" class="accruals">
-          {{"labels.inputs.Hide Reversed" | translate}}</mat-checkbox>
+          {{ 'labels.inputs.Hide Reversed' | translate }}</mat-checkbox
+        >
         <mat-checkbox [formControl]="hideAccrualsParam" (click)="hideAccruals()" class="accruals">
-          {{"labels.inputs.Hide Accruals" | translate}}</mat-checkbox>
-        <button mat-raised-button color="primary" [routerLink]="['export']">{{"labels.buttons.Export" | translate}}</button>
+          {{ 'labels.inputs.Hide Accruals' | translate }}</mat-checkbox
+        >
+        <button mat-raised-button color="primary" [routerLink]="['export']">
+          {{ 'labels.buttons.Export' | translate }}
+        </button>
       </div>
     </div>
 
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="row">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> # </th>
-        <td mat-cell *matCellDef="let transaction; let idx = index;" (click)="showTransactions(transaction)">{{(idx + 1)}}</td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>#</th>
+        <td mat-cell *matCellDef="let transaction; let idx = index" (click)="showTransactions(transaction)">
+          {{ idx + 1 }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Id" | translate}} </th>
-        <td mat-cell *matCellDef="let transaction" class="td-select" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)"> {{ transaction.id }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Id' | translate }}</th>
+        <td
+          mat-cell
+          *matCellDef="let transaction"
+          class="td-select"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
+          {{ transaction.id }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="date">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{"labels.inputs.Transaction Date" | translate}} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Transaction Date' | translate }}
+        </th>
+        <td
+          mat-cell
+          *matCellDef="let transaction"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
           {{ transaction.date | dateFormat }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="externalId">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.External Id" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.External Id' | translate }}</th>
         <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)">
-          <mifosx-external-identifier externalId="{{transaction.externalId}}"></mifosx-external-identifier>
+          <mifosx-external-identifier externalId="{{ transaction.externalId }}"></mifosx-external-identifier>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionType">
-        <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Transaction Type" | translate}} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
-          {{ transaction.transactionType.value | translateKey:'catalogs' }}
+        <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Transaction Type' | translate }}</th>
+        <td
+          mat-cell
+          *matCellDef="let transaction"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
+          {{ transaction.transactionType.value | translateKey: 'catalogs' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="debit">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Debit" | translate}} </th>
-        <td mat-cell class="r-amount" *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
-          {{ isDebit(transaction.transactionType) ? (transaction.amount | formatNumber) : 'N/A'}}
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Debit' | translate }}</th>
+        <td
+          mat-cell
+          class="r-amount"
+          *matCellDef="let transaction"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
+          {{ isDebit(transaction.transactionType) ? (transaction.amount | formatNumber) : 'N/A' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="credit">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Credit" | translate}} </th>
-        <td mat-cell class="r-amount" *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Credit' | translate }}</th>
+        <td
+          mat-cell
+          class="r-amount"
+          *matCellDef="let transaction"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
           {{ !isDebit(transaction.transactionType) ? (transaction.amount | formatNumber) : 'N/A' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="balance">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Balance" | translate}} </th>
-        <td mat-cell class="r-amount" *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Balance' | translate }}</th>
+        <td
+          mat-cell
+          class="r-amount"
+          *matCellDef="let transaction"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
           {{ transaction.runningBalance | formatNumber }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
+        <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell class="center" *matCellDef="let transaction">
           <button mat-icon-button [matMenuTriggerFor]="transactionMenu" aria-label="" class="action-button">
-            <mat-icon>{{"labels.text.more_vert" | translate }}</mat-icon>
+            <mat-icon>{{ 'labels.text.more_vert' | translate }}</mat-icon>
           </button>
           <mat-menu #transactionMenu="matMenu">
             <button mat-menu-item (click)="showTransactions(transaction)">
               <mat-icon><fa-icon icon="eye" size="sm"></fa-icon></mat-icon>
-              <span>{{ 'labels.text.View Transaction' | translate}}</span>
+              <span>{{ 'labels.text.View Transaction' | translate }}</span>
             </button>
             <button mat-menu-item *mifosxHasPermission="'ADJUST_LOAN'" (click)="undoTransaction(transaction, $event)">
               <mat-icon><fa-icon icon="undo" size="sm"></fa-icon></mat-icon>
-              <span>{{ 'tooltips.Undo Transaction' | translate}}</span>
+              <span>{{ 'tooltips.Undo Transaction' | translate }}</span>
             </button>
-            <button mat-menu-item class="account-action-button" (click)="routeEdit($event)" [routerLink]="[transaction.id, 'reciept']">
+            <button
+              mat-menu-item
+              class="account-action-button"
+              (click)="routeEdit($event)"
+              [routerLink]="[transaction.id, 'reciept']"
+            >
               <mat-icon><fa-icon icon="receipt" size="sm"></fa-icon></mat-icon>
-              <span>{{ 'tooltips.View Receipts' | translate}}</span>
+              <span>{{ 'tooltips.View Receipts' | translate }}</span>
             </button>
-            <button mat-menu-item (click)="routeEdit($event)" [routerLink]="['/','journal-entry', 'view', 'S'+transaction.id ]">
+            <button
+              mat-menu-item
+              (click)="routeEdit($event)"
+              [routerLink]="['/', 'journal-entry', 'view', 'S' + transaction.id]"
+            >
               <mat-icon><fa-icon icon="table-cells" size="sm"></fa-icon></mat-icon>
-              <span>{{ 'tooltips.View Journal Entries' | translate}}</span>
+              <span>{{ 'tooltips.View Journal Entries' | translate }}</span>
             </button>
           </mat-menu>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSize]="50" [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons></mat-paginator>
-
   </div>
 
   <div class="alert" [hidden]="accountWithTransactions">
     <div class="message">
       <i class="fa fa-exclamation-circle alert-check"></i>
-      {{ "labels.text.No transaction was found" | translate }}
+      {{ 'labels.text.No transaction was found' | translate }}
     </div>
   </div>
 </div>

src/app/savings/savings-account-view/transactions/edit-transaction/edit-transaction.component.html

@@ -1,29 +1,35 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="editTransactionForm" (ngSubmit)="submit()">
-
       <mat-card-content fxLayout="column">
-
         <mat-form-field (click)="dueDatePicker.open()">
-          <mat-label>{{"labels.inputs.Transaction Date" | translate}}</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker"
-            formControlName="transactionDate" required>
+          <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="dueDatePicker"
+            formControlName="transactionDate"
+            required
+          />
           <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #dueDatePicker></mat-datepicker>
           <mat-error *ngIf="editTransactionForm.controls.transactionDate.hasError('required')">
-            {{"labels.inputs.Transaction Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+            {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
 
-        <mifosx-input-amount [currency]="currency" [isRequired]="true"
+        <mifosx-input-amount
+          [currency]="currency"
+          [isRequired]="true"
           [inputFormControl]="editTransactionForm.controls.transactionAmount"
-          [inputLabel]="'Transaction Amount'">
+          [inputLabel]="'Transaction Amount'"
+        >
         </mifosx-input-amount>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Payment Type' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
           <mat-select formControlName="paymentTypeId">
             <mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
               {{ paymentType.name }}
@@ -35,46 +41,46 @@
           <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
             <mat-slide-toggle>
               <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
-                <span class="m-l-10">{{'labels.inputs.Show Payment Details' | translate}}</span>
+                <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
               </div>
             </mat-slide-toggle>
           </span>
         </div>
 
         <mat-form-field *ngIf="editTransactionForm.controls['accountNumber']">
-          <mat-label>{{"labels.inputs.Account Number"|translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
           <input type="number" formControlName="accountNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['checkNumber']">
-          <mat-label>{{'labels.inputs.Cheque' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Cheque' | translate }}</mat-label>
           <input type="number" formControlName="checkNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['routingCode']">
-          <mat-label>{{'labels.inputs.Routing Code' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
           <input formControlName="routingCode" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['receiptNumber']">
-          <mat-label>{{'labels.inputs.Receipt Number' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
           <input formControlName="receiptNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['bankNumber']">
-          <mat-label>{{'labels.inputs.Bank' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
           <input formControlName="bankNumber" matInput />
         </mat-form-field>
 
         <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!editTransactionForm.valid">{{'labels.buttons.Submit' | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button mat-raised-button color="primary" [disabled]="!editTransactionForm.valid">
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/savings/savings-account-view/transactions/view-reciept/view-reciept.component.html

@@ -1,10 +1,9 @@
 <mat-card class="container">
-
   <div class="back-button">
     <button type="button" color="primary" mat-raised-button [routerLink]="['../../']">
-      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>Back</button>
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>Back
+    </button>
   </div>
 
-  <iframe [src]="pentahoUrl" frameborder="0" width=100% height="600px;"></iframe>
-
+  <iframe [src]="pentahoUrl" frameborder="0" width="100%" height="600px;"></iframe>
 </mat-card>

src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.html

@@ -6,4 +6,4 @@
     [entityDatatable]="entityDatatable"
   >
   </mifosx-entity-datatable-tab>
-</div>
+</div>

src/app/savings/savings-account-view/transactions/view-transaction/savings-transaction-datatable-tab/savings-transaction-datatable-tab.component.html

@@ -1 +1 @@
-<p>{{'labels.heading.savings-transaction-datatable-tab works' | translate }}!</p>
+<p>{{ 'labels.heading.savings-transaction-datatable-tab works' | translate }}!</p>

src/app/savings/savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component.html

@@ -1,39 +1,58 @@
 <div fxLayoutAlign="end" class="container m-b-20" fxLayoutGap="2%">
   <span
-    *ngIf="!(transactionData.interestedPostedAsOn === false && (transactionData.transactionType.id === 17 || transactionData.transactionType.id === 3))">
+    *ngIf="
+      !(
+        transactionData.interestedPostedAsOn === false &&
+        (transactionData.transactionType.id === 17 || transactionData.transactionType.id === 3)
+      )
+    "
+  >
     <span *mifosxHasPermission="'ADJUSTTRANSACTION_SAVINGSACCOUNT'">
-      <button mat-raised-button color="primary" *ngIf="transactionData.transactionType.value === 'Transfer' || transactionData.reversed === 'true'
-          || transactionData.transactionType.id===3 || transactionData.transactionType.id===17" [routerLink]="'edit'">
-        <fa-icon icon="edit" class="m-r-10"></fa-icon>{{"labels.buttons.Edit" | translate}}
+      <button
+        mat-raised-button
+        color="primary"
+        *ngIf="
+          transactionData.transactionType.value === 'Transfer' ||
+          transactionData.reversed === 'true' ||
+          transactionData.transactionType.id === 3 ||
+          transactionData.transactionType.id === 17
+        "
+        [routerLink]="'edit'"
+      >
+        <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
       </button>
     </span>
   </span>
   <span *ngIf="!transactionData.reversed && transactionData.transactionType.amountHold">
-    <button mat-raised-button color="primary" *mifosxHasPermission="'RELEASEAMOUNT_SAVINGSACCOUNT'"
-      (click)="releaseAmount()">
-      <fa-icon icon="lock-open" class="m-r-10"></fa-icon>{{"labels.buttons.Release Amount" | translate}}
+    <button
+      mat-raised-button
+      color="primary"
+      *mifosxHasPermission="'RELEASEAMOUNT_SAVINGSACCOUNT'"
+      (click)="releaseAmount()"
+    >
+      <fa-icon icon="lock-open" class="m-r-10"></fa-icon>{{ 'labels.buttons.Release Amount' | translate }}
     </button>
   </span>
   <span *ngIf="allowUndo()">
-    <button mat-raised-button color="warn" *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
-      (click)="undoTransaction()">
-      <fa-icon icon="undo" class="m-r-10"></fa-icon>{{"labels.buttons.Undo" | translate}}
+    <button
+      mat-raised-button
+      color="warn"
+      *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
+      (click)="undoTransaction()"
+    >
+      <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Undo' | translate }}
     </button>
   </span>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-        <div fxFlex="100%" [ngClass]="transactionColor()">
-        </div>
+        <div fxFlex="100%" [ngClass]="transactionColor()"></div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Id" | translate}}
+          {{ 'labels.inputs.Id' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -41,15 +60,15 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Transaction Type" | translate}}
+          {{ 'labels.inputs.Transaction Type' | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.transactionType.value | translateKey:'catalogs' }}
+          {{ transactionData.transactionType.value | translateKey: 'catalogs' }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Transaction Date" | translate}}
+          {{ 'labels.inputs.Transaction Date' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -57,7 +76,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Currency" | translate}}
+          {{ 'labels.inputs.Currency' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -65,33 +84,33 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Amount" | translate }}
+          {{ 'labels.inputs.Amount' | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.amount | currency:transactionData.currency.code:'symbol-narrow':'1.2-2' }}
+          {{ transactionData.amount | currency: transactionData.currency.code : 'symbol-narrow' : '1.2-2' }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="transactionData.note">
-          {{"labels.inputs.Note" | translate}}
+          {{ 'labels.inputs.Note' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="transactionData.note">
           {{ transactionData.note }}
         </div>
 
-        <mifosx-transaction-payment-detail *ngIf="transactionData.paymentDetailData"
-          [paymentDetailData]="transactionData.paymentDetailData">
+        <mifosx-transaction-payment-detail
+          *ngIf="transactionData.paymentDetailData"
+          [paymentDetailData]="transactionData.paymentDetailData"
+        >
         </mifosx-transaction-payment-detail>
-
       </div>
 
       <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
-        <button type="button" mat-raised-button color="primary" [routerLink]="['../../']">{{ 'labels.buttons.Back' |
-          translate}}</button>
+        <button type="button" mat-raised-button color="primary" [routerLink]="['../../']">
+          {{ 'labels.buttons.Back' | translate }}
+        </button>
       </div>
     </mat-card-content>
-
   </mat-card>
-
-</div>
+</div>

src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.html

@@ -1,18 +1,27 @@
 <div class="container">
   <nav mat-tab-nav-bar class="navigation-tabs">
-    <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
-      [active]="general.isActive">
-      {{'labels.heading.General' | translate}}
+    <a
+      mat-tab-link
+      [routerLink]="['./general']"
+      routerLinkActive
+      #general="routerLinkActive"
+      [active]="general.isActive"
+    >
+      {{ 'labels.heading.General' | translate }}
     </a>
     <ng-container *ngFor="let entityDatatable of entityDatatables">
-      <a mat-tab-link [routerLink]="['./datatables',entityDatatable.registeredTableName]" routerLinkActive
-        #datatable="routerLinkActive" [active]="datatable.isActive"
-        *mifosxHasPermission="'READ_' + entityDatatable.registeredTableName">
-        {{entityDatatable.registeredTableName}}
+      <a
+        mat-tab-link
+        [routerLink]="['./datatables', entityDatatable.registeredTableName]"
+        routerLinkActive
+        #datatable="routerLinkActive"
+        [active]="datatable.isActive"
+        *mifosxHasPermission="'READ_' + entityDatatable.registeredTableName"
+      >
+        {{ entityDatatable.registeredTableName }}
       </a>
     </ng-container>
   </nav>
 
   <router-outlet></router-outlet>
-
 </div>

src/app/savings/savings-account-view/view-charge/view-charge.component.html

@@ -1,43 +1,54 @@
-
-
-<div *ngIf="savingsAccountData.status.value === 'Active' && chargeData.amountOutstanding !== 0"
-  fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
-    <button mat-raised-button color="accent" *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'" (click)="payCharge()">
-      <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>
-      Pay
+<div
+  *ngIf="savingsAccountData.status.value === 'Active' && chargeData.amountOutstanding !== 0"
+  fxLayout="row"
+  fxLayoutAlign="end"
+  fxLayoutGap="2%"
+  fxLayout.lt-md="column"
+  class="container m-b-20"
+>
+  <button mat-raised-button color="accent" *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'" (click)="payCharge()">
+    <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>
+    Pay
+  </button>
+  <button mat-raised-button color="primary" *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'" (click)="waiveCharge()">
+    <fa-icon icon="flag" class="m-r-10"></fa-icon>
+    Waive
+  </button>
+  <span *ngIf="isRecurringCharge()">
+    <button
+      mat-raised-button
+      color="warn"
+      *mifosxHasPermission="'INACTIVATE_SAVINGSACCOUNTCHARGE'"
+      (click)="inactivateCharge()"
+    >
+      <fa-icon icon="trash" class="m-r-10"></fa-icon>
+      Inactivate
     </button>
-    <button mat-raised-button color="primary" *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'" (click)="waiveCharge()">
-      <fa-icon icon="flag" class="m-r-10"></fa-icon>
-      Waive
-    </button>
-    <span *ngIf="isRecurringCharge()">
-      <button mat-raised-button color="warn" *mifosxHasPermission="'INACTIVATE_SAVINGSACCOUNTCHARGE'" (click)="inactivateCharge()">
-        <fa-icon icon="trash" class="m-r-10"></fa-icon>
-        Inactivate
-      </button>
-    </span>
+  </span>
 </div>
 
-<div *ngIf="savingsAccountData.status.value === 'Submitted and pending approval'"
-  fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
-    <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'" (click)="editCharge()">
-      <fa-icon icon="edit" class="m-r-10"></fa-icon>
-      Edit
-    </button>
-    <button mat-raised-button color="warn" *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'" (click)="deleteCharge()">
-      <fa-icon icon="trash" class="m-r-10"></fa-icon>
-      Delete
-    </button>
+<div
+  *ngIf="savingsAccountData.status.value === 'Submitted and pending approval'"
+  fxLayout="row"
+  fxLayoutAlign="end"
+  fxLayoutGap="2%"
+  fxLayout.lt-md="column"
+  class="container m-b-20"
+>
+  <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'" (click)="editCharge()">
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
+    Edit
+  </button>
+  <button mat-raised-button color="warn" *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'" (click)="deleteCharge()">
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
+    Delete
+  </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="mat-body-strong">
           {{ 'labels.inputs.Name' | translate }}
         </div>
@@ -51,7 +62,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.penalty ? 'Penalty' : 'Fee' | translateKey:'catalogs' }}
+          {{ chargeData.penalty ? 'Penalty' : ('Fee' | translateKey: 'catalogs') }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -67,7 +78,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.chargeTimeType.value | translateKey:'catalogs' }}
+          {{ chargeData.chargeTimeType.value | translateKey: 'catalogs' }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -83,7 +94,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.chargeCalculationType.value | translateKey:'catalogs' }}
+          {{ chargeData.chargeCalculationType.value | translateKey: 'catalogs' }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -117,14 +128,13 @@
         <div fxFlex="50%">
           {{ chargeData.amountOutstanding | formatNumber }}
         </div>
-
       </div>
 
       <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
-        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{ 'labels.buttons.Back' | translate}}</button>
+        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">
+          {{ 'labels.buttons.Back' | translate }}
+        </button>
       </div>
     </mat-card-content>
-
   </mat-card>
-
 </div>