build: Use prettier for html

Stop ignoring html files in prettier and fix existing issues.

src/app/accounting/closing-entries/closing-entries.component.html

@@ -2,15 +2,15 @@
   <div #buttonCreateClosure>
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_GLCLOSURE'">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Create Closure" | translate}}
+      {{ 'labels.buttons.Create Closure' | translate }}
     </button>
   </div>
 </div>
 
 <div #filter class="container" fxLayout="row">
   <mat-form-field fxFlex>
-    <mat-label>{{"labels.inputs.Office Name" | translate}}</mat-label>
-    <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete">
+    <mat-label>{{ 'labels.inputs.Office Name' | translate }}</mat-label>
+    <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete" />
   </mat-form-field>
 </div>
 
@@ -22,66 +22,104 @@
 </mat-autocomplete>
 
 <div class="container">
-
   <div #closuresTable class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="officeName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Office" | translate}} </th>
-        <td mat-cell *matCellDef="let glAccountClosure"> {{ glAccountClosure.officeName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office' | translate }}</th>
+        <td mat-cell *matCellDef="let glAccountClosure">{{ glAccountClosure.officeName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="closingDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Closure Date" | translate}} </th>
-        <td mat-cell *matCellDef="let glAccountClosure"> {{ glAccountClosure.closingDate }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Closure Date' | translate }}</th>
+        <td mat-cell *matCellDef="let glAccountClosure">{{ glAccountClosure.closingDate }}</td>
       </ng-container>
 
       <ng-container matColumnDef="comments">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Comments" | translate}} </th>
-        <td mat-cell *matCellDef="let glAccountClosure"> {{ glAccountClosure.comments }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Comments' | translate }}</th>
+        <td mat-cell *matCellDef="let glAccountClosure">{{ glAccountClosure.comments }}</td>
       </ng-container>
 
       <ng-container matColumnDef="createdByUsername">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Created By" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Created By' | translate }}</th>
         <td mat-cell *matCellDef="let glAccountClosure">{{ glAccountClosure.createdByUsername }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['view', row.id]" class="select-row"></tr>
-
+      <tr
+        mat-row
+        *matRowDef="let row; columns: displayedColumns"
+        [routerLink]="['view', row.id]"
+        class="select-row"
+      ></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
 
 <ng-template #templateButtonCreateClosure let-popover="popover">
-  <h2>{{"labels.heading.Create Closure" | translate}}</h2>
-  <p class="mw300">{{"labels.text.Create new closure" | translate}}</p>
+  <h2>{{ 'labels.heading.Create Closure' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Create new closure' | 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(templateFilter,filter, '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(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>{{"labels.heading.Search bar to filter closures by office."|translate}}</h4>
+  <h4>{{ 'labels.heading.Search bar to filter closures by office.' | translate }}</h4>
   <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(templateButtonCreateClosure, buttonCreateClosure, 'bottom', true);">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateClosuresTable,closuresTable, 'top', 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(); showPopover(templateButtonCreateClosure, buttonCreateClosure, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateClosuresTable, closuresTable, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateClosuresTable let-popover="popover">
-  <h4>{{"labels.heading.List of closures. To know more click" | translate}}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895316/Closing+Entries" target="_blank">{{"labels.inputs.Closing Entries" | translate}}</a></h4>
+  <h4>
+    {{ 'labels.heading.List of closures. To know more click' | translate }}:
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895316/Closing+Entries" target="_blank">{{
+      'labels.inputs.Closing Entries' | translate
+    }}</a>
+  </h4>
   <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(templateFilter,filter, '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(templateFilter, filter, '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/accounting/closing-entries/create-closure/create-closure.component.html

@@ -1,51 +1,59 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="accountingClosureForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="accountingClosureForm.controls.officeId.hasError('required')">
-              {{"labels.inputs.Office" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="closingDatePicker.open()">
-            <mat-label>{{"labels.inputs.Closing Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closingDatePicker" required formControlName="closingDate">
+            <mat-label>{{ 'labels.inputs.Closing Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="closingDatePicker"
+              required
+              formControlName="closingDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="closingDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closingDatePicker></mat-datepicker>
             <mat-error *ngIf="accountingClosureForm.controls.closingDate.hasError('required')">
-              {{"labels.inputs.Closing Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Closing Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Comments" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Comments' | translate }}</mat-label>
             <textarea matInput formControlName="comments" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!accountingClosureForm.valid" *mifosxHasPermission="'CREATE_GLCLOSURE'">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!accountingClosureForm.valid"
+          *mifosxHasPermission="'CREATE_GLCLOSURE'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/accounting/closing-entries/edit-closure/edit-closure.component.html

@@ -1,15 +1,10 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="accountingClosureForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
@@ -18,28 +13,27 @@
           </mat-form-field>
 
           <mat-form-field (click)="closingDatePicker.open()">
-            <mat-label>{{"labels.inputs.Closing Date" | translate}}</mat-label>
-            <input matInput [matDatepicker]="closingDatePicker" required formControlName="closingDate">
+            <mat-label>{{ 'labels.inputs.Closing Date' | translate }}</mat-label>
+            <input matInput [matDatepicker]="closingDatePicker" required formControlName="closingDate" />
             <mat-datepicker-toggle matSuffix [for]="closingDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closingDatePicker></mat-datepicker>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Comments" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Comments' | translate }}</mat-label>
             <textarea matInput formControlName="comments" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="accountingClosureForm.pristine">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="accountingClosureForm.pristine">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/accounting/closing-entries/view-closure/view-closure.component.html

@@ -1,24 +1,20 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Edit" | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
   <button mat-raised-button color="warn" (click)="deleteAccountingClosure()" *mifosxHasPermission="'DELETE_GLCLOSURE'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Delete" | translate}}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
 <div class="container" *ngIf="glAccountClosure">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="header">
-         {{"labels.inputs.Office" | translate}}
+          {{ 'labels.inputs.Office' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -26,7 +22,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Closure Date" | translate}}
+          {{ 'labels.inputs.Closure Date' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -34,7 +30,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Closed By" | translate}}
+          {{ 'labels.inputs.Closed By' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -42,7 +38,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Updated By" | translate}}
+          {{ 'labels.inputs.Updated By' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -50,7 +46,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Updated On"|translate}}
+          {{ 'labels.inputs.Updated On' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -58,7 +54,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Closure Creation Date"|translate}}
+          {{ 'labels.inputs.Closure Creation Date' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -66,17 +62,13 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Comments" | translate}}
+          {{ 'labels.inputs.Comments' | translate }}
         </div>
 
         <div fxFlex="50%">
           {{ glAccountClosure.comments }}
         </div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>