build: Use prettier for html

Stop ignoring html files in prettier and fix existing issues.

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

@@ -1,22 +1,21 @@
 <div class="tab-container mat-typography">
-
   <ng-container *ngIf="loanDetails.summary">
-    <h3>{{"labels.heading.Performance History" | translate}}</h3>
+    <h3>{{ 'labels.heading.Performance History' | translate }}</h3>
     <div fxLayout="row" fxLayoutGap="32px" class="performance-history-container">
       <table>
         <tbody>
           <tr>
             <td fxFlex="25%">
-              <b>{{"labels.inputs.Number of Repayments" | translate}} :</b>
+              <b>{{ 'labels.inputs.Number of Repayments' | translate }} :</b>
             </td>
             <td fxFlex="25%" class="left">
-              {{loanDetails?.numberOfRepayments | formatNumber}}
+              {{ loanDetails?.numberOfRepayments | formatNumber }}
             </td>
             <td fxFlex="25%">
-              <b>{{"labels.inputs.Maturity Date" | translate}} :</b>
+              <b>{{ 'labels.inputs.Maturity Date' | translate }} :</b>
             </td>
             <td fxFlex="25%" class="left">
-              {{loanDetails?.timeline.expectedMaturityDate | dateFormat}}
+              {{ loanDetails?.timeline.expectedMaturityDate | dateFormat }}
             </td>
           </tr>
         </tbody>
@@ -25,193 +24,216 @@
   </ng-container>
 
   <div *ngIf="loanDetails.summary">
-
-    <h3> {{"labels.heading.Loan Summary" | translate}} </h3>
+    <h3>{{ 'labels.heading.Loan Summary' | translate }}</h3>
 
     <table mat-table [dataSource]="dataSource">
       <ng-container matColumnDef="Empty">
