build: Use prettier for html

Stop ignoring html files in prettier and fix existing issues.

src/app/deposits/fixed-deposits/fixed-deposit-account-view/charges-tab/charges-tab.component.html

@@ -1,94 +1,138 @@
 <div class="tab-container mat-typography">
-
   <div fxLayout="row" fxLayoutAlign="start">
     <div class="m-b-10">
-      <h3>{{"labels.heading.All Charges" | translate }}</h3>
+      <h3>{{ 'labels.heading.All Charges' | translate }}</h3>
     </div>
     <div class="action-button m-b-20" *ngIf="this.chargesData">
       <button mat-raised-button color="primary" (click)="toggleCharges()">
-        {{showInactiveCharges?'View Active Charges':'View Inactive Charges'}}</button>
+        {{ showInactiveCharges ? 'View Active Charges' : 'View Inactive Charges' }}
+      </button>
     </div>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
-
-    <table mat-table #chargesTable [dataSource]="dataSource" >
-
+    <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.Fee/Penalty" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.penalty === true ? ('Penalty'| translateKey:'catalogs') : ('Fee'| translateKey:'catalogs') }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fee/Penalty' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.penalty === true ? ('Penalty' | translateKey: 'catalogs') : ('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" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay)  | dateFormat: 'dd MMMM') : ('Unassigned' | translateKey:'inputs')}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repeats On' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{
+            charge.feeOnMonthDay
+              ? ([2000].concat(charge.feeOnMonthDay) | dateFormat: 'dd MMMM')
+              : ('Unassigned' | translateKey: 'inputs')
+          }}
+        </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.currency.displaySymbol}}&nbsp;{{charge.amount | formatNumber }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Due' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.currency.displaySymbol }}&nbsp;{{ charge.amount | formatNumber }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="paid">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Paid" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountPaid | formatNumber }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Paid' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.currency.displaySymbol }}&nbsp;{{ charge.amountPaid | formatNumber }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="waived">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Waived" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountWaived | formatNumber }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Waived' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.currency.displaySymbol }}&nbsp;{{ charge.amountWaived | formatNumber }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="outstanding">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Outstanding" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountOutstanding | formatNumber }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Outstanding' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.currency.displaySymbol }}&nbsp;{{ charge.amountOutstanding | formatNumber }}
+        </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="fixedDepositsAccountData.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="fixedDepositsAccountData.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 }}"
-                *mifosxHasPermission="'INACTIVATE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); inactivateCharge(charge.id)">
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="primary"
+                matTooltip="{{ 'tooltips.Inactivate Charge' | translate }}"
+                *mifosxHasPermission="'INACTIVATE_SAVINGSACCOUNTCHARGE'"
+                (click)="routeEdit($event); inactivateCharge(charge.id)"
+              >
                 <i class="fa fa-ban"></i>
               </button>
             </ng-container>
@@ -97,10 +141,7 @@
       </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/deposits/fixed-deposits/fixed-deposit-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/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/inactivate-charge-dialog/inactivate-charge-dialog.component.html

@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{"labels.heading.Inactivate Charge" | translate }}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.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/deposits/fixed-deposits/fixed-deposit-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/deposits/fixed-deposits/fixed-deposit-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/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/waive-charge-dialog/waive-charge-dialog.component.html

@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{"labels.heading.Waive Charge" | translate }}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.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/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.html

@@ -1,45 +1,65 @@
 <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"
+          <img
+            mat-card-md-image
+            class="profile-image"
             matTooltip="{{ 'tooltips.Fixed Deposits Account' | translate }}"
-            [src]="'assets/images/fd_account_placeholder.png'">
+            [src]="'assets/images/fd_account_placeholder.png'"
+          />
         </div>
       </div>
 
       <div class="mat-typography account-card-title">
         <mat-card-title>
-
           <div fxFlex="60%">
             <h3>
