build: Use prettier for html

Stop ignoring html files in prettier and fix existing issues.

src/app/centers/centers-view/center-actions/activate-center/activate-center.component.html

@@ -1,30 +1,34 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="activateCenterForm" (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="activateCenterForm.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="activateCenterForm.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]="!activateCenterForm.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]="!activateCenterForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.html

@@ -1,74 +1,79 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="centerMeetingForm">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="startDatePicker.open()">
-            <mat-label>{{"labels.inputs.Meeting Start Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" required formControlName="startDate">
+            <mat-label>{{ 'labels.inputs.Meeting Start Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="startDatePicker"
+              required
+              formControlName="startDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #startDatePicker></mat-datepicker>
             <mat-error *ngIf="centerMeetingForm.controls.startDate.hasError('required')">
-              {{"labels.inputs.Start Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Start Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox class="m-t-10 m-b-10" labelPosition="before" formControlName="repeating">
-            {{"labels.inputs.Repeats?" | translate}}
+            {{ 'labels.inputs.Repeats?' | translate }}
           </mat-checkbox>
 
           <mat-form-field *ngIf="centerMeetingForm.contains('frequency')">
-            <mat-label>{{"labels.inputs.Repetition Frequency" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Repetition Frequency' | translate }}</mat-label>
             <mat-select formControlName="frequency">
               <mat-option *ngFor="let option of frequencyOptions" [value]="option.id">
                 {{ option.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="centerMeetingForm.controls.frequency.hasError('repeatsOnDay')">
-              {{"labels.inputs.Repetition Frequency" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Repetition Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="centerMeetingForm.contains('interval')">
-            <mat-label>{{"labels.inputs.Repetition Interval" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Repetition Interval' | translate }}</mat-label>
             <mat-select formControlName="interval">
               <mat-option *ngFor="let interval of repetitionIntervals" [value]="interval">
                 {{ interval }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="centerMeetingForm.controls.interval.hasError('repeatsOnDay')">
-              {{"labels.inputs.Repetition Interval" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Repetition Interval' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="centerMeetingForm.contains('repeatsOnDay')">
-          <mat-label>{{"labels.inputs.Repeats on Day" | translate}}</mat-label>
-          <mat-select formControlName="repeatsOnDay" required>
-            <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
-              {{ day.value }}
-            </mat-option>
-          </mat-select>
-          <mat-error *ngIf="centerMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
-            {{"labels.inputs.At least" | translate}} <strong>{{"labels.inputs.one" | translate}}</strong> {{"labels.inputs.day must be selected" | translate}}
-          </mat-error>
-        </mat-form-field>
-
+            <mat-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
+            <mat-select formControlName="repeatsOnDay" required>
+              <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
+                {{ day.value }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="centerMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
+              {{ 'labels.inputs.At least' | translate }} <strong>{{ 'labels.inputs.one' | translate }}</strong>
+              {{ 'labels.inputs.day must be selected' | translate }}
+            </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]="!centerMeetingForm.valid" (click)="submit()">{{"labels.buttons.Submit | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!centerMeetingForm.valid" (click)="submit()">
+          {{"labels.buttons.Submit | translate}}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/centers/centers-view/center-actions/center-actions.component.html

@@ -1,7 +1,7 @@
 <mifosx-activate-center *ngIf="actions['Activate']"></mifosx-activate-center>
-<mifosx-center-assign-staff *ngIf="actions['Assign Staff']" ></mifosx-center-assign-staff>
+<mifosx-center-assign-staff *ngIf="actions['Assign Staff']"></mifosx-center-assign-staff>
 <mifosx-close-center *ngIf="actions['Close']"></mifosx-close-center>
-<mifosx-center-attendance *ngIf="actions['Attendance']" ></mifosx-center-attendance>
+<mifosx-center-attendance *ngIf="actions['Attendance']"></mifosx-center-attendance>
 <mifosx-attach-center-meeting *ngIf="actions['Attach Meeting']"></mifosx-attach-center-meeting>
 <mifosx-edit-center-meeting *ngIf="actions['Edit Meeting']"></mifosx-edit-center-meeting>
 <mifosx-edit-center-meeting-schedule *ngIf="actions['Edit Meeting Schedule']"></mifosx-edit-center-meeting-schedule>

src/app/centers/centers-view/center-actions/center-assign-staff/center-assign-staff.component.html

@@ -1,36 +1,31 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="centerAssignStaffForm" (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="centerAssignStaffForm.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]="!centerAssignStaffForm.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]="!centerAssignStaffForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/centers/centers-view/center-actions/center-attendance/center-attendance.component.html

@@ -1,49 +1,49 @@
 <div class="container">
-
   <mat-card fxLayout="column" fxLayoutGap="3%">
-
     <mat-form-field fxFlex>
-      <mat-label>{{"labels.inputs.Meeting Date" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Meeting Date' | translate }}</mat-label>
       <mat-select [formControl]="meetingDate">
         <mat-option *ngFor="let date of meetingDates" [value]="date">
           {{ date | dateFormat }}
         </mat-option>
       </mat-select>
-      <mat-hint>{{"labels.inputs.Next Meeting on" | translate}}: {{ this.centerData.collectionMeetingCalendar.nextTenRecurringDates[0] | dateFormat }}</mat-hint>
+      <mat-hint
+        >{{ 'labels.inputs.Next Meeting on' | translate }}:
+        {{ this.centerData.collectionMeetingCalendar.nextTenRecurringDates[0] | dateFormat }}</mat-hint
+      >
     </mat-form-field>
 
     <table class="mat-elevation-z1" mat-table [dataSource]="dataSource">
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" | translate}} </th>
-        <td mat-cell *matCellDef="let member"> {{ member.clientId | find:membersData:'id':'displayName' }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
+        <td mat-cell *matCellDef="let member">{{ member.clientId | find: membersData : 'id' : 'displayName' }}</td>
       </ng-container>
 
       <ng-container matColumnDef="attendance">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attendance" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attendance' | translate }}</th>
         <td mat-cell *matCellDef="let member" [ngSwitch]="member.attendanceType">
-          <span *ngSwitchCase="1">{{"labels.inputs.Present" | translate}}</span>
-          <span *ngSwitchCase="2">{{"labels.inputs.Absent" | translate}}</span>
-          <span *ngSwitchCase="3">{{"labels.inputs.Approved" | translate}}</span>
-          <span *ngSwitchCase="4">{{"labels.inputs.Leave" | translate}}</span>
-          <span *ngSwitchCase="5">{{"labels.inputs.Late" | translate}}</span>
-          <button mat-icon-button color="primary"
-            (click)="editAttendance(member)">
+          <span *ngSwitchCase="1">{{ 'labels.inputs.Present' | translate }}</span>
+          <span *ngSwitchCase="2">{{ 'labels.inputs.Absent' | translate }}</span>
+          <span *ngSwitchCase="3">{{ 'labels.inputs.Approved' | translate }}</span>
+          <span *ngSwitchCase="4">{{ 'labels.inputs.Leave' | translate }}</span>
+          <span *ngSwitchCase="5">{{ 'labels.inputs.Late' | translate }}</span>
+          <button mat-icon-button color="primary" (click)="editAttendance(member)">
             <fa-icon icon="pen"></fa-icon>
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
 
     <mat-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" (click)="submit()" *mifosxHasPermission="'CREATE_MEETING'">{{"labels.buttons.Confirm" | translate}}</button>
+      <button type="button" mat-raised-button [routerLink]="['../../']">
+        {{ 'labels.buttons.Cancel' | translate }}
+      </button>
+      <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'CREATE_MEETING'">
+        {{ 'labels.buttons.Confirm' | translate }}
+      </button>
     </mat-card-actions>
-
   </mat-card>
-
 </div>

src/app/centers/centers-view/center-actions/close-center/close-center.component.html

@@ -1,46 +1,54 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="closeCenterForm" (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="closeCenterForm.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="closeCenterForm.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]="!closeCenterForm.valid" *mifosxHasPermission="'CLOSE_CENTER'">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="warn"
+          [disabled]="!closeCenterForm.valid"
+          *mifosxHasPermission="'CLOSE_CENTER'"
+        >
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/centers/centers-view/center-actions/edit-center-meeting-schedule/edit-center-meeting-schedule.component.html

@@ -1,46 +1,49 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="centerEditMeetingScheduleForm">
-
       <mat-card-content>
-
         <div fxLayout="column">
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Existing Meeting Date' | translate }}</mat-label>
+            <mat-select formControlName="presentMeetingDate">
+              <mat-option *ngFor="let date of nextMeetingDates" [value]="date">
+                {{ date | dateFormat }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="centerEditMeetingScheduleForm.controls.presentMeetingDate.hasError('repeatsOnDay')">
+              {{ 'labels.inputs.Existing Meeting Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
 
-        <mat-form-field>
-          <mat-label>{{"labels.inputs.Existing Meeting Date" | translate}}</mat-label>
-          <mat-select formControlName="presentMeetingDate">
-            <mat-option *ngFor="let date of nextMeetingDates" [value]="date">
-              {{ date | dateFormat }}
-            </mat-option>
-          </mat-select>
-          <mat-error *ngIf="centerEditMeetingScheduleForm.controls.presentMeetingDate.hasError('repeatsOnDay')">
-            {{"labels.inputs.Existing Meeting Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-          </mat-error>
-        </mat-form-field>
-
-        <mat-form-field (click)="newMeetingDatePicker.open()">
-          <mat-label>{{"labels.inputs.Revised Meeting Date" | translate}}</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="newMeetingDatePicker" required formControlName="newMeetingDate">
-          <mat-datepicker-toggle matSuffix [for]="newMeetingDatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #newMeetingDatePicker></mat-datepicker>
-          <mat-error *ngIf="centerEditMeetingScheduleForm.controls.newMeetingDate.hasError('required')">
-            {{"labels.inputs.Revised Meeting Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-          </mat-error>
-        </mat-form-field>
-
+          <mat-form-field (click)="newMeetingDatePicker.open()">
+            <mat-label>{{ 'labels.inputs.Revised Meeting Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="newMeetingDatePicker"
+              required
+              formControlName="newMeetingDate"
+            />
+            <mat-datepicker-toggle matSuffix [for]="newMeetingDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #newMeetingDatePicker></mat-datepicker>
+            <mat-error *ngIf="centerEditMeetingScheduleForm.controls.newMeetingDate.hasError('required')">
+              {{ 'labels.inputs.Revised Meeting Date' | 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]="!centerEditMeetingScheduleForm.valid" (click)="submit()">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!centerEditMeetingScheduleForm.valid" (click)="submit()">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/centers/centers-view/center-actions/edit-center-meeting/edit-center-meeting.component.html

@@ -1,80 +1,85 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end">
   <button mat-raised-button color="primary" (click)="editSchedule()">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Edit Schedule" | translate}}
+    {{ 'labels.buttons.Edit Schedule' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="centerEditMeetingForm">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Repetition Frequency" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Repetition Frequency' | translate }}</mat-label>
             <mat-select formControlName="frequency">
               <mat-option *ngFor="let option of frequencyOptions" [value]="option.id">
                 {{ option.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="centerEditMeetingForm.controls.frequency.hasError('repeatsOnDay')">
-              {{"labels.inputs.Repetition Frequency" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Repetition Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Repetition Interval" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Repetition Interval' | translate }}</mat-label>
             <mat-select formControlName="interval">
               <mat-option *ngFor="let interval of repetitionIntervals" [value]="interval">
                 {{ interval }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="centerEditMeetingForm.controls.interval.hasError('repeatsOnDay')">
-              {{"labels.inputs.Repetition Interval" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Repetition Interval' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="centerEditMeetingForm.contains('repeatsOnDay')">
-          <mat-label>{{"labels.inputs.Repeats on Day" | translate}}</mat-label>
-          <mat-select formControlName="repeatsOnDay" required>
-            <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
-              {{ day.value }}
-            </mat-option>
-          </mat-select>
-          <mat-error *ngIf="centerEditMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
-            {{"labels.inputs.At least" | translate}} <strong>{{"labels.inputs.one" | translate}}</strong> {{"labels.inputs.day must be selected" | translate}}
-          </mat-error>
-        </mat-form-field>
-
-        <mat-form-field class="m-b-5" (click)="startDatePicker.open()">
-          <mat-label>{{"labels.inputs.Above Changes are Effective from" | translate}}</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" required formControlName="startDate">
-          <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #startDatePicker></mat-datepicker>
-          <mat-error *ngIf="centerEditMeetingForm.controls.startDate.hasError('required')">
-            {{"labels.inputs.Changes Affection Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-          </mat-error>
-          <mat-hint>
-            {{"labels.text.Repeats' and 'Repeats every" | translate}}
-          </mat-hint>
-        </mat-form-field>
+            <mat-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
+            <mat-select formControlName="repeatsOnDay" required>
+              <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
+                {{ day.value }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="centerEditMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
+              {{ 'labels.inputs.At least' | translate }} <strong>{{ 'labels.inputs.one' | translate }}</strong>
+              {{ 'labels.inputs.day must be selected' | translate }}
+            </mat-error>
+          </mat-form-field>
 
+          <mat-form-field class="m-b-5" (click)="startDatePicker.open()">
+            <mat-label>{{ 'labels.inputs.Above Changes are Effective from' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="startDatePicker"
+              required
+              formControlName="startDate"
+            />
+            <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #startDatePicker></mat-datepicker>
+            <mat-error *ngIf="centerEditMeetingForm.controls.startDate.hasError('required')">
+              {{ 'labels.inputs.Changes Affection Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+            <mat-hint>
+              {{ "labels.text.Repeats' and 'Repeats every" | translate }}
+            </mat-hint>
+          </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]="!centerEditMeetingForm.valid" (click)="submit()">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!centerEditMeetingForm.valid" (click)="submit()">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.html

@@ -1,10 +1,8 @@
 <div class="container" fxLayout="row" fxLayoutGap="3%">
-
   <mat-card fxFlex class="group-card" fxLayout="column" fxLayoutGap="2%">
-
     <mat-form-field fxFlex="30%">
-      <mat-label>{{"labels.inputs.Add Groups" | translate}}</mat-label>
-      <input matInput [formControl]="groupChoice" [matAutocomplete]="groupsAutocomplete">
+      <mat-label>{{ 'labels.inputs.Add Groups' | translate }}</mat-label>
+      <input matInput [formControl]="groupChoice" [matAutocomplete]="groupsAutocomplete" />
     </mat-form-field>
 
     <mat-autocomplete autoActiveFirstOption #groupsAutocomplete="matAutocomplete" [displayWith]="displayGroup">
@@ -15,41 +13,37 @@
 
     <div class="mat-table">
       <div class="mat-header-row">
-        <div class="mat-header-cell">{{"labels.inputs.Group Details" | translate}}</div>
+        <div class="mat-header-cell">{{ 'labels.inputs.Group Details' | translate }}</div>
         <button mat-icon-button (click)="addGroup()">
           <fa-icon icon="plus"></fa-icon>
         </button>
       </div>
       <div class="mat-row">
-        <div class="mat-cell">{{"labels.inputs.name" | translate}}</div>
-        <div class="mat-cell">{{groupChoice.value.name}}</div>
+        <div class="mat-cell">{{ 'labels.inputs.name' | translate }}</div>
+        <div class="mat-cell">{{ groupChoice.value.name }}</div>
       </div>
       <div class="mat-row">
-        <div class="mat-cell">{{"labels.inputs.Id" | translate}}</div>
-        <div class="mat-cell">{{groupChoice.value.id}}</div>
+        <div class="mat-cell">{{ 'labels.inputs.Id' | translate }}</div>
+        <div class="mat-cell">{{ groupChoice.value.id }}</div>
       </div>
       <div class="mat-row">
-        <div class="mat-cell">{{"labels.inputs.Office" | translate}}</div>
-        <div class="mat-cell">{{groupChoice.value.officeName}}</div>
+        <div class="mat-cell">{{ 'labels.inputs.Office' | translate }}</div>
+        <div class="mat-cell">{{ groupChoice.value.officeName }}</div>
       </div>
     </div>
-
   </mat-card>
 
   <mat-card fxFlex="40%">
+    <h3 matSubheader>{{ 'labels.heading.Group Members' | translate }}</h3>
 
-    <h3 matSubheader>{{"labels.heading.Group Members" | translate}}</h3>
-
-    <mat-nav-list  *ngIf="groupMembers?.length">
-      <div mat-list-item *ngFor="let group of groupMembers index as i">
-        <span matLine class="p-t-10">{{group.name}}</span>
+    <mat-nav-list *ngIf="groupMembers?.length">
+      <div mat-list-item *ngFor="let group of groupMembers; index as i">
+        <span matLine class="p-t-10">{{ group.name }}</span>
         <div fxFlex></div>
         <button mat-icon-button color="warn" (click)="removeGroup(i, group)">
           <fa-icon icon="trash"></fa-icon>
         </button>
       </div>
     </mat-nav-list>
-
   </mat-card>
-
 </div>

src/app/centers/centers-view/center-actions/staff-assignment-history/staff-assignment-history.component.html

@@ -1,11 +1,9 @@
 <mat-card class="container">
-
   <div class="back-button">
     <button type="button" color="primary" mat-raised-button [routerLink]="['../../']">
-      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>{{"labels.buttons.Back" | translate}}
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>{{ 'labels.buttons.Back' | translate }}
     </button>
   </div>
 
-  <iframe [src]="pentahoUrl" frameborder="0" width=100% height="600px;"></iframe>
-
+  <iframe [src]="pentahoUrl" frameborder="0" width="100%" height="600px;"></iframe>
 </mat-card>