build: Use prettier for html

Stop ignoring html files in prettier and fix existing issues.

src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.html

@@ -1,12 +1,11 @@
 <mat-card class="card">
-
   <mat-card-header class="header">
     <h3 fxFlex="100%">
       <fa-icon icon="donate"></fa-icon>
-      &nbsp;&nbsp; {{"labels.inputs.Amount Collected" | translate}}
+      &nbsp;&nbsp; {{ 'labels.inputs.Amount Collected' | translate }}
       <div>
         <mat-form-field id="office" fxFlex="94%">
-          <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
           <mat-select [formControl]="officeId">
             <mat-option *ngFor="let office of officeData" [value]="office.id">
               {{ office.name }}
@@ -19,12 +18,11 @@
 
   <mat-card-content>
     <!-- Structural directives like *ngIf break the canvas -->
-    <div [ngStyle]="{'display': (hideOutput) ? 'none' : 'block'}">
+    <div [ngStyle]="{ display: hideOutput ? 'none' : 'block' }">
       <canvas id="collection-pie" width="800" height="600"></canvas>
     </div>
     <div *ngIf="showFallback" class="fallback" fxLayoutAlign="center center">
-      <p>{{"labels.text.No Data" | translate}}</p>
+      <p>{{ 'labels.text.No Data' | translate }}</p>
     </div>
   </mat-card-content>
-
 </mat-card>

src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.html

@@ -1,12 +1,11 @@
 <mat-card class="card">
-
   <mat-card-header class="header">
     <h3 fxFlex="100%">
       <fa-icon icon="money-bill"></fa-icon>
-      &nbsp;&nbsp; {{"labels.inputs.Amount Pending / Disbursed" | translate}}
+      &nbsp;&nbsp; {{ 'labels.inputs.Amount Pending / Disbursed' | translate }}
       <div>
         <mat-form-field id="office" fxFlex="94%">
-          <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
           <mat-select [formControl]="officeId">
             <mat-option *ngFor="let office of officeData" [value]="office.id">
               {{ office.name }}
@@ -19,12 +18,11 @@
 
   <mat-card-content>
     <!-- Structural directives like *ngIf break the canvas -->
-    <div [ngStyle]="{'display': (hideOutput) ? 'none' : 'block'}">
+    <div [ngStyle]="{ display: hideOutput ? 'none' : 'block' }">
       <canvas id="disbursement-pie" width="800" height="600"></canvas>
     </div>
     <div *ngIf="showFallback" class="fallback" fxLayoutAlign="center center">
-      <p>{{"labels.text.No Data" | translate}}</p>
+      <p>{{ 'labels.text.No Data' | translate }}</p>
     </div>
   </mat-card-content>
-
 </mat-card>

src/app/home/dashboard/client-trends-bar/client-trends-bar.component.html

@@ -1,12 +1,11 @@
 <mat-card class="card">
-
   <mat-card-header class="header">
     <h3 fxFlex="100%">
       <fa-icon icon="chart-line"></fa-icon>
-      &nbsp;&nbsp; {{"labels.inputs.Client Trends" | translate}}
+      &nbsp;&nbsp; {{ 'labels.inputs.Client Trends' | translate }}
       <div>
         <mat-form-field id="office" fxFlex="94%">
-          <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
           <mat-select [formControl]="officeId">
             <mat-option *ngFor="let office of officeData" [value]="office.id">
               {{ office.name }}
@@ -19,14 +18,13 @@
 
   <mat-card-content>
     <!-- Structural directives like *ngIf break the canvas -->
-    <div [ngStyle]="{'display': (hideOutput) ? 'none' : 'block'}">
+    <div [ngStyle]="{ display: hideOutput ? 'none' : 'block' }">
       <canvas id="client-trends-bar" width="800" height="465" class="fallback"></canvas>
     </div>
-    <mat-button-toggle-group [formControl]="timescale" id='timescale' appearance="legacy">
-      <mat-button-toggle value="Day">{{"labels.buttons.Day" | translate}}</mat-button-toggle>
-      <mat-button-toggle value="Week">{{"labels.buttons.Week" | translate}}</mat-button-toggle>
-      <mat-button-toggle value="Month">{{"labels.buttons.Month" | translate}}</mat-button-toggle>
+    <mat-button-toggle-group [formControl]="timescale" id="timescale" appearance="legacy">
+      <mat-button-toggle value="Day">{{ 'labels.buttons.Day' | translate }}</mat-button-toggle>
+      <mat-button-toggle value="Week">{{ 'labels.buttons.Week' | translate }}</mat-button-toggle>
+      <mat-button-toggle value="Month">{{ 'labels.buttons.Month' | translate }}</mat-button-toggle>
     </mat-button-toggle-group>
   </mat-card-content>
-
 </mat-card>

src/app/home/dashboard/dashboard.component.html

@@ -1,32 +1,27 @@
 <div class="container">
-
   <mat-card class="card" fxLayout="column" fxLayoutGap="40px">
-
     <div fxLayout="row" class="search">
       <mat-card-content>
-
         <mat-form-field>
-          <mat-label>{{'labels.placeholders.Search Activity' | translate}}</mat-label>
-          <input matInput [matAutocomplete]="activitySearch" [formControl]="searchText">
+          <mat-label>{{ 'labels.placeholders.Search Activity' | translate }}</mat-label>
+          <input matInput [matAutocomplete]="activitySearch" [formControl]="searchText" />
         </mat-form-field>
 
         <mat-autocomplete #activitySearch="matAutocomplete">
           <mat-option *ngFor="let activity of filteredActivities | async" [routerLink]="activity.path">