-              <i class="fa fa-stop" [ngClass]="fixedDepositsAccountData.status.code | statusLookup" [matTooltip]="fixedDepositsAccountData.status.value"></i>
-              {{"labels.inputs.Fixed Deposit Product" | translate }} : {{fixedDepositsAccountData.depositProductName}}
-              <mifosx-account-number accountNo="{{fixedDepositsAccountData.accountNo}}"></mifosx-account-number>
+              <i
+                class="fa fa-stop"
+                [ngClass]="fixedDepositsAccountData.status.code | statusLookup"
+                [matTooltip]="fixedDepositsAccountData.status.value"
+              ></i>
+              {{ 'labels.inputs.Fixed Deposit Product' | translate }} :
+              {{ fixedDepositsAccountData.depositProductName }}
+              <mifosx-account-number accountNo="{{ fixedDepositsAccountData.accountNo }}"></mifosx-account-number>
             </h3>
             <span class="account-overview">
-              <span class="m-r-10">{{'labels.text.' + entityType | translate}} :</span> {{fixedDepositsAccountData.clientName || fixedDepositsAccountData.groupName}}
+              <span class="m-r-10">{{ 'labels.text.' + entityType | translate }} :</span>
+              {{ fixedDepositsAccountData.clientName || fixedDepositsAccountData.groupName }}
               <span class="m-l-10" *ngIf="fixedDepositsAccountData.clientAccountNo">
-                <mifosx-account-number accountNo="{{fixedDepositsAccountData.clientAccountNo}}"></mifosx-account-number>
+                <mifosx-account-number
+                  accountNo="{{ fixedDepositsAccountData.clientAccountNo }}"
+                ></mifosx-account-number>
               </span>
             </span>
           </div>
 
-          <div *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval" fxFlex="30%"  fxLayout="column">
-            <h3 fxFlex="100%"> {{"labels.heading.Account Overview" | translate}} </h3>
+          <div
+            *ngIf="
+              !fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval
+            "
+            fxFlex="30%"
+            fxLayout="column"
+          >
+            <h3 fxFlex="100%">{{ 'labels.heading.Account Overview' | translate }}</h3>
             <table class="account-overview" fxFlex="100%">
               <tbody>
                 <tr>
