build: Use prettier for html

Stop ignoring html files in prettier and fix existing issues.

src/app/clients/clients-view/client-actions/accept-client-transfer/accept-client-transfer.component.html

@@ -1,32 +1,28 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="acceptClientTransferForm" (ngSubmit)="submit()">
-
       <mat-card-content fxLayout="column">
-
         <mat-form-field (click)="transferDatePicker.open()">
-          <mat-label>{{"labels.inputs.Transfer Date" | translate}}</mat-label>
-          <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate">
+          <mat-label>{{ 'labels.inputs.Transfer Date' | translate }}</mat-label>
+          <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate" />
           <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #transferDatePicker></mat-datepicker>
         </mat-form-field>
 
         <mat-form-field fxFlex>
-          <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
           <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
-
       </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]="!acceptClientTransferForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!acceptClientTransferForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/clients/clients-view/client-actions/activate-client/activate-client.component.html

@@ -1,30 +1,34 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="activateClientForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
-          <mat-form-field fxFlex (click)="activationDatePicker.open()">
-            <mat-label>{{"labels.inputs.Activated On Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
-            <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker #activationDatePicker></mat-datepicker>
-            <mat-error *ngIf="activateClientForm.controls.activationDate.hasError('required')">
-              {{"labels.inputs.Activated On Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-            </mat-error>
-          </mat-form-field>
-
+        <mat-form-field fxFlex (click)="activationDatePicker.open()">
+          <mat-label>{{ 'labels.inputs.Activated On Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="activationDatePicker"
+            required
+            formControlName="activationDate"
+          />
+          <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #activationDatePicker></mat-datepicker>
+          <mat-error *ngIf="activateClientForm.controls.activationDate.hasError('required')">
+            {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        </mat-form-field>
       </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]="!activateClientForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!activateClientForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/clients/clients-view/client-actions/add-client-charge/add-client-charge.component.html

@@ -1,46 +1,45 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="clientChargeForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Charge" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
             <mat-select required formControlName="chargeId">
               <mat-option *ngFor="let clientCharge of clientChargeOptions" [value]="clientCharge.id">
                 {{ clientCharge.name + ' (' + clientCharge.currency.name + ')' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="clientChargeForm.controls.chargeId.hasError('required')">
-              {{"labels.inputs.Charge" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Charge' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div *ngIf="chargeDetails" fxLayout="column">
-
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Amount" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
               <input type="number" required matInput formControlName="amount" />
               <mat-error *ngIf="clientChargeForm.controls.amount.hasError('required')">
-                {{"labels.inputs.Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Charge Calculation" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Charge Calculation' | translate }}</mat-label>
               <mat-select formControlName="chargeCalculationType">
-                <mat-option *ngFor="let chargeCalculation of chargeDetails.chargeCalculationTypeOptions"
-                  [value]="chargeCalculation.id">
+                <mat-option
+                  *ngFor="let chargeCalculation of chargeDetails.chargeCalculationTypeOptions"
+                  [value]="chargeCalculation.id"
+                >
                   {{ chargeCalculation.value }}
                 </mat-option>
               </mat-select>
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Charge time type" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Charge time type' | translate }}</mat-label>
               <mat-select formControlName="chargeTimeType">
                 <mat-option *ngFor="let chargeTime of chargeDetails.chargeTimeTypeOptions" [value]="chargeTime.id">
                   {{ chargeTime.value }}
@@ -49,45 +48,57 @@
             </mat-form-field>
 
             <mat-form-field *ngIf="clientChargeForm.contains('dueDate')" (click)="dueDatePicker.open()">
-              <mat-label>{{"labels.inputs.Due for collection on" | translate}}</mat-label>
-              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required
-                formControlName="dueDate">
+              <mat-label>{{ 'labels.inputs.Due for collection on' | translate }}</mat-label>
+              <input
+                matInput
+                [min]="minDate"
+                [max]="maxDate"
+                [matDatepicker]="dueDatePicker"
+                required
+                formControlName="dueDate"
+              />
               <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #dueDatePicker></mat-datepicker>
               <mat-error *ngIf="clientChargeForm.controls.dueDate.hasError('required')">
-                {{"labels.inputs.Due for collection on" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.Due for collection on' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field *ngIf="clientChargeForm.contains('feeOnMonthDay')" (click)="feeOnMonthDayPicker.open()">
-              <mat-label>{{"labels.inputs.Due On" | translate}}</mat-label>
-              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="feeOnMonthDayPicker" required
-                formControlName="feeOnMonthDay">
+              <mat-label>{{ 'labels.inputs.Due On' | translate }}</mat-label>
+              <input
+                matInput
+                [min]="minDate"
+                [max]="maxDate"
+                [matDatepicker]="feeOnMonthDayPicker"
+                required
+                formControlName="feeOnMonthDay"
+              />
               <mat-datepicker-toggle matSuffix [for]="feeOnMonthDayPicker"></mat-datepicker-toggle>
               <mat-datepicker #feeOnMonthDayPicker></mat-datepicker>
               <mat-error *ngIf="clientChargeForm.controls.feeOnMonthDay.hasError('required')">
-                {{"labels.inputs.Due Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.Due Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field *ngIf="clientChargeForm.contains('feeInterval')">
-              <mat-label>{{"labels.inputs.Repeats Every" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Repeats Every' | translate }}</mat-label>
               <input matInput formControlName="feeInterval" />
             </mat-form-field>
-
           </div>
-
         </div>
 
         <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!clientChargeForm.valid">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button mat-raised-button color="primary" [disabled]="!clientChargeForm.valid">
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/clients/clients-view/client-actions/add-client-collateral/add-client-collateral.component.html

@@ -1,82 +1,77 @@
 <div class="container">
+  <mat-card>
+    <form [formGroup]="clientCollateralForm" (ngSubmit)="submit()">
+      <mat-card-content>
+        <div fxLayout="column">
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Collateral' | translate }}</mat-label>
+            <mat-select required formControlName="collateralId">
+              <mat-option *ngFor="let clientCollateral of clientCollateralOptions" [value]="clientCollateral.id">
+                {{ clientCollateral.name }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="clientCollateralForm.controls.collateralId.hasError('required')">
+              {{ 'labels.inputs.Collateral' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
 
-    <mat-card>
+          <div *ngIf="collateralDetails" fxLayout="column">
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
+              <input matInput required formControlName="name" />
+            </mat-form-field>
 
-        <form [formGroup]="clientCollateralForm" (ngSubmit)="submit()">
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Type/Quality' | translate }}</mat-label>
+              <input matInput required formControlName="quality" />
+            </mat-form-field>
 
-            <mat-card-content>
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Unit Type' | translate }}</mat-label>
+              <input matInput required formControlName="unitType" />
+            </mat-form-field>
 
-                <div fxLayout="column">
-                    <mat-form-field>
-                        <mat-label>{{"labels.inputs.Collateral" | translate}}</mat-label>
-                        <mat-select required formControlName="collateralId">
-                            <mat-option *ngFor="let clientCollateral of clientCollateralOptions" [value]="clientCollateral.id">
-                                {{ clientCollateral.name }}
-                            </mat-option>
-                        </mat-select>
-                        <mat-error *ngIf="clientCollateralForm.controls.collateralId.hasError('required')">
-                            {{"labels.inputs.Collateral" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-                        </mat-error>
-                    </mat-form-field>
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Base Price' | translate }}</mat-label>
+              <input matInput required formControlName="basePrice" />
+            </mat-form-field>
 
-                    <div *ngIf="collateralDetails" fxLayout="column">
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Percentage To Base' | translate }}</mat-label>
+              <input matInput required formControlName="pctToBase" />
+            </mat-form-field>
 
-                        <mat-form-field>
-                            <mat-label>{{"labels.inputs.name" | translate}}</mat-label>
-                            <input matInput required formControlName="name">
-                        </mat-form-field>
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Quantity' | translate }}</mat-label>
+              <input matInput required formControlName="quantity" />
+              <mat-error *ngIf="clientCollateralForm.controls.quantity.hasError('required')">
+                {{ 'labels.inputs.Quantity' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            </mat-form-field>
 
-                        <mat-form-field>
-                            <mat-label>{{"labels.inputs.Type/Quality" | translate}}</mat-label>
-                            <input matInput required formControlName="quality">
-                        </mat-form-field>
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Total' | translate }}</mat-label>
+              <input matInput required formControlName="totalValue" />
+            </mat-form-field>
 
-                        <mat-form-field>
-                            <mat-label>{{"labels.inputs.Unit Type" | translate}}</mat-label>
-                            <input matInput required formControlName="unitType">
-                        </mat-form-field>
-
-                        <mat-form-field>
-                            <mat-label>{{"labels.inputs.Base Price" | translate}}</mat-label>
-                            <input matInput required formControlName="basePrice">
-                        </mat-form-field>
-
-                        <mat-form-field>
-                            <mat-label>{{"labels.inputs.Percentage To Base" | translate}}</mat-label>
-                            <input matInput required formControlName="pctToBase">
-                        </mat-form-field>
-
-                        <mat-form-field>
-                            <mat-label>{{"labels.inputs.Quantity" | translate}}</mat-label>
-                            <input matInput required formControlName="quantity">
-                            <mat-error *ngIf="clientCollateralForm.controls.quantity.hasError('required')">
-                                {{"labels.inputs.Quantity" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-                            </mat-error>
-                        </mat-form-field>
-
-                        <mat-form-field>
-                            <mat-label>{{"labels.inputs.Total" | translate}}</mat-label>
-                            <input matInput required formControlName="totalValue">
-                        </mat-form-field>
-
-                        <mat-form-field>
-                            <mat-label>{{"labels.inputs.Total Collateral Value" | translate}}</mat-label>
-                            <input matInput required formControlName="totalCollateralValue">
-                        </mat-form-field>
-
-                    </div>
-
-                </div>
-
-            </mat-card-content>
-
-            <mat-card-actions fxLayoutGap="5px" fxLayout="row" fsLayout.xs="column" fxLayoutAlign="center">
-                <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-                <button mat-raised-button color="primary" [disabled]="!clientCollateralForm.valid">{{"labels.buttons.Submit" | translate}}</button>
-            </mat-card-actions>
-
-        </form>
-
-    </mat-card>
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Total Collateral Value' | translate }}</mat-label>
+              <input matInput required formControlName="totalCollateralValue" />
+            </mat-form-field>
+          </div>
+        </div>
+      </mat-card-content>
 
+      <mat-card-actions fxLayoutGap="5px" fxLayout="row" fsLayout.xs="column" fxLayoutAlign="center">
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!clientCollateralForm.valid">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
+      </mat-card-actions>
+    </form>
+  </mat-card>
 </div>

src/app/clients/clients-view/client-actions/client-actions.component.html

@@ -15,4 +15,4 @@
 <mifosx-take-survey *ngIf="actions['Take Survey']"></mifosx-take-survey>
 <mifosx-client-screen-reports *ngIf="actions['Client Screen Reports']"></mifosx-client-screen-reports>
 <mifosx-create-self-service-user *ngIf="actions['Create Self Service User']"></mifosx-create-self-service-user>
-<mifosx-add-client-collateral *ngIf="actions['Create Collateral']"></mifosx-add-client-collateral>
+<mifosx-add-client-collateral *ngIf="actions['Create Collateral']"></mifosx-add-client-collateral>

src/app/clients/clients-view/client-actions/client-assign-staff/client-assign-staff.component.html

@@ -1,36 +1,31 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="clientAssignStaffForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Staff" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of staffData" [value]="staff.id">
                 {{ staff.displayName }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="clientAssignStaffForm.controls.staffId.hasError('required')">
-              {{"labels.inputs.Staff" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Staff' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </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]="!clientAssignStaffForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!clientAssignStaffForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.html

@@ -1,56 +1,46 @@
 <div class="container m-b-20">
-
   <mat-card>
-
     <form [formGroup]="clientScreenReportForm" (ngSubmit)="generate()">
-
       <mat-card-content>
-
         <div>
-
           <mat-form-field fxFlex>
-            <mat-label>{{"labels.inputs.Client Screen Reports" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Client Screen Reports' | translate }}</mat-label>
             <mat-select formControlName="templateId">
               <mat-option *ngFor="let template of templatesData" [value]="template.id">
                 {{ template.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="clientScreenReportForm.controls.templateId.hasError('required')">
-              {{"labels.inputs.Screen Report" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Screen Report' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </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 type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
         <button mat-raised-button color="primary" [disabled]="!clientScreenReportForm.valid">
-          <fa-icon icon="cogs" size="sm" class="m-r-10"></fa-icon>{{"labels.buttons.Generate Report" | translate}}</button>
+          <fa-icon icon="cogs" size="sm" class="m-r-10"></fa-icon>{{ 'labels.buttons.Generate Report' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
 
 <div #output class="container">
-
   <mat-card fxLayout="column" fxLayoutGap="3%">
-
     <div fxLayoutAlign="end">
       <button mat-stroked-button color="primary" [disabled]="!template" (click)="print()">
         <fa-icon icon="file" class="m-r-10"></fa-icon>
-        {{"labels.buttons.Print" | translate}}
+        {{ 'labels.buttons.Print' | translate }}
       </button>
     </div>
 
     <div #screenReport fxLayoutAlign="center">
-      <p>{{"labels.text.Please select a screen report." | translate}}</p>
+      <p>{{ 'labels.text.Please select a screen report.' | translate }}</p>
     </div>
-
   </mat-card>
-
 </div>

src/app/clients/clients-view/client-actions/close-client/close-client.component.html

@@ -1,46 +1,49 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="closeClientForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="closureDatePicker.open()">
-            <mat-label>{{"labels.inputs.Closed On Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closureDatePicker" required formControlName="closureDate">
+            <mat-label>{{ 'labels.inputs.Closed On Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="closureDatePicker"
+              required
+              formControlName="closureDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="closureDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closureDatePicker></mat-datepicker>
             <mat-error *ngIf="closeClientForm.controls.closureDate.hasError('required')">
-              {{"labels.inputs.Closed On Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Closed On Date' | 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.Closure Reason" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Closure Reason' | translate }}</mat-label>
             <mat-select formControlName="closureReasonId">
               <mat-option *ngFor="let reason of closureData" [value]="reason.id">
                 {{ reason.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="closeClientForm.controls.closureReasonId.hasError('required')">
-              {{"labels.inputs.Closure Reason" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Closure Reason' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </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="warn" [disabled]="!closeClientForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="warn" [disabled]="!closeClientForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/clients/clients-view/client-actions/create-self-service-user/create-self-service-user.component.html

@@ -1,123 +1,122 @@
 <div class="container">
+  <mat-card>
+    <form [formGroup]="createSelfServiceForm" (ngSubmit)="submit()">
+      <mat-card-content>
+        <div div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+          <mat-form-field fxFlex="48%">
+            <mat-label> {{ 'labels.inputs.User Name' | translate }} </mat-label>
+            <input matInput required formControlName="username" />
+            <mat-error *ngIf="createSelfServiceForm.controls.username.hasError('required')">
+              {{ 'labels.inputs.User Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
 
-    <mat-card>
+          <mat-form-field fxFlex="48%">
+            <mat-label> {{ 'labels.inputs.First Name' | translate }} </mat-label>
+            <input matInput required formControlName="firstname" />
+            <mat-error *ngIf="createSelfServiceForm.controls.firstname.hasError('required')">
+              {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
 
-        <form [formGroup]="createSelfServiceForm" (ngSubmit)="submit()">
+          <mat-form-field fxFlex="48%">
+            <mat-label> {{ 'labels.inputs.Last Name' | translate }} </mat-label>
+            <input matInput required formControlName="lastname" />
+            <mat-error *ngIf="createSelfServiceForm.controls.lastname.hasError('required')">
+              {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
 
-            <mat-card-content>
+          <mat-form-field fxFlex="48%">
+            <mat-label> {{ 'labels.inputs.Email' | translate }} </mat-label>
+            <input matInput required formControlName="email" />
+            <mat-error *ngIf="createSelfServiceForm.controls.email.hasError('required')">
+              {{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+            <mat-error *ngIf="createSelfServiceForm.controls.email.hasError('email')">
+              {{ 'labels.inputs.Email should be a' | translate }}
+              <strong>{{ 'labels.inputs.valid' | translate }}</strong> {{ 'labels.inputs.email' | translate }}.
+            </mat-error>
+          </mat-form-field>
 
-                <div div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+          <mat-checkbox labelPosition="before" formControlName="sendPasswordToEmail" fxFlex="48%">
+            {{ 'labels.inputs.Auto Generate Password' | translate }}
+          </mat-checkbox>
 
-                    <mat-form-field fxFlex="48%">
-                        <mat-label> {{"labels.inputs.User Name" | translate}} </mat-label>
-                        <input matInput required formControlName="username">
-                        <mat-error *ngIf="createSelfServiceForm.controls.username.hasError('required')">
-                            {{"labels.inputs.User Name" | translate}} {{"labels.commons.is" | translate}}
-                            <strong>{{"labels.commons.required" | translate}}</strong>
-                        </mat-error>
-                    </mat-form-field>
+          <div fxFlex="48%" fxLayoutGap="5px" fxLayout="row">
+            <mat-checkbox labelPosition="before" formControlName="passwordNeverExpires">
+              {{ 'labels.inputs.Override Password Expire Policy' | translate }} ?
+            </mat-checkbox>
 
-                    <mat-form-field fxFlex="48%">
-                        <mat-label> {{"labels.inputs.First Name" | translate}} </mat-label>
-                        <input matInput required formControlName="firstname">
-                        <mat-error *ngIf="createSelfServiceForm.controls.firstname.hasError('required')">
-                            {{"labels.inputs.First Name" | translate}} {{"labels.commons.is" | translate}}
-                            <strong>{{"labels.commons.required" | translate}}</strong>
-                        </mat-error>
-                    </mat-form-field>
+            <i
+              class="fa fa-question-circle fa fa-align-left"
+              title="Determines if passwords do not expire for this user even if global configuration for password expiry is enabled"
+            ></i>
+          </div>
 
-                    <mat-form-field fxFlex="48%">
-                        <mat-label> {{"labels.inputs.Last Name" | translate}} </mat-label>
-                        <input matInput required formControlName="lastname">
-                        <mat-error *ngIf="createSelfServiceForm.controls.lastname.hasError('required')">
-                            {{"labels.inputs.Last Name" | translate}} {{"labels.commons.is" | translate}}
-                            <strong>{{"labels.commons.required" | translate}}</strong>
-                        </mat-error>
-                    </mat-form-field>
+          <mat-form-field fxFlex="48%" *ngIf="!hidePasswordField">
+            <mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
+            <input matInput formControlName="password" type="password" />
+            <mat-error *ngIf="createSelfServiceForm.controls.password.hasError('required')">
+              {{ 'labels.inputs.Password' | translate }} <strong>{{ 'labels.commons.is required' | translate }}</strong>
+            </mat-error>
+            <mat-error *ngIf="createSelfServiceForm.controls.password.hasError('minlength')">
+              {{ 'labels.commons.Password should be at least' | translate }}
+              <strong>{{ 'labels.commons.12 characters long' | translate }}</strong>
+            </mat-error>
+            <mat-error *ngIf="createSelfServiceForm.controls.password.hasError('maxlength')">
+              {{ 'labels.commons.Password should not be more than' | translate }}
+              <strong>{{ 'labels.commons.50 characters long' | translate }}</strong>
+            </mat-error>
+            <mat-error
+              *ngIf="
+                createSelfServiceForm.controls.password.hasError('pattern') &&
+                !(
+                  createSelfServiceForm.controls.password.hasError('minlength') ||
+                  createSelfServiceForm.controls.password.hasError('maxlength')
+                )
+              "
+            >
+              {{ 'labels.commons.Password should include a' | translate }}
+              <strong>{{ 'labels.commons.numeral' | translate }}</strong> {{ 'labels.commons.and at' | translate }}
+              <strong>{{ 'labels.commons.least one uppercase' | translate }}</strong>
+              ,<strong>{{ 'labels.commons.lowercase and special character' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
 
-                    <mat-form-field fxFlex="48%">
-                        <mat-label> {{"labels.inputs.Email" | translate}} </mat-label>
-                        <input matInput required formControlName="email">
-                        <mat-error *ngIf="createSelfServiceForm.controls.email.hasError('required')">
-                            {{"labels.inputs.Email" | translate}} {{"labels.commons.is" | translate}}
-                            <strong>{{"labels.commons.required" | translate}}</strong>
-                        </mat-error>
-                        <mat-error *ngIf="createSelfServiceForm.controls.email.hasError('email')">
-                            {{"labels.inputs.Email should be a" | translate}} <strong>{{"labels.inputs.valid" |
-                                translate}}</strong> {{"labels.inputs.email" | translate}}.
-                        </mat-error>
-                    </mat-form-field>
+          <mat-form-field fxFlex="48%" *ngIf="!hidePasswordField">
+            <mat-label> {{ 'labels.inputs.Repeat Password' | translate }} </mat-label>
+            <input matInput required formControlName="repeatPassword" type="password" />
+            <mat-error *ngIf="createSelfServiceForm.controls.repeatPassword.hasError('required')">
+              {{ 'labels.inputs.Repeat password' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+            <mat-error *ngIf="createSelfServiceForm.controls.repeatPassword.hasError('notequal')">
+              {{ 'labels.inputs.Passwords should be' | translate }}
+              <strong>{{ 'labels.inputs.matched' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
 
-                    <mat-checkbox labelPosition="before" formControlName="sendPasswordToEmail" fxFlex="48%">
-                        {{"labels.inputs.Auto Generate Password" | translate}}
-                    </mat-checkbox>
-
-                    <div fxFlex="48%" fxLayoutGap="5px" fxLayout="row">
-
-                        <mat-checkbox labelPosition="before" formControlName="passwordNeverExpires">
-                            {{"labels.inputs.Override Password Expire Policy" | translate}} ?
-                        </mat-checkbox>
-
-                        <i class="fa fa-question-circle fa fa-align-left"
-                            title="Determines if passwords do not expire for this user even if global configuration for password expiry is enabled"></i>
-
-                    </div>
-
-                    <mat-form-field fxFlex="48%" *ngIf="!hidePasswordField">
-                        <mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
-                        <input matInput formControlName="password" type="password">
-                        <mat-error *ngIf="createSelfServiceForm.controls.password.hasError('required')">
-                            {{ 'labels.inputs.Password' | translate }} <strong>{{'labels.commons.is required' | translate }}</strong>
-                        </mat-error>
-                        <mat-error *ngIf="createSelfServiceForm.controls.password.hasError('minlength')">
-                            {{'labels.commons.Password should be at least' | translate }} <strong>{{'labels.commons.12 characters long' | translate }}</strong>
-                        </mat-error>
-                        <mat-error *ngIf="createSelfServiceForm.controls.password.hasError('maxlength')">
-                            {{'labels.commons.Password should not be more than' | translate }}
-                            <strong>{{'labels.commons.50 characters long' | translate }}</strong>
-                        </mat-error>
-                        <mat-error
-                            *ngIf="createSelfServiceForm.controls.password.hasError('pattern') && !(createSelfServiceForm.controls.password.hasError('minlength') || createSelfServiceForm.controls.password.hasError('maxlength'))">
-                            {{'labels.commons.Password should include a' | translate }}
-                            <strong>{{'labels.commons.numeral' | translate }}</strong> {{'labels.commons.and at' | translate }}
-                            <strong>{{'labels.commons.least one uppercase' | translate }}</strong>
-                            ,<strong>{{'labels.commons.lowercase and special character' | translate }}</strong>
-                        </mat-error>
-                    </mat-form-field>
-
-                    <mat-form-field fxFlex="48%" *ngIf="!hidePasswordField">
-                        <mat-label> {{"labels.inputs.Repeat Password" | translate}} </mat-label>
-                        <input matInput required formControlName="repeatPassword" type="password">
-                        <mat-error *ngIf="createSelfServiceForm.controls.repeatPassword.hasError('required')">
-                            {{"labels.inputs.Repeat password" | translate}} {{"labels.commons.is" | translate}}
-                            <strong>{{"labels.commons.required" | translate}}</strong>
-                        </mat-error>
-                        <mat-error *ngIf="createSelfServiceForm.controls.repeatPassword.hasError('notequal')">
-                            {{"labels.inputs.Passwords should be" | translate}} <strong>{{"labels.inputs.matched" |
-                                translate}}</strong>
-                        </mat-error>
-                    </mat-form-field>
-
-                    <mat-form-field fxFlex="48%">
-                        <mat-label> {{"labels.inputs.Status" | translate}} </mat-label>
-                        <input matInput formControlName="status">
-                    </mat-form-field>
-
-                </div>
-
-                <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-                    <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" |
-                        translate}}</button>
-                    <button mat-raised-button color="primary"
-                        [disabled]="!createSelfServiceForm.valid">{{"labels.buttons.Activate Self Service User" |
-                        translate}}</button>
-                    <i class="fa fa-question-circle fa-2x" title="Activate Self Service User Help"></i>
-                </mat-card-actions>
-
-            </mat-card-content>
-
-        </form>
-
-    </mat-card>
+          <mat-form-field fxFlex="48%">
+            <mat-label> {{ 'labels.inputs.Status' | translate }} </mat-label>
+            <input matInput formControlName="status" />
+          </mat-form-field>
+        </div>
 
+        <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
+          <button type="button" mat-raised-button [routerLink]="['../../']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button mat-raised-button color="primary" [disabled]="!createSelfServiceForm.valid">
+            {{ 'labels.buttons.Activate Self Service User' | translate }}
+          </button>
+          <i class="fa fa-question-circle fa-2x" title="Activate Self Service User Help"></i>
+        </mat-card-actions>
+      </mat-card-content>
+    </form>
+  </mat-card>
 </div>

src/app/clients/clients-view/client-actions/reactivate-client/reactivate-client.component.html

@@ -1,30 +1,34 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="reactivateClientForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
-          <mat-form-field fxFlex (click)="reactivationDatePicker.open()">
-            <mat-label>{{"labels.inputs.Re Activation On Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="reactivationDatePicker" required formControlName="reactivationDate">
-            <mat-datepicker-toggle matSuffix [for]="reactivationDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker #reactivationDatePicker></mat-datepicker>
-            <mat-error *ngIf="reactivateClientForm.controls.reactivationDate.hasError('required')">
-              {{"labels.inputs.Reactivation Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-            </mat-error>
-          </mat-form-field>
-
+        <mat-form-field fxFlex (click)="reactivationDatePicker.open()">
+          <mat-label>{{ 'labels.inputs.Re Activation On Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="reactivationDatePicker"
+            required
+            formControlName="reactivationDate"
+          />
+          <mat-datepicker-toggle matSuffix [for]="reactivationDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #reactivationDatePicker></mat-datepicker>
+          <mat-error *ngIf="reactivateClientForm.controls.reactivationDate.hasError('required')">
+            {{ 'labels.inputs.Reactivation Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        </mat-form-field>
       </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]="!reactivateClientForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!reactivateClientForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/clients/clients-view/client-actions/reject-client-transfer/reject-client-transfer.component.html

@@ -1,32 +1,28 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="rejectClientTransferForm" (ngSubmit)="submit()">
-
       <mat-card-content fxLayout="column">
-
         <mat-form-field (click)="transferDatePicker.open()">
-          <mat-label>{{"labels.inputs.Transfer Date" | translate}}</mat-label>
-          <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate">
+          <mat-label>{{ 'labels.inputs.Transfer Date' | translate }}</mat-label>
+          <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate" />
           <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #transferDatePicker></mat-datepicker>
         </mat-form-field>
 
         <mat-form-field fxFlex>
-          <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
           <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
-
       </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]="!rejectClientTransferForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!rejectClientTransferForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/clients/clients-view/client-actions/reject-client/reject-client.component.html

@@ -1,46 +1,49 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="rejectClientForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="rejectionDatePicker.open()">
-            <mat-label>{{"labels.inputs.Rejection Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="rejectionDatePicker" required formControlName="rejectionDate">
+            <mat-label>{{ 'labels.inputs.Rejection Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="rejectionDatePicker"
+              required
+              formControlName="rejectionDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="rejectionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #rejectionDatePicker></mat-datepicker>
             <mat-error *ngIf="rejectClientForm.controls.rejectionDate.hasError('required')">
-              {{"labels.inputs.Rejection Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Rejection Date' | 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.Rejection Reason" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Rejection Reason' | translate }}</mat-label>
             <mat-select formControlName="rejectionReasonId">
               <mat-option *ngFor="let reason of rejectionData" [value]="reason.id">
                 {{ reason.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="rejectClientForm.controls.rejectionReasonId.hasError('required')">
-              {{"labels.inputs.Rejection Reason" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Rejection Reason' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </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="warn" [disabled]="!rejectClientForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="warn" [disabled]="!rejectClientForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/clients/clients-view/client-actions/take-survey/take-survey.component.html

@@ -1,60 +1,53 @@
 <div class="container mat-typography">
-
   <div class="mat-elevation-z2 surveyCont">
-
     <div class="surveySelect" fxLayout="row">
-
-      <mat-label class="nameLabel">{{"labels.inputs.Survey Name" | translate}}</mat-label>
+      <mat-label class="nameLabel">{{ 'labels.inputs.Survey Name' | translate }}</mat-label>
       <mat-select (selectionChange)="onSurveyChange($event)">
         <mat-option *ngFor="let surveyData of allSurveyData" [value]="surveyData">
-          {{surveyData.name}}
+          {{ surveyData.name }}
         </mat-option>
       </mat-select>
-
     </div>
 
-    <hr>
+    <hr />
 
     <div>
-
       <ng-container *ngFor="let component of componentGroups">
-
-        <h2 *ngIf="component[0].componentKey"> component[0].componentKey </h2>
+        <h2 *ngIf="component[0].componentKey">component[0].componentKey</h2>
 
         <div fxLayout="column" class="displayQuestions">
-
           <ng-container *ngFor="let question of component">
-
             <div fxLayout="row" class="question">
-
-              <mat-label fxFlex="40" class="questionText">{{question.text}}</mat-label>
+              <mat-label fxFlex="40" class="questionText">{{ question.text }}</mat-label>
 
               <mat-radio-group fxFlex="60" [(ngModel)]="question.answer">
-
-                <mat-radio-button fxLayout="column" class="radio-button" *ngFor="let options of question.responseDatas"
-                  style="margin-bottom: 5px; align-items: normal; white-space: normal;" [value]="options">
+                <mat-radio-button
+                  fxLayout="column"
+                  class="radio-button"
+                  *ngFor="let options of question.responseDatas"
+                  style="margin-bottom: 5px; align-items: normal; white-space: normal"
+                  [value]="options"
+                >
                   <span class="wrap-mat-radio-label">
-                    {{options.text}}
+                    {{ options.text }}
                   </span>
                 </mat-radio-button>
-
               </mat-radio-group>
-
             </div>
 
-            <div *ngIf="question.answer">{{"labels.text.Your answer is" | translate}}: {{question.answer.text}}</div>
-
+            <div *ngIf="question.answer">
+              {{ 'labels.text.Your answer is' | translate }}: {{ question.answer.text }}
+            </div>
           </ng-container>
-
         </div>
-
       </ng-container>
-
     </div>
 
-    <button mat-raised-button class="button-cancel" color="danger" [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-    <button mat-raised-button class="button-submit" color="primary" (click)=submit()>{{"labels.buttons.Submit" | translate}}</button>
-
+    <button mat-raised-button class="button-cancel" color="danger" [routerLink]="['../../general']">
+      {{ 'labels.buttons.Cancel' | translate }}
+    </button>
+    <button mat-raised-button class="button-submit" color="primary" (click)="submit()">
+      {{ 'labels.buttons.Submit' | translate }}
+    </button>
   </div>
-
 </div>

src/app/clients/clients-view/client-actions/transfer-client/transfer-client.component.html

@@ -1,51 +1,54 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="transferClientForm" (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="destinationOfficeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="transferClientForm.controls.destinationOfficeId.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)="transferDatePicker.open()">
-            <mat-label>{{"labels.inputs.Transfer Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transferDatePicker" required formControlName="transferDate">
+            <mat-label>{{ 'labels.inputs.Transfer Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="transferDatePicker"
+              required
+              formControlName="transferDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transferDatePicker></mat-datepicker>
             <mat-error *ngIf="transferClientForm.controls.transferDate.hasError('required')">
-              {{"labels.inputs.Transfer Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Transfer Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" 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]="!transferClientForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!transferClientForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/clients/clients-view/client-actions/undo-client-rejection/undo-client-rejection.component.html

@@ -1,30 +1,34 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="undoClientRejectionForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
-          <mat-form-field fxFlex (click)="reopenedDatePicker.open()">
-            <mat-label>{{"labels.inputs.Reopened On Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="reopenedDatePicker" required formControlName="reopenedDate">
-            <mat-datepicker-toggle matSuffix [for]="reopenedDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker #reopenedDatePicker></mat-datepicker>
-            <mat-error *ngIf="undoClientRejectionForm.controls.reopenedDate.hasError('required')">
-              {{"labels.inputs.Reopened On Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-            </mat-error>
-          </mat-form-field>
-
+        <mat-form-field fxFlex (click)="reopenedDatePicker.open()">
+          <mat-label>{{ 'labels.inputs.Reopened On Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="reopenedDatePicker"
+            required
+            formControlName="reopenedDate"
+          />
+          <mat-datepicker-toggle matSuffix [for]="reopenedDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #reopenedDatePicker></mat-datepicker>
+          <mat-error *ngIf="undoClientRejectionForm.controls.reopenedDate.hasError('required')">
+            {{ 'labels.inputs.Reopened On Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        </mat-form-field>
       </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]="!undoClientRejectionForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!undoClientRejectionForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/clients/clients-view/client-actions/undo-client-transfer/undo-client-transfer.component.html

@@ -1,32 +1,28 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="undoClientTransferForm" (ngSubmit)="submit()">
-
       <mat-card-content fxLayout="column">
-
         <mat-form-field (click)="transferDatePicker.open()">
-          <mat-label>{{"labels.inputs.Transfer Date" | translate}}</mat-label>
-          <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate">
+          <mat-label>{{ 'labels.inputs.Transfer Date' | translate }}</mat-label>
+          <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate" />
           <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #transferDatePicker></mat-datepicker>
         </mat-form-field>
 
         <mat-form-field fxFlex>
-          <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
           <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
-
       </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]="!undoClientTransferForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!undoClientTransferForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/clients/clients-view/client-actions/update-client-savings-account/update-client-savings-account.component.html

@@ -1,36 +1,31 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="clientSavingsAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Default Savings Account" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Default Savings Account' | translate }}</mat-label>
             <mat-select formControlName="savingsAccountId">
               <mat-option *ngFor="let account of savingsAccounts" [value]="account.id">
                 {{ account.accountNo }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="clientSavingsAccountForm.controls.savingsAccountId.hasError('required')">
-              {{"labels.inputs.Account" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Account' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </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]="!clientSavingsAccountForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!clientSavingsAccountForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/clients/clients-view/client-actions/view-survey/view-survey.component.html

@@ -1,51 +1,46 @@
 <div class="container m-b-20" fxLayoutAlign="end">
   <button mat-raised-button color="primary" [routerLink]="['../Take Survey']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Take Survey" | translate}}
+    {{ 'labels.buttons.Take Survey' | 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="surveyName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="surveyName"> {{"labels.inputs.Survey" | translate}} </th>
-        <td mat-cell *matCellDef="let survey"> {{ survey.surveyName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="surveyName">{{ 'labels.inputs.Survey' | translate }}</th>
+        <td mat-cell *matCellDef="let survey">{{ survey.surveyName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="createdBy">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="createdBy"> {{"labels.inputs.Created By" | translate}} </th>
-        <td mat-cell *matCellDef="let survey"> {{ survey.createdBy }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="createdBy">
+          {{ 'labels.inputs.Created By' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let survey">{{ survey.createdBy }}</td>
       </ng-container>
 
       <ng-container matColumnDef="date">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.DateTime" | translate}} </th>
-        <td mat-cell *matCellDef="let survey"> {{ survey.date  | datetimeFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.DateTime' | translate }}</th>
+        <td mat-cell *matCellDef="let survey">{{ survey.date | datetimeFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="score">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Score" | translate}} </th>
-        <td mat-cell *matCellDef="let survey"> {{ survey.score | formatNumber }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Score' | translate }}</th>
+        <td mat-cell *matCellDef="let survey">{{ survey.score | formatNumber }}</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 [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>

src/app/clients/clients-view/client-actions/withdraw-client/withdraw-client.component.html

@@ -1,46 +1,49 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="withdrawClientForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="withdrawalDatePicker.open()">
-            <mat-label>{{"labels.inputs.Withdrawal Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="withdrawalDatePicker" required formControlName="withdrawalDate">
+            <mat-label>{{ 'labels.inputs.Withdrawal Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="withdrawalDatePicker"
+              required
+              formControlName="withdrawalDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="withdrawalDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #withdrawalDatePicker></mat-datepicker>
             <mat-error *ngIf="withdrawClientForm.controls.withdrawalDate.hasError('required')">
-              {{"labels.inputs.Withdrawal Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Withdrawal Date' | 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.Withdrawal Reason" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Withdrawal Reason' | translate }}</mat-label>
             <mat-select formControlName="withdrawalReasonId">
               <mat-option *ngFor="let reason of withdrawalData" [value]="reason.id">
                 {{ reason.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="withdrawClientForm.controls.withdrawalReasonId.hasError('required')">
-              {{"labels.inputs.Withdrawal Reason" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Withdrawal Reason' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </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]="!withdrawClientForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!withdrawClientForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>