build: Use prettier for html

Stop ignoring html files in prettier and fix existing issues.

src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html

@@ -1,8 +1,7 @@
 <div class="tab-container mat-typography">
-
   <div fxLayout="row" fxLayoutAlign="start">
     <div class="m-b-10">
-      <h3>{{datatableName}}</h3>
+      <h3>{{ datatableName }}</h3>
     </div>
     <div class="action-button m-b-7" fxLayoutGap="10px">
       <span *mifosxHasPermission="'CREATE_' + datatableName">
@@ -25,29 +24,30 @@
 
   <div class="m-t-10">
     <table #dataTable mat-table [dataSource]="datatableData" class="mat-elevation-z1 m-b-25" [fxHide]="isLoading">
-
-      <ng-container *ngFor="let datatableColumn of datatableColumns;let i = index" [matColumnDef]="datatableColumn">
+      <ng-container *ngFor="let datatableColumn of datatableColumns; let i = index" [matColumnDef]="datatableColumn">
         <ng-container *ngIf="i === 0">
           <th mat-header-cell *matHeaderCellDef></th>
           <td mat-cell *matCellDef="let data">
-            <mat-checkbox class="center" (click)="$event.stopPropagation()"
-              (change)="$event ? itemToggle(data) : null" [checked]="selection.isSelected(data)">
+            <mat-checkbox
+              class="center"
+              (click)="$event.stopPropagation()"
+              (change)="$event ? itemToggle(data) : null"
+              [checked]="selection.isSelected(data)"
+            >
             </mat-checkbox>
           </td>
         </ng-container>
 
         <ng-container *ngIf="i > 0">
-          <th mat-header-cell class="right" *matHeaderCellDef> {{ getInputName(datatableColumn) }} </th>
+          <th mat-header-cell class="right" *matHeaderCellDef>{{ getInputName(datatableColumn) }}</th>
           <td mat-cell class="right" *matCellDef="let data" [ngClass]="isToDelete(data)">
-              {{ formatValue(data, datatableColumn) }}
+            {{ formatValue(data, datatableColumn) }}
           </td>
         </ng-container>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: datatableColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: datatableColumns"></tr>
     </table>
   </div>
-
 </div>

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html

@@ -1,5 +1,5 @@
 <div class="tab-container mat-typography">
-  <h3>{{datatableName}}</h3>
+  <h3>{{ datatableName }}</h3>
   <div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
     <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
@@ -15,43 +15,59 @@
   <mat-divider></mat-divider>
 
   <div class="m-t-10" *ngIf="dataObject.data.length > 0">
-
-    <div fxFlexFill *ngFor="let columnHeader of dataObject.columnHeaders;let i = index" [ngClass]="setAttributeClass(columnHeader.columnName)" >
-
+    <div
+      fxFlexFill
+      *ngFor="let columnHeader of dataObject.columnHeaders; let i = index"
+      [ngClass]="setAttributeClass(columnHeader.columnName)"
+    >
       <div fxFlex="40%" class="mat-body-strong left">
         {{ getInputName(columnHeader.columnName) }}
       </div>
 
-      <div fxFlex="68%" [ngSwitch]="getColumnType(columnHeader.columnDisplayType, columnHeader.columnType)" class="right">
+      <div
+        fxFlex="68%"
+        [ngSwitch]="getColumnType(columnHeader.columnDisplayType, columnHeader.columnType)"
+        class="right"
+      >
         <span *ngSwitchCase="'DATE'">
-          {{dataObject.data[0].row[i] | dateFormat}}
+          {{ dataObject.data[0].row[i] | dateFormat }}
         </span>
         <span *ngSwitchCase="'DATETIME'">
-          {{dataObject.data[0].row[i] | datetimeFormat}}
+          {{ dataObject.data[0].row[i] | datetimeFormat }}
         </span>
         <span *ngSwitchCase="'INTEGER'">
-          {{dataObject.data[0].row[i]}}
+          {{ dataObject.data[0].row[i] }}
         </span>
         <span *ngSwitchCase="'DECIMAL'">
-          {{dataObject.data[0].row[i] | formatNumber}}
+          {{ dataObject.data[0].row[i] | formatNumber }}
         </span>
         <span *ngSwitchCase="'TEXT'" class="long-text">
-          {{dataObject.data[0].row[i]}}
+          {{ dataObject.data[0].row[i] }}
         </span>
-        <textarea *ngSwitchCase="'JSON'" cdkTextareaAutosize="true" cdkAutosizeMaxRows="20" cdkAutosizeMinRows="1" style="width: 100%; height: 100%" [innerHTML]="dataObject.data[0].row[i].value | prettyPrint">
+        <textarea
+          *ngSwitchCase="'JSON'"
+          cdkTextareaAutosize="true"
+          cdkAutosizeMaxRows="20"
+          cdkAutosizeMinRows="1"
+          style="width: 100%; height: 100%"
+          [innerHTML]="dataObject.data[0].row[i].value | prettyPrint"
+        >
         </textarea>
         <span *ngSwitchDefault>
           <span class="m-r-5" *ngIf="isValidUrl(dataObject.data[0].row[i])">
-            <button mat-icon-button matTooltip="{{ 'tooltips.View Link' | translate }}" (click)="openSite(dataObject.data[0].row[i])"
-              matTooltipPosition="right" class="small-icon">
+            <button
+              mat-icon-button
+              matTooltip="{{ 'tooltips.View Link' | translate }}"
+              (click)="openSite(dataObject.data[0].row[i])"
+              matTooltipPosition="right"
+              class="small-icon"
+            >
               <fa-icon icon="eye" size="lg"></fa-icon>
             </button>
           </span>
