build: Use prettier for html

Stop ignoring html files in prettier and fix existing issues.

src/app/clients/clients-view/charges/charges-overview/charges-overview.component.html

@@ -1,49 +1,48 @@
 <mat-card class="charges-card">
-
   <div class="tab-container mat-typography">
-
-    <h2>{{"labels.heading.Charges Overview" | translate}}</h2>
+    <h2>{{ 'labels.heading.Charges Overview' | translate }}</h2>
 
     <table mat-table [dataSource]="dataSource">
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" | translate}} </th>
-        <td mat-cell *matCellDef="let chargeOverviewData"><i class="fa fa-stop"
-            [ngClass]="(!(chargeOverviewData.isWaived || chargeOverviewData.isPaid))|statusLookup"></i>
-          {{chargeOverviewData.name}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
+        <td mat-cell *matCellDef="let chargeOverviewData">
+          <i
+            class="fa fa-stop"
+            [ngClass]="!(chargeOverviewData.isWaived || chargeOverviewData.isPaid) | statusLookup"
+          ></i>
+          {{ chargeOverviewData.name }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="dueAsOf">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Due as of" | translate}} </th>
-        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.dueDate | dateFormat}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Due as of' | translate }}</th>
+        <td mat-cell *matCellDef="let chargeOverviewData">{{ chargeOverviewData.dueDate | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="due">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Due" | translate}} </th>
-        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amount}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Due' | translate }}</th>
+        <td mat-cell *matCellDef="let chargeOverviewData">{{ chargeOverviewData.amount }}</td>
       </ng-container>
 
       <ng-container matColumnDef="paid">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Paid" | translate}} </th>
-        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountPaid}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Paid' | translate }}</th>
+        <td mat-cell *matCellDef="let chargeOverviewData">{{ chargeOverviewData.amountPaid }}</td>
       </ng-container>
 
       <ng-container matColumnDef="waived">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Waived" | translate}} </th>
-        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountWaived}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Waived' | translate }}</th>
+        <td mat-cell *matCellDef="let chargeOverviewData">{{ chargeOverviewData.amountWaived }}</td>
       </ng-container>
 
       <ng-container matColumnDef="outstanding">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Outstanding" | translate}} </th>
-        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountOutstanding}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Outstanding' | translate }}</th>
+        <td mat-cell *matCellDef="let chargeOverviewData">{{ chargeOverviewData.amountOutstanding }}</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>
 
     <mat-paginator [pageSizeOptions]="[10, 20, 25]" showFirstLastButtons></mat-paginator>
-
   </div>
 </mat-card>

src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.html

@@ -1,38 +1,42 @@
 <div class="container mat-typography">
-
   <mat-card>
-
     <form [formGroup]="transactionForm" (ngSubmit)="submit()">
-
       <div fxLayout="column">
-
         <mat-form-field>
-          <mat-label> {{"labels.inputs.Amount" | translate}} </mat-label>
-          <input matInput required autofocus formControlName="amount">
+          <mat-label> {{ 'labels.inputs.Amount' | translate }} </mat-label>
+          <input matInput required autofocus formControlName="amount" />
           <mat-error *ngIf="transactionForm.controls.amount.hasError('required')">
