build: Use prettier for html

Stop ignoring html files in prettier and fix existing issues.

src/app/clients/clients-view/family-members-tab/add-family-member/add-family-member.component.html

@@ -1,108 +1,111 @@
 <div class="add-family-member-container">
-
   <form [formGroup]="addFamilyMemberForm" (ngSubmit)="submit()">
-
     <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutAlign="start center">
-
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.First Name" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
         <input formControlName="firstName" required matInput />
         <mat-error *ngIf="addFamilyMemberForm.controls.firstName.hasError('required')">
-          {{"labels.inputs.First Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Middle Name" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
         <input formControlName="middleName" matInput />
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Last Name" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
         <input formControlName="lastName" required matInput />
         <mat-error *ngIf="addFamilyMemberForm.controls.lastName.hasError('required')">
-          {{"labels.inputs.Last Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Qualification" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Qualification' | translate }}</mat-label>
         <input formControlName="qualification" matInput />
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Age" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Age' | translate }}</mat-label>
         <input type="number" formControlName="age" required matInput [min]="minAge" />
         <mat-error *ngIf="addFamilyMemberForm.controls.age.hasError('required')">
-          {{"labels.inputs.Age" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required and cannot be negative" | translate}}</strong>
+          {{ 'labels.inputs.Age' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required and cannot be negative' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
-      <mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="calc(50% - 25px)">{{"labels.inputs.Is Dependent" | translate}}?
+      <mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="calc(50% - 25px)"
+        >{{ 'labels.inputs.Is Dependent' | translate }}?
       </mat-checkbox>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Relationship" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Relationship' | translate }}</mat-label>
         <mat-select formControlName="relationshipId" required>
           <mat-option *ngFor="let relation of addFamilyMemberTemplate.relationshipIdOptions" [value]="relation.id">
-            {{ relation.name | translateKey:'catalogs' }}
+            {{ relation.name | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="addFamilyMemberForm.controls.relationshipId.hasError('required')">
-          {{"labels.inputs.Relationship" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.Relationship' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Gender" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
         <mat-select formControlName="genderId" required>
           <mat-option *ngFor="let gender of addFamilyMemberTemplate.genderIdOptions" [value]="gender.id">
-            {{ gender.name | translateKey:'catalogs' }}
+            {{ gender.name | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="addFamilyMemberForm.controls.genderId.hasError('required')">
-          {{"labels.inputs.Gender" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.Gender' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Profession" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Profession' | translate }}</mat-label>
         <mat-select formControlName="professionId">
           <mat-option *ngFor="let profession of addFamilyMemberTemplate.professionIdOptions" [value]="profession.id">
-            {{ profession.name | translateKey:'catalogs' }}
+            {{ profession.name | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Marital Status" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Marital Status' | translate }}</mat-label>
         <mat-select formControlName="maritalStatusId">
-          <mat-option *ngFor="let maritalStatus of addFamilyMemberTemplate.maritalStatusIdOptions"
-            [value]="maritalStatus.id">
-            {{ maritalStatus.name | translateKey:'catalogs'}}
+          <mat-option
+            *ngFor="let maritalStatus of addFamilyMemberTemplate.maritalStatusIdOptions"
+            [value]="maritalStatus.id"
+          >
+            {{ maritalStatus.name | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
       </mat-form-field>
 
-
       <mat-form-field fxFlex (click)="dueDatePicker.open()">
-        <mat-label>{{"labels.inputs.Date Of Birth" | translate}}</mat-label>
-        <input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker"
-          required>
+        <mat-label>{{ 'labels.inputs.Date Of Birth' | translate }}</mat-label>
+        <input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker" required />
         <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #dueDatePicker></mat-datepicker>
         <mat-error *ngIf="addFamilyMemberForm.controls.dateOfBirth.hasError('required')">
-          {{"labels.inputs.Date Of Birth" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.Date Of Birth' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
-
     </div>
 
     <div fxLayout="row" fxLayoutGap="32px" fxLayoutAlign="center">
-      <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
-      <button type="submit" mat-raised-button color="primary" [disabled]="!addFamilyMemberForm.valid">{{"labels.buttons.Submit" | translate}}</button>
+      <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
+      <button type="submit" mat-raised-button color="primary" [disabled]="!addFamilyMemberForm.valid">
+        {{ 'labels.buttons.Submit' | translate }}
+      </button>
     </div>
-
   </form>
-
 </div>

src/app/clients/clients-view/family-members-tab/edit-family-member/edit-family-member.component.html

@@ -1,108 +1,118 @@
 <div class="add-family-member-container">
-
   <form [formGroup]="editFamilyMemberForm" (ngSubmit)="submit()">
-
     <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutAlign="start center">
-
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.First Name" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
         <input formControlName="firstName" required matInput />
         <mat-error *ngIf="editFamilyMemberForm.controls.firstName.hasError('required')">
-          {{"labels.inputs.First Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Middle Name" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
         <input formControlName="middleName" matInput />
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Last Name" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
         <input formControlName="lastName" required matInput />
         <mat-error *ngIf="editFamilyMemberForm.controls.lastName.hasError('required')">
-          {{"labels.inputs.Last Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Qualification" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Qualification' | translate }}</mat-label>
         <input formControlName="qualification" matInput />
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Age" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Age' | translate }}</mat-label>
         <input type="number" formControlName="age" required matInput />
         <mat-error *ngIf="editFamilyMemberForm.controls.age.hasError('required')">
-          {{"labels.inputs.Age" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required and cannot be negative" | translate}}</strong>
+          {{ 'labels.inputs.Age' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required and cannot be negative' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
-      <mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="calc(50% - 25px)">Is Dependent?
+      <mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="calc(50% - 25px)"
+        >Is Dependent?
       </mat-checkbox>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Relationship" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Relationship' | translate }}</mat-label>
         <mat-select formControlName="relationshipId" required>
           <mat-option *ngFor="let relation of addFamilyMemberTemplate.relationshipIdOptions" [value]="relation.id">
-            {{ relation.name | translateKey:'catalogs'}}
+            {{ relation.name | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="editFamilyMemberForm.controls.relationshipId.hasError('required')">
-          {{"labels.inputs.Relationship" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.Relationship' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Gender" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
         <mat-select formControlName="genderId" required>
           <mat-option *ngFor="let gender of addFamilyMemberTemplate.genderIdOptions" [value]="gender.id">
-            {{ gender.name | translateKey:'catalogs'}}
+            {{ gender.name | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="editFamilyMemberForm.controls.genderId.hasError('required')">
-          {{"labels.inputs.Gender" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.Gender' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Profession" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Profession' | translate }}</mat-label>
         <mat-select formControlName="professionId">
           <mat-option *ngFor="let profession of addFamilyMemberTemplate.professionIdOptions" [value]="profession.id">
-            {{ profession.name | translateKey:'catalogs'}}
+            {{ profession.name | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Marital Status" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Marital Status' | translate }}</mat-label>
         <mat-select formControlName="maritalStatusId">
-          <mat-option *ngFor="let maritalStatus of addFamilyMemberTemplate.maritalStatusIdOptions"
-            [value]="maritalStatus.id">
-            {{ maritalStatus.name | translateKey:'catalogs'}}
+          <mat-option
+            *ngFor="let maritalStatus of addFamilyMemberTemplate.maritalStatusIdOptions"
+            [value]="maritalStatus.id"
+          >
+            {{ maritalStatus.name | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
       </mat-form-field>
 
-
       <mat-form-field fxFlex (click)="dueDatePicker.open()">
-        <mat-label>{{"labels.inputs.Date Of Birth" | translate}}</mat-label>
-        <input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker"
-          required>
+        <mat-label>{{ 'labels.inputs.Date Of Birth' | translate }}</mat-label>
+        <input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker" required />
         <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #dueDatePicker></mat-datepicker>
         <mat-error *ngIf="editFamilyMemberForm.controls.dateOfBirth.hasError('required')">
-          {{"labels.inputs.Date Of Birth" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.Date Of Birth' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
-
     </div>
 
     <div fxLayout="row" fxLayoutGap="32px" fxLayoutAlign="center">
-      <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-      <button type="submit" mat-raised-button color="primary" [disabled]="editFamilyMemberForm.pristine||!editFamilyMemberForm.valid">{{"labels.buttons.Submit" | translate}}</button>
+      <button type="button" mat-raised-button [routerLink]="['../../']">
+        {{ 'labels.buttons.Cancel' | translate }}
+      </button>
+      <button
+        type="submit"
+        mat-raised-button
+        color="primary"
+        [disabled]="editFamilyMemberForm.pristine || !editFamilyMemberForm.valid"
+      >
+        {{ 'labels.buttons.Submit' | translate }}
+      </button>
     </div>
-
   </form>
-
 </div>

src/app/clients/clients-view/family-members-tab/family-members-tab.component.html

@@ -1,25 +1,21 @@
 <div class="tab-container mat-typography">
-
   <router-outlet>
-
-    <h3>{{"labels.heading.Family Members" | translate}}</h3>
+    <h3>{{ 'labels.heading.Family Members' | translate }}</h3>
 
     <div fxLayout="row" fxLayoutAlign="flex-end">
       <button mat-raised-button color="primary" [routerLink]="['./add']">
-        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{"labels.buttons.Add" | translate}}
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
       </button>
     </div>
 
     <mat-accordion>
-
-      <mat-expansion-panel *ngFor="let member of clientFamilyMembers;index as i" class="family-member">
-
+      <mat-expansion-panel *ngFor="let member of clientFamilyMembers; index as i" class="family-member">
         <mat-expansion-panel-header>
           <mat-panel-title>
-            {{displayName(member)}}
+            {{ displayName(member) }}
           </mat-panel-title>
           <mat-panel-description>
-            {{member.relationship}}
+            {{ member.relationship }}
           </mat-panel-description>
         </mat-expansion-panel-header>
 
@@ -27,31 +23,43 @@
 
         <div class="family-member-actions" fxLayout="row" fxLayoutAlign="flex-end">
           <button mat-button color="primary">
-            <fa-icon icon="edit" [routerLink]="[member.id,'edit']"></fa-icon>
+            <fa-icon icon="edit" [routerLink]="[member.id, 'edit']"></fa-icon>
           </button>
-          <button mat-button color="warn" (click)="deleteFamilyMember(member.clientId,member.id,member.firstName,i)">
+          <button mat-button color="warn" (click)="deleteFamilyMember(member.clientId, member.id, member.firstName, i)">
             <fa-icon icon="trash"></fa-icon>
           </button>
         </div>
 
         <p>
-          <span *ngIf="member.firstName">{{"labels.inputs.First Name" | translate}} : {{member.firstName}}<br /></span>
-          <span *ngIf="member.middleName">{{"labels.inputs.Middle Name" | translate}} : {{member.middleName}}<br /></span>
-          <span *ngIf="member.lastName">{{"labels.inputs.Last Name" | translate}} : {{member.lastName}}<br /></span>
-          <span *ngIf="member.qualification">{{"labels.inputs.Qualification" | translate}} : {{member.qualification}}<br /></span>
-          <span *ngIf="member.mobileNumber">{{"labels.inputs.Mobile Number" | translate}} : {{member.mobileNumber}}<br /></span>
-          <span *ngIf="member.age">{{"labels.inputs.Age" | translate}} : {{member.age}}<br /></span>
-          <span *ngIf="member.isDependent">{{"labels.inputs.Is Dependent" | translate}} : {{member.isDependent | yesNo}}<br /></span>
-          <span *ngIf="member.maritalStatus">{{"labels.inputs.Marital Status" | translate}} : {{member.maritalStatus}}<br /></span>
-          <span *ngIf="member.gender">{{"labels.inputs.Gender" | translate}} : {{member.gender}}<br /></span>
-          <span *ngIf="member.profession">{{"labels.inputs.Profession" | translate}} : {{member.profession}}<br /></span>
-          <span *ngIf="member.dateOfBirth">{{"labels.inputs.Date Of Birth" | translate}} : {{member.dateOfBirth | dateFormat}}<br /></span>
+          <span *ngIf="member.firstName"
+            >{{ 'labels.inputs.First Name' | translate }} : {{ member.firstName }}<br
+          /></span>
+          <span *ngIf="member.middleName"
+            >{{ 'labels.inputs.Middle Name' | translate }} : {{ member.middleName }}<br
+          /></span>
+          <span *ngIf="member.lastName">{{ 'labels.inputs.Last Name' | translate }} : {{ member.lastName }}<br /></span>
+          <span *ngIf="member.qualification"
+            >{{ 'labels.inputs.Qualification' | translate }} : {{ member.qualification }}<br
+          /></span>
+          <span *ngIf="member.mobileNumber"
+            >{{ 'labels.inputs.Mobile Number' | translate }} : {{ member.mobileNumber }}<br
+          /></span>
+          <span *ngIf="member.age">{{ 'labels.inputs.Age' | translate }} : {{ member.age }}<br /></span>
+          <span *ngIf="member.isDependent"
+            >{{ 'labels.inputs.Is Dependent' | translate }} : {{ member.isDependent | yesNo }}<br
+          /></span>
+          <span *ngIf="member.maritalStatus"
+            >{{ 'labels.inputs.Marital Status' | translate }} : {{ member.maritalStatus }}<br
+          /></span>
+          <span *ngIf="member.gender">{{ 'labels.inputs.Gender' | translate }} : {{ member.gender }}<br /></span>
+          <span *ngIf="member.profession"
+            >{{ 'labels.inputs.Profession' | translate }} : {{ member.profession }}<br
+          /></span>
+          <span *ngIf="member.dateOfBirth"
+            >{{ 'labels.inputs.Date Of Birth' | translate }} : {{ member.dateOfBirth | dateFormat }}<br
+          /></span>
         </p>
-
       </mat-expansion-panel>
-
     </mat-accordion>
-
   </router-outlet>
-
 </div>