-        <th mat-header-cell *matHeaderCellDef>  </th>
-        <td mat-cell *matCellDef="let ele"> {{ ele.property }} </td>
+        <th mat-header-cell *matHeaderCellDef></th>
+        <td mat-cell *matCellDef="let ele">{{ ele.property }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Original">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Original" | translate}} </th>
-        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.original | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Original' | translate }}</th>
+        <td mat-cell class="r-amount" *matCellDef="let ele">
+          {{ ele.original | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="Paid">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Paid" | translate}} </th>
-        <td mat-cell class="r-amount amount-minus" *matCellDef="let ele"> {{ ele.paid | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Paid' | translate }}</th>
+        <td mat-cell class="r-amount amount-minus" *matCellDef="let ele">
+          {{ ele.paid | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="Adjustments">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Credit Adjustments" | translate}} </th>
-        <td mat-cell class="r-amount amount-plus" *matCellDef="let ele"> {{ ele.adjustment | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Credit Adjustments' | translate }}</th>
+        <td mat-cell class="r-amount amount-plus" *matCellDef="let ele">
+          {{ ele.adjustment | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="Waived">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Waived" | translate}} </th>
-        <td mat-cell class="r-amount amount-minus" *matCellDef="let ele"> {{ ele.waived | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Waived' | translate }}</th>
+        <td mat-cell class="r-amount amount-minus" *matCellDef="let ele">
+          {{ ele.waived | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="Written Off">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Written Off" | translate}} </th>
-        <td mat-cell class="r-amount amount-minus" *matCellDef="let ele"> {{ ele.writtenOff | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Written Off' | translate }}</th>
+        <td mat-cell class="r-amount amount-minus" *matCellDef="let ele">
+          {{ ele.writtenOff | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="Outstanding">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Outstanding" | translate}} </th>
-        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.outstanding | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Outstanding' | translate }}</th>
+        <td mat-cell class="r-amount" *matCellDef="let ele">
+          {{ ele.outstanding | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="Over Due">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Over Due" | translate}} </th>
-        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.overdue | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Over Due' | translate }}</th>
+        <td mat-cell class="r-amount" *matCellDef="let ele">
+          {{ ele.overdue | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="loanSummaryColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: loanSummaryColumns;"></tr>
+      <tr mat-row *matRowDef="let row; columns: loanSummaryColumns"></tr>
     </table>
-
   </div>
 
   <div *ngIf="loanDetails.summary">
-
-    <h3> {{"labels.heading.Loan Details" | translate}} </h3>
+    <h3>{{ 'labels.heading.Loan Details' | translate }}</h3>
     <table mat-table [dataSource]="detailsDataSource">
-
       <ng-container matColumnDef="Key">
-        <td mat-cell *matCellDef="let ele"> {{ 'labels.inputs.' + ele.key | translate }} </td>
+        <td mat-cell *matCellDef="let ele">{{ 'labels.inputs.' + ele.key | translate }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Value">
         <td mat-cell *matCellDef="let ele">
-          <ng-container *ngIf="ele.key === 'Disbursement Date'" >
-            <span *ngIf="loanDetails.timeline.actualDisbursementDate"> {{loanDetails.timeline.actualDisbursementDate | dateFormat}} </span>
-            <span *ngIf="!loanDetails.timeline.actualDisbursementDate"> {{"labels.inputs.Not Available" | translate}} </span>
+          <ng-container *ngIf="ele.key === 'Disbursement Date'">
+            <span *ngIf="loanDetails.timeline.actualDisbursementDate">
+              {{ loanDetails.timeline.actualDisbursementDate | dateFormat }}
+            </span>
+            <span *ngIf="!loanDetails.timeline.actualDisbursementDate">
+              {{ 'labels.inputs.Not Available' | translate }}
+            </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'Loan Purpose'">
-            <span *ngIf="loanDetails.loanPurposeName"> {{loanDetails.loanPurposeName}} </span>
-            <span *ngIf="!loanDetails.loanPurposeName"> {{"labels.inputs.Not Available" | translate}} </span>
+            <span *ngIf="loanDetails.loanPurposeName"> {{ loanDetails.loanPurposeName }} </span>
+            <span *ngIf="!loanDetails.loanPurposeName"> {{ 'labels.inputs.Not Available' | translate }} </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'Loan Officer'">
-            <span *ngIf="!loanDetails.loanOfficerName"> {{"labels.inputs.Unassigned" | translate}} </span>
-            <span *ngIf="loanDetails.loanOfficerName"> {{loanDetails.loanOfficerName}} &nbsp;
-              <span *ngIf="loanDetails.loanOfficerName">
-              </span>
+            <span *ngIf="!loanDetails.loanOfficerName"> {{ 'labels.inputs.Unassigned' | translate }} </span>
+            <span *ngIf="loanDetails.loanOfficerName">
+              {{ loanDetails.loanOfficerName }} &nbsp;
+              <span *ngIf="loanDetails.loanOfficerName"> </span>
             </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'Currency'">
-            <span> {{loanDetails.currency.name }} {{loanDetails.currency.code}} </span>
+            <span> {{ loanDetails.currency.name }} {{ loanDetails.currency.code }} </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'External Id'">
             <span *ngIf="loanDetails.externalId">
-              <mifosx-external-identifier externalId="{{loanDetails.externalId}}" completed="true"></mifosx-external-identifier>
+              <mifosx-external-identifier
+                externalId="{{ loanDetails.externalId }}"
+                completed="true"
+              ></mifosx-external-identifier>
             </span>
-            <span *ngIf="!loanDetails.externalId"> {{"labels.inputs.Not Available" | translate}} </span>
+            <span *ngIf="!loanDetails.externalId"> {{ 'labels.inputs.Not Available' | translate }} </span>
           </ng-container>
 
-          <ng-container *ngIf="ele.key === 'Proposed Amount' || ele.key === 'Approved Amount' || ele.key === 'Disburse Amount'">
+          <ng-container
+            *ngIf="ele.key === 'Proposed Amount' || ele.key === 'Approved Amount' || ele.key === 'Disburse Amount'"
+          >
             {{ ele.value }}
           </ng-container>
         </td>
       </ng-container>
 
-      <tr mat-row *matRowDef="let row; columns: loanDetailsColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: loanDetailsColumns"></tr>
     </table>
-
   </div>
 
   <div *ngIf="!loanDetails.summary">
-
-    <h3> {{"labels.heading.Loan Details" | translate}} </h3>
+    <h3>{{ 'labels.heading.Loan Details' | translate }}</h3>
     <table mat-table [dataSource]="detailsDataSource">
-
       <ng-container matColumnDef="Key">
-        <td mat-cell *matCellDef="let ele"> {{ 'labels.inputs.' + ele.key | translate }} </td>
+        <td mat-cell *matCellDef="let ele">{{ 'labels.inputs.' + ele.key | translate }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Value">
         <td mat-cell *matCellDef="let ele">
-          <ng-container *ngIf="ele.key === 'Disbursement Date'" >
-            <span *ngIf="loanDetails.timeline.actualDisbursementDate"> {{loanDetails.timeline.actualDisbursementDate | dateFormat}} </span>
-            <span *ngIf="!loanDetails.timeline.actualDisbursementDate"> {{"labels.inputs.Not Available" | translate}} </span>
+          <ng-container *ngIf="ele.key === 'Disbursement Date'">
+            <span *ngIf="loanDetails.timeline.actualDisbursementDate">
+              {{ loanDetails.timeline.actualDisbursementDate | dateFormat }}
+            </span>
+            <span *ngIf="!loanDetails.timeline.actualDisbursementDate">
+              {{ 'labels.inputs.Not Available' | translate }}
+            </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'Loan Officer'">
-            <span *ngIf="!loanDetails.loanOfficerName"> {{"labels.inputs.Unassigned" | translate}} </span>
-            <span *ngIf="loanDetails.loanOfficerName"> {{loanDetails.loanOfficerName}} &nbsp;
-              <span *ngIf="loanDetails.loanOfficerName">
-              </span>
+            <span *ngIf="!loanDetails.loanOfficerName"> {{ 'labels.inputs.Unassigned' | translate }} </span>
+            <span *ngIf="loanDetails.loanOfficerName">
+              {{ loanDetails.loanOfficerName }} &nbsp;
+              <span *ngIf="loanDetails.loanOfficerName"> </span>
             </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'Currency'">
-            <span> {{loanDetails.currency.name }} {{loanDetails.currency.code}} </span>
+            <span> {{ loanDetails.currency.name }} {{ loanDetails.currency.code }} </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'External Id'">
             <span *ngIf="loanDetails.externalId">
-              <mifosx-external-identifier externalId="{{loanDetails.externalId}}" completed="true"></mifosx-external-identifier>
+              <mifosx-external-identifier
+                externalId="{{ loanDetails.externalId }}"
+                completed="true"
+              ></mifosx-external-identifier>
             </span>
-            <span *ngIf="!loanDetails.externalId"> {{"labels.inputs.Not Available" | translate}} </span>
+            <span *ngIf="!loanDetails.externalId"> {{ 'labels.inputs.Not Available' | translate }} </span>
           </ng-container>
-
         </td>
       </ng-container>
 
-      <tr mat-row *matRowDef="let row; columns: loanDetailsColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: loanDetailsColumns"></tr>
     </table>
   </div>
 
   <div *ngIf="!loanDetails.summary">
-    <h3> {{"labels.heading.Loan Purpose" | translate}} </h3>
+    <h3>{{ 'labels.heading.Loan Purpose' | translate }}</h3>
     <div class="container">
       <div fxLayout="row wrap" fxLayout.lt-md="column">
-
         <div fxFlexFill>
-            <span fxFlex="50%">{{"labels.inputs.Loan Purpose" | translate}}:</span>
-            <span fxFlex="50%" *ngIf="loanDetails.loanPurposeName">
-              {{ loanDetails.loanPurposeName }}
-            </span>
-            <span fxFlex="50%" *ngIf="!loanDetails.loanPurposeName">
-              {{"labels.inputs.Not Provided" | translate}}
-            </span>
+          <span fxFlex="50%">{{ 'labels.inputs.Loan Purpose' | translate }}:</span>
+          <span fxFlex="50%" *ngIf="loanDetails.loanPurposeName">
+            {{ loanDetails.loanPurposeName }}
+          </span>
+          <span fxFlex="50%" *ngIf="!loanDetails.loanPurposeName">
+            {{ 'labels.inputs.Not Provided' | translate }}
+          </span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="50%">{{"labels.inputs.Proposed Amount" | translate}}:</span>
-          <span fxFlex="50%">{{ loanDetails.proposedPrincipal | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
+          <span fxFlex="50%">{{ 'labels.inputs.Proposed Amount' | translate }}:</span>
+          <span fxFlex="50%">{{
+            loanDetails.proposedPrincipal | currency: currencyCode : 'symbol-narrow' : '1.2-2'
+          }}</span>
         </div>
 
         <div fxFlexFill *ngIf="showApprovedAmountBasedOnStatus()">
-          <span fxFlex="50%">{{"labels.inputs.Approved Amount" | translate}}:</span>
-          <span fxFlex="50%">{{ loanDetails.approvedPrincipal | currency:currencyCode:'symbol-narrow':'1.2-2' }}</span>
+          <span fxFlex="50%">{{ 'labels.inputs.Approved Amount' | translate }}:</span>
+          <span fxFlex="50%">{{
+            loanDetails.approvedPrincipal | currency: currencyCode : 'symbol-narrow' : '1.2-2'
+          }}</span>
         </div>
 
         <div fxFlexFill *ngIf="showDisbursedAmountBasedOnStatus()">
-          <span fxFlex="50%">{{"labels.inputs.Disburse Amount" | translate}}:</span>
-          <span fxFlex="50%">{{ loanDetails.principal | currency:currencyCode:'symbol-narrow':'1.2-2' }}</span>
+          <span fxFlex="50%">{{ 'labels.inputs.Disburse Amount' | translate }}:</span>
+          <span fxFlex="50%">{{ loanDetails.principal | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}</span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.balloonRepaymentAmount > 0">
-          <span fxFlex="50%">{{"labels.inputs.Balloon Repayment Amount" | translate}}:</span>
-          <span fxFlex="50%">{{ loanDetails.balloonRepaymentAmount | currency:currencyCode:'symbol-narrow':'1.2-2' }}</span>
+          <span fxFlex="50%">{{ 'labels.inputs.Balloon Repayment Amount' | translate }}:</span>
+          <span fxFlex="50%">{{
+            loanDetails.balloonRepaymentAmount | currency: currencyCode : 'symbol-narrow' : '1.2-2'
+          }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="50%">{{"labels.inputs.Arrears By" | translate}}:</span>
-          <span fxFlex="50%">{{"labels.inputs.Not Provided" | translate}}</span>
+          <span fxFlex="50%">{{ 'labels.inputs.Arrears By' | translate }}:</span>
+          <span fxFlex="50%">{{ 'labels.inputs.Not Provided' | translate }}</span>
         </div>
-
       </div>
     </div>
   </div>
-
 </div>