-            {{"labels.inputs.Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+            {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field (click)="transactionDatePicker.open()">
-          <mat-label> {{"labels.inputs.Transaction date" | translate}} </mat-label>
-          <input matInput [min]="minDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
+          <mat-label> {{ 'labels.inputs.Transaction date' | translate }} </mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [matDatepicker]="transactionDatePicker"
+            required
+            formControlName="transactionDate"
+          />
           <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #transactionDatePicker></mat-datepicker>
           <mat-error *ngIf="transactionForm.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>
-
       </div>
 
       <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../..','general']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!transactionForm.valid">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../..', 'general']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!transactionForm.valid">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </div>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/clients/clients-view/charges/view-charge/view-charge.component.html

@@ -1,115 +1,115 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['pay']" *mifosxHasPermission="'PAY_CLIENTCHARGE'">
     <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Pay" | translate}}
+    {{ 'labels.buttons.Pay' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="waiveCharge()" *mifosxHasPermission="'WAIVE_CLIENTCHARGE'">
     <i class="fa fa-flag"></i>
-    {{"labels.buttons.Waive Charge" | translate}}
+    {{ 'labels.buttons.Waive Charge' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="deleteCharge()">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Delete" | translate}}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
-    <mat-card-title> <i class="fa fa-stop" [ngClass]="(!(chargeData.isWaived || chargeData.isPaid))|statusLookup"></i>
+    <mat-card-title>
+      <i class="fa fa-stop" [ngClass]="!(chargeData.isWaived || chargeData.isPaid) | statusLookup"></i>
       {{ chargeData.name }}
     </mat-card-title>
 
     <mat-divider></mat-divider>
 
     <mat-card-content>
-
       <div class="share-account-tables p-t-20" fxLayout="row wrap" fxFlex="50%">
-
         <table>
-
           <tbody>
-
             <tr>
-              <td> {{"labels.inputs.Currency" | translate}} </td>
-              <td> {{ chargeData.currency.name }} </td>
+              <td>{{ 'labels.inputs.Currency' | translate }}</td>
+              <td>{{ chargeData.currency.name }}</td>
             </tr>
 
             <tr>
-              <td> {{"labels.inputs.Charge Time Type" | translate}} </td>
-              <td> {{ chargeData.chargeTimeType.value }} </td>
+              <td>{{ 'labels.inputs.Charge Time Type' | translate }}</td>
+              <td>{{ chargeData.chargeTimeType.value }}</td>
             </tr>
 
             <tr>
-              <td> {{"labels.inputs.Charge Calculation Type" | translate}} </td>
-              <td> {{ chargeData.chargeCalculationType.value }} </td>
+              <td>{{ 'labels.inputs.Charge Calculation Type' | translate }}</td>
+              <td>{{ chargeData.chargeCalculationType.value }}</td>
             </tr>
 
             <tr>
-              <td> {{"labels.inputs.Due as of" | translate}} </td>
-              <td> {{ chargeData.dueDate | dateFormat }} </td>
+              <td>{{ 'labels.inputs.Due as of' | translate }}</td>
+              <td>{{ chargeData.dueDate | dateFormat }}</td>
             </tr>
 
             <tr>
-              <td> {{"labels.inputs.Due" | translate}} </td>
-              <td> {{ chargeData.amount }} </td>
+              <td>{{ 'labels.inputs.Due' | translate }}</td>
+              <td>{{ chargeData.amount }}</td>
             </tr>
 
             <tr>
-              <td> {{"labels.inputs.Paid" | translate}} </td>
-              <td> {{ chargeData.amountPaid }} </td>
+              <td>{{ 'labels.inputs.Paid' | translate }}</td>
+              <td>{{ chargeData.amountPaid }}</td>
             </tr>
 
             <tr>
-              <td> {{"labels.inputs.Waived" | translate}} </td>
-              <td> {{ chargeData.amountWaived }} </td>
+              <td>{{ 'labels.inputs.Waived' | translate }}</td>
+              <td>{{ chargeData.amountWaived }}</td>
             </tr>
             <tr>
-              <td> {{"labels.inputs.Outstanding" | translate}} </td>
-              <td> {{ chargeData.amountOutstanding }} </td>
+              <td>{{ 'labels.inputs.Outstanding' | translate }}</td>
+              <td>{{ chargeData.amountOutstanding }}</td>
             </tr>
-
           </tbody>
-
         </table>
-
       </div>
-
     </mat-card-content>
 
-    <div fxLayout="row wrap" class="content" style="padding-top:10px">
-      <h1><b> {{"labels.heading.Transactions" | translate}} </b></h1>
+    <div fxLayout="row wrap" class="content" style="padding-top: 10px">
+      <h1>
+        <b> {{ 'labels.heading.Transactions' | translate }} </b>
+      </h1>
 
       <table mat-table [dataSource]="chargeData.clientTransactionDatas" *ngIf="chargeData.clientTransactionDatas">
-
         <ng-container matColumnDef="id">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.ID" | translate}} </th>
-          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.id}} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.ID' | translate }}</th>
+          <td mat-cell *matCellDef="let element" [ngClass]="{ strikeoff: element.reversed }">{{ element.id }}</td>
         </ng-container>
 
         <ng-container matColumnDef="officeName">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Office Name" | translate}} </th>
-          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.officeName }} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Office Name' | translate }}</th>
+          <td mat-cell *matCellDef="let element" [ngClass]="{ strikeoff: element.reversed }">
+            {{ element.officeName }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="type">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" | translate}} </th>
-          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.type.value}} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
+          <td mat-cell *matCellDef="let element" [ngClass]="{ strikeoff: element.reversed }">
+            {{ element.type.value }}
+          </td>
         </ng-container>
         <ng-container matColumnDef="transactionDate">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Date" | translate}} </th>
-          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.date | dateFormat}} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Transaction Date' | translate }}</th>
+          <td mat-cell *matCellDef="let element" [ngClass]="{ strikeoff: element.reversed }">
+            {{ element.date | dateFormat }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="amount">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate}} </th>
-          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.amount | formatNumber }} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
+          <td mat-cell *matCellDef="let element" [ngClass]="{ strikeoff: element.reversed }">
+            {{ element.amount | formatNumber }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="actions">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
-          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
+          <td mat-cell *matCellDef="let element" [ngClass]="{ strikeoff: element.reversed }">
             <button mat-raised-button color="primary" (click)="undoTransaction(element.id)" class="delBtn">
               <fa-icon icon="trash" class="m-r-10"></fa-icon>
             </button>
@@ -117,16 +117,14 @@
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="viewChargeTableColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: viewChargeTableColumns;"></tr>
+        <tr mat-row *matRowDef="let row; columns: viewChargeTableColumns"></tr>
       </table>
-
     </div>
 
-
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../../','general']">{{"labels.buttons.Back" | translate}}</button>
+      <button type="button" mat-raised-button [routerLink]="['../../', 'general']">
+        {{ 'labels.buttons.Back' | translate }}
+      </button>
     </mat-card-actions>
-
   </mat-card>
-
 </div>