-          {{dataObject.data[0].row[i]}}
+          {{ dataObject.data[0].row[i] }}
         </span>
       </div>
     </div>
-
   </div>
-
 </div>

src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.html

@@ -1,10 +1,12 @@
 <div>
-  <mifosx-datatable-multi-row *ngIf="multiRowDatatableFlag"
+  <mifosx-datatable-multi-row
+    *ngIf="multiRowDatatableFlag"
     [entityType]="entityType"
     [entityId]="entityId"
     [dataObject]="entityDatatable"
   ></mifosx-datatable-multi-row>
-  <mifosx-datatable-single-row *ngIf="!multiRowDatatableFlag"
+  <mifosx-datatable-single-row
+    *ngIf="!multiRowDatatableFlag"
     [entityType]="entityType"
     [entityId]="entityId"
     [dataObject]="entityDatatable"

src/app/shared/tabs/entity-documents-tab/entity-documents-tab.component.html

@@ -1,6 +1,5 @@
 <div class="tab-container mat-typography">
   <div fxLayout="row" fxLayoutAlign="start center">
-
     <h3 fxFlex="90%">{{ 'labels.heading.Documents' | translate }}</h3>
 
     <div fxFlex="10%" *mifosxHasPermission="'CREATE_DOCUMENT'">
@@ -11,40 +10,50 @@
   </div>
 
   <table mat-table #documentsTable [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.name' | translate }} </th>
-      <td mat-cell *matCellDef="let document"> {{ document.name }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+      <td mat-cell *matCellDef="let document">{{ document.name }}</td>
     </ng-container>
 
     <ng-container matColumnDef="description">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Description' | translate }} </th>
-      <td mat-cell *matCellDef="let document"> {{ document.description }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Description' | translate }}</th>
+      <td mat-cell *matCellDef="let document">{{ document.description }}</td>
     </ng-container>
 
     <ng-container matColumnDef="filename">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.File Name' | translate }} </th>
-      <td mat-cell *matCellDef="let document"> {{ document.fileName }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.File Name' | translate }}</th>
+      <td mat-cell *matCellDef="let document">{{ document.fileName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Actions' | translate }} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Actions' | translate }}</th>
       <td mat-cell *matCellDef="let document; let index">
-        <button class="document-action-button" mat-raised-button color="primary"
-          (click)="downloadDocument(document.id)">
+        <button
+          class="document-action-button"
+          mat-raised-button
+          color="primary"
+          (click)="downloadDocument(document.id)"
+        >
           <fa-icon icon="cloud-download-alt"></fa-icon>
         </button>
-        <button class="document-action-button" mat-raised-button color="warn"
-          (click)="deleteDocument(document.id, document.name)">
+        <button
+          class="document-action-button"
+          mat-raised-button
+          color="warn"
+          (click)="deleteDocument(document.id, document.name)"
+        >
           <fa-icon icon="times"></fa-icon>
         </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>
 
-  <mat-paginator *ngIf="entityDocuments && entityDocuments.length > 10" [pageSizeOptions]="[10, 25, 50]" showFirstLastButtons></mat-paginator>
-
+  <mat-paginator
+    *ngIf="entityDocuments && entityDocuments.length > 10"
+    [pageSizeOptions]="[10, 25, 50]"
+    showFirstLastButtons
+  ></mat-paginator>
 </div>

src/app/shared/tabs/entity-notes-tab/entity-notes-tab.component.html

@@ -1,12 +1,24 @@
 <div class="tab-container mat-typography">
-
   <h3>{{ 'labels.heading.Notes' | translate }}</h3>
 
   <div>
-    <form #formRef="ngForm" [formGroup]="noteForm" fxLayout="row" fxLayoutAlign="start baseline" fxLayoutGap="20px"
-      (ngSubmit)="addNote()">
+    <form
+      #formRef="ngForm"
+      [formGroup]="noteForm"
+      fxLayout="row"
+      fxLayoutAlign="start baseline"
+      fxLayoutGap="20px"
+      (ngSubmit)="addNote()"
+    >
       <mat-form-field fxFlex="calc(85%-20px)">
-        <textarea required formControlName="note" matInput placeholder="{{'labels.text.Write a note' | translate}} ..." cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
+        <textarea
+          required
+          formControlName="note"
+          matInput
+          placeholder="{{ 'labels.text.Write a note' | translate }} ..."
+          cdkTextareaAutosize
+          cdkAutosizeMinRows="2"
+        ></textarea>
       </mat-form-field>
       <button mat-raised-button fxFlex color="primary" [disabled]="!noteForm.valid">
         <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
@@ -15,12 +27,16 @@
   </div>
 
   <mat-list>
-    <mat-list-item *ngFor="let entityNote of entityNotes; let i=index;">
+    <mat-list-item *ngFor="let entityNote of entityNotes; let i = index">
       <fa-icon icon="sticky-note" matListIcon></fa-icon>
-      <h3 matLine>{{ entityNote.note }} </h3>
+      <h3 matLine>{{ entityNote.note }}</h3>
       <p matLine>
-        <span><b>{{ 'labels.inputs.Created By' | translate }}:</b> {{entityNote.createdByUsername}}</span><br />
-        <span><b>{{ 'labels.inputs.Date' | translate }}:</b> {{entityNote.createdOn | dateFormat}}</span>
+        <span
+          ><b>{{ 'labels.inputs.Created By' | translate }}:</b> {{ entityNote.createdByUsername }}</span
+        ><br />
+        <span
+          ><b>{{ 'labels.inputs.Date' | translate }}:</b> {{ entityNote.createdOn | dateFormat }}</span
+        >
       </p>
       <div fxLayout="row" fxLayoutAlign="flex-start">
         <button mat-button color="primary" (click)="editNote(entityNote.id, entityNote.note, i)">