build: Use prettier for html

Stop ignoring html files in prettier and fix existing issues.

src/app/accounting/accounting-rules/accounting-rules.component.html

@@ -1,60 +1,63 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_ACCOUNTINGRULE'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Add Rule" | translate}}
+    {{ 'labels.buttons.Add Rule' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <div fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [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 accountingRule"> {{ accountingRule.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+        <td mat-cell *matCellDef="let accountingRule">{{ accountingRule.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="officeName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Office" | translate}} </th>
-        <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.officeName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office' | translate }}</th>
+        <td mat-cell *matCellDef="let accountingRule">{{ accountingRule.officeName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="debitTags">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Debit Tags" | translate}} </th>
-        <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.debitTags }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Debit Tags' | translate }}</th>
+        <td mat-cell *matCellDef="let accountingRule">{{ accountingRule.debitTags }}</td>
       </ng-container>
 
       <ng-container matColumnDef="debitAccount">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Debit Account" | translate}} </th>
-        <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.debitAccounts ? accountingRule.debitAccounts[0].name : '' }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Debit Account' | translate }}</th>
+        <td mat-cell *matCellDef="let accountingRule">
+          {{ accountingRule.debitAccounts ? accountingRule.debitAccounts[0].name : '' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="creditTags">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Credit Tags" | translate}} </th>
-        <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.creditTags }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Credit Tags' | translate }}</th>
+        <td mat-cell *matCellDef="let accountingRule">{{ accountingRule.creditTags }}</td>
       </ng-container>
 
       <ng-container matColumnDef="creditAccount">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Credit Account" | translate}} </th>
-        <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.creditAccounts ? accountingRule.creditAccounts[0].name : '' }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Credit Account' | translate }}</th>
+        <td mat-cell *matCellDef="let accountingRule">
+          {{ accountingRule.creditAccounts ? accountingRule.creditAccounts[0].name : '' }}
+        </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>

src/app/accounting/accounting-rules/create-rule/create-rule.component.html

@@ -1,43 +1,42 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="accountingRuleForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Accounting Rule Name" | translate}}</mat-label>
-            <input matInput required formControlName="name">
+            <mat-label>{{ 'labels.inputs.Accounting Rule Name' | translate }}</mat-label>
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="accountingRuleForm.controls.name.hasError('required')">
-              {{"labels.inputs.Accounting Rule Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Accounting Rule Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <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="accountingRuleForm.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>
 
           <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <mat-label fxFlex="50%">{{"labels.inputs.Affected GL Entry (Debit) Rule Type" | translate}} *</mat-label>
+            <mat-label fxFlex="50%">{{ 'labels.inputs.Affected GL Entry (Debit) Rule Type' | translate }} *</mat-label>
             <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="debitRuleType">
-              <mat-radio-button value="fixedAccount">{{"labels.inputs.Fixed Account" | translate}}</mat-radio-button>
-              <mat-radio-button value="listOfAccounts">{{"labels.inputs.List of Accounts"|translate}}</mat-radio-button>
+              <mat-radio-button value="fixedAccount">{{ 'labels.inputs.Fixed Account' | translate }}</mat-radio-button>
+              <mat-radio-button value="listOfAccounts">{{
+                'labels.inputs.List of Accounts' | translate
+              }}</mat-radio-button>
             </mat-radio-group>
           </div>
 
           <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'fixedAccount'">
-            <mat-label>{{"labels.inputs.Account to Debit"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account to Debit' | translate }}</mat-label>
             <mat-select formControlName="accountToDebit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name }}
@@ -45,9 +44,15 @@
             </mat-select>
           </mat-form-field>
 
-          <div fxFlex="48%" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'listOfAccounts'">
+          <div
+            fxFlex="48%"
+            fxLayout="row"
+            fxLayoutGap="2%"
+            fxLayout.lt-md="column"
+            *ngIf="accountingRuleForm.controls.debitRuleType.value === 'listOfAccounts'"
+          >
             <mat-form-field fxFlex="50%">
-              <mat-label>{{"labels.inputs.Debit Tags" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Debit Tags' | translate }}</mat-label>
               <mat-select formControlName="debitTags" multiple>
                 <mat-option *ngFor="let debitTag of debitTagData" [value]="debitTag.id">
                   {{ debitTag.name }}
@@ -57,21 +62,23 @@
 
             <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleDebitEntries" class="entries">
-                {{"labels.inputs.Multiple Debit Entries Allowed" | translate}}
+                {{ 'labels.inputs.Multiple Debit Entries Allowed' | translate }}
               </mat-checkbox>
             </div>
           </div>
 
           <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <mat-label fxFlex="50%">{{"labels.inputs.Affected GL Entry (Credit) Rule Type" | translate}} *</mat-label>
+            <mat-label fxFlex="50%">{{ 'labels.inputs.Affected GL Entry (Credit) Rule Type' | translate }} *</mat-label>
             <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="creditRuleType">
-              <mat-radio-button value="fixedAccount">{{"labels.inputs.Fixed Account" | translate}}</mat-radio-button>
-              <mat-radio-button value="listOfAccounts">{{"labels.inputs.List of Accounts"|translate}}</mat-radio-button>
+              <mat-radio-button value="fixedAccount">{{ 'labels.inputs.Fixed Account' | translate }}</mat-radio-button>
+              <mat-radio-button value="listOfAccounts">{{
+                'labels.inputs.List of Accounts' | translate
+              }}</mat-radio-button>
             </mat-radio-group>
           </div>
 
           <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'fixedAccount'">
-            <mat-label>{{"labels.inputs.Account to Credit" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account to Credit' | translate }}</mat-label>
             <mat-select formControlName="accountToCredit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name }}
@@ -79,9 +86,15 @@
             </mat-select>
           </mat-form-field>
 
-          <div fxFlex="48%" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'listOfAccounts'">
+          <div
+            fxFlex="48%"
+            fxLayout="row"
+            fxLayoutGap="2%"
+            fxLayout.lt-md="column"
+            *ngIf="accountingRuleForm.controls.creditRuleType.value === 'listOfAccounts'"
+          >
             <mat-form-field fxFlex="50%">
-              <mat-label>{{"labels.inputs.Credit Tags" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Credit Tags' | translate }}</mat-label>
               <mat-select formControlName="creditTags" multiple>
                 <mat-option *ngFor="let creditTag of creditTagData" [value]="creditTag.id">
                   {{ creditTag.name }}
@@ -91,27 +104,31 @@
 
             <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleCreditEntries" class="entries">
-                {{"labels.inputs.Multiple Credit Entries Allowed" | translate}}
+                {{ 'labels.inputs.Multiple Credit Entries Allowed' | translate }}
               </mat-checkbox>
             </div>
           </div>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>{{"labels.inputs.Description" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" 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]="!accountingRuleForm.valid" *mifosxHasPermission="'CREATE_ACCOUNTINGRULE'">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!accountingRuleForm.valid"
+          *mifosxHasPermission="'CREATE_ACCOUNTINGRULE'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/accounting/accounting-rules/edit-rule/edit-rule.component.html

@@ -1,43 +1,42 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="accountingRuleForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Accounting Rule Name" | translate}}</mat-label>
-            <input matInput required formControlName="name">
+            <mat-label>{{ 'labels.inputs.Accounting Rule Name' | translate }}</mat-label>
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="accountingRuleForm.controls.name.hasError('required')">
-              {{"labels.inputs.Accounting Rule Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Accounting Rule Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <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="accountingRuleForm.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>
 
           <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <mat-label fxFlex="50%">{{"labels.inputs.Affected GL Entry (Debit) Rule Type" | translate}} *</mat-label>
+            <mat-label fxFlex="50%">{{ 'labels.inputs.Affected GL Entry (Debit) Rule Type' | translate }} *</mat-label>
             <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="debitRuleType">
-              <mat-radio-button value="fixedAccount">{{"labels.inputs.Fixed Account" | translate}}</mat-radio-button>
-              <mat-radio-button value="listOfAccounts">{{"labels.inputs.List of Accounts"|translate}}</mat-radio-button>
+              <mat-radio-button value="fixedAccount">{{ 'labels.inputs.Fixed Account' | translate }}</mat-radio-button>
+              <mat-radio-button value="listOfAccounts">{{
+                'labels.inputs.List of Accounts' | translate
+              }}</mat-radio-button>
             </mat-radio-group>
           </div>
 
           <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'fixedAccount'">
-            <mat-label>{{"labels.inputs.Account to Debit"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account to Debit' | translate }}</mat-label>
             <mat-select formControlName="accountToDebit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name }}
@@ -45,9 +44,15 @@
             </mat-select>
           </mat-form-field>
 
-          <div fxFlex="48%" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'listOfAccounts'">
+          <div
+            fxFlex="48%"
+            fxLayout="row"
+            fxLayoutGap="2%"
+            fxLayout.lt-md="column"
+            *ngIf="accountingRuleForm.controls.debitRuleType.value === 'listOfAccounts'"
+          >
             <mat-form-field fxFlex="50%">
-              <mat-label>{{"labels.inputs.Debit Tags" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Debit Tags' | translate }}</mat-label>
               <mat-select formControlName="debitTags" multiple>
                 <mat-option *ngFor="let debitTag of debitTagData" [value]="debitTag.id">
                   {{ debitTag.name }}
@@ -57,21 +62,23 @@
 
             <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleDebitEntries" class="entries">
-                {{"labels.inputs.Multiple Debit Entries Allowed" | translate}}
+                {{ 'labels.inputs.Multiple Debit Entries Allowed' | translate }}
               </mat-checkbox>
             </div>
           </div>
 
           <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <mat-label fxFlex="50%">{{"labels.inputs.Affected GL Entry (Credit) Rule Type" | translate}} *</mat-label>
+            <mat-label fxFlex="50%">{{ 'labels.inputs.Affected GL Entry (Credit) Rule Type' | translate }} *</mat-label>
             <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="creditRuleType">
-              <mat-radio-button value="fixedAccount">{{"labels.inputs.Fixed Account" | translate}}</mat-radio-button>
-              <mat-radio-button value="listOfAccounts">{{"labels.inputs.List of Accounts"|translate}}</mat-radio-button>
+              <mat-radio-button value="fixedAccount">{{ 'labels.inputs.Fixed Account' | translate }}</mat-radio-button>
+              <mat-radio-button value="listOfAccounts">{{
+                'labels.inputs.List of Accounts' | translate
+              }}</mat-radio-button>
             </mat-radio-group>
           </div>
 
           <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'fixedAccount'">
-            <mat-label>{{"labels.inputs.Account to Credit" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account to Credit' | translate }}</mat-label>
             <mat-select formControlName="accountToCredit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name }}
@@ -79,9 +86,15 @@
             </mat-select>
           </mat-form-field>
 
-          <div fxFlex="48%" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'listOfAccounts'">
+          <div
+            fxFlex="48%"
+            fxLayout="row"
+            fxLayoutGap="2%"
+            fxLayout.lt-md="column"
+            *ngIf="accountingRuleForm.controls.creditRuleType.value === 'listOfAccounts'"
+          >
             <mat-form-field fxFlex="50%">
-              <mat-label>{{"labels.inputs.Credit Tags" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Credit Tags' | translate }}</mat-label>
               <mat-select formControlName="creditTags" multiple>
                 <mat-option *ngFor="let creditTag of creditTagData" [value]="creditTag.id">
                   {{ creditTag.name }}
@@ -91,28 +104,31 @@
 
             <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleCreditEntries" class="entries">
-                {{"labels.inputs.Multiple Credit Entries Allowed" | translate}}
+                {{ 'labels.inputs.Multiple Credit Entries Allowed' | translate }}
               </mat-checkbox>
             </div>
           </div>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>{{"labels.inputs.Description" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" 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]="accountingRuleForm.pristine || !accountingRuleForm.valid" *mifosxHasPermission="'UPDATE_ACCOUNTINGRULE'">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="accountingRuleForm.pristine || !accountingRuleForm.valid"
+          *mifosxHasPermission="'UPDATE_ACCOUNTINGRULE'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
-

src/app/accounting/accounting-rules/view-rule/view-rule.component.html

@@ -1,26 +1,26 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_ACCOUNTINGRULE'">
     <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)="deleteAccountingRule()" *mifosxHasPermission="'DELETE_ACCOUNTINGRULE'">
+  <button
+    mat-raised-button
+    color="warn"
+    (click)="deleteAccountingRule()"
+    *mifosxHasPermission="'DELETE_ACCOUNTINGRULE'"
+  >
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Delete" | translate}}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
 <div class="container" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column">
-
   <div fxFlex="48%">
-
     <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%">
@@ -28,7 +28,7 @@
           </div>
 
           <div fxFlex="50%" class="header" *ngIf="accountingRule.description">
-            {{"labels.inputs.Description" | translate}}
+            {{ 'labels.inputs.Description' | translate }}
           </div>
 
           <div fxFlex="50%" *ngIf="accountingRule.description">
@@ -36,7 +36,7 @@
           </div>
 
           <div fxFlex="50%" class="header">
-            {{"labels.inputs.Multiple Debit Entries Allowed" | translate}}
+            {{ 'labels.inputs.Multiple Debit Entries Allowed' | translate }}
           </div>
 
           <div fxFlex="50%">
@@ -44,32 +44,24 @@
           </div>
 
           <div fxFlex="50%" class="header">
-            {{"labels.inputs.Multiple Credit Entries Allowed" | translate}}
+            {{ 'labels.inputs.Multiple Credit Entries Allowed' | translate }}
           </div>
 
           <div fxFlex="50%">
             {{ accountingRule.allowMultipleCreditEntries }}
           </div>
-
         </div>
-
       </mat-card-content>
-
     </mat-card>
-
   </div>
 
   <div fxFlex>
-
     <mat-card>
-
       <mat-card-content>
-
         <div fxLayout="row" class="content">
-
           <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.debitTags">
             <div class="header">
-              {{"labels.inputs.Debit Tags" | translate}}
+              {{ 'labels.inputs.Debit Tags' | translate }}
             </div>
             <div *ngFor="let debitTag of accountingRule.debitTags">
               {{ debitTag.tag.name }}
@@ -78,7 +70,7 @@
 
           <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.debitAccounts">
             <div class="header">
-              {{"labels.inputs.Debit Account Name" | translate}}
+              {{ 'labels.inputs.Debit Account Name' | translate }}
             </div>
             <div *ngFor="let debitAccount of accountingRule.debitAccounts">
               {{ debitAccount.name + ' (' + debitAccount.glCode + ')' }}
@@ -87,7 +79,7 @@
 
           <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.creditTags">
             <div class="header">
-              {{"labels.inputs.Credit Tags" | translate}}
+              {{ 'labels.inputs.Credit Tags' | translate }}
             </div>
             <div *ngFor="let creditTag of accountingRule.creditTags">
               {{ creditTag.tag.name }}
@@ -96,19 +88,14 @@
 
           <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.creditAccounts">
             <div class="header">
-              {{"labels.inputs.Credit Account Name" | translate}}
+              {{ 'labels.inputs.Credit Account Name' | translate }}
             </div>
             <div *ngFor="let creditAccount of accountingRule.creditAccounts">
               {{ creditAccount.name + ' (' + creditAccount.glCode + ')' }}
             </div>
           </div>
-
         </div>
-
       </mat-card-content>
-
     </mat-card>
-
   </div>
-
 </div>