-            <span>{{activity.activity}}</span>
+            <span>{{ activity.activity }}</span>
           </mat-option>
         </mat-autocomplete>
-
       </mat-card-content>
     </div>
 
     <div fxLayout="row" class="top-card">
-        <div class="trends-bar">
-          <mifosx-client-trends-bar></mifosx-client-trends-bar>
-        </div>
+      <div class="trends-bar">
+        <mifosx-client-trends-bar></mifosx-client-trends-bar>
+      </div>
     </div>
 
     <div fxLayout="row" class="bottom-card">
-
       <div class="amount-disbursed">
         <mifosx-amount-disbursed-pie></mifosx-amount-disbursed-pie>
       </div>
@@ -34,9 +29,6 @@
       <div class="amount-collected">
         <mifosx-amount-collected-pie></mifosx-amount-collected-pie>
       </div>
-
     </div>
-
   </mat-card>
-
 </div>

src/app/home/home.component.html

@@ -1,63 +1,73 @@
 <div fxLayput="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
-
   <div #buttonDashboard class="in-block">
     <button mat-raised-button color="primary" [routerLink]="['/dashboard']">
       <fa-icon icon="tachometer-alt" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Dashboard' | translate}}
+      {{ 'labels.buttons.Dashboard' | translate }}
     </button>
   </div>
-
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-header>
-      <mat-card-title class="title">
-        {{'labels.text.Welcome' | translate}}, {{ username }}!
-      </mat-card-title>
+      <mat-card-title class="title"> {{ 'labels.text.Welcome' | translate }}, {{ username }}! </mat-card-title>
     </mat-card-header>
 
     <mat-card-content #searchActivity>
-
       <div fxLayout="column">
         <mat-form-field>
-          <mat-label>{{'labels.placeholders.Search Activity' | translate}}</mat-label>
-          <input matInput [matAutocomplete]="activitySearch" [formControl]="searchText">
+          <mat-label>{{ 'labels.placeholders.Search Activity' | translate }}</mat-label>
+          <input matInput [matAutocomplete]="activitySearch" [formControl]="searchText" />
         </mat-form-field>
       </div>
 
       <mat-autocomplete #activitySearch="matAutocomplete">
         <mat-option *ngFor="let activity of filteredActivities | async" [routerLink]="activity.path">
-          <span>{{activity.activity}}</span>
+          <span>{{ activity.activity }}</span>
         </mat-option>
       </mat-autocomplete>
-
     </mat-card-content>
 
-    <img mat-card-image src="assets/images/mifos_lg-logo.png" alt="Mifos X">
-
+    <img mat-card-image src="assets/images/mifos_lg-logo.png" alt="Mifos X" />
   </mat-card>
-
 </div>
 
 <ng-template #templateButtonDashboard let-popover="popover">
-  <h2>{{"labels.heading.Dashboard" | translate}}</h2>
-  <p class="mw300">{{"labels.text.This will navigate the user to the dashboard component." | translate}}</p>
+  <h2>{{ 'labels.heading.Dashboard' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.This will navigate the user to the dashboard component.' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateSearchActivity, searchActivity,'bottom',true)">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateSearchActivity, searchActivity, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateSearchActivity let-popover="popover">
-  <h2>{{"labels.heading.Search Activity" | translate}}</h2>
-  <p class="mw300">{{"labels.text.This will navigate the user to the searched activity." | translate}}</p>
+  <h2>{{ 'labels.heading.Search Activity' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.This will navigate the user to the searched activity.' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonDashboard, buttonDashboard,'bottom',true)">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonDashboard, buttonDashboard, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>

src/app/home/timeout-dialog/session-timeout-dialog.component.html

@@ -1,5 +1,5 @@
 <h1 mat-dialog-title>{{ 'labels.heading.Session Timeout' | translate }}</h1>
 <mat-dialog-content>{{ 'labels.text.Session timed out after a period of inactivity' | translate }}.</mat-dialog-content>
 <mat-dialog-actions>
-    <button mat-raised-button color="primary" mat-dialog-close>{{ 'labels.buttons.Close' | translate }}</button>
-</mat-dialog-actions>
+  <button mat-raised-button color="primary" mat-dialog-close>{{ 'labels.buttons.Close' | translate }}</button>
+</mat-dialog-actions>

src/app/home/warning-dialog/warning-dialog.component.html

@@ -1,5 +1,5 @@
-<h1 mat-dialog-title>{{ "labels.text." + title | translate }}</h1>
-<mat-dialog-content>{{ "labels.text.Warning message" | translate }}</mat-dialog-content>
+<h1 mat-dialog-title>{{ 'labels.text.' + title | translate }}</h1>
+<mat-dialog-content>{{ 'labels.text.Warning message' | translate }}</mat-dialog-content>
 <mat-dialog-actions>
-  <button mat-raised-button color="primary" mat-dialog-close>{{ "labels.buttons." + buttonText | translate}}</button>
-</mat-dialog-actions>
+  <button mat-raised-button color="primary" mat-dialog-close>{{ 'labels.buttons.' + buttonText | translate }}</button>
+</mat-dialog-actions>