-                  <td fxFlex="70%">{{"labels.inputs.Current Balance" | translate }}</td>
-                  <td fxFlex="30%" class="r-amount">{{fixedDepositsAccountData.summary.accountBalance | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                  <td fxFlex="70%">{{ 'labels.inputs.Current Balance' | translate }}</td>
+                  <td fxFlex="30%" class="r-amount">
+                    {{
+                      fixedDepositsAccountData.summary.accountBalance
+                        | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                    }}
+                  </td>
                 </tr>
                 <tr>
-                  <td fxFlex="70%">{{"labels.inputs.Deposit Amount" | translate }}</td>
-                  <td fxFlex="30%" class="r-amount">{{fixedDepositsAccountData.depositAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                  <td fxFlex="70%">{{ 'labels.inputs.Deposit Amount' | translate }}</td>
+                  <td fxFlex="30%" class="r-amount">
+                    {{ fixedDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+                  </td>
                 </tr>
               </tbody>
             </table>
@@ -48,8 +68,12 @@
           <span fxFlex="auto"></span>
 
           <div fxFlex="5%">
-            <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Fixed Deposit account actions"
-              yPosition="below">
+            <button
+              mat-icon-button
+              [matMenuTriggerFor]="accountMenu"
+              aria-label="Fixed Deposit account actions"
+              yPosition="below"
+            >
               <mat-icon matListIcon class="actions-menu">
                 <fa-icon icon="bars" size="sm"></fa-icon>
               </mat-icon>
@@ -61,59 +85,86 @@
       <mat-menu #accountMenu="matMenu">
         <ng-container *ngFor="let button of buttonConfig.singleButtons">
           <button mat-menu-item (click)="doAction(button.name)">
-            <i ngClass="{{button.icon}}"></i> {{button.name | translateKey:'menus'}}</button>
+            <i ngClass="{{ button.icon }}"></i> {{ button.name | translateKey: 'menus' }}
+          </button>
         </ng-container>
 
         <ng-container *ngIf="buttonConfig.options.length">
-          <button mat-menu-item [matMenuTriggerFor]="More">{{'More' | translateKey:'menus'}}</button>
+          <button mat-menu-item [matMenuTriggerFor]="More">{{ 'More' | translateKey: 'menus' }}</button>
           <mat-menu #More="matMenu">
             <span *ngFor="let option of buttonConfig.options">
-              <button mat-menu-item (click)="doAction(option.name)">{{option.name | translateKey:'menus'}}</button>
+              <button mat-menu-item (click)="doAction(option.name)">{{ option.name | translateKey: 'menus' }}</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">
-      <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]="['./interest-rate-chart']" routerLinkActive #IRC="routerLinkActive"
-      [active]="IRC.isActive">
-      {{"labels.inputs.Interest Rate Chart" | translate }}
+      <a
+        mat-tab-link
+        [routerLink]="['./interest-rate-chart']"
+        routerLinkActive
+        #IRC="routerLinkActive"
+        [active]="IRC.isActive"
+      >
+        {{ 'labels.inputs.Interest Rate Chart' | translate }}
       </a>
       <span *ngIf="showTransactions">
-        <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>
       </span>
-      <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]="['./standing-instructions']" routerLinkActive #standingInstructions="routerLinkActive"
-        [active]="standingInstructions.isActive" *ngIf="fixedDepositsAccountData.clientId">
-        {{"labels.inputs.Standing Instructions" | translate }}
+      <a
+        mat-tab-link
+        [routerLink]="['./standing-instructions']"
+        routerLinkActive
+        #standingInstructions="routerLinkActive"
+        [active]="standingInstructions.isActive"
+        *ngIf="fixedDepositsAccountData.clientId"
+      >
+        {{ 'labels.inputs.Standing Instructions' | translate }}
       </a>
       <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/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.html

@@ -1,112 +1,153 @@
-
 <div class="fixed-deposits-account-tables" fxLayout="row" fxLayoutGap="2%">
-
   <div fxFlex="49%" fxLayout="column" fxLayoutGap="4%">
-
     <div>
-      <h4 class="table-headers">{{"labels.heading.Fixed Deposit Details" | translate }}</h4>
+      <h4 class="table-headers">{{ 'labels.heading.Fixed Deposit Details' | translate }}</h4>
       <table>
         <tbody>
           <tr>
-            <td>{{"labels.inputs.External Id" | translate }}</td>
+            <td>{{ 'labels.inputs.External Id' | translate }}</td>
             <td>
               <span *ngIf="fixedDepositsAccountData.externalId">
-                <mifosx-external-identifier externalId="{{fixedDepositsAccountData.externalId}}" completed="true"></mifosx-external-identifier>
+                <mifosx-external-identifier
+                  externalId="{{ fixedDepositsAccountData.externalId }}"
+                  completed="true"
+                ></mifosx-external-identifier>
+              </span>
+              <span *ngIf="!fixedDepositsAccountData.externalId">
+                {{ 'labels.inputs.Not Available' | translate }}
               </span>
-              <span *ngIf="!fixedDepositsAccountData.externalId"> {{"labels.inputs.Not Available" | translate}} </span>
             </td>
           </tr>
           <tr>
-            <td>{{"labels.inputs.Activated On" | translate }}</td>
-            <td>{{fixedDepositsAccountData.timeline.activatedOnDate ? (fixedDepositsAccountData.timeline.activatedOnDate | dateFormat) : ('labels.text.Not Activated' | translate)}}</td>
+            <td>{{ 'labels.inputs.Activated On' | translate }}</td>
+            <td>
+              {{
+                fixedDepositsAccountData.timeline.activatedOnDate
+                  ? (fixedDepositsAccountData.timeline.activatedOnDate | dateFormat)
+                  : ('labels.text.Not Activated' | translate)
+              }}
+            </td>
           </tr>
           <tr *ngIf="fixedDepositsAccountData.timeline.closedOnDate">
-            <td>{{"labels.inputs.Closed On" | translate }}</td>
-            <td>{{fixedDepositsAccountData.timeline.closedOnDate | dateFormat}}</td>
+            <td>{{ 'labels.inputs.Closed On' | translate }}</td>
+            <td>{{ fixedDepositsAccountData.timeline.closedOnDate | dateFormat }}</td>
           </tr>
           <tr>
-            <td>{{"labels.inputs.Field Officer" | translate }}</td>
-            <td>{{fixedDepositsAccountData.fieldOfficerName ? fixedDepositsAccountData.fieldOfficerName : ('Unassigned' | translateKey:'inputs')}}</td>
+            <td>{{ 'labels.inputs.Field Officer' | translate }}</td>
+            <td>
+              {{
+                fixedDepositsAccountData.fieldOfficerName
+                  ? fixedDepositsAccountData.fieldOfficerName
+                  : ('Unassigned' | translateKey: 'inputs')
+              }}
+            </td>
           </tr>
           <tr>
-            <td>{{"labels.inputs.Maturity Date" | translate }}</td>
-            <td>{{fixedDepositsAccountData.maturityDate ? (fixedDepositsAccountData.maturityDate | dateFormat) : 'N/A'}}</td>
+            <td>{{ 'labels.inputs.Maturity Date' | translate }}</td>
+            <td>
+              {{ fixedDepositsAccountData.maturityDate ? (fixedDepositsAccountData.maturityDate | dateFormat) : 'N/A' }}
+            </td>
           </tr>
           <tr>
-            <td>{{"labels.inputs.Deposit Period" | translate }}</td>
-            <td>{{fixedDepositsAccountData.depositPeriod}}&nbsp;{{fixedDepositsAccountData.depositPeriodFrequency.value | translateKey:'catalogs'}}</td>
+            <td>{{ 'labels.inputs.Deposit Period' | translate }}</td>
+            <td>
+              {{ fixedDepositsAccountData.depositPeriod }}&nbsp;{{
+                fixedDepositsAccountData.depositPeriodFrequency.value | translateKey: 'catalogs'
+              }}
+            </td>
           </tr>
           <tr *ngIf="fixedDepositsAccountData.withHoldTax">
-            <td>{{"labels.inputs.Tax Group" | translate }}</td>
-            <td>{{fixedDepositsAccountData.taxGroup.name}}</td>
+            <td>{{ 'labels.inputs.Tax Group' | translate }}</td>
+            <td>{{ fixedDepositsAccountData.taxGroup.name }}</td>
           </tr>
           <tr *ngIf="fixedDepositsAccountData.onAccountClosure">
-            <td>{{"labels.inputs.Maturity Instructions" | translate }}</td>
-            <td>{{fixedDepositsAccountData.onAccountClosure.value | translateKey:'catalogs'}}</td>
+            <td>{{ 'labels.inputs.Maturity Instructions' | translate }}</td>
+            <td>{{ fixedDepositsAccountData.onAccountClosure.value | translateKey: 'catalogs' }}</td>
           </tr>
         </tbody>
       </table>
     </div>
 
     <div>
-      <h4 class="table-headers">{{"labels.heading.Interest Details" | translate }}</h4>
+      <h4 class="table-headers">{{ 'labels.heading.Interest Details' | translate }}</h4>
       <table>
         <tbody>
           <tr>
-            <td>{{"labels.inputs.Interest Rate" | translate }}</td>
-            <td>{{fixedDepositsAccountData.nominalAnnualInterestRate}} %</td>
+            <td>{{ 'labels.inputs.Interest Rate' | translate }}</td>
+            <td>{{ fixedDepositsAccountData.nominalAnnualInterestRate }} %</td>
           </tr>
           <tr>
-            <td>{{"labels.inputs.Interest Compounding Period" | translate }}</td>
-            <td>{{fixedDepositsAccountData.interestCompoundingPeriodType.value | translateKey:'catalogs'}}</td>
+            <td>{{ 'labels.inputs.Interest Compounding Period' | translate }}</td>
+            <td>{{ fixedDepositsAccountData.interestCompoundingPeriodType.value | translateKey: 'catalogs' }}</td>
           </tr>
           <tr>
-            <td>{{"labels.inputs.Interest Posting Period" | translate }}</td>
-            <td>{{fixedDepositsAccountData.interestPostingPeriodType.value | translateKey:'catalogs'}}</td>
+            <td>{{ 'labels.inputs.Interest Posting Period' | translate }}</td>
+            <td>{{ fixedDepositsAccountData.interestPostingPeriodType.value | translateKey: 'catalogs' }}</td>
           </tr>
           <tr>
-            <td>{{"labels.inputs.Interest Calculated Using" | translate }}</td>
-            <td>{{fixedDepositsAccountData.interestCalculationType.value | translateKey:'catalogs'}}</td>
+            <td>{{ 'labels.inputs.Interest Calculated Using' | translate }}</td>
+            <td>{{ fixedDepositsAccountData.interestCalculationType.value | translateKey: 'catalogs' }}</td>
           </tr>
           <tr>
-            <td>{{"labels.inputs.No. of Days in Year" | translate }}</td>
-            <td>{{fixedDepositsAccountData.interestCalculationDaysInYearType.value | translateKey:'catalogs'}}</td>
+            <td>{{ 'labels.inputs.No. of Days in Year' | translate }}</td>
+            <td>{{ fixedDepositsAccountData.interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}</td>
           </tr>
           <tr *ngIf="fixedDepositsAccountData.preClosurePenalApplicable">
-            <td>{{"labels.inputs.Pre-cloure Penal" | translate }}</td>
-            <td>{{fixedDepositsAccountData.preClosurePenalInterest}} % on {{fixedDepositsAccountData.preClosurePenalInterestOnType.value | translateKey:'catalogs'}}</td>
+            <td>{{ 'labels.inputs.Pre-cloure Penal' | translate }}</td>
+            <td>
+              {{ fixedDepositsAccountData.preClosurePenalInterest }} % on
+              {{ fixedDepositsAccountData.preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}
+            </td>
           </tr>
         </tbody>
       </table>
     </div>
-
   </div>
 
   <div fxFlex="49%">
-
-    <div *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval; else otherDetails">
-      <h4 class="table-headers">{{"labels.heading.Performance History" | translate }}</h4>
+    <div
+      *ngIf="
+        !fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval;
+        else otherDetails
+      "
+    >
+      <h4 class="table-headers">{{ 'labels.heading.Performance History' | translate }}</h4>
       <table>
         <tbody>
           <tr>
-            <td>{{"labels.inputs.Principal Amount" | translate }}</td>
-            <td class="r-amount">{{fixedDepositsAccountData.depositAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+            <td>{{ 'labels.inputs.Principal Amount' | translate }}</td>
+            <td class="r-amount">
+              {{ fixedDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+            </td>
           </tr>
           <tr>
-            <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
-            <td class="r-amount">{{fixedDepositsAccountData.maturityAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+            <td>{{ 'labels.inputs.Maturity Amount' | translate }}</td>
+            <td class="r-amount">
+              {{ fixedDepositsAccountData.maturityAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+            </td>
           </tr>
           <tr *ngIf="fixedDepositsAccountData.summary.totalDeposits">
-            <td>{{"labels.inputs.Total Deposits" | translate }}</td>
-            <td class="r-amount">{{fixedDepositsAccountData.summary.totalDeposits | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+            <td>{{ 'labels.inputs.Total Deposits' | translate }}</td>
+            <td class="r-amount">
+              {{ fixedDepositsAccountData.summary.totalDeposits | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+            </td>
           </tr>
           <tr *ngIf="fixedDepositsAccountData.summary.totalWithdrawals">
-            <td>{{"labels.inputs.Total Withdrawals" | translate }}</td>
-            <td class="r-amount">{{fixedDepositsAccountData.summary.totalWithdrawals | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+            <td>{{ 'labels.inputs.Total Withdrawals' | translate }}</td>
+            <td class="r-amount">
+              {{
+                fixedDepositsAccountData.summary.totalWithdrawals | currency: currency.code : 'symbol-narrow' : '1.2-2'
+              }}
+            </td>
           </tr>
           <tr *ngIf="fixedDepositsAccountData.summary.totalInterestEarned >= 0">
-            <td>{{"labels.inputs.Total Interest Earned" | translate }}</td>
-            <td class="r-amount">{{fixedDepositsAccountData.summary.totalInterestEarned | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+            <td>{{ 'labels.inputs.Total Interest Earned' | translate }}</td>
+            <td class="r-amount">
+              {{
+                fixedDepositsAccountData.summary.totalInterestEarned
+                  | currency: currency.code : 'symbol-narrow' : '1.2-2'
+              }}
+            </td>
           </tr>
         </tbody>
       </table>
@@ -114,22 +155,24 @@
 
     <ng-template #otherDetails>
       <div>
-        <h4 class="table-headers">{{"labels.heading.Other Details" | translate }}</h4>
+        <h4 class="table-headers">{{ 'labels.heading.Other Details' | translate }}</h4>
         <table>
           <tbody>
             <tr>
-              <td>{{"labels.inputs.Principal Amount" | translate }}</td>
-              <td class="r-amount">{{fixedDepositsAccountData.depositAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+              <td>{{ 'labels.inputs.Principal Amount' | translate }}</td>
+              <td class="r-amount">
+                {{ fixedDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+              </td>
             </tr>
             <tr>
-              <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
-              <td class="r-amount">{{fixedDepositsAccountData.maturityAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+              <td>{{ 'labels.inputs.Maturity Amount' | translate }}</td>
+              <td class="r-amount">
+                {{ fixedDepositsAccountData.maturityAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+              </td>
             </tr>
           </tbody>
         </table>
       </div>
     </ng-template>
-
   </div>
-
 </div>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html

@@ -1,123 +1,135 @@
 <div class="tab-container mat-typography">
-
   <div fxLayoutAlign="start">
     <div class="m-b-20">
-      <h3>{{"labels.heading.All Interest Rates" | translate }}</h3>
+      <h3>{{ 'labels.heading.All Interest Rates' | translate }}</h3>
     </div>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
-
     <table mat-table [dataSource]="interestRateChartData" #chartsTable multiTemplateDataRows>
-
       <ng-container matColumnDef="period">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Period" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Period' | translate }}</th>
         <td mat-cell *matCellDef="let chartSlab">
-          {{chartSlab.fromPeriod}} - {{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value | translateKey:'catalogs'}}</td>
+          {{ chartSlab.fromPeriod }} - {{ chartSlab.toPeriod }}&nbsp;{{
+            chartSlab.periodType.value | translateKey: 'catalogs'
+          }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="amountRange">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount Range" | translate }} </th>
-        <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom | formatNumber}} - {{chartSlab.amountRangeTo | formatNumber}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Range' | translate }}</th>
+        <td mat-cell *matCellDef="let chartSlab">
+          {{ chartSlab.amountRangeFrom | formatNumber }} - {{ chartSlab.amountRangeTo | formatNumber }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="interest">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
-        <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate | formatNumber }} %</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
+        <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.annualInterestRate | formatNumber }} %</td>
       </ng-container>
 
       <ng-container matColumnDef="description">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Description" | translate }} </th>
-        <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.description }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
+        <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.description }}</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 chartSlab; let chartSlabIndex = dataIndex">
-          <button mat-button color="primary" (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
+          <button
+            mat-button
+            color="primary"
+            (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex"
+          >
             <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
               <fa-icon icon="eye" class="m-r-10"></fa-icon>
-              {{"labels.buttons.View Incentives" | translate }}
+              {{ 'labels.buttons.View Incentives' | translate }}
             </span>
             <span *ngIf="expandChartSlabIndex === chartSlabIndex">
               <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-              {{"labels.buttons.Hide Incentives" | translate }}
+              {{ 'labels.buttons.Hide Incentives' | translate }}
             </span>
           </button>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="incentives">
-        <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex" [attr.colspan]="chartSlabsDisplayedColumns.length">
-
-          <div fxLayout="row wrap" fxFlexFill class="incentives" [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'">
-
+        <td
+          mat-cell
+          *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
+          [attr.colspan]="chartSlabsDisplayedColumns.length"
+        >
+          <div
+            fxLayout="row wrap"
+            fxFlexFill
+            class="incentives"
+            [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
+          >
             <mat-card fxLayout="row wrap" fxFlexFill>
-
               <h4 class="m-b-10" fxFlex="13%">
-                {{"labels.heading.Incentives" | translate }}
+                {{ 'labels.heading.Incentives' | translate }}
               </h4>
 
-              <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives" *ngIf="chartSlab.incentives?.length">
-
+              <table
+                fxFlexFill
+                class="mat-elevation-z1"
+                mat-table
+                [dataSource]="chartSlab.incentives"
+                *ngIf="chartSlab.incentives?.length"
+              >
                 <ng-container matColumnDef="entityType">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Entity Type" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.entityType.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="attributeName">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Name" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.attributeName.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="conditionType">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Condition Type" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition Type' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.conditionType.value | titlecase }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="attributeValue">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Value" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
                     {{ incentive.attributeValueDesc }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="incentiveType">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Incentive Type" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Incentive Type' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.incentiveType.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="amount">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.amount | formatNumber }}
                   </td>
                 </ng-container>
 
                 <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns;"></tr>
-
+                <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
               </table>
-
             </mat-card>
           </div>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns;"></tr>
-      <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns;" class="incentives-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></tr>
     </table>
-
   </div>
-
 </div>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/standing-instructions-tab/standing-instructions-tab.component.html

@@ -1,70 +1,88 @@
 <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}} to {{instruction.validTill  | dateFormat}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Validity' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.validFrom | dateFormat }} to {{ 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/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.html

@@ -1,69 +1,101 @@
 <div class="tab-container mat-typography">
-
   <div class="mat-elevation-z1 m-b-25">
     <div fxLayout="row" fxLayoutAlign="start">
       <div class="m-b-20">
-        <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>
+          {{ 'labels.inputs.Hide Accruals' | translate }}</mat-checkbox
+        >
       </div>
     </div>
 
     <table mat-table [dataSource]="dataSource">
-
       <ng-container matColumnDef="row">
-        <th mat-header-cell *matHeaderCellDef> # </th>
-        <td mat-cell *matCellDef="let transaction; let idx = index;" (click)="showTransactions(transaction)">{{(idx + 1)}}</td>
+        <th mat-header-cell *matHeaderCellDef>#</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> {{"labels.inputs.ID" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.ID' | translate }}</th>
+        <td
+          mat-cell
+          *matCellDef="let transaction"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
           {{ transaction.id }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionDate">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Date" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
+        <th mat-header-cell *matHeaderCellDef>{{ '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="transactionType">
-        <th mat-header-cell *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 *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 *matHeaderCellDef> {{"labels.inputs.Debit" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
-          {{ isDebit(transaction.transactionType) ? (transaction.amount | formatNumber) : 'N/A'}}
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Debit' | translate }}</th>
+        <td
+          mat-cell
+          *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 *matHeaderCellDef> {{"labels.inputs.Credit" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Credit' | translate }}</th>
+        <td
+          mat-cell
+          *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 *matHeaderCellDef> {{"labels.inputs.Balance" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Balance' | translate }}</th>
+        <td
+          mat-cell
+          *matCellDef="let transaction"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
           {{ transaction.runningBalance | formatNumber }}
         </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 class="center" *matCellDef="let transaction">
           <button mat-icon-button [matMenuTriggerFor]="transactionMenu" aria-label="" class="action-button">
             <mat-icon>more_vert</mat-icon>
@@ -71,21 +103,22 @@
           <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 (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>
-
   </div>
-
 </div>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.html

@@ -1,23 +1,23 @@
 <div fxLayoutAlign="end" class="container m-b-20" fxLayoutGap="2%">
   <span *ngIf="allowUndo()">
-    <button mat-raised-button color="warn" *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
-      (click)="undoTransaction()">
+    <button
+      mat-raised-button
+      color="warn"
+      *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
+      (click)="undoTransaction()"
+    >
       <fa-icon icon="undo" class="m-r-10"></fa-icon>Undo
     </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.Transaction Id" | translate }}
+          {{ 'labels.inputs.Transaction Id' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -25,7 +25,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Type" | translate }}
+          {{ 'labels.inputs.Type' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -33,7 +33,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Transaction Date" | translate }}
+          {{ 'labels.inputs.Transaction Date' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -41,7 +41,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Currency" | translate }}
+          {{ 'labels.inputs.Currency' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -49,32 +49,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%" *ngIf="transactionData.note" class="mat-body-strong">
-          {{"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>