build: Use prettier for html

Stop ignoring html files in prettier and fix existing issues.

.github/ISSUE_TEMPLATE/user-story-template.md

@@ -20,7 +20,7 @@ As DevOps I want Health liveness Probe on the microservice so that the health of
 **Acceptance Criteria:**
 
 - [ ] [LIST ITEMS]  
-      i.e.
+       i.e.
 
 - [ ] Negative use-cases for Unit Tests in the "common streaming library"
 - [ ] Integration tests in the "common streaming library"

.prettierignore

@@ -1,7 +1,6 @@
 /dist
 /node_modules
 **/.git
-*.html
 *.js
 *.json
 *.ts

src/app/account-transfers/create-standing-instructions/create-standing-instructions.component.html

@@ -1,244 +1,282 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="createStandingInstructionsForm">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.name" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
-            <input matInput required formControlName="name">
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="createStandingInstructionsForm.controls.name.hasError('required')">
-              {{"labels.inputs.name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.inputs.required" | translate}}</strong>
+              {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.inputs.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Applicant" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Applicant' | translate }}</mat-label>
-            <input matInput formControlName="applicant">
+            <input matInput formControlName="applicant" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
             <mat-select required formControlName="transferType" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let transferType of transferTypeData" [value]="transferType.id">
                 {{ transferType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.transferType.hasError('required')">
-              {{"labels.inputs.Transfer Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.inputs.required" | translate}}</strong>
+              {{ 'labels.inputs.Transfer Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.inputs.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{  "labels.inputs.Priority" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Priority' | translate }}</mat-label>
             <mat-select required formControlName="priority">
               <mat-option *ngFor="let priorityType of priorityTypeData" [value]="priorityType.id">
                 {{ priorityType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.priority.hasError('required')">
-              {{"labels.inputs.Priority" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Priority' | 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.Status" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
             <mat-select required formControlName="status">
               <mat-option *ngFor="let statusType of statusTypeData" [value]="statusType.id">
                 {{ statusType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.status.hasError('required')">
-              {{"labels.inputs.Status" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Status' | 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.From Account Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.From Account Type' | translate }}</mat-label>
             <mat-select required formControlName="fromAccountType" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let fromAccountType of fromAccountTypeData" [value]="fromAccountType.id">
                 {{ fromAccountType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.fromAccountType.hasError('required')">
-              {{"labels.inputs.From Account Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.From Account Type' | 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.From Account" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.From Account' | translate }}</mat-label>
             <mat-select required formControlName="fromAccountId" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let fromAccount of fromAccountData" [value]="fromAccount.id">
                 {{ fromAccount.productName }} - {{ fromAccount.accountNo }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.fromAccountId.hasError('required')">
-              {{"labels.inputs.From Account" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.From Account' | 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.Destination" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Destination' | translate }}</mat-label>
             <mat-select required formControlName="destination">
               <mat-option *ngFor="let destinationType of destinationTypeData" [value]="destinationType.id">
                 {{ destinationType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.destination.hasError('required')">
-              {{"labels.inputs.Destination" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Destination' | 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.To Office" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.To Office' | translate }}</mat-label>
             <mat-select [disabled]="ToOfficeId" required formControlName="toOfficeId" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toOfficeType of toOfficeTypeData" [value]="toOfficeType.id">
                 {{ toOfficeType.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.toOfficeId.hasError('required')">
-              {{"labels.inputs.To Office" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.To Office' | 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.Beneficiary" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Beneficiary' | translate }}</mat-label>
             <mat-select [disabled]="ToClientId" required formControlName="toClientId" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toClientType of toClientTypeData" [value]="toClientType.id">
                 {{ toClientType.displayName }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.toClientId.hasError('required')">
-              {{"labels.inputs.Beneficiary" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Beneficiary' | 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.To Account Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.To Account Type' | translate }}</mat-label>
             <mat-select required formControlName="toAccountType" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toAccountType of toAccountTypeData" [value]="toAccountType.id">
                 {{ toAccountType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.toAccountType.hasError('required')">
-              {{"labels.inputs.To Account Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.To Account Type' | 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.To Account" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.To Account' | translate }}</mat-label>
             <mat-select required formControlName="toAccountId" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toAccount of toAccountData" [value]="toAccount.id">
                 {{ toAccount.productName }} - {{ toAccount.accountNo }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.toAccountId.hasError('required')">
-              {{"labels.inputs.To Account" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.To Account' | 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.Standing Instruction Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Standing Instruction Type' | translate }}</mat-label>
             <mat-select formControlName="instructionType">
               <mat-option *ngFor="let instructionsType of instructionTypeData" [value]="instructionsType.id">
                 {{ instructionsType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.instructionType.hasError('required')">
-              {{"labels.inputs.Standing Instruction Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Standing Instruction Type' | 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.Amount" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
-            <input type="number" matInput required formControlName="amount">
+            <input type="number" matInput required formControlName="amount" />
             <mat-error *ngIf="createStandingInstructionsForm.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 fxFlex="48%" (click)="validFromDatePicker.open()">
-            <mat-label>{{"labels.inputs.Validity from" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Validity from' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="validFromDatePicker" required
+            <input
-              formControlName="validFrom">
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="validFromDatePicker"
+              required
+              formControlName="validFrom"
+            />
             <mat-datepicker-toggle matSuffix [for]="validFromDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #validFromDatePicker></mat-datepicker>
             <mat-error *ngIf="createStandingInstructionsForm.controls.validFrom.hasError('required')">
-              {{"labels.inputs.Valid From Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Valid From Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%"  (click)="validTillDatePicker.open()">
+          <mat-form-field fxFlex="48%" (click)="validTillDatePicker.open()">
-            <mat-label>{{"labels.inputs.Validity To" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Validity To' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="validTillDatePicker" required
+            <input
-              formControlName="validTill">
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="validTillDatePicker"
+              required
+              formControlName="validTill"
+            />
             <mat-datepicker-toggle matSuffix [for]="validTillDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #validTillDatePicker></mat-datepicker>
             <mat-error *ngIf="createStandingInstructionsForm.controls.validTill.hasError('required')">
-              {{"labels.inputs.Valid Till Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Valid Till 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.Recurrence Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Recurrence Type' | translate }}</mat-label>
             <mat-select required formControlName="recurrenceType">
               <mat-option *ngFor="let recurrenceType of recurrenceTypeData" [value]="recurrenceType.id">
                 {{ recurrenceType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.recurrenceType.hasError('required')">
-              {{"labels.inputs.Recurrence Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Recurrence Type' | 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.Interval" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Interval' | translate }}</mat-label>
-            <input type="number" matInput required formControlName="recurrenceInterval">
+            <input type="number" matInput required formControlName="recurrenceInterval" />
             <mat-error *ngIf="createStandingInstructionsForm.controls.recurrenceInterval.hasError('required')">
-              {{"labels.inputs.Recurrence Interval" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Recurrence Interval' | 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.Recurrence Frequency" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Recurrence Frequency' | translate }}</mat-label>
             <mat-select required formControlName="recurrenceFrequency">
-              <mat-option *ngFor="let recurrenceFrequencyType of recurrenceFrequencyTypeData"
+              <mat-option
-                [value]="recurrenceFrequencyType.id">
+                *ngFor="let recurrenceFrequencyType of recurrenceFrequencyTypeData"
+                [value]="recurrenceFrequencyType.id"
+              >
                 {{ recurrenceFrequencyType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.recurrenceFrequency.hasError('required')">
-              {{"labels.inputs.Recurrence Frequency" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Recurrence Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%"  (click)="recurrenceOnMonthDayDatePicker.open()">
+          <mat-form-field fxFlex="48%" (click)="recurrenceOnMonthDayDatePicker.open()">
-            <mat-label>{{"labels.inputs.On Month Day" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.On Month Day' | translate }}</mat-label>
-            <input required matInput [min]="minDate" [max]="maxDate" [matDatepicker]="recurrenceOnMonthDayDatePicker"
+            <input
-              formControlName="recurrenceOnMonthDay">
+              required
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="recurrenceOnMonthDayDatePicker"
+              formControlName="recurrenceOnMonthDay"
+            />
             <mat-datepicker-toggle matSuffix [for]="recurrenceOnMonthDayDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #recurrenceOnMonthDayDatePicker></mat-datepicker>
             <mat-error *ngIf="createStandingInstructionsForm.controls.recurrenceOnMonthDay.hasError('required')">
-              {{"labels.inputs.On Month Day" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.On Month Day' | 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]="['../']">
-        <button mat-raised-button color="primary" [disabled]="!createStandingInstructionsForm.valid" *mifosxHasPermission="'CREATE_STANDINGINSTRUCTION'"
+          {{ 'labels.buttons.Cancel' | translate }}
-          (click)="submit()">{{"labels.buttons.Submit" | translate}}</button>
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!createStandingInstructionsForm.valid"
+          *mifosxHasPermission="'CREATE_STANDINGINSTRUCTION'"
+          (click)="submit()"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/account-transfers/edit-standing-instructions/edit-standing-instructions.component.html

@@ -1,171 +1,193 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="editStandingInstructionsForm">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.name" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
-            <input matInput formControlName="name">
+            <input matInput formControlName="name" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Applicant" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Applicant' | translate }}</mat-label>
-            <input matInput formControlName="applicant">
+            <input matInput formControlName="applicant" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
-            <input matInput formControlName="type">
+            <input matInput formControlName="type" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.From Account Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.From Account Type' | translate }}</mat-label>
-            <input matInput formControlName="fromAccountType">
+            <input matInput formControlName="fromAccountType" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Priority" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Priority' | translate }}</mat-label>
             <mat-select required formControlName="priority">
               <mat-option *ngFor="let priorityType of priorityTypeData" [value]="priorityType.id">
                 {{ priorityType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="editStandingInstructionsForm.controls.priority.hasError('required')">
-              {{"labels.inputs.Priority" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Priority' | 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.Status" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
             <mat-select required formControlName="status">
               <mat-option *ngFor="let statusType of statusTypeData" [value]="statusType.id">
                 {{ statusType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="editStandingInstructionsForm.controls.status.hasError('required')">
-              {{"labels.inputs.Status" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Status' | 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.From Account" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.From Account' | translate }}</mat-label>
-            <input matInput formControlName="fromAccount">
+            <input matInput formControlName="fromAccount" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Destination" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Destination' | translate }}</mat-label>
-            <input matInput formControlName="destination">
+            <input matInput formControlName="destination" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.To Office" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.To Office' | translate }}</mat-label>
-            <input matInput formControlName="toOffice">
+            <input matInput formControlName="toOffice" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Beneficiary" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Beneficiary' | translate }}</mat-label>
-            <input matInput formControlName="toClientId">
+            <input matInput formControlName="toClientId" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.To Account Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.To Account Type' | translate }}</mat-label>
-            <input matInput formControlName="toAccountType">
+            <input matInput formControlName="toAccountType" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.To Account" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.To Account' | translate }}</mat-label>
-            <input matInput formControlName="toAccount">
+            <input matInput formControlName="toAccount" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Standing Instruction Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Standing Instruction Type' | translate }}</mat-label>
             <mat-select formControlName="instructionType">
-              <mat-option *ngFor="let instructionsType of instructionTypeData"
+              <mat-option *ngFor="let instructionsType of instructionTypeData" [value]="instructionsType.id">
-                [value]="instructionsType.id">
                 {{ instructionsType.value }}
               </mat-option>
             </mat-select>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Amount" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
-            <input matInput formControlName="amount">
+            <input matInput formControlName="amount" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="validFromDatePicker.open()">
-            <mat-label>{{"labels.inputs.Validity from" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Validity from' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="validFromDatePicker" required
+            <input
-              formControlName="validFrom">
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="validFromDatePicker"
+              required
+              formControlName="validFrom"
+            />
             <mat-datepicker-toggle matSuffix [for]="validFromDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #validFromDatePicker></mat-datepicker>
             <mat-error *ngIf="editStandingInstructionsForm.controls.validFrom.hasError('required')">
-              {{"labels.inputs.Valid From Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Valid From Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="validTillDatePicker.open()">
-            <mat-label>{{"labels.inputs.Validity To" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Validity To' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="validTillDatePicker" required
+            <input
-              formControlName="validTill">
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="validTillDatePicker"
+              required
+              formControlName="validTill"
+            />
             <mat-datepicker-toggle matSuffix [for]="validTillDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #validTillDatePicker></mat-datepicker>
             <mat-error *ngIf="editStandingInstructionsForm.controls.validTill.hasError('required')">
-              {{"labels.inputs.Valid Till Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Valid Till 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.Recurrence Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Recurrence Type' | translate }}</mat-label>
             <mat-select required formControlName="recurrenceType">
               <mat-option *ngFor="let recurrenceType of recurrenceTypeData" [value]="recurrenceType.id">
                 {{ recurrenceType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="editStandingInstructionsForm.controls.recurrenceType.hasError('required')">
-              {{"labels.inputs.Recurrence Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Recurrence Type' | 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.Interval" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Interval' | translate }}</mat-label>
-            <input matInput formControlName="recurrenceInterval">
+            <input matInput formControlName="recurrenceInterval" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Recurrence Frequency" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Recurrence Frequency' | translate }}</mat-label>
             <mat-select formControlName="recurrenceFrequency">
-              <mat-option *ngFor="let recurrenceFrequencyType of recurrenceFrequencyTypeData"
+              <mat-option
-                [value]="recurrenceFrequencyType.id">
+                *ngFor="let recurrenceFrequencyType of recurrenceFrequencyTypeData"
+                [value]="recurrenceFrequencyType.id"
+              >
                 {{ recurrenceFrequencyType.value }}
               </mat-option>
             </mat-select>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="recurrenceOnMonthDayDatePicker.open()">
-            <mat-label>{{"labels.inputs.On Month Day" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.On Month Day' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="recurrenceOnMonthDayDatePicker"
+            <input
-              formControlName="recurrenceOnMonthDay">
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="recurrenceOnMonthDayDatePicker"
+              formControlName="recurrenceOnMonthDay"
+            />
             <mat-datepicker-toggle matSuffix [for]="recurrenceOnMonthDayDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #recurrenceOnMonthDayDatePicker></mat-datepicker>
           </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]="['../view']">{{"labels.buttons.Cancel" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../view']">
-        <button mat-raised-button color="primary" [disabled]="!editStandingInstructionsForm.valid"
+          {{ 'labels.buttons.Cancel' | translate }}
-        (click)="submit()" *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'">{{"labels.buttons.Submit" | translate}}</button>
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!editStandingInstructionsForm.valid"
+          (click)="submit()"
+          *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/account-transfers/list-standing-instructions/list-standing-instructions.component.html

@@ -1,10 +1,8 @@
 <mat-card class="container">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <div fxFlexFill *ngIf="isFromClient">
       <span fxFlex="40%">
-        <h3 class="mat-h3">{{"labels.heading.Client Type" | translate}}</h3>
+        <h3 class="mat-h3">{{ 'labels.heading.Client Type' | translate }}</h3>
       </span>
       <span fxFlex="60%">
         <h3 class="mat-h3">{{ clientName }}</h3>
@@ -13,17 +11,17 @@
 
     <div fxFlexFill *ngIf="!isFromClient">
       <mat-form-field fxFlex="30%">
-        <input matInput placeholder="ClientName" [formControl]="clientNameControl">
+        <input matInput placeholder="ClientName" [formControl]="clientNameControl" />
       </mat-form-field>
       <mat-form-field fxFlex="30%">
-        <input matInput placeholder="From Client Id" [formControl]="fromClientId">
+        <input matInput placeholder="From Client Id" [formControl]="fromClientId" />
       </mat-form-field>
     </div>
 
     <mat-divider [inset]="true"></mat-divider>
 
     <mat-form-field fxFlex="30%">
-      <mat-label>{{"labels.inputs.Type" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select [formControl]="transferType">
         <mat-option *ngFor="let transferTypeData of transferTypeDatas" [value]="transferTypeData.id">
           {{ transferTypeData.value }}
@@ -32,80 +30,102 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="30%">
-      <input matInput placeholder="From Account Id" [formControl]="fromAccountId">
+      <input matInput placeholder="From Account Id" [formControl]="fromAccountId" />
     </mat-form-field>
 
-    <button mat-raised-button color="primary" *mifosxHasPermission="'READ_STANDINGINSTRUCTION'" (click)="filterStandingInstructions()" class="filter-button">
+    <button
-      &nbsp;&nbsp;{{  "labels.buttons.Filter" | translate}}
+      mat-raised-button
+      color="primary"
+      *mifosxHasPermission="'READ_STANDINGINSTRUCTION'"
+      (click)="filterStandingInstructions()"
+      class="filter-button"
+    >
+      &nbsp;&nbsp;{{ 'labels.buttons.Filter' | translate }}
     </button>
   </div>
 
-
   <table mat-table #instructionsTable [dataSource]="dataSource">
-
     <ng-container matColumnDef="client">
-      <th mat-header-cell *matHeaderCellDef> {{  "labels.inputs.Client" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client' | translate }}</th>
-      <td mat-cell *matCellDef="let instruction">{{instruction.fromClient.displayName}}-{{instruction.fromClient.id}}
+      <td mat-cell *matCellDef="let instruction">
+        {{ instruction.fromClient.displayName }}-{{ instruction.fromClient.id }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="fromAccount">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.From Account" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.From Account' | translate }}</th>
-      <td mat-cell *matCellDef="let instruction">{{instruction.fromAccount.accountNo}}
+      <td mat-cell *matCellDef="let instruction">
-        ({{instruction.fromAccountType.value}})</td>
+        {{ instruction.fromAccount.accountNo }} ({{ instruction.fromAccountType.value }})
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="beneficiary">
-      <th mat-header-cell *matHeaderCellDef>{{"labels.inputs.Beneficiary" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Beneficiary' | translate }}</th>
-      <td mat-cell *matCellDef="let instruction">{{instruction.toClient.displayName}}</td>
+      <td mat-cell *matCellDef="let instruction">{{ instruction.toClient.displayName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="toAccount">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.To Account" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.To Account' | translate }}</th>
-      <td mat-cell *matCellDef="let instruction">{{instruction.toAccount.accountNo}}
+      <td mat-cell *matCellDef="let instruction">
-        ({{instruction.toAccountType.value}})</td>
+        {{ instruction.toAccount.accountNo }} ({{ instruction.toAccountType.value }})
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="amount">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
-      <td mat-cell *matCellDef="let instruction">{{instruction.instructionType.value}}/{{instruction.amount}}</td>
+      <td mat-cell *matCellDef="let instruction">{{ instruction.instructionType.value }}/{{ instruction.amount }}</td>
     </ng-container>
 
     <ng-container matColumnDef="validity">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Validity" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Validity' | translate }}</th>
-      <td mat-cell *matCellDef="let instruction">{{instruction.validFrom | dateFormat}} to {{instruction.validTill | dateFormat}}
+      <td mat-cell *matCellDef="let instruction">
+        {{ instruction.validFrom | dateFormat }} to {{ instruction.validTill | dateFormat }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef> {{  "labels.inputs.Actions" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
       <td mat-cell *matCellDef="let instruction">
-        <span *ngIf="instruction.status.value!=='Deleted'">
+        <span *ngIf="instruction.status.value !== 'Deleted'">
-          <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Edit Standing Instruction' | translate}}"
+          <button
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+            matTooltip="{{ 'tooltips.Edit Standing Instruction' | translate }}"
             *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'"
-            [routerLink]="['../', instruction.id, 'edit']">
+            [routerLink]="['../', instruction.id, 'edit']"
+          >
             <i class="fa fa-edit"></i>
           </button>
         </span>
-        <span *ngIf="instruction.status.value!=='Deleted'">
+        <span *ngIf="instruction.status.value !== 'Deleted'">
-          <button class="account-action-button" mat-raised-button color="warn" matTooltip="{{ 'tooltips.Delete Standing Instruction' | translate}}"
+          <button
-            *mifosxHasPermission="'DELETE_STANDINGINSTRUCTION'" (click)="deleteStandingInstruction(instruction.id)">
+            class="account-action-button"
+            mat-raised-button
+            color="warn"
+            matTooltip="{{ 'tooltips.Delete Standing Instruction' | translate }}"
+            *mifosxHasPermission="'DELETE_STANDINGINSTRUCTION'"
+            (click)="deleteStandingInstruction(instruction.id)"
+          >
             <i class="fa fa-times"></i>
           </button>
         </span>
-        <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.View Standing Instruction' | translate}}"
+        <button
+          class="account-action-button"
+          mat-raised-button
+          color="primary"
+          matTooltip="{{ 'tooltips.View Standing Instruction' | translate }}"
           *mifosxHasPermission="'READ_STANDINGINSTRUCTION'"
-          [routerLink]="['../', instruction.id, 'view']">
+          [routerLink]="['../', instruction.id, 'view']"
+        >
           <i class="fa fa-eye"></i>
         </button>
       </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-
   </table>
 
   <mat-paginator [pageSize]="10" [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
 </mat-card>

src/app/account-transfers/list-transactions/list-transactions.component.html

@@ -1,13 +1,9 @@
 <div class="container m-b-20">
-
   <mat-card class="mat-elevation-z8">
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-          {{"labels.inputs.From Account" | translate}}
+          {{ 'labels.inputs.From Account' | translate }}
         </div>
 
         <div fxFlex="25%" fxFlex.lt-md="50%">
@@ -15,7 +11,7 @@
         </div>
 
         <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-          {{"labels.inputs.To Account" | translate}}
+          {{ 'labels.inputs.To Account' | translate }}
         </div>
 
         <div fxFlex="25%" fxFlex.lt-md="50%">
@@ -23,51 +19,42 @@
         </div>
 
         <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-          {{"labels.inputs.Destination" | translate}}
+          {{ 'labels.inputs.Destination' | translate }}
         </div>
 
         <div fxFlex="25%" fxFlex.lt-md="50%">
           {{ listTransactionData.toClient.displayName }}
         </div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
 
 <div class="mat-elevation-z8 container">
-
   <table mat-table [dataSource]="dataSource">
-
     <ng-container matColumnDef="transactionDate">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Date | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{"labels.inputs.Transaction Date | translate}}</th>
-      <td mat-cell *matCellDef="let transaction"> {{ transaction.transferDate | dateFormat }} </td>
+      <td mat-cell *matCellDef="let transaction">{{ transaction.transferDate | dateFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="amount">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
-      <td mat-cell *matCellDef="let transaction"> {{ transaction.transferAmount }} </td>
+      <td mat-cell *matCellDef="let transaction">{{ transaction.transferAmount }}</td>
     </ng-container>
 
     <ng-container matColumnDef="notes">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Notes | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{"labels.inputs.Notes | translate}}</th>
-      <td mat-cell *matCellDef="let transaction"> {{ transaction.transferDescription }} </td>
+      <td mat-cell *matCellDef="let transaction">{{ transaction.transferDescription }}</td>
     </ng-container>
 
     <ng-container matColumnDef="reversed">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Reversed" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Reversed' | translate }}</th>
-      <td mat-cell *matCellDef="let transaction"> {{ transaction.reversed | yesNo}}</td>
+      <td mat-cell *matCellDef="let transaction">{{ transaction.reversed | yesNo }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;">
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-    </tr>
-
   </table>
 
   <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
 </div>

src/app/account-transfers/make-account-transfers/make-account-transfers.component.html

@@ -1,79 +1,84 @@
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" fxLayout.lt-md="column">
-
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Transferring From Details' | translate }}</h3>
-        <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Transferring From Details" | translate}}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Applicant" | translate}}</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Applicant' | translate }}</span>
           <span fxFlex="60%">{{ accountTransferTemplateData.fromClient.displayName }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Office" | translate}}</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Office' | translate }}</span>
           <span fxFlex="60%">{{ accountTransferTemplateData.fromOffice.name }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.From Account" | translate}}</span>
+          <span fxFlex="40%">{{ 'labels.inputs.From Account' | translate }}</span>
-          <span fxFlex="60%">{{ accountTransferTemplateData.fromAccount.productName}}&nbsp;-&nbsp;#{{
+          <span fxFlex="60%"
-            accountTransferTemplateData.fromAccount.accountNo }}</span>
+            >{{ accountTransferTemplateData.fromAccount.productName }}&nbsp;-&nbsp;#{{
+              accountTransferTemplateData.fromAccount.accountNo
+            }}</span
+          >
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.From Account Type" | translate}}</span>
+          <span fxFlex="40%">{{ 'labels.inputs.From Account Type' | translate }}</span>
           <span fxFlex="60%">{{ accountTransferTemplateData.fromAccountType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Currency" | translate}}</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Currency' | translate }}</span>
           <span fxFlex="60%">{{ accountTransferTemplateData.currency.name }}</span>
         </div>
-
       </div>
 
-      <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Transferred To" | translate}}</h3>
+      <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Transferred To' | translate }}</h3>
 
       <mat-divider [inset]="true"></mat-divider>
 
       <form [formGroup]="makeAccountTransferForm">
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="98%" (click)="transferDatePicker.open()">
-            <mat-label>{{"labels.inputs.Transaction Date" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transferDatePicker" required
+            <input
-              formControlName="transferDate">
+              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="makeAccountTransferForm.controls.transferDate.hasError('required')">
-              {{"labels.inputs.Transaction Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="toOfficeId" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toOfficeType of toOfficeTypeData" [value]="toOfficeType.id">
                 {{ toOfficeType.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="makeAccountTransferForm.controls.toOfficeId.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 fxFlex="98%">
-            <mat-label>{{"labels.inputs.Client" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Client' | translate }}</mat-label>
-            <input matInput formControlName="toClientId" [matAutocomplete]="clientsAutocomplete">
+            <input matInput formControlName="toClientId" [matAutocomplete]="clientsAutocomplete" />
             <mat-error *ngIf="makeAccountTransferForm.controls.toClientId.hasError('required')">
-              {{"labels.inputs.Client" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Client' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -84,59 +89,70 @@
           </mat-autocomplete>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>{{"labels.inputs.Account Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
             <mat-select required formControlName="toAccountType" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toAccountType of toAccountTypeData" [value]="toAccountType.id">
                 {{ toAccountType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="makeAccountTransferForm.controls.toAccountType.hasError('required')">
-              {{"labels.inputs.Account Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Account Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>{{"labels.inputs.Account" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account' | translate }}</mat-label>
             <mat-select required formControlName="toAccountId" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toAccount of toAccountData" [value]="toAccount.id">
                 {{ toAccount.productName }} - {{ toAccount.accountNo }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="makeAccountTransferForm.controls.toAccountId.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>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>{{"labels.inputs.Amount" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
-            <input type="number" matInput required formControlName="transferAmount">
+            <input type="number" matInput required formControlName="transferAmount" />
             <mat-error *ngIf="makeAccountTransferForm.controls.transferAmount.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 fxFlex="98%">
-            <mat-label>{{"labels.inputs.Description" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
-            <textarea matInput formControlName="transferDescription" cdkTextareaAutosize
+            <textarea
-              cdkAutosizeMinRows="2"></textarea>
+              matInput
+              formControlName="transferDescription"
+              cdkTextareaAutosize
+              cdkAutosizeMinRows="2"
+            ></textarea>
             <mat-error *ngIf="makeAccountTransferForm.controls.transferDescription.hasError('required')">
-              {{"labels.inputs.Transfer Description" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Transfer Description' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
-
           </mat-form-field>
-
         </div>
-
       </form>
-
     </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]="['../..']">
-      <button mat-raised-button color="primary" [disabled]="!makeAccountTransferForm.valid"
+        {{ 'labels.buttons.Cancel' | translate }}
-        *mifosxHasPermission="'CREATE_ACCOUNTTRANSFER'" (click)="submit()">{{"labels.buttons.Submit" | translate}}</button>
+      </button>
+      <button
+        mat-raised-button
+        color="primary"
+        [disabled]="!makeAccountTransferForm.valid"
+        *mifosxHasPermission="'CREATE_ACCOUNTTRANSFER'"
+        (click)="submit()"
+      >
+        {{ 'labels.buttons.Submit' | translate }}
+      </button>
     </mat-card-actions>
-
   </mat-card>
-
 </div>

src/app/account-transfers/view-account-transfer/view-account-transfer.component.html

@@ -1,97 +1,103 @@
 <div class="container">
   <div fxLayoutAlign="end" class="container m-b-20" fxLayoutGap="2%">
     <span *ngIf="!viewAccountTransferData.reversed">
-      <button mat-raised-button color="warn" *mifosxHasPermission="'ADJUST_ACCOUNTTRANSFER'" >
+      <button mat-raised-button color="warn" *mifosxHasPermission="'ADJUST_ACCOUNTTRANSFER'">
-        <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Undo' | translate}}
+        <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Undo' | translate }}
       </button>
     </span>
   </div>
 
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" fxLayout.lt-md="column">
         <div fxFlex="100%" [ngClass]="transactionColor()"></div>
 
-        <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Transaction Details" | translate}}</h3>
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Transaction Details' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Transaction Amount" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Transaction Amount' | translate }}:</span>
-          <span fxFlex="60%">{{ viewAccountTransferData.currency.displaySymbol }} {{ viewAccountTransferData.transferAmount | formatNumber }} ({{ viewAccountTransferData.currency.code }})</span>
+          <span fxFlex="60%"
+            >{{ viewAccountTransferData.currency.displaySymbol }}
+            {{ viewAccountTransferData.transferAmount | formatNumber }} ({{
+              viewAccountTransferData.currency.code
+            }})</span
+          >
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Transaction Date" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Transaction Date' | translate }}:</span>
           <span fxFlex="60%">{{ viewAccountTransferData.transferDate | dateFormat }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Destination" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Destination' | translate }}:</span>
           <span fxFlex="60%">{{ viewAccountTransferData.transferDescription }}</span>
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Transferred From" | translate}}</h3>
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Transferred From' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Office" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Office' | translate }}:</span>
           <span fxFlex="60%">{{ viewAccountTransferData.fromOffice.name }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Client" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Client' | translate }}:</span>
           <span fxFlex="60%">{{ viewAccountTransferData.fromClient.displayName }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{  "labels.inputs.Account Type" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Account Type' | translate }}:</span>
           <span fxFlex="60%">{{ viewAccountTransferData.fromAccountType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{  "labels.inputs.Account No" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Account No' | translate }}:</span>
           <span fxFlex="60%">{{ viewAccountTransferData.fromAccount.accountNo }}</span>
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Transferred To" | translate}}</h3>
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Transferred To' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Office" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Office' | translate }}:</span>
           <span fxFlex="60%">{{ viewAccountTransferData.toOffice.name }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Client" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Client' | translate }}:</span>
-          <span fxFlex="60%"><a [href]="transferToClient(viewAccountTransferData.toClient)">
+          <span fxFlex="60%"
-            {{ viewAccountTransferData.toClient.displayName }}</a>
+            ><a [href]="transferToClient(viewAccountTransferData.toClient)">
+              {{ viewAccountTransferData.toClient.displayName }}</a
+            >
           </span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{  "labels.inputs.Account Type" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Account Type' | translate }}:</span>
           <span fxFlex="60%">{{ viewAccountTransferData.toAccountType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{  "labels.inputs.Account No" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Account No' | translate }}:</span>
-          <span fxFlex="60%"><a [href]="transferToAccount(viewAccountTransferData.toClient, viewAccountTransferData.toAccount)">
+          <span fxFlex="60%"
-            {{ viewAccountTransferData.toAccount.accountNo }}</a>
+            ><a [href]="transferToAccount(viewAccountTransferData.toClient, viewAccountTransferData.toAccount)">
+              {{ viewAccountTransferData.toAccount.accountNo }}</a
+            >
           </span>
         </div>
-
       </div>
-
     </mat-card-content>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" color="primary" mat-raised-button (click)="goBack()">{{  "labels.buttons.Back" | translate}}</button>
+      <button type="button" color="primary" mat-raised-button (click)="goBack()">
+        {{ 'labels.buttons.Back' | translate }}
+      </button>
     </mat-card-actions>
   </mat-card>
-
 </div>

src/app/account-transfers/view-standing-instructions/view-standing-instructions.component.html

@@ -1,122 +1,128 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['../', 'edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-   {{"labels.buttons.Edit" | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
-  <button mat-raised-button color="primary" [routerLink]="['../', 'list-account-transactions']" *mifosxHasPermission="'READ_ACCOUNTTRANSFER'">
+  <button
-    {{"labels.buttons.View Transactions History" | translate}}
+    mat-raised-button
+    color="primary"
+    [routerLink]="['../', 'list-account-transactions']"
+    *mifosxHasPermission="'READ_ACCOUNTTRANSFER'"
+  >
+    {{ 'labels.buttons.View Transactions History' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" fxLayout.lt-md="column">
-
         <h2 class="mat-h2" fxFlexFill>{{ standingInstructionsData.name }}</h2>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Applicant" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Applicant' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.fromClient.displayName }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Type" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Type' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.transferType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{  "labels.inputs.Priority" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Priority' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.priority.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{  "labels.inputs.Status" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Status' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.status.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.From Account Type" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.From Account Type' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.fromAccountType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.From Account" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.From Account' | translate }}:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.fromAccount.productName }} - {{ standingInstructionsData.fromAccount.accountNo }}</span>
+          <span fxFlex="60%"
+            >{{ standingInstructionsData.fromAccount.productName }} -
+            {{ standingInstructionsData.fromAccount.accountNo }}</span
+          >
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Destination" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Destination' | translate }}:</span>
           <span fxFlex="60%">
-            <span *ngIf="allowclientedit"> {{"labels.inputs.Within Bank" | translate}} </span>
+            <span *ngIf="allowclientedit"> {{ 'labels.inputs.Within Bank' | translate }} </span>
-            <span *ngIf="!allowclientedit"> {{"labels.inputs.Own Account" | translate}} </span>
+            <span *ngIf="!allowclientedit"> {{ 'labels.inputs.Own Account' | translate }} </span>
           </span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.To Office" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.To Office' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.toOffice.name }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Beneficiary" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Beneficiary' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.toClient.displayName }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.To Account Type" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.To Account Type' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.toAccountType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.To Account" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.To Account' | translate }}:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.toAccount.productName }} - {{standingInstructionsData.toAccount.accountNo}}</span>
+          <span fxFlex="60%"
+            >{{ standingInstructionsData.toAccount.productName }} -
+            {{ standingInstructionsData.toAccount.accountNo }}</span
+          >
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Standing Instruction Type" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Standing Instruction Type' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.instructionType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Amount" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Amount' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.amount }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Validity" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Validity' | translate }}:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.validFrom | dateFormat }} - {{ standingInstructionsData.validTill | dateFormat }}</span>
+          <span fxFlex="60%"
+            >{{ standingInstructionsData.validFrom | dateFormat }} -
+            {{ standingInstructionsData.validTill | dateFormat }}</span
+          >
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Recurrence Type" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Recurrence Type' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.recurrenceType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Interval" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Interval' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.recurrenceInterval }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Recurrence Frequency" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Recurrence Frequency' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.recurrenceFrequency.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.On Month Day" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.On Month Day' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.recurrenceOnMonthDay | dateFormat }}</span>
         </div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>

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

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

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

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

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

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

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

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

src/app/accounting/accounting.component.html

@@ -1,21 +1,20 @@
 <div class="container">
-
   <mat-card>
-
     <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
-
       <div fxFlex="50%">
-
         <mat-nav-list>
-
           <mat-list-item *mifosxHasPermission="'CREATE_JOURNALENTRY'">
             <mat-icon matListIcon [routerLink]="['journal-entries/frequent-postings']">
               <fa-icon icon="sync" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['journal-entries/frequent-postings']">{{"labels.heading.Frequent Postings" | translate}}</h4>
+            <h4 matLine [routerLink]="['journal-entries/frequent-postings']">
+              {{ 'labels.heading.Frequent Postings' | translate }}
+            </h4>
             <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['journal-entries/frequent-postings']">{{"labels.text.These are predefined postings" | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['journal-entries/frequent-postings']">
+              {{ 'labels.text.These are predefined postings' | translate }}
+            </p>
           </mat-list-item>
 
           <div #createJournalEntries>
@@ -23,10 +22,14 @@
               <mat-icon matListIcon [routerLink]="['journal-entries/create']">
                 <fa-icon icon="plus" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine [routerLink]="['journal-entries/create']">{{"labels.heading.Create Journal Entries" | translate}}</h4>
+              <h4 matLine [routerLink]="['journal-entries/create']">
+                {{ 'labels.heading.Create Journal Entries' | translate }}
+              </h4>
               <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['journal-entries/create']">{{"labels.text.Manual journal entry transactions recorded in a journal" | translate}}</p>
+              <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['journal-entries/create']">
+                {{ 'labels.text.Manual journal entry transactions recorded in a journal' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
@@ -34,10 +37,14 @@
             <mat-icon matListIcon [routerLink]="['journal-entries']">
               <fa-icon icon="search" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['journal-entries']">{{"labels.heading.Search Journal Entries" | translate}}</h4>
+            <h4 matLine [routerLink]="['journal-entries']">
+              {{ 'labels.heading.Search Journal Entries' | translate }}
+            </h4>
             <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="!arrowBooleans[2]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="arrowBooleans[2]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[2]" [routerLink]="['journal-entries']">{{"labels.text.Advanced search option for journal entries" | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[2]" [routerLink]="['journal-entries']">
+              {{ 'labels.text.Advanced search option for journal entries' | translate }}
+            </p>
           </mat-list-item>
 
           <div #accountsLinked>
@@ -45,54 +52,62 @@
               <mat-icon matListIcon [routerLink]="['financial-activity-mappings']">
                 <fa-icon icon="link" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine [routerLink]="['financial-activity-mappings']">{{"labels.heading.Accounts Linked to Financial Activities" | translate}}</h4>
+              <h4 matLine [routerLink]="['financial-activity-mappings']">
+                {{ 'labels.heading.Accounts Linked to Financial Activities' | translate }}
+              </h4>
               <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="!arrowBooleans[3]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="arrowBooleans[3]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[3]" [routerLink]="['financial-activity-mappings']">{{"labels.text.List of Financial Activities and GL Account Mappings" | translate}}</p>
+              <p matLine *ngIf="arrowBooleans[3]" [routerLink]="['financial-activity-mappings']">
+                {{ 'labels.text.List of Financial Activities and GL Account Mappings' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
           <div #migrateOpeningBalances>
-            <mat-list-item *mifosxHasPermission="'READ_JOURNALENTRY'" >
+            <mat-list-item *mifosxHasPermission="'READ_JOURNALENTRY'">
               <mat-icon matListIcon [routerLink]="['migrate-opening-balances']">
                 <fa-icon icon="hand-holding-usd" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine [routerLink]="['migrate-opening-balances']">{{"labels.heading.Migrate Opening Balances (Office-wise)" | translate}}</h4>
+              <h4 matLine [routerLink]="['migrate-opening-balances']">
+                {{ 'labels.heading.Migrate Opening Balances (Office-wise)' | translate }}
+              </h4>
               <fa-icon (click)="arrowBooleansToggle(4)" *ngIf="!arrowBooleans[4]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(4)" *ngIf="arrowBooleans[4]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[4]" [routerLink]="['migrate-opening-balances']">{{"labels.text.Set or update office-level opening balances for GL accounts" | translate}}</p>
+              <p matLine *ngIf="arrowBooleans[4]" [routerLink]="['migrate-opening-balances']">
+                {{ 'labels.text.Set or update office-level opening balances for GL accounts' | translate }}
+              </p>
             </mat-list-item>
           </div>
-
         </mat-nav-list>
-
       </div>
 
       <div fxFlex="50%">
-
         <mat-nav-list>
-
           <div #chartofAccounts>
             <mat-list-item *mifosxHasPermission="'READ_GLACCOUNT'">
               <mat-icon matListIcon [routerLink]="['chart-of-accounts']">
                 <fa-icon icon="sitemap" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine [routerLink]="['chart-of-accounts']">{{"labels.heading.Chart of Accounts" | translate}}</h4>
+              <h4 matLine [routerLink]="['chart-of-accounts']">{{ 'labels.heading.Chart of Accounts' | translate }}</h4>
               <fa-icon (click)="arrowBooleansToggle(5)" *ngIf="!arrowBooleans[5]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(5)" *ngIf="arrowBooleans[5]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[5]" [routerLink]="['chart-of-accounts']">{{"labels.text.List of accounts used by the organization" | translate}}</p>
+              <p matLine *ngIf="arrowBooleans[5]" [routerLink]="['chart-of-accounts']">
+                {{ 'labels.text.List of accounts used by the organization' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
           <div #closingEntries>
-            <mat-list-item *mifosxHasPermission="'READ_GLCLOSURE'" >
+            <mat-list-item *mifosxHasPermission="'READ_GLCLOSURE'">
               <mat-icon matListIcon [routerLink]="['closing-entries']">
                 <fa-icon icon="archive" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine [routerLink]="['closing-entries']">{{"labels.heading.Closing Entries" | translate}}</h4>
+              <h4 matLine [routerLink]="['closing-entries']">{{ 'labels.heading.Closing Entries' | translate }}</h4>
               <fa-icon (click)="arrowBooleansToggle(6)" *ngIf="!arrowBooleans[6]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(6)" *ngIf="arrowBooleans[6]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[6]" [routerLink]="['closing-entries']">{{"labels.text.Journal entries made at the end of accounting period" | translate}}</p>
+              <p matLine *ngIf="arrowBooleans[6]" [routerLink]="['closing-entries']">
+                {{ 'labels.text.Journal entries made at the end of accounting period' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
@@ -100,88 +115,121 @@
             <mat-icon matListIcon [routerLink]="['accounting-rules']">
               <fa-icon icon="list" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['accounting-rules']">{{"labels.heading.Accounting Rules" | translate}}</h4>
+            <h4 matLine [routerLink]="['accounting-rules']">{{ 'labels.heading.Accounting Rules' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="!arrowBooleans[7]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="arrowBooleans[7]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[7]" [routerLink]="['accounting-rules']">{{"labels.text.List of all accounting rules" | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[7]" [routerLink]="['accounting-rules']">
+              {{ 'labels.text.List of all accounting rules' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'EXECUTE_PERIODICACCRUALACCOUNTING'">
             <mat-icon matListIcon [routerLink]="['periodic-accruals']">
               <fa-icon icon="calendar" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['periodic-accruals']">{{"labels.heading.Accruals" | translate}}</h4>
+            <h4 matLine [routerLink]="['periodic-accruals']">{{ 'labels.heading.Accruals' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="!arrowBooleans[8]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="arrowBooleans[8]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[8]" [routerLink]="['periodic-accruals']">{{"labels.text.Accrues income, expenses and liabilities" | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[8]" [routerLink]="['periodic-accruals']">
+              {{ 'labels.text.Accrues income, expenses and liabilities' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'VIEW_PROVISIONING_ENTRIES'">
             <mat-icon matListIcon [routerLink]="['provisioning-entries']">
               <fa-icon icon="cogs" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['provisioning-entries']">{{"labels.heading.Provisioning Entries" | translate}}</h4>
+            <h4 matLine [routerLink]="['provisioning-entries']">
+              {{ 'labels.heading.Provisioning Entries' | translate }}
+            </h4>
             <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="!arrowBooleans[9]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="arrowBooleans[9]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[9]" [routerLink]="['provisioning-entries']">{{"labels.text.Create provisioning entries" | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[9]" [routerLink]="['provisioning-entries']">
+              {{ 'labels.text.Create provisioning entries' | translate }}
+            </p>
           </mat-list-item>
-
         </mat-nav-list>
-
       </div>
-
     </div>
-
   </mat-card>
-
 </div>
 
 <ng-template #templateChartofAccounts let-popover="popover">
-  <h2>{{"labels.heading.Chart of Accounts" | translate}}</h2>
+  <h2>{{ 'labels.heading.Chart of Accounts' | translate }}</h2>
-  <p class="mw300">{{"labels.text.The Chart of Accounts - General Ledger Setup" | translate}}</p>
+  <p class="mw300">{{ 'labels.text.The Chart of Accounts - General Ledger Setup' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepChartofAccounts()">{{"labels.buttons.Back" | translate}}</button>
+      {{ 'labels.buttons.Close' | translate }}
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepChartofAccounts()">{{"labels.buttons.Next" | translate}}</button>
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepChartofAccounts()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepChartofAccounts()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateAccountsLinked let-popover="popover">
-  <h2>{{"labels.heading.Accounts Linked to Financial Activities" | translate}}</h2>
+  <h2>{{ 'labels.heading.Accounts Linked to Financial Activities' | translate }}</h2>
-  <p class="mw400">{{"labels.text.Accounts linked to Financial Activities" | translate}}</p>
+  <p class="mw400">{{ 'labels.text.Accounts linked to Financial Activities' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepAccountsLinked()">{{"labels.buttons.Back" | translate}}</button>
+      {{ 'labels.buttons.Close' | translate }}
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepAccountsLinked()">{{"labels.buttons.Next" | translate}}</button>
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepAccountsLinked()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepAccountsLinked()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateMigrateOpeningBalances let-popover="popover">
-  <h2>{{"labels.heading.Migrate Opening Balances (Office-wise)" | translate}}</h2>
+  <h2>{{ 'labels.heading.Migrate Opening Balances (Office-wise)' | translate }}</h2>
-  <p class="mw400">{{"labels.text.GLAccount Balances Application" | translate}}</p>
+  <p class="mw400">{{ 'labels.text.GLAccount Balances Application' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepMigrateOpeningBalances()">{{"labels.buttons.Back" | translate}}</button>
+      {{ 'labels.buttons.Close' | translate }}
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepMigrateOpeningBalances()">{{"labels.buttons.Next" | translate}}</button>
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepMigrateOpeningBalances()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepMigrateOpeningBalances()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateClosingEntries let-popover="popover">
-  <h2>{{"labels.heading.Closing Entries" | translate}}</h2>
+  <h2>{{ 'labels.heading.Closing Entries' | translate }}</h2>
-  <p class="mw300">{{"labels.text.Accounting to journal entries" | translate}}</p>
+  <p class="mw300">{{ 'labels.text.Accounting to journal entries' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepClosingEntries()">{{"labels.buttons.Back" | translate}}</button>
+      {{ 'labels.buttons.Close' | translate }}
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepClosingEntries()">{{"labels.buttons.Next" | translate}}</button>
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepClosingEntries()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepClosingEntries()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateCreateJournalEntries let-popover="popover">
-  <h2>{{"labels.heading.Create Journal Entries" | translate}}</h2>
+  <h2>{{ 'labels.heading.Create Journal Entries' | translate }}</h2>
-  <p class="mw300">{{"labels.text.Journal Entries Transactions" | translate}}</p>
+  <p class="mw300">{{ 'labels.text.Journal Entries Transactions' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepCreateJournalEntries()">{{"labels.buttons.Back" | translate}}</button>
+      {{ 'labels.buttons.Close' | translate }}
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepCreateJournalEntries()">{{"labels.buttons.Next" | translate}}</button>
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepCreateJournalEntries()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepCreateJournalEntries()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>

src/app/accounting/chart-of-accounts/chart-of-accounts.component.html

@@ -10,9 +10,14 @@
     </mat-button-toggle-group>
   </div>
   <div #buttonAddAccount>
-    <button mat-raised-button color="primary" [routerLink]="['gl-accounts/create']" *mifosxHasPermission="'CREATE_GLACCOUNT'">
+    <button
+      mat-raised-button
+      color="primary"
+      [routerLink]="['gl-accounts/create']"
+      *mifosxHasPermission="'CREATE_GLACCOUNT'"
+    >
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Add Account" | translate}}
+      {{ 'labels.buttons.Add Account' | translate }}
     </button>
   </div>
 </div>
@@ -20,83 +25,100 @@
 <!-- List View -->
 
 <div class="container" [hidden]="viewGroup.value !== 'listView'">
-
   <div #filter fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div #accountsTable class="mat-elevation-z8">
-
     <table mat-table [dataSource]="tableDataSource" matSort>
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account' | translate }}</th>
-        <td mat-cell *matCellDef="let glAccount"> {{ glAccount.name }} </td>
+        <td mat-cell *matCellDef="let glAccount">{{ glAccount.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="glCode">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.GL Code" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.GL Code' | translate }}</th>
-        <td mat-cell *matCellDef="let glAccount"> {{ glAccount.glCode }} </td>
+        <td mat-cell *matCellDef="let glAccount">{{ glAccount.glCode }}</td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Type" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Type' | translate }}</th>
-        <td mat-cell *matCellDef="let glAccount"> {{ 'labels.inputs.accounting.' + glAccount.type.value | translate }} </td>
+        <td mat-cell *matCellDef="let glAccount">
+          {{ 'labels.inputs.accounting.' + glAccount.type.value | translate }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="disabled">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Disabled" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Disabled' | translate }}</th>
         <td mat-cell *matCellDef="let glAccount">
           <div [className]="glAccount.disabled === true ? 'disabled' : 'enabled'">
-            <fa-icon matTooltip="{{ glAccount.disabled === true ? 'Disabled' : 'Enabled' }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
+            <fa-icon
+              matTooltip="{{ glAccount.disabled === true ? 'Disabled' : 'Enabled' }}"
+              matTooltipPosition="right"
+              icon="circle"
+              size="lg"
+            ></fa-icon>
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="manualEntriesAllowed">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Manual Entries Allowed" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Manual Entries Allowed' | translate }}
+        </th>
         <td mat-cell *matCellDef="let glAccount">
-          <fa-icon *ngIf="glAccount.manualEntriesAllowed" class="manual-entries-allowed" matTooltip="{{ 'tooltips.Allowed' | translate}}" matTooltipPosition="right" icon="check-circle" size="lg"></fa-icon>
+          <fa-icon
-          <fa-icon *ngIf="!glAccount.manualEntriesAllowed" class="manual-entries-not-allowed" matTooltip="{{ 'tooltips.' | translate}}" matTooltipPosition="right" icon="times-circle" size="lg"></fa-icon>
+            *ngIf="glAccount.manualEntriesAllowed"
+            class="manual-entries-allowed"
+            matTooltip="{{ 'tooltips.Allowed' | translate }}"
+            matTooltipPosition="right"
+            icon="check-circle"
+            size="lg"
+          ></fa-icon>
+          <fa-icon
+            *ngIf="!glAccount.manualEntriesAllowed"
+            class="manual-entries-not-allowed"
+            matTooltip="{{ 'tooltips.' | translate }}"
+            matTooltipPosition="right"
+            icon="times-circle"
+            size="lg"
+          ></fa-icon>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="usedAs">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Used as" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Used as' | translate }}</th>
-        <td mat-cell *matCellDef="let glAccount"> {{ glAccount.usage.value }} </td>
+        <td mat-cell *matCellDef="let glAccount">{{ glAccount.usage.value }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['gl-accounts/view', row.id]" class="select-row"></tr>
+      <tr
-
+        mat-row
+        *matRowDef="let row; columns: displayedColumns"
+        [routerLink]="['gl-accounts/view', row.id]"
+        class="select-row"
+      ></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
 
-
 <!-- Tree View -->
 
 <div class="container" [hidden]="viewGroup.value !== 'treeView'">
-
   <div class="m-b-20" fxLayout="row" fxLayoutAlign="start" fxLayoutGap="20px">
     <button mat-raised-button (click)="toggleExpandCollapse()">
-      {{ (isTreeExpanded ? "labels.buttons.Collapse All" : "labels.buttons.Expand All") | translate }}
+      {{ (isTreeExpanded ? 'labels.buttons.Collapse All' : 'labels.buttons.Expand All') | translate }}
     </button>
   </div>
 
   <div fxLayout="row" fxLayoutGap="4%" fxLayout.lt-md="column">
-
     <div class="mat-elevation-z8" fxFlex>
-
       <mat-tree [dataSource]="nestedTreeDataSource" [treeControl]="nestedTreeControl" class="gl-account-tree">
-
         <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
           <li class="mat-tree-node">
             <button mat-icon-button disabled></button>
@@ -111,7 +133,10 @@
           <li>
             <div class="mat-tree-node">
               <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
-                <fa-icon class="mat-icon-rtl-mirror" icon="{{ nestedTreeControl.isExpanded(node) ? 'chevron-down' : 'chevron-right' }}"></fa-icon>
+                <fa-icon
+                  class="mat-icon-rtl-mirror"
+                  icon="{{ nestedTreeControl.isExpanded(node) ? 'chevron-down' : 'chevron-right' }}"
+                ></fa-icon>
               </button>
               <span (click)="viewGLAccountNode(node)">
                 <span *ngIf="node.glCode" class="m-r-10">{{ '(' + node.glCode + ')' }}</span>
@@ -123,21 +148,15 @@
             </ul>
           </li>
         </mat-nested-tree-node>
-
       </mat-tree>
-
     </div>
 
     <div fxFlex="48%" *ngIf="glAccount">
-
       <mat-card>
-
         <mat-card-content>
-
           <div fxLayout="row wrap" class="content">
-
             <div fxFlex="50%" class="header">
-              {{"labels.inputs.Account Name" | translate}}
+              {{ 'labels.inputs.Account Name' | translate }}
             </div>
 
             <div fxFlex="50%">
@@ -145,7 +164,7 @@
             </div>
 
             <div fxFlex="50%" class="header">
-              {{"labels.inputs.GL Code" | translate}}
+              {{ 'labels.inputs.GL Code' | translate }}
             </div>
 
             <div fxFlex="50%">
@@ -153,7 +172,7 @@
             </div>
 
             <div fxFlex="50%" class="header">
-              {{"labels.inputs.Account Type" | translate}}
+              {{ 'labels.inputs.Account Type' | translate }}
             </div>
 
             <div fxFlex="50%">
@@ -161,7 +180,7 @@
             </div>
 
             <div fxFlex="50%" class="header">
-              {{"labels.inputs.Account Usage" | translate}}
+              {{ 'labels.inputs.Account Usage' | translate }}
             </div>
 
             <div fxFlex="50%">
@@ -169,7 +188,7 @@
             </div>
 
             <div fxFlex="50%" class="header">
-              {{"labels.inputs.Manual Entries Allowed" | translate}}
+              {{ 'labels.inputs.Manual Entries Allowed' | translate }}
             </div>
 
             <div fxFlex="50%">
@@ -177,59 +196,103 @@
             </div>
 
             <div fxFlex="50%" class="header">
-              {{"labels.inputs.Description" | translate}}
+              {{ 'labels.inputs.Description' | translate }}
             </div>
 
             <div fxFlex="50%">
               {{ glAccount.description }}
             </div>
-
           </div>
-
         </mat-card-content>
-
       </mat-card>
-
     </div>
-
   </div>
-
 </div>
 
 <ng-template #templateButtonTreeView let-popover="popover">
-  <h2>{{"labels.heading.Tree View" | translate}}</h2>
+  <h2>{{ 'labels.heading.Tree View' | translate }}</h2>
-  <p class="mw300">{{"labels.text.Alternative way-Tree view" | translate}}</p>
+  <p class="mw300">{{ 'labels.text.Alternative way-Tree view' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep();">{{"labels.buttons.Back" | translate}}</button>
+      {{ 'labels.buttons.Close' | translate }}
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover( templateButtonAddAccount, buttonAddAccount, 'bottom', true);">{{"labels.buttons.Next" | translate}}</button>
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonAddAccount, buttonAddAccount, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateButtonAddAccount let-popover="popover">
-  <h2>{{"labels.heading.Add Account" | translate}}</h2>
+  <h2>{{ 'labels.heading.Add Account' | translate }}</h2>
-  <p class="mw300">{{"labels.text.Create New GL Account"|translate}}</p>
+  <p class="mw300">{{ 'labels.text.Create New GL Account' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonTreeView, buttonTreeView , 'bottom', true);">{{"labels.buttons.Back" | translate}}</button>
+      {{ 'labels.buttons.Close' | translate }}
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">{{"labels.buttons.Next" | translate}}</button>
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonTreeView, buttonTreeView, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>{{"labels.heading.Search bar to filter GL accounts." | translate}}</h4>
+  <h4>{{ 'labels.heading.Search bar to filter GL accounts.' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover( templateButtonAddAccount, buttonAddAccount, 'bottom', true);">{{"labels.buttons.Back" | translate}}</button>
+      {{ 'labels.buttons.Close' | translate }}
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAccountsTable, accountsTable, 'top', true);">{{"labels.buttons.Next" | translate}}</button>
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonAddAccount, buttonAddAccount, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateAccountsTable, accountsTable, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateAccountsTable let-popover="popover">
-  <h4 class="mw300">{{"labels.heading.List of chart of all the accounts being used by your organization." | translate}}</h4>
+  <h4 class="mw300">
+    {{ 'labels.heading.List of chart of all the accounts being used by your organization.' | translate }}
+  </h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">{{"labels.buttons.Back" | translate}}</button>
+      {{ 'labels.buttons.Close' | translate }}
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next" | translate}}</button>
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>

src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html

@@ -1,58 +1,54 @@
 <div class="container">
-
   <mat-card>
-
     <form #accountFormRef [formGroup]="glAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Account Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
             <mat-select required formControlName="type">
               <mat-option *ngFor="let accountType of accountTypeData" [value]="accountType.id">
                 {{ 'labels.inputs.accounting.' + accountType.value | translate }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="glAccountForm.controls.type.hasError('required')">
-              {{"labels.inputs.Account Type" | translate}} {{"labels.commons.is" | translate}}
+              {{ 'labels.inputs.Account Type' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{"labels.commons.required" | translate}}</strong>
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Account Name" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account Name' | translate }}</mat-label>
-            <input matInput required formControlName="name">
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="glAccountForm.controls.name.hasError('required')">
-              {{"labels.inputs.Account Name" | translate}} {{"labels.commons.is" | translate}}
+              {{ 'labels.inputs.Account Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{"labels.commons.required" | translate}}</strong>
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Account Usage" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account Usage' | translate }}</mat-label>
             <mat-select required formControlName="usage">
               <mat-option *ngFor="let accountUsage of accountUsageData" [value]="accountUsage.id">
                 {{ accountUsage.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="glAccountForm.controls.usage.hasError('required')">
-              {{"labels.inputs.Account Usage" | translate}} {{"labels.commons.is" | translate}}
+              {{ 'labels.inputs.Account Usage' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{"labels.commons.required" | translate}}</strong>
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.GL Code" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.GL Code' | translate }}</mat-label>
-            <input matInput required formControlName="glCode">
+            <input matInput required formControlName="glCode" />
             <mat-error *ngIf="glAccountForm.controls.glCode.hasError('required')">
-              {{"labels.inputs.GL Code" | translate}} {{"labels.commons.is" | translate}}
+              {{ 'labels.inputs.GL Code' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{"labels.commons.required" | translate}}</strong>
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
-          <mifosx-gl-account-selector fxFlex="48%"
+          <mifosx-gl-account-selector
+            fxFlex="48%"
             [inputFormControl]="glAccountForm.controls.parentId"
             [glAccountList]="parentData"
             [required]="false"
@@ -61,7 +57,7 @@
           </mifosx-gl-account-selector>
 
           <mat-form-field fxFlex="28%">
-            <mat-label>{{"labels.inputs.Tag" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Tag' | translate }}</mat-label>
             <mat-select formControlName="tagId">
               <mat-option *ngFor="let tag of tagData" [value]="tag.id">
                 {{ tag.name }}
@@ -71,46 +67,56 @@
 
           <div fxFlex="18%" class="manual-entries-allowed-wrapper">
             <mat-checkbox labelPosition="before" formControlName="manualEntriesAllowed" class="manual-entries-allowed">
-              {{"labels.inputs.Manual Entries Allowed" | translate}}
+              {{ 'labels.inputs.Manual Entries Allowed' | translate }}
             </mat-checkbox>
           </div>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>{{"labels.inputs.Description" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="[cancelRoute]">{{"labels.buttons.Cancel" |
+        <button type="button" mat-raised-button [routerLink]="[cancelRoute]">
-          translate}}</button>
+          {{ 'labels.buttons.Cancel' | translate }}
-        <button mat-raised-button color="primary" [disabled]="!glAccountForm.valid"
+        </button>
-          *mifosxHasPermission="'CREATE_GLACCOUNT'">{{"labels.buttons.Submit" | translate}}</button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!glAccountForm.valid"
+          *mifosxHasPermission="'CREATE_GLACCOUNT'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
 
 <ng-template #templateAccountFormRef let-popover="popover">
-  <h2>{{"labels.heading.Create GL account" | translate}}</h2>
+  <h2>{{ 'labels.heading.Create GL account' | translate }}</h2>
-  <p class="mw400">{{"labels.text.Filling Details" | translate}} <a
+  <p class="mw400">
+    {{ 'labels.text.Filling Details' | translate }}
+    <a
       href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141745/Chart+of+Accounts+-+General+Ledger+Setup"
-      target="_blank">{{"labels.inputs.Chart of Accounts" | translate}}</a></p>
+      target="_blank"
+      >{{ 'labels.inputs.Chart of Accounts' | translate }}</a
+    >
+  </p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn"
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
-      (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" |
+      {{ 'labels.buttons.Close' | translate }}
-      translate}}</button>
+    </button>
-    <button mat-raised-button color="primary" (click)="popover.close()">{{"labels.buttons.Create GL Account" |
+    <button mat-raised-button color="primary" (click)="popover.close()">
-      translate}}</button>
+      {{ 'labels.buttons.Create GL Account' | translate }}
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{"labels.buttons.Back" |
+    </button>
-      translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next" |
+      {{ 'labels.buttons.Back' | translate }}
-      translate}}</button>
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>

src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.html

@@ -1,54 +1,54 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="glAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Account Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
             <mat-select required formControlName="type">
               <mat-option *ngFor="let accountType of accountTypeData" [value]="accountType.id">
                 {{ accountType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="glAccountForm.controls.type.hasError('required')">
-              {{"labels.inputs.Account Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Account Type' | 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.Account Name" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account Name' | translate }}</mat-label>
-            <input matInput required formControlName="name">
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="glAccountForm.controls.name.hasError('required')">
-              {{"labels.inputs.Account Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Account Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Account Usage" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account Usage' | translate }}</mat-label>
             <mat-select required formControlName="usage">
               <mat-option *ngFor="let accountUsage of accountUsageData" [value]="accountUsage.id">
                 {{ accountUsage.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="glAccountForm.controls.usage.hasError('required')">
-              {{"labels.inputs.Account Usage" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Account Usage' | 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.GL Code" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.GL Code' | translate }}</mat-label>
-            <input matInput required formControlName="glCode">
+            <input matInput required formControlName="glCode" />
             <mat-error *ngIf="glAccountForm.controls.glCode.hasError('required')">
-              {{"labels.inputs.GL Code" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.GL Code' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
-          <mifosx-gl-account-selector fxFlex="48%"
+          <mifosx-gl-account-selector
+            fxFlex="48%"
             [inputFormControl]="glAccountForm.controls.parentId"
             [glAccountList]="parentData"
             [required]="false"
@@ -57,7 +57,7 @@
           </mifosx-gl-account-selector>
 
           <mat-form-field fxFlex="28%">
-            <mat-label>{{"labels.inputs.Tag" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Tag' | translate }}</mat-label>
             <mat-select formControlName="tagId">
               <mat-option *ngFor="let tag of tagData" [value]="tag.id">
                 {{ tag.name }}
@@ -66,27 +66,36 @@
           </mat-form-field>
 
           <div fxFlex="18%" class="manual-entries-allowed-wrapper">
-            <mat-checkbox labelPosition="before" required formControlName="manualEntriesAllowed" class="manual-entries-allowed">
+            <mat-checkbox
-              {{"labels.inputs.Manual Entries Allowed" | translate}}
+              labelPosition="before"
+              required
+              formControlName="manualEntriesAllowed"
+              class="manual-entries-allowed"
+            >
+              {{ 'labels.inputs.Manual Entries Allowed' | translate }}
             </mat-checkbox>
           </div>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>{{"labels.inputs.Description" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
-        <button mat-raised-button color="primary" [disabled]="glAccountForm.pristine" *mifosxHasPermission="'UPDATE_GLACCOUNT'">{{"labels.buttons.Submit" | translate}}</button>
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="glAccountForm.pristine"
+          *mifosxHasPermission="'UPDATE_GLACCOUNT'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html

@@ -1,44 +1,46 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <span *mifosxHasPermission="'CREATE_GLACCOUNT'">
-    <button mat-raised-button color="primary" *ngIf="glAccount.usage.value === 'HEADER'" [routerLink]="['/accounting/chart-of-accounts/gl-accounts/create']" [queryParams]="{ parent: glAccount.id, accountType: glAccount.type.id }">
+    <button
+      mat-raised-button
+      color="primary"
+      *ngIf="glAccount.usage.value === 'HEADER'"
+      [routerLink]="['/accounting/chart-of-accounts/gl-accounts/create']"
+      [queryParams]="{ parent: glAccount.id, accountType: glAccount.type.id }"
+    >
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Subledger Account" | translate}}
+      {{ 'labels.buttons.Subledger Account' | translate }}
     </button>
   </span>
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
     <button mat-raised-button color="primary" [routerLink]="['edit']">
       <fa-icon icon="edit" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Edit" | translate}}
+      {{ 'labels.buttons.Edit' | translate }}
     </button>
   </span>
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
     <button mat-raised-button color="warn" *ngIf="!glAccount.disabled" (click)="changeGlAccountState()">
       <fa-icon icon="lock" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Disable" | translate}}
+      {{ 'labels.buttons.Disable' | translate }}
     </button>
   </span>
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
     <button mat-raised-button color="accent" *ngIf="glAccount.disabled" (click)="changeGlAccountState()">
       <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Enable" | translate}}
+      {{ 'labels.buttons.Enable' | translate }}
     </button>
   </span>
   <button mat-raised-button color="warn" (click)="deleteGlAccount()" *mifosxHasPermission="'DELETE_GLACCOUNT'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Delete" | translate}}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Account Type" | translate}}
+          {{ 'labels.inputs.Account Type' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -46,7 +48,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.GL Code" | translate}}
+          {{ 'labels.inputs.GL Code' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -54,7 +56,7 @@
         </div>
 
         <div fxFlex="50%" class="header" *ngIf="glAccount.parent">
-          {{"labels.inputs.Parent Account Name" | translate}}
+          {{ 'labels.inputs.Parent Account Name' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="glAccount.parent">
@@ -64,7 +66,7 @@
         </div>
 
         <div fxFlex="50%" class="header" *ngIf="glAccount.tagId.id">
-           {{"labels.inputs.Tag" | translate}}
+          {{ 'labels.inputs.Tag' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="glAccount.tagId.id">
@@ -72,7 +74,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Account Usage" | translate}}
+          {{ 'labels.inputs.Account Usage' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -80,7 +82,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Manual Entries Allowed" | translate}}
+          {{ 'labels.inputs.Manual Entries Allowed' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -88,20 +90,19 @@
         </div>
 
         <div fxFlex="50%" class="header" *ngIf="glAccount.description">
-          {{"labels.inputs.Description" | translate}}
+          {{ 'labels.inputs.Description' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="glAccount.description">
           {{ glAccount.description }}
         </div>
-
       </div>
-
     </mat-card-content>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" color="primary" mat-raised-button (click)="goBack()">{{  "labels.buttons.Back" | translate}}</button>
+      <button type="button" color="primary" mat-raised-button (click)="goBack()">
+        {{ 'labels.buttons.Back' | translate }}
+      </button>
     </mat-card-actions>
   </mat-card>
-
 </div>

src/app/accounting/closing-entries/closing-entries.component.html

@@ -2,15 +2,15 @@
   <div #buttonCreateClosure>
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_GLCLOSURE'">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Create Closure" | translate}}
+      {{ 'labels.buttons.Create Closure' | translate }}
     </button>
   </div>
 </div>
 
 <div #filter class="container" fxLayout="row">
   <mat-form-field fxFlex>
-    <mat-label>{{"labels.inputs.Office Name" | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Office Name' | translate }}</mat-label>
-    <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete">
+    <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete" />
   </mat-form-field>
 </div>
 
@@ -22,66 +22,104 @@
 </mat-autocomplete>
 
 <div class="container">
-
   <div #closuresTable class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="officeName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Office" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office' | translate }}</th>
-        <td mat-cell *matCellDef="let glAccountClosure"> {{ glAccountClosure.officeName }} </td>
+        <td mat-cell *matCellDef="let glAccountClosure">{{ glAccountClosure.officeName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="closingDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Closure Date" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Closure Date' | translate }}</th>
-        <td mat-cell *matCellDef="let glAccountClosure"> {{ glAccountClosure.closingDate }} </td>
+        <td mat-cell *matCellDef="let glAccountClosure">{{ glAccountClosure.closingDate }}</td>
       </ng-container>
 
       <ng-container matColumnDef="comments">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Comments" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Comments' | translate }}</th>
-        <td mat-cell *matCellDef="let glAccountClosure"> {{ glAccountClosure.comments }} </td>
+        <td mat-cell *matCellDef="let glAccountClosure">{{ glAccountClosure.comments }}</td>
       </ng-container>
 
       <ng-container matColumnDef="createdByUsername">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Created By" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Created By' | translate }}</th>
         <td mat-cell *matCellDef="let glAccountClosure">{{ glAccountClosure.createdByUsername }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['view', row.id]" class="select-row"></tr>
+      <tr
-
+        mat-row
+        *matRowDef="let row; columns: displayedColumns"
+        [routerLink]="['view', row.id]"
+        class="select-row"
+      ></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
 
 <ng-template #templateButtonCreateClosure let-popover="popover">
-  <h2>{{"labels.heading.Create Closure" | translate}}</h2>
+  <h2>{{ 'labels.heading.Create Closure' | translate }}</h2>
-  <p class="mw300">{{"labels.text.Create new closure" | translate}}</p>
+  <p class="mw300">{{ 'labels.text.Create new closure' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep();">{{"labels.buttons.Back" | translate}}</button>
+      {{ 'labels.buttons.Close' | translate }}
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true);">{{"labels.buttons.Next" | translate}}</button>
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>{{"labels.heading.Search bar to filter closures by office."|translate}}</h4>
+  <h4>{{ 'labels.heading.Search bar to filter closures by office.' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateClosure, buttonCreateClosure, 'bottom', true);">{{"labels.buttons.Back" | translate}}</button>
+      {{ 'labels.buttons.Close' | translate }}
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateClosuresTable,closuresTable, 'top', true);">{{"labels.buttons.Next" | translate}}</button>
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonCreateClosure, buttonCreateClosure, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateClosuresTable, closuresTable, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateClosuresTable let-popover="popover">
-  <h4>{{"labels.heading.List of closures. To know more click" | translate}}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895316/Closing+Entries" target="_blank">{{"labels.inputs.Closing Entries" | translate}}</a></h4>
+  <h4>
+    {{ 'labels.heading.List of closures. To know more click' | translate }}:
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895316/Closing+Entries" target="_blank">{{
+      'labels.inputs.Closing Entries' | translate
+    }}</a>
+  </h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true);">{{"labels.buttons.Back" | translate}}</button>
+      {{ 'labels.buttons.Close' | translate }}
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next" | translate}}</button>
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>

src/app/accounting/closing-entries/create-closure/create-closure.component.html

@@ -1,51 +1,59 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="accountingClosureForm" (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="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="accountingClosureForm.controls.officeId.hasError('required')">
-              {{"labels.inputs.Office" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="closingDatePicker.open()">
-            <mat-label>{{"labels.inputs.Closing Date" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Closing Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closingDatePicker" required formControlName="closingDate">
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="closingDatePicker"
+              required
+              formControlName="closingDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="closingDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closingDatePicker></mat-datepicker>
             <mat-error *ngIf="accountingClosureForm.controls.closingDate.hasError('required')">
-              {{"labels.inputs.Closing Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Closing Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Comments" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Comments' | translate }}</mat-label>
             <textarea matInput formControlName="comments" 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 type="button" mat-raised-button [routerLink]="['../']">
-        <button mat-raised-button color="primary" [disabled]="!accountingClosureForm.valid" *mifosxHasPermission="'CREATE_GLCLOSURE'">{{"labels.buttons.Submit" | translate}}</button>
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!accountingClosureForm.valid"
+          *mifosxHasPermission="'CREATE_GLCLOSURE'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/accounting/closing-entries/edit-closure/edit-closure.component.html

@@ -1,15 +1,10 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="accountingClosureForm" (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="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
@@ -18,28 +13,27 @@
           </mat-form-field>
 
           <mat-form-field (click)="closingDatePicker.open()">
-            <mat-label>{{"labels.inputs.Closing Date" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Closing Date' | translate }}</mat-label>
-            <input matInput [matDatepicker]="closingDatePicker" required formControlName="closingDate">
+            <input matInput [matDatepicker]="closingDatePicker" required formControlName="closingDate" />
             <mat-datepicker-toggle matSuffix [for]="closingDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closingDatePicker></mat-datepicker>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Comments" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Comments' | translate }}</mat-label>
             <textarea matInput formControlName="comments" 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 type="button" mat-raised-button [routerLink]="['../']">
-        <button mat-raised-button color="primary" [disabled]="accountingClosureForm.pristine">{{"labels.buttons.Submit" | translate}}</button>
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="accountingClosureForm.pristine">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/accounting/closing-entries/view-closure/view-closure.component.html

@@ -1,24 +1,20 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Edit" | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
   <button mat-raised-button color="warn" (click)="deleteAccountingClosure()" *mifosxHasPermission="'DELETE_GLCLOSURE'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Delete" | translate}}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
 <div class="container" *ngIf="glAccountClosure">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="header">
-         {{"labels.inputs.Office" | translate}}
+          {{ 'labels.inputs.Office' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -26,7 +22,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Closure Date" | translate}}
+          {{ 'labels.inputs.Closure Date' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -34,7 +30,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Closed By" | translate}}
+          {{ 'labels.inputs.Closed By' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -42,7 +38,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Updated By" | translate}}
+          {{ 'labels.inputs.Updated By' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -50,7 +46,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Updated On"|translate}}
+          {{ 'labels.inputs.Updated On' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -58,7 +54,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Closure Creation Date"|translate}}
+          {{ 'labels.inputs.Closure Creation Date' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -66,17 +62,13 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Comments" | translate}}
+          {{ 'labels.inputs.Comments' | translate }}
         </div>
 
         <div fxFlex="50%">
           {{ glAccountClosure.comments }}
         </div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>

src/app/accounting/create-journal-entry/create-journal-entry.component.html

@@ -1,43 +1,44 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="journalEntryForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div #createJournalFormRef fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="journalEntryForm.controls.officeId.hasError('required')">
-              {{"labels.inputs.Office" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Currency" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
             <mat-select required formControlName="currencyCode">
               <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
                 {{ currency.displayLabel }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="journalEntryForm.controls.currencyCode.hasError('required')">
-              {{"labels.inputs.Currency" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
-          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" formArrayName="debits"
+          <div
-            *ngFor="let debit of debits.controls; let i = index;">
+            fxFlexFill
-
+            fxLayout="row wrap"
+            fxLayout.lt-md="column"
+            formArrayName="debits"
+            *ngFor="let debit of debits.controls; let i = index"
+          >
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
-
+              <mifosx-gl-account-selector
-              <mifosx-gl-account-selector fxFlex="48%"
+                fxFlex="48%"
                 [inputFormControl]="debits.at(i).controls.glAccountId"
                 [glAccountList]="glAccountData"
                 [required]="true"
@@ -46,10 +47,11 @@
               </mifosx-gl-account-selector>
 
               <mat-form-field fxFlex="43%">
-                <mat-label>{{"labels.inputs.Debit Amount" | translate}}</mat-label>
+                <mat-label>{{ 'labels.inputs.Debit Amount' | translate }}</mat-label>
-                <input type="number" matInput required formControlName="amount">
+                <input type="number" matInput required formControlName="amount" />
                 <mat-error *ngIf="debits.at(i).controls.amount.hasError('required')">
-                  {{"labels.inputs.Debit Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                  {{ 'labels.inputs.Debit Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -57,21 +59,29 @@
                 <button *ngIf="i !== 0" type="button" mat-icon-button (click)="removeAffectedGLEntry(debits, i)">
                   <fa-icon icon="minus-circle" size="lg"></fa-icon>
                 </button>
-                <button *ngIf="i === 0" type="button" mat-icon-button color="primary" (click)="addAffectedGLEntry(debits)">
+                <button
+                  *ngIf="i === 0"
+                  type="button"
+                  mat-icon-button
+                  color="primary"
+                  (click)="addAffectedGLEntry(debits)"
+                >
                   <fa-icon icon="plus-circle" size="lg"></fa-icon>
                 </button>
               </span>
-
             </div>
-
           </div>
 
-          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" formArrayName="credits"
+          <div
-            *ngFor="let credit of credits.controls; let i = index;">
+            fxFlexFill
-
+            fxLayout="row wrap"
+            fxLayout.lt-md="column"
+            formArrayName="credits"
+            *ngFor="let credit of credits.controls; let i = index"
+          >
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
-
+              <mifosx-gl-account-selector
-              <mifosx-gl-account-selector fxFlex="48%"
+                fxFlex="48%"
                 [inputFormControl]="credits.at(i).controls.glAccountId"
                 [glAccountList]="glAccountData"
                 [required]="true"
@@ -80,10 +90,11 @@
               </mifosx-gl-account-selector>
 
               <mat-form-field fxFlex="43%">
-                <mat-label>{{"labels.inputs.Credit Amount"|translate}}</mat-label>
+                <mat-label>{{ 'labels.inputs.Credit Amount' | translate }}</mat-label>
-                <input type="number" matInput required formControlName="amount">
+                <input type="number" matInput required formControlName="amount" />
                 <mat-error *ngIf="credits.at(i).controls.amount.hasError('required')">
-                  {{"labels.inputs.Credit Amount"|translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                  {{ 'labels.inputs.Credit Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -91,32 +102,44 @@
                 <button *ngIf="i !== 0" type="button" mat-icon-button (click)="removeAffectedGLEntry(credits, i)">
                   <fa-icon icon="minus-circle" size="lg"></fa-icon>
                 </button>
-                <button *ngIf="i === 0" type="button" mat-icon-button color="primary" (click)="addAffectedGLEntry(credits)">
+                <button
+                  *ngIf="i === 0"
+                  type="button"
+                  mat-icon-button
+                  color="primary"
+                  (click)="addAffectedGLEntry(credits)"
+                >
                   <fa-icon icon="plus-circle" size="lg"></fa-icon>
                 </button>
               </span>
-
             </div>
-
           </div>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Reference Number"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Reference Number' | translate }}</mat-label>
-            <input matInput formControlName="referenceNumber">
+            <input matInput formControlName="referenceNumber" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="transactionDatePicker.open()">
-            <mat-label>{{"labels.inputs.Transaction Date"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="transactionDatePicker"
+              required
+              formControlName="transactionDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
             <mat-error *ngIf="journalEntryForm.controls.transactionDate.hasError('required')">
-              {{"labels.inputs.Transaction Date"|translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Transaction 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.Payment Type"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
             <mat-select formControlName="paymentTypeId">
               <mat-option *ngFor="let paymentType of paymentTypeData" [value]="paymentType.id">
                 {{ paymentType.name }}
@@ -125,56 +148,71 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Account Number"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
-            <input matInput formControlName="accountNumber">
+            <input matInput formControlName="accountNumber" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Cheque Number"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Cheque Number' | translate }}</mat-label>
-            <input matInput formControlName="checkNumber">
+            <input matInput formControlName="checkNumber" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Routing Code"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
-            <input matInput formControlName="routingCode">
+            <input matInput formControlName="routingCode" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Receipt Number"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
-            <input matInput formControlName="receiptNumber">
+            <input matInput formControlName="receiptNumber" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Bank Number"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Bank Number' | translate }}</mat-label>
-            <input matInput formControlName="bankNumber">
+            <input matInput formControlName="bankNumber" />
           </mat-form-field>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>{{"labels.inputs.Comments"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Comments' | translate }}</mat-label>
             <textarea matInput formControlName="comments" 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 type="button" mat-raised-button [routerLink]="['../../']">
-        <button mat-raised-button color="primary" [disabled]="!journalEntryForm.valid" *mifosxHasPermission="'CREATE_JOURNALENTRY'">{{"labels.buttons.Submit" | translate}}</button>
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!journalEntryForm.valid"
+          *mifosxHasPermission="'CREATE_JOURNALENTRY'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
 
 <ng-template #templateCreateJournalFormRef let-popover="popover">
-  <h2>{{"labels.heading.Add Journal Entry Form" | translate}}</h2>
+  <h2>{{ 'labels.heading.Add Journal Entry Form' | translate }}</h2>
-  <p class="mw300">{{"labels.text.Red asterisk field" | translate}} <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895310/Add+Journal+Entries" target="_blank">{{"labels.inputs.Add Journal Entries" | translate}}</a></p>
+  <p class="mw300">
+    {{ 'labels.text.Red asterisk field' | translate }}
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895310/Add+Journal+Entries" target="_blank">{{
+      'labels.inputs.Add Journal Entries' | translate
+    }}</a>
+  </p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{"labels.buttons.Back" | translate}}</button>
+      {{ 'labels.buttons.Close' | translate }}
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next" | translate}}</button>
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>

src/app/accounting/financial-activity-mappings/create-financial-activity-mapping/create-financial-activity-mapping.component.html

@@ -1,22 +1,19 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="financialActivityMappingForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Financial Activity" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Financial Activity' | translate }}</mat-label>
             <mat-select required formControlName="financialActivityId">
               <mat-option *ngFor="let financialActivity of financialActivityData" [value]="financialActivity.id">
-                ({{financialActivity.id}}) {{ 'labels.accounting.financialActivity.' + financialActivity.name | translate }}
+                ({{ financialActivity.id }})
+                {{ 'labels.accounting.financialActivity.' + financialActivity.name | translate }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="financialActivityMappingForm.controls.financialActivityId.hasError('required')">
-              {{"labels.inputs.Financial Activity" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Financial Activity' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -27,18 +24,22 @@
             [inputLabel]="'Account'"
           >
           </mifosx-gl-account-selector>
-
         </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]="['../']">
-        <button mat-raised-button color="primary" [disabled]="!financialActivityMappingForm.valid" *mifosxHasPermission="'CREATE_FINANCIALACTIVITYACCOUNT'">{{"labels.buttons.Submit" | translate}}</button>
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!financialActivityMappingForm.valid"
+          *mifosxHasPermission="'CREATE_FINANCIALACTIVITYACCOUNT'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/accounting/financial-activity-mappings/edit-financial-activity-mapping/edit-financial-activity-mapping.component.html

@@ -1,18 +1,14 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="financialActivityMappingForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Financial Activity" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Financial Activity' | translate }}</mat-label>
             <mat-select required formControlName="financialActivityId">
               <mat-option *ngFor="let financialActivity of financialActivityData" [value]="financialActivity.id">
-                ({{financialActivity.id}}) {{ 'labels.accounting.financialActivity.' + financialActivity.name | translate }}
+                ({{ financialActivity.id }})
+                {{ 'labels.accounting.financialActivity.' + financialActivity.name | translate }}
               </mat-option>
             </mat-select>
           </mat-form-field>
@@ -25,16 +21,21 @@
           >
           </mifosx-gl-account-selector>
         </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]="['../']">
-        <button mat-raised-button color="primary" [disabled]="financialActivityMappingForm.pristine" *mifosxHasPermission="'UPDATE_FINANCIALACTIVITYACCOUNT'">{{"labels.buttons.Submit" | translate}}</button>
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="financialActivityMappingForm.pristine"
+          *mifosxHasPermission="'UPDATE_FINANCIALACTIVITYACCOUNT'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.html

@@ -1,63 +1,95 @@
 <div fxLayout="row" fxLayoutAlign="end" class="container m-b-20">
   <div #buttonDefineMapping>
-    <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_FINANCIALACTIVITYACCOUNT'">
+    <button
+      mat-raised-button
+      color="primary"
+      [routerLink]="['create']"
+      *mifosxHasPermission="'CREATE_FINANCIALACTIVITYACCOUNT'"
+    >
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Define New Mapping" | translate}}
+      {{ 'labels.buttons.Define New Mapping' | translate }}
     </button>
   </div>
 </div>
 
 <div #activitiesTable class="mat-elevation-z8 container">
-
   <table mat-table [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="financialActivity">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Financial Activity" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Financial Activity' | translate }}</th>
       <td mat-cell *matCellDef="let financialActivityAccount">
-          ({{financialActivityAccount.financialActivityData.id}}) 
+        ({{ financialActivityAccount.financialActivityData.id }})
-          {{ 'labels.accounting.financialActivity.' + financialActivityAccount.financialActivityData.name | translate }}
+        {{ 'labels.accounting.financialActivity.' + financialActivityAccount.financialActivityData.name | translate }}
-        </td>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountType">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Type" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account Type' | translate }}</th>
-      <td mat-cell *matCellDef="let financialActivityAccount"> {{ 'labels.inputs.accounting.' + financialActivityAccount.financialActivityData.mappedGLAccountType | translate }} </td>
+      <td mat-cell *matCellDef="let financialActivityAccount">
+        {{
+          'labels.inputs.accounting.' + financialActivityAccount.financialActivityData.mappedGLAccountType | translate
+        }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountCode">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Code" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account Code' | translate }}</th>
-      <td mat-cell *matCellDef="let financialActivityAccount"> {{ financialActivityAccount.glAccountData.glCode }} </td>
+      <td mat-cell *matCellDef="let financialActivityAccount">{{ financialActivityAccount.glAccountData.glCode }}</td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Name" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account Name' | translate }}</th>
-      <td mat-cell *matCellDef="let financialActivityAccount"> {{ financialActivityAccount.glAccountData.name }} </td>
+      <td mat-cell *matCellDef="let financialActivityAccount">{{ financialActivityAccount.glAccountData.name }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['view', row.id]" class="select-row"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="['view', row.id]" class="select-row"></tr>
-
   </table>
 
   <mat-paginator [pageSizeOptions]="[10, 25]" showFirstLastButtons></mat-paginator>
-
 </div>
 
 <ng-template #templateButtonDefineMapping let-popover="popover">
-  <h2>{{"labels.heading.Define New Mapping"|translate}}</h2>
+  <h2>{{ 'labels.heading.Define New Mapping' | translate }}</h2>
-  <p class="mw300">{{"labels.text.To define new mapping." | translate}}</p>
+  <p class="mw300">{{ 'labels.text.To define new mapping.' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{"labels.buttons.Back" | translate}}</button>
+      {{ 'labels.buttons.Close' | translate }}
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateActivitiesTable, activitiesTable, 'top', true)">{{"labels.buttons.Next" | translate}}</button>
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateActivitiesTable, activitiesTable, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateActivitiesTable let-popover="popover">
-  <h4 class="mw300">{{"labels.heading.Account Linked Financial" | translate}} <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/106430472/Accounts+linked+to+Financial+Activities" target="_blank">{{"labels.heading.Accounts linked to Financial Activities" | translate}}</a> </h4>
+  <h4 class="mw300">
+    {{ 'labels.heading.Account Linked Financial' | translate }}
+    <a
+      href="https://mifosforge.jira.com/wiki/spaces/docs/pages/106430472/Accounts+linked+to+Financial+Activities"
+      target="_blank"
+      >{{ 'labels.heading.Accounts linked to Financial Activities' | translate }}</a
+    >
+  </h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonDefineMapping, buttonDefineMapping , 'bottom', true)">{{"labels.buttons.Back" | translate}}</button>
+      {{ 'labels.buttons.Close' | translate }}
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next" | translate}}</button>
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonDefineMapping, buttonDefineMapping, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>

src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.html

@@ -1,51 +1,63 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" class="container m-b-20">
-  <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_FINANCIALACTIVITYACCOUNT'">
+  <button
+    mat-raised-button
+    color="primary"
+    [routerLink]="['edit']"
+    *mifosxHasPermission="'UPDATE_FINANCIALACTIVITYACCOUNT'"
+  >
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Edit" | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
-  <button mat-raised-button color="warn" (click)="deleteFinancialActivityAccount()" *mifosxHasPermission="'DELETE_FINANCIALACTIVITYACCOUNT'">
+  <button
+    mat-raised-button
+    color="warn"
+    (click)="deleteFinancialActivityAccount()"
+    *mifosxHasPermission="'DELETE_FINANCIALACTIVITYACCOUNT'"
+  >
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Delete" | translate}}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Financial Activity" | translate}}
+          {{ 'labels.inputs.Financial Activity' | translate }}
         </div>
 
         <div fxFlex="50%">
-          ({{financialActivityAccount?.financialActivityData.id}}) {{ 'labels.accounting.financialActivity.' + financialActivityAccount?.financialActivityData.name | translate }}
+          ({{ financialActivityAccount?.financialActivityData.id }})
+          {{
+            'labels.accounting.financialActivity.' + financialActivityAccount?.financialActivityData.name | translate
+          }}
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Account Type" | translate}}
+          {{ 'labels.inputs.Account Type' | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ 'labels.inputs.accounting.' + financialActivityAccount?.financialActivityData.mappedGLAccountType | translate }}
+          {{
+            'labels.inputs.accounting.' + financialActivityAccount?.financialActivityData.mappedGLAccountType
+              | translate
+          }}
         </div>
 
-        <mifosx-gl-account-display fxFlex="100%"
+        <mifosx-gl-account-display
+          fxFlex="100%"
           [glAccount]="financialActivityAccount?.glAccountData"
           [accountTitle]="'Account Name'"
         >
         </mifosx-gl-account-display>
-
       </div>
-
     </mat-card-content>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" color="primary" mat-raised-button [routerLink]="['../..']">{{  "labels.buttons.Back" | translate}}</button>
+      <button type="button" color="primary" mat-raised-button [routerLink]="['../..']">
+        {{ 'labels.buttons.Back' | translate }}
+      </button>
     </mat-card-actions>
   </mat-card>
-
 </div>

src/app/accounting/frequent-postings/frequent-postings.component.html

@@ -1,73 +1,76 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="frequentPostingsForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="frequentPostingsForm.controls.officeId.hasError('required')">
-              {{"labels.inputs.Office" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Accounting Rule" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Accounting Rule' | translate }}</mat-label>
             <mat-select required formControlName="accountingRule">
               <mat-option *ngFor="let accountingRule of accountingRuleData" [value]="accountingRule">
                 {{ accountingRule.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="frequentPostingsForm.controls.accountingRule.hasError('required')">
-              {{"labels.inputs.Accounting Rule" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Accounting Rule' | 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.Currency" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
             <mat-select required formControlName="currencyCode">
               <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
                 {{ currency.displayLabel }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="frequentPostingsForm.controls.currencyCode.hasError('required')">
-              {{"labels.inputs.Currency" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <span fxFlex="48%" fxHide.lt-md></span>
 
-          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" formArrayName="debits"
+          <div
-            *ngFor="let debit of debits.controls; let i = index;">
+            fxFlexFill
-
+            fxLayout="row wrap"
+            fxLayout.lt-md="column"
+            formArrayName="debits"
+            *ngFor="let debit of debits.controls; let i = index"
+          >
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
-
               <mat-form-field fxFlex="48%">
-                <mat-label>{{"labels.inputs.Affected GL Entry (Debit)" | translate}}</mat-label>
+                <mat-label>{{ 'labels.inputs.Affected GL Entry (Debit)' | translate }}</mat-label>
                 <mat-select required formControlName="glAccountId">
                   <mat-option *ngFor="let affectedGLEntryDebit of debitAccountData" [value]="affectedGLEntryDebit.id">
                     {{ affectedGLEntryDebit.name }}
                   </mat-option>
                 </mat-select>
                 <mat-error *ngIf="debits.at(i).controls.glAccountId.hasError('required')">
-                  {{"labels.inputs.Affected GL Entry (Debit)" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                  {{ 'labels.inputs.Affected GL Entry (Debit)' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                 </mat-error>
               </mat-form-field>
 
               <mat-form-field fxFlex="43%">
-                <mat-label>{{"labels.inputs.Debit Amount" | translate}}</mat-label>
+                <mat-label>{{ 'labels.inputs.Debit Amount' | translate }}</mat-label>
-                <input type="number" matInput required formControlName="amount">
+                <input type="number" matInput required formControlName="amount" />
                 <mat-error *ngIf="debits.at(i).controls.amount.hasError('required')">
-                  {{"labels.inputs.Debit Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                  {{ 'labels.inputs.Debit Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -75,37 +78,49 @@
                 <button *ngIf="i !== 0" type="button" mat-icon-button (click)="removeAffectedGLEntry(debits, i)">
                   <fa-icon icon="minus-circle" size="lg"></fa-icon>
                 </button>
-                <button *ngIf="i === 0 && allowMultipleDebitEntries" type="button" mat-icon-button color="primary" (click)="addAffectedGLEntry(debits)">
+                <button
+                  *ngIf="i === 0 && allowMultipleDebitEntries"
+                  type="button"
+                  mat-icon-button
+                  color="primary"
+                  (click)="addAffectedGLEntry(debits)"
+                >
                   <fa-icon icon="plus-circle" size="lg"></fa-icon>
                 </button>
               </span>
-
             </div>
-
           </div>
 
-          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" formArrayName="credits"
+          <div
-            *ngFor="let credit of credits.controls; let i = index;">
+            fxFlexFill
-
+            fxLayout="row wrap"
+            fxLayout.lt-md="column"
+            formArrayName="credits"
+            *ngFor="let credit of credits.controls; let i = index"
+          >
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
-
               <mat-form-field fxFlex="48%">
-                <mat-label>{{"labels.inputs.Affected GL Entry (Credit)" | translate}}</mat-label>
+                <mat-label>{{ 'labels.inputs.Affected GL Entry (Credit)' | translate }}</mat-label>
                 <mat-select required formControlName="glAccountId">
-                  <mat-option *ngFor="let affectedGLEntryCredit of creditAccountData" [value]="affectedGLEntryCredit.id">
+                  <mat-option
+                    *ngFor="let affectedGLEntryCredit of creditAccountData"
+                    [value]="affectedGLEntryCredit.id"
+                  >
                     {{ affectedGLEntryCredit.name }}
                   </mat-option>
                 </mat-select>
                 <mat-error *ngIf="credits.at(i).controls.glAccountId.hasError('required')">
-                  {{"labels.inputs.Affected GL Entry (Credit)" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                  {{ 'labels.inputs.Affected GL Entry (Credit)' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                 </mat-error>
               </mat-form-field>
 
               <mat-form-field fxFlex="43%">
-                <mat-label>{{"labels.inputs.Credit Amount"|translate}}</mat-label>
+                <mat-label>{{ 'labels.inputs.Credit Amount' | translate }}</mat-label>
-                <input type="number" matInput required formControlName="amount">
+                <input type="number" matInput required formControlName="amount" />
                 <mat-error *ngIf="credits.at(i).controls.amount.hasError('required')">
-                  {{"labels.inputs.Credit Amount"|translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                  {{ 'labels.inputs.Credit Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -113,32 +128,44 @@
                 <button *ngIf="i !== 0" type="button" mat-icon-button (click)="removeAffectedGLEntry(credits, i)">
                   <fa-icon icon="minus-circle" size="lg"></fa-icon>
                 </button>
-                <button *ngIf="i === 0 && allowMultipleCreditEntries" type="button" mat-icon-button color="primary" (click)="addAffectedGLEntry(credits)">
+                <button
+                  *ngIf="i === 0 && allowMultipleCreditEntries"
+                  type="button"
+                  mat-icon-button
+                  color="primary"
+                  (click)="addAffectedGLEntry(credits)"
+                >
                   <fa-icon icon="plus-circle" size="lg"></fa-icon>
                 </button>
               </span>
-
             </div>
-
           </div>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Reference Number"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Reference Number' | translate }}</mat-label>
-            <input matInput formControlName="referenceNumber">
+            <input matInput formControlName="referenceNumber" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="transactionDatePicker.open()">
-            <mat-label>{{"labels.inputs.Transaction Date"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="transactionDatePicker"
+              required
+              formControlName="transactionDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
             <mat-error *ngIf="frequentPostingsForm.controls.transactionDate.hasError('required')">
-              {{"labels.inputs.Transaction Date"|translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Transaction 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.Payment Type"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
             <mat-select formControlName="paymentTypeId">
               <mat-option *ngFor="let paymentType of paymentTypeData" [value]="paymentType.id">
                 {{ paymentType.name }}
@@ -147,46 +174,50 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Account Number"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
-            <input matInput formControlName="accountNumber">
+            <input matInput formControlName="accountNumber" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Cheque Number"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Cheque Number' | translate }}</mat-label>
-            <input matInput formControlName="checkNumber">
+            <input matInput formControlName="checkNumber" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Routing Code"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
-            <input matInput formControlName="routingCode">
+            <input matInput formControlName="routingCode" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Receipt Number"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
-            <input matInput formControlName="receiptNumber">
+            <input matInput formControlName="receiptNumber" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Bank Number"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Bank Number' | translate }}</mat-label>
-            <input matInput formControlName="bankNumber">
+            <input matInput formControlName="bankNumber" />
           </mat-form-field>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>{{"labels.inputs.Comments"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Comments' | translate }}</mat-label>
             <textarea matInput formControlName="comments" 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 type="button" mat-raised-button [routerLink]="['../../']">
-        <button mat-raised-button color="primary" [disabled]="!frequentPostingsForm.valid" *mifosxHasPermission="'CREATE_JOURNALENTRY'">{{"labels.buttons.Submit" | translate}}</button>
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!frequentPostingsForm.valid"
+          *mifosxHasPermission="'CREATE_JOURNALENTRY'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html

@@ -1,98 +1,111 @@
 <!-- TODO: Responsiveness/design enhancement and reduction in form loading time -->
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="openingBalancesForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div #searchFormRef fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
           <div class="m-r-30" fxFlex="83%">
             <mat-form-field fxFlex="96%">
-              <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
               <mat-select required formControlName="officeId">
                 <mat-option *ngFor="let office of officeData" [value]="office.id">
                   {{ office.name }}
                 </mat-option>
               </mat-select>
               <mat-error *ngIf="openingBalancesForm.controls.officeId.hasError('required')">
-                {{"labels.inputs.Office" | translate}} {{"labels.commons.is" | translate}}
+                {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
-                <strong>{{"labels.commons.required" | translate}}</strong>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
           </div>
 
           <div fxFlex="15%">
-            <button mat-raised-button color="primary" (click)="retrieveOpeningBalances()">{{"labels.buttons.Retrieve" |
+            <button mat-raised-button color="primary" (click)="retrieveOpeningBalances()">
-              translate}}</button>
+              {{ 'labels.buttons.Retrieve' | translate }}
+            </button>
           </div>
         </div>
 
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="openingBalancesData">
-
+          <mifosx-gl-account-display
-          <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Opening Balances Contra Account'"
+            fxFlex="100%"
-            [glAccount]="openingBalancesData.contraAccount" [withTitle]="'50%'">
+            [accountTitle]="'Opening Balances Contra Account'"
+            [glAccount]="openingBalancesData.contraAccount"
+            [withTitle]="'50%'"
+          >
           </mifosx-gl-account-display>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Currency" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
             <mat-select required formControlName="currencyCode">
               <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
                 {{ currency.displayLabel }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="openingBalancesForm.controls.currencyCode.hasError('required')">
-              {{"labels.inputs.Currency" | translate}} {{"labels.commons.is" | translate}}
+              {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{"labels.commons.required" | translate}}</strong>
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="openingBalancesDatePicker.open()">
-            <mat-label>{{"labels.inputs.Opening Balances Date" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Opening Balances Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="openingBalancesDatePicker" required
+            <input
-              formControlName="transactionDate">
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="openingBalancesDatePicker"
+              required
+              formControlName="transactionDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="openingBalancesDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #openingBalancesDatePicker></mat-datepicker>
             <mat-error *ngIf="openingBalancesForm.controls.transactionDate.hasError('required')">
-              {{"labels.inputs.Opening Balances Date" | translate}} {{"labels.commons.is" | translate}}
+              {{ 'labels.inputs.Opening Balances Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{"labels.commons.required" | translate}}</strong>
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" class="content" fxFlex="100%">
-
             <div class="header" fxFlex="8%">
-              {{"labels.inputs.Type" | translate}}
+              {{ 'labels.inputs.Type' | translate }}
             </div>
 
             <div class="header" fxFlex="18%">
-              {{"labels.inputs.GL Code" | translate}}
+              {{ 'labels.inputs.GL Code' | translate }}
             </div>
 
             <div class="header" fxFlex="18%">
-              {{"labels.inputs.Account" | translate}}
+              {{ 'labels.inputs.Account' | translate }}
             </div>
 
             <div class="header r-amount" fxFlex="23%">
-              {{"labels.inputs.Total Debit" | translate}}: {{ debitsSum | currency:currencyCode:'symbol-narrow':'1.2-2' }}
+              {{ 'labels.inputs.Total Debit' | translate }}:
+              {{ debitsSum | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
             </div>
 
             <div class="header r-amount" fxFlex="23%">
-              {{"labels.inputs.Total Credit" | translate}}: {{ creditsSum | currency:currencyCode:'symbol-narrow':'1.2-2' }}
+              {{ 'labels.inputs.Total Credit' | translate }}:
+              {{ creditsSum | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
             </div>
-
           </div>
 
-          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" class="content" formArrayName="glAccountEntries"
+          <div
-            *ngFor="let credit of glAccountEntries.controls; let i = index;">
+            fxFlexFill
-
+            fxLayout="row wrap"
+            fxLayout.lt-md="column"
+            class="content"
+            formArrayName="glAccountEntries"
+            *ngFor="let credit of glAccountEntries.controls; let i = index"
+          >
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
-
               <div fxFlex="8%">
-                {{ (openingBalancesData.glAccounts[i].glAccountType.value !==
+                {{
-                openingBalancesData.glAccounts[i-1]?.glAccountType.value) ?
+                  openingBalancesData.glAccounts[i].glAccountType.value !==
-                glAccountTypeLabel(openingBalancesData.glAccounts[i].glAccountType.value) : '' }}
+                  openingBalancesData.glAccounts[i - 1]?.glAccountType.value
+                    ? glAccountTypeLabel(openingBalancesData.glAccounts[i].glAccountType.value)
+                    : ''
+                }}
               </div>
 
               <div fxFlex="13%">
@@ -105,51 +118,64 @@
 
               <div fxFlex="20%">
                 <mat-form-field>
-                  <mat-label>{{"labels.inputs.Debit" | translate}}</mat-label>
+                  <mat-label>{{ 'labels.inputs.Debit' | translate }}</mat-label>
-                  <input matInput type="number" formControlName="debit">
+                  <input matInput type="number" formControlName="debit" />
                 </mat-form-field>
               </div>
 
               <div fxFlex="20%">
                 <mat-form-field>
-                  <mat-label>{{"labels.inputs.Credit" | translate}}</mat-label>
+                  <mat-label>{{ 'labels.inputs.Credit' | translate }}</mat-label>
-                  <input matInput type="number" formControlName="credit">
+                  <input matInput type="number" formControlName="credit" />
                 </mat-form-field>
               </div>
-
             </div>
-
           </div>
-
         </div>
-
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px"
+      <mat-card-actions
-        *ngIf="openingBalancesData">
+        fxLayout="row"
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
+        fxLayout.xs="column"
-        <button mat-raised-button color="primary" [disabled]="!openingBalancesForm.valid"
+        fxLayoutAlign="center"
-          *mifosxHasPermission="'DEFINEOPENINGBALANCE_JOURNALENTRY'">{{"labels.buttons.Submit" | translate}}</button>
+        fxLayoutGap="5px"
+        *ngIf="openingBalancesData"
+      >
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!openingBalancesForm.valid"
+          *mifosxHasPermission="'DEFINEOPENINGBALANCE_JOURNALENTRY'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
 
 <ng-template #templateSearchFormRef let-popover="popover">
-  <h2>{{"labels.heading.Migrate opening balances (Office-wise)" | translate}}</h2>
+  <h2>{{ 'labels.heading.Migrate opening balances (Office-wise)' | translate }}</h2>
-  <p class="mw300">{{"labels.text.Migrate Opening Balances" | translate}} <a
+  <p class="mw300">
+    {{ 'labels.text.Migrate Opening Balances' | translate }}
+    <a
       href="https://mifosforge.jira.com/wiki/spaces/docs/pages/90243328/Migrate+opening+balances+Office-wise"
-      target="_blank">{{"labels.inputs.Migrate opening balances (Office-wise)" | translate}}</a></p>
+      target="_blank"
+      >{{ 'labels.inputs.Migrate opening balances (Office-wise)' | translate }}</a
+    >
+  </p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn"
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
-      (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" |
+      {{ 'labels.buttons.Close' | translate }}
-      translate}}</button>
+    </button>
-    <button mat-raised-button color="primary"
+    <button mat-raised-button color="primary" (click)="popover.close(); popover.close(); previousStep()">
-      (click)="popover.close();popover.close();previousStep();">{{"labels.buttons.Back" | translate}}</button>
+      {{ 'labels.buttons.Back' | translate }}
-    <button mat-raised-button color="primary"
+    </button>
-      (click)="popover.close();popover.close();nextStep();">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close(); popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
-</ng-template>
+</ng-template>

src/app/accounting/periodic-accruals/periodic-accruals.component.html

@@ -1,37 +1,42 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="periodicAccrualsForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row">
-
           <mat-form-field fxFlex (click)="tillDatePicker.open()">
-            <mat-label>{{"labels.inputs.Accrue Till Date" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Accrue Till Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="tillDatePicker" required formControlName="tillDate">
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="tillDatePicker"
+              required
+              formControlName="tillDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="tillDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #tillDatePicker></mat-datepicker>
             <mat-error *ngIf="periodicAccrualsForm.controls.tillDate.hasError('required')">
-              {{"labels.inputs.Accrue Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Accrue 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 type="button" mat-raised-button [routerLink]="['../']">
-        <button mat-raised-button color="primary" [disabled]="!periodicAccrualsForm.valid" *mifosxHasPermission="'EXECUTE_PERIODICACCRUALACCOUNTING'">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!periodicAccrualsForm.valid"
+          *mifosxHasPermission="'EXECUTE_PERIODICACCRUALACCOUNTING'"
+        >
           <fa-icon icon="play" class="m-r-10"></fa-icon>
-          {{"labels.buttons.Run Periodic Accruals" | translate}}
+          {{ 'labels.buttons.Run Periodic Accruals' | translate }}
         </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/accounting/provisioning-entries/create-provisioning-entry/create-provisioning-entry.component.html

@@ -1,40 +1,47 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="provisioningEntryForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field fxFlex (click)="datePicker.open()">
-            <mat-label>{{"labels.inputs.Date" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="datePicker" required formControlName="date">
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="datePicker"
+              required
+              formControlName="date"
+            />
             <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
             <mat-datepicker #datePicker></mat-datepicker>
             <mat-error *ngIf="provisioningEntryForm.controls.date.hasError('required')">
-              {{"labels.inputs.Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxFlex>
             <mat-checkbox labelPosition="before" formControlName="createjournalentries">
-              {{"labels.inputs.Create Journal Entries" | translate}}
+              {{ 'labels.inputs.Create Journal Entries' | translate }}
             </mat-checkbox>
           </div>
-
         </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]="['../']">
-        <button mat-raised-button color="primary" [disabled]="!provisioningEntryForm.valid" *mifosxHasPermission="'CREATE_PROVISIONING_ENTRIES'">{{"labels.buttons.Submit" | translate}}</button>
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!provisioningEntryForm.valid"
+          *mifosxHasPermission="'CREATE_PROVISIONING_ENTRIES'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/accounting/provisioning-entries/provisioning-entries.component.html

@@ -1,74 +1,85 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-  <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'VIEW_ALL_PROVISIONING_ENTRIES'">
+  <button
+    mat-raised-button
+    color="primary"
+    [routerLink]="['create']"
+    *mifosxHasPermission="'VIEW_ALL_PROVISIONING_ENTRIES'"
+  >
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Create Provisioning Entry" | translate}}
+    {{ 'labels.buttons.Create Provisioning Entry' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <div fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <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="createdUser">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Created By" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Created By' | translate }}</th>
-        <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.createdUser }} </td>
+        <td mat-cell *matCellDef="let provisioningEntry">{{ provisioningEntry.createdUser }}</td>
       </ng-container>
 
       <ng-container matColumnDef="createdDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Created On" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Created On' | translate }}</th>
-        <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.createdDate }} </td>
+        <td mat-cell *matCellDef="let provisioningEntry">{{ provisioningEntry.createdDate }}</td>
       </ng-container>
 
       <ng-container matColumnDef="journalEntry">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Journal Entry Created" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Journal Entry Created' | translate }}
+        </th>
         <td mat-cell *matCellDef="let provisioningEntry">
           <mat-checkbox [disabled]="true" [checked]="provisioningEntry.journalEntry"></mat-checkbox>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="viewReport">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.View Report" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.View Report' | translate }}</th>
         <td mat-cell *matCellDef="let provisioningEntry">
           <button mat-button color="primary" [routerLink]="['view', provisioningEntry.id]">
-            <fa-icon icon="eye" class="m-r-10"></fa-icon>{{"labels.buttons.View" | translate}}
+            <fa-icon icon="eye" class="m-r-10"></fa-icon>{{ 'labels.buttons.View' | translate }}
           </button>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="recreateProvisioning">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Recreate Provisioning" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Recreate Provisioning' | translate }}</th>
         <td mat-cell *matCellDef="let provisioningEntry">
-          <button mat-button (click)="recreateProvisioning($event, provisioningEntry.id)" [disabled]="provisioningEntry.journalEntry" color="primary">
+          <button
-            <fa-icon icon="edit" class="m-r-10"></fa-icon>{{"labels.buttons.Recreate" | translate}}
+            mat-button
+            (click)="recreateProvisioning($event, provisioningEntry.id)"
+            [disabled]="provisioningEntry.journalEntry"
+            color="primary"
+          >
+            <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Recreate' | translate }}
           </button>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="viewJournalEntry">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.View Journal Entry" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.View Journal Entry' | translate }}</th>
         <td mat-cell *matCellDef="let provisioningEntry">
-          <button mat-button (click)="viewJournalEntry($event, provisioningEntry.id)" [disabled]="!provisioningEntry.journalEntry" color="primary">
+          <button
-            <fa-icon icon="eye" class="m-r-10"></fa-icon>{{"labels.buttons.View" | translate}}
+            mat-button
+            (click)="viewJournalEntry($event, provisioningEntry.id)"
+            [disabled]="!provisioningEntry.journalEntry"
+            color="primary"
+          >
+            <fa-icon icon="eye" class="m-r-10"></fa-icon>{{ 'labels.buttons.View' | translate }}
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>

src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html

@@ -1,20 +1,22 @@
 <div class="container" *ngIf="provisioningEntry">
-
   <div class="m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-    <button mat-raised-button color="primary" (click)="createProvisioningJournalEntries()" [disabled]="provisioningEntry.journalEntry" *mifosxHasPermission="'CREATE_JOURNAL_ENTRY'">
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="createProvisioningJournalEntries()"
+      [disabled]="provisioningEntry.journalEntry"
+      *mifosxHasPermission="'CREATE_JOURNAL_ENTRY'"
+    >
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Create Journal Entries" | translate}}
+      {{ 'labels.buttons.Create Journal Entries' | translate }}
     </button>
   </div>
 
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content" fxLayout.lt-md="column">
-
         <div fxFlex="16%" class="header">
-          {{"labels.inputs.Created By" | translate}}
+          {{ 'labels.inputs.Created By' | translate }}
         </div>
 
         <div fxFlex="16%">
@@ -22,7 +24,7 @@
         </div>
 
         <div fxFlex="16%" class="header">
-          {{"labels.inputs.Created On" | translate}}
+          {{ 'labels.inputs.Created On' | translate }}
         </div>
 
         <div fxFlex="16%">
@@ -30,39 +32,33 @@
         </div>
 
         <div fxFlex="18%" class="header">
-          {{"labels.inputs.Amount to be Reserved" | translate}}
+          {{ 'labels.inputs.Amount to be Reserved' | translate }}
         </div>
 
         <div fxFlex="18%">
           {{ provisioningEntry.reservedAmount }}
         </div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
 
 <!-- Search -->
 <div class="container m-t-20" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
   <mat-form-field fxFlex="31%">
-    <mat-label>{{"labels.inputs.Office Name" | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Office Name' | translate }}</mat-label>
-    <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete">
+    <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete" />
   </mat-form-field>
 
   <mat-form-field fxFlex="31%">
-    <mat-label>{{"labels.inputs.Loan Product" | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Loan Product' | translate }}</mat-label>
-    <input matInput [formControl]="loanProduct" [matAutocomplete]="loanProductAutocomplete">
+    <input matInput [formControl]="loanProduct" [matAutocomplete]="loanProductAutocomplete" />
   </mat-form-field>
 
   <mat-form-field fxFlex="31%">
-    <mat-label>{{"labels.inputs.Provisioning Category" | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Provisioning Category' | translate }}</mat-label>
-    <input matInput [formControl]="provisioningCategory" [matAutocomplete]="provisioningCategoryAutocomplete">
+    <input matInput [formControl]="provisioningCategory" [matAutocomplete]="provisioningCategoryAutocomplete" />
   </mat-form-field>
-
 </div>
 
 <!-- Autocomplete data -->
@@ -79,7 +75,10 @@
 </mat-autocomplete>
 
 <mat-autocomplete autoActiveFirstOption #provisioningCategoryAutocomplete="matAutocomplete">
-  <mat-option *ngFor="let provisioningCategory of filteredProvisioningCategoryData | async" [value]="provisioningCategory.categoryName">
+  <mat-option
+    *ngFor="let provisioningCategory of filteredProvisioningCategoryData | async"
+    [value]="provisioningCategory.categoryName"
+  >
     {{ provisioningCategory.categoryName }}
   </mat-option>
 </mat-autocomplete>
@@ -87,49 +86,47 @@
 <!--Table -->
 
 <div class="mat-elevation-z8 container">
-
   <table mat-table [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="officeName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Office Name" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office Name' | translate }}</th>
-      <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.officeName }} </td>
+      <td mat-cell *matCellDef="let provisioningEntry">{{ provisioningEntry.officeName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="productName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Product Name" | translate}}</th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Product Name' | translate }}</th>
-      <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.productName }} </td>
+      <td mat-cell *matCellDef="let provisioningEntry">{{ provisioningEntry.productName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="currencyCode">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Currency Code" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Currency Code' | translate }}</th>
-      <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.currencyCode }} </td>
+      <td mat-cell *matCellDef="let provisioningEntry">{{ provisioningEntry.currencyCode }}</td>
     </ng-container>
 
     <ng-container matColumnDef="categoryName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Category Name" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Category Name' | translate }}</th>
-      <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.categoryName }} </td>
+      <td mat-cell *matCellDef="let provisioningEntry">{{ provisioningEntry.categoryName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="amountreserved">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Provisioning Amount" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Provisioning Amount' | translate }}</th>
-      <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.amountreserved }} </td>
+      <td mat-cell *matCellDef="let provisioningEntry">{{ provisioningEntry.amountreserved }}</td>
     </ng-container>
 
     <ng-container matColumnDef="liabilityAccountName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Liability Account (CR)" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>
-      <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.liabilityAccountName }} </td>
+        {{ 'labels.inputs.Liability Account (CR)' | translate }}
+      </th>
+      <td mat-cell *matCellDef="let provisioningEntry">{{ provisioningEntry.liabilityAccountName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="expenseAccountName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Expense Account (DR)" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Expense Account (DR)' | translate }}</th>
-      <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.expenseAccountName }} </td>
+      <td mat-cell *matCellDef="let provisioningEntry">{{ provisioningEntry.expenseAccountName }}</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>

src/app/accounting/provisioning-entries/view-provisioning-journal-entries/view-provisioning-journal-entries.component.html

@@ -1,73 +1,83 @@
 <div class="container">
-
   <div fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <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="id">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Entry ID" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Entry ID' | translate }}</th>
-        <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.id }} </td>
+        <td mat-cell *matCellDef="let provisioningJournalEntry">{{ provisioningJournalEntry.id }}</td>
       </ng-container>
 
       <ng-container matColumnDef="officeName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Office" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office' | translate }}</th>
-        <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.officeName }} </td>
+        <td mat-cell *matCellDef="let provisioningJournalEntry">{{ provisioningJournalEntry.officeName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="transactionDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Transaction Date" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Transaction Date' | translate }}</th>
-        <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.transactionDate }} </td>
+        <td mat-cell *matCellDef="let provisioningJournalEntry">{{ provisioningJournalEntry.transactionDate }}</td>
       </ng-container>
 
       <ng-container matColumnDef="transactionId">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Transaction ID" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Transaction ID' | translate }}</th>
-        <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.transactionId }} </td>
+        <td mat-cell *matCellDef="let provisioningJournalEntry">{{ provisioningJournalEntry.transactionId }}</td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Type" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Type' | translate }}</th>
-        <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.glAccountType.value }} </td>
+        <td mat-cell *matCellDef="let provisioningJournalEntry">{{ provisioningJournalEntry.glAccountType.value }}</td>
       </ng-container>
 
       <ng-container matColumnDef="createdByUserName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Type" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Type' | translate }}</th>
-        <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.createdByUserName }} </td>
+        <td mat-cell *matCellDef="let provisioningJournalEntry">{{ provisioningJournalEntry.createdByUserName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountCode">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Code" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account Code' | translate }}</th>
-        <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.glAccountCode }} </td>
+        <td mat-cell *matCellDef="let provisioningJournalEntry">{{ provisioningJournalEntry.glAccountCode }}</td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Name" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account Name' | translate }}</th>
-        <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.glAccountName }} </td>
+        <td mat-cell *matCellDef="let provisioningJournalEntry">{{ provisioningJournalEntry.glAccountName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="debit">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Debit" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Debit' | translate }}</th>
-        <td mat-cell *matCellDef="let provisioningJournalEntry"><span *ngIf="provisioningJournalEntry.entryType.value === 'DEBIT'"> {{ (provisioningJournalEntry.currency.displaySymbol || provisioningJournalEntry.currency.code) + ' ' + provisioningJournalEntry.amount }} </span></td>
+        <td mat-cell *matCellDef="let provisioningJournalEntry">
+          <span *ngIf="provisioningJournalEntry.entryType.value === 'DEBIT'">
+            {{
+              (provisioningJournalEntry.currency.displaySymbol || provisioningJournalEntry.currency.code) +
+                ' ' +
+                provisioningJournalEntry.amount
+            }}
+          </span>
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="credit">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Credit" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Credit' | translate }}</th>
-        <td mat-cell *matCellDef="let provisioningJournalEntry"><span *ngIf="provisioningJournalEntry.entryType.value === 'CREDIT'"> {{ (provisioningJournalEntry.currency.displaySymbol || provisioningJournalEntry.currency.code) + ' ' + provisioningJournalEntry.amount }} </span></td>
+        <td mat-cell *matCellDef="let provisioningJournalEntry">
+          <span *ngIf="provisioningJournalEntry.entryType.value === 'CREDIT'">
+            {{
+              (provisioningJournalEntry.currency.displaySymbol || provisioningJournalEntry.currency.code) +
+                ' ' +
+                provisioningJournalEntry.amount
+            }}
+          </span>
+        </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/accounting/revert-transaction/revert-transaction.component.html

@@ -1,31 +1,31 @@
 <div *ngIf="!data.reverted; else reverted">
-
+  <h1 mat-dialog-title>{{ 'labels.heading.Revert Transaction' | translate }}</h1>
-  <h1 mat-dialog-title>{{"labels.heading.Revert Transaction" | translate}}</h1>
   <div mat-dialog-content>
-    <p>{{"labels.text.Revert this transaction?" | translate}}</p>
+    <p>{{ 'labels.text.Revert this transaction?' | translate }}</p>
     <mat-form-field fxFlexFill>
-      <mat-label>{{"labels.inputs.Comments" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Comments' | translate }}</mat-label>
       <textarea matInput [formControl]="comments"></textarea>
     </mat-form-field>
   </div>
   <mat-dialog-actions align="end">
-    <button mat-button mat-dialog-close>{{"labels.buttons.No" | translate}}</button>
+    <button mat-button mat-dialog-close>{{ 'labels.buttons.No' | translate }}</button>
-    <button mat-button [mat-dialog-close]="{ revert: true, comments: comments.value }">{{"labels.buttons.Yes" | translate}}</button>
+    <button mat-button [mat-dialog-close]="{ revert: true, comments: comments.value }">
+      {{ 'labels.buttons.Yes' | translate }}
+    </button>
   </mat-dialog-actions>
-
 </div>
 
 <ng-template #reverted>
-
+  <h1 mat-dialog-title>{{ 'labels.heading.Transaction Reverted' | translate }}</h1>
-    <h1 mat-dialog-title>{{"labels.heading.Transaction Reverted" | translate}}</h1>
+  <div mat-dialog-content>
-    <div mat-dialog-content>
+    <h4>{{ 'labels.heading.Success!' | translate }}</h4>
-      <h4>{{"labels.heading.Success!" | translate}}</h4>
+    <p>{{ 'labels.text.Journal entry reverse transaction' | translate }}</p>
-      <p>{{"labels.text.Journal entry reverse transaction" | translate}}</p>
+    <p>{{ 'labels.text.Transaction ID' | translate }}: {{ data.transactionId }}</p>
-      <p>{{"labels.text.Transaction ID" | translate}}: {{ data.transactionId }}</p>
+  </div>
-    </div>
+  <mat-dialog-actions align="end">
-    <mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close>{{ 'labels.buttons.Close' | translate }}</button>
-      <button mat-button mat-dialog-close>{{"labels.buttons.Close" | translate}}</button>
+    <button mat-button [mat-dialog-close]="{ redirect: true }">
-      <button mat-button [mat-dialog-close]="{ redirect: true }">{{"labels.buttons.Redirect to New Transaction" | translate}}</button>
+      {{ 'labels.buttons.Redirect to New Transaction' | translate }}
-    </mat-dialog-actions>
+    </button>
-
+  </mat-dialog-actions>
 </ng-template>

src/app/accounting/search-journal-entry/search-journal-entry.component.html

@@ -1,11 +1,11 @@
 <div class="container" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
   <mat-form-field fxFlex="31%">
-    <mat-label>{{"labels.inputs.Office Name" | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Office Name' | translate }}</mat-label>
-    <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete">
+    <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete" />
   </mat-form-field>
 
-  <mifosx-gl-account-selector fxFlex="31%"
+  <mifosx-gl-account-selector
+    fxFlex="31%"
     [inputFormControl]="glAccount"
     [glAccountList]="glAccountData"
     [required]="true"
@@ -14,7 +14,7 @@
   </mifosx-gl-account-selector>
 
   <mat-form-field fxFlex="31%">
-    <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
     <mat-select [formControl]="entryTypeFilter" (selectionChange)="applyFilter($event.value, 'manualEntriesOnly')">
       <mat-option *ngFor="let filter of entryTypeFilterData" [value]="filter.value">
         {{ filter.option }}
@@ -23,41 +23,61 @@
   </mat-form-field>
 
   <mat-form-field fxFlex="31%" (click)="transactionDateFromPicker.open()">
-    <mat-label>{{"labels.inputs.Transaction Date From" | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Transaction Date From' | translate }}</mat-label>
-    <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDateFromPicker" [formControl]="transactionDateFrom">
+    <input
+      matInput
+      [min]="minDate"
+      [max]="maxDate"
+      [matDatepicker]="transactionDateFromPicker"
+      [formControl]="transactionDateFrom"
+    />
     <mat-datepicker-toggle matSuffix [for]="transactionDateFromPicker"></mat-datepicker-toggle>
     <mat-datepicker #transactionDateFromPicker></mat-datepicker>
   </mat-form-field>
 
   <mat-form-field fxFlex="31%" (click)="transactionDateToPicker.open()">
-    <mat-label>{{"labels.inputs.Transaction Date To" | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Transaction Date To' | translate }}</mat-label>
-    <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDateToPicker" [formControl]="transactionDateTo">
+    <input
+      matInput
+      [min]="minDate"
+      [max]="maxDate"
+      [matDatepicker]="transactionDateToPicker"
+      [formControl]="transactionDateTo"
+    />
     <mat-datepicker-toggle matSuffix [for]="transactionDateToPicker"></mat-datepicker-toggle>
     <mat-datepicker #transactionDateToPicker></mat-datepicker>
   </mat-form-field>
 
   <mat-form-field fxFlex="31%">
-    <mat-label>{{"labels.inputs.Transaction ID" | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Transaction ID' | translate }}</mat-label>
-    <input matInput [formControl]="transactionId">
+    <input matInput [formControl]="transactionId" />
   </mat-form-field>
 
   <mat-form-field fxFlex="31%" (click)="submittedOnDateFromPicker.open()">
-    <mat-label>{{"labels.inputs.Submitted on Date From" | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Submitted on Date From' | translate }}</mat-label>
-    <input matInput [max]="submittedOnDateTo.value" [matDatepicker]="submittedOnDateFromPicker" [formControl]="submittedOnDateFrom">
+    <input
+      matInput
+      [max]="submittedOnDateTo.value"
+      [matDatepicker]="submittedOnDateFromPicker"
+      [formControl]="submittedOnDateFrom"
+    />
     <mat-datepicker-toggle matSuffix [for]="submittedOnDateFromPicker"></mat-datepicker-toggle>
     <mat-datepicker #submittedOnDateFromPicker></mat-datepicker>
   </mat-form-field>
 
   <mat-form-field fxFlex="31%" (click)="submittedOnDateToPicker.open()">
-    <mat-label>{{"labels.inputs.Submitted on Date To" | translate}} </mat-label>
+    <mat-label>{{ 'labels.inputs.Submitted on Date To' | translate }} </mat-label>
-    <input matInput [min]="submittedOnDateFrom.value"  [matDatepicker]="submittedOnDateToPicker" [formControl]="submittedOnDateTo">
+    <input
+      matInput
+      [min]="submittedOnDateFrom.value"
+      [matDatepicker]="submittedOnDateToPicker"
+      [formControl]="submittedOnDateTo"
+    />
     <mat-datepicker-toggle matSuffix [for]="submittedOnDateToPicker"></mat-datepicker-toggle>
     <mat-datepicker #submittedOnDateToPicker></mat-datepicker>
   </mat-form-field>
-
 </div>
 
-
 <!-- Autocomplete data -->
 <mat-autocomplete autoActiveFirstOption #officeNameAutocomplete="matAutocomplete" [displayWith]="displayOfficeName">
   <mat-option *ngFor="let office of filteredOfficeData | async" [value]="{ id: office.id, name: office.name }">
@@ -66,74 +86,84 @@
 </mat-autocomplete>
 
 <div class="mat-elevation-z8 container">
-
   <table mat-table [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="id">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>  {{"labels.inputs.Entry ID" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Entry ID' | translate }}</th>
-      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.id }} </td>
+      <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.id }}</td>
     </ng-container>
 
     <ng-container matColumnDef="officeName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Office" | translate}}  </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office' | translate }}</th>
-      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.officeName }} </td>
+      <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.officeName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="transactionId">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Transaction ID" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Transaction ID' | translate }}</th>
-      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.transactionId }} </td>
+      <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.transactionId }}</td>
     </ng-container>
 
     <ng-container matColumnDef="transactionDate">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Transaction Date" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Transaction Date' | translate }}</th>
-      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.transactionDate | dateFormat }} </td>
+      <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.transactionDate | dateFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountType">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
-      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.glAccountType.value }} </td>
+      <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.glAccountType.value }}</td>
     </ng-container>
 
     <ng-container matColumnDef="createdByUserName">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Created By" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Created By' | translate }}</th>
-      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.createdByUserName }} </td>
+      <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.createdByUserName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="submittedOnDate">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Submitted on date" | translate}}  </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Submitted on date' | translate }}</th>
-      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.submittedOnDate | datetimeFormat }} </td>
+      <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.submittedOnDate | datetimeFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountCode">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Code" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account Code' | translate }}</th>
-      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.glAccountCode }} </td>
+      <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.glAccountCode }}</td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Name" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account Name' | translate }}</th>
-      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.glAccountName }} </td>
+      <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.glAccountName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="currency">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Currency" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Currency' | translate }}</th>
       <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.currency.code }}</td>
     </ng-container>
 
     <ng-container matColumnDef="debit">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Debit" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Debit' | translate }}</th>
-      <td mat-cell *matCellDef="let journalEntry"><span *ngIf="journalEntry.entryType.value === 'DEBIT'"> {{ journalEntry.amount | formatNumber }} </span></td>
+      <td mat-cell *matCellDef="let journalEntry">
+        <span *ngIf="journalEntry.entryType.value === 'DEBIT'"> {{ journalEntry.amount | formatNumber }} </span>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="credit">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Credit" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Credit' | translate }}</th>
-      <td mat-cell *matCellDef="let journalEntry"><span *ngIf="journalEntry.entryType.value === 'CREDIT'"> {{ journalEntry.amount | formatNumber }} </span></td>
+      <td mat-cell *matCellDef="let journalEntry">
+        <span *ngIf="journalEntry.entryType.value === 'CREDIT'"> {{ journalEntry.amount | formatNumber }} </span>
+      </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['transactions/view', row.transactionId]" class="select-row"></tr>
+    <tr
-
+      mat-row
+      *matRowDef="let row; columns: displayedColumns"
+      [routerLink]="['transactions/view', row.transactionId]"
+      class="select-row"
+    ></tr>
   </table>
 
-  <mat-paginator [length]="dataSource?.records$ | async" [pageSize]="50" [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+  <mat-paginator
-
+    [length]="dataSource?.records$ | async"
+    [pageSize]="50"
+    [pageSizeOptions]="[10, 25, 50, 100]"
+    showFirstLastButtons
+  ></mat-paginator>
 </div>

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-form-field fxFlex (click)="activationDatePicker.open()">
+          <mat-label>{{ 'labels.inputs.Activated On Date' | translate }}</mat-label>
-            <mat-label>{{"labels.inputs.Activated On Date" | translate}}</mat-label>
+          <input
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
+            matInput
-            <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
+            [min]="minDate"
-            <mat-datepicker #activationDatePicker></mat-datepicker>
+            [max]="maxDate"
-            <mat-error *ngIf="activateCenterForm.controls.activationDate.hasError('required')">
+            [matDatepicker]="activationDatePicker"
-              {{"labels.inputs.Activated On Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+            required
-            </mat-error>
+            formControlName="activationDate"
-          </mat-form-field>
+          />
-
+          <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 type="button" mat-raised-button [routerLink]="['../../']">
-        <button mat-raised-button color="primary" [disabled]="!activateCenterForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+          {{ '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>
+            <mat-label>{{ 'labels.inputs.Meeting Start Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" required formControlName="startDate">
+            <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-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
-          <mat-select formControlName="repeatsOnDay" required>
+            <mat-select formControlName="repeatsOnDay" required>
-            <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
+              <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
-              {{ day.value }}
+                {{ day.value }}
-            </mat-option>
+              </mat-option>
-          </mat-select>
+            </mat-select>
-          <mat-error *ngIf="centerMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
+            <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}}
+              {{ 'labels.inputs.At least' | translate }} <strong>{{ 'labels.inputs.one' | translate }}</strong>
-          </mat-error>
+              {{ 'labels.inputs.day must be selected' | translate }}
-        </mat-form-field>
+            </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]="['../../']">
-        <button mat-raised-button color="primary" [disabled]="!centerMeetingForm.valid" (click)="submit()">{{"labels.buttons.Submit | translate}}</button>
+          {{ '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 type="button" mat-raised-button [routerLink]="['../../']">
-        <button mat-raised-button color="primary" [disabled]="!centerAssignStaffForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+          {{ '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>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
-        <td mat-cell *matCellDef="let member"> {{ member.clientId | find:membersData:'id':'displayName' }} </td>
+        <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="1">{{ 'labels.inputs.Present' | translate }}</span>
-          <span *ngSwitchCase="2">{{"labels.inputs.Absent" | translate}}</span>
+          <span *ngSwitchCase="2">{{ 'labels.inputs.Absent' | translate }}</span>
-          <span *ngSwitchCase="3">{{"labels.inputs.Approved" | translate}}</span>
+          <span *ngSwitchCase="3">{{ 'labels.inputs.Approved' | translate }}</span>
-          <span *ngSwitchCase="4">{{"labels.inputs.Leave" | translate}}</span>
+          <span *ngSwitchCase="4">{{ 'labels.inputs.Leave' | translate }}</span>
-          <span *ngSwitchCase="5">{{"labels.inputs.Late" | translate}}</span>
+          <span *ngSwitchCase="5">{{ 'labels.inputs.Late' | translate }}</span>
-          <button mat-icon-button color="primary"
+          <button mat-icon-button color="primary" (click)="editAttendance(member)">
-            (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 type="button" mat-raised-button [routerLink]="['../../']">
-      <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'CREATE_MEETING'">{{"labels.buttons.Confirm" | translate}}</button>
+        {{ '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>
+            <mat-label>{{ 'labels.inputs.Closed On Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closureDatePicker" required formControlName="closureDate">
+            <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 type="button" mat-raised-button [routerLink]="['../../']">
-        <button mat-raised-button color="warn" [disabled]="!closeCenterForm.valid" *mifosxHasPermission="'CLOSE_CENTER'">{{"labels.buttons.Confirm" | translate}}</button>
+          {{ '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-form-field (click)="newMeetingDatePicker.open()">
-          <mat-label>{{"labels.inputs.Existing Meeting Date" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Revised Meeting Date' | translate }}</mat-label>
-          <mat-select formControlName="presentMeetingDate">
+            <input
-            <mat-option *ngFor="let date of nextMeetingDates" [value]="date">
+              matInput
-              {{ date | dateFormat }}
+              [min]="minDate"
-            </mat-option>
+              [max]="maxDate"
-          </mat-select>
+              [matDatepicker]="newMeetingDatePicker"
-          <mat-error *ngIf="centerEditMeetingScheduleForm.controls.presentMeetingDate.hasError('repeatsOnDay')">
+              required
-            {{"labels.inputs.Existing Meeting Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              formControlName="newMeetingDate"
-          </mat-error>
+            />
-        </mat-form-field>
+            <mat-datepicker-toggle matSuffix [for]="newMeetingDatePicker"></mat-datepicker-toggle>
-
+            <mat-datepicker #newMeetingDatePicker></mat-datepicker>
-        <mat-form-field (click)="newMeetingDatePicker.open()">
+            <mat-error *ngIf="centerEditMeetingScheduleForm.controls.newMeetingDate.hasError('required')">
-          <mat-label>{{"labels.inputs.Revised Meeting Date" | translate}}</mat-label>
+              {{ 'labels.inputs.Revised Meeting Date' | translate }} {{ 'labels.commons.is' | translate }}
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="newMeetingDatePicker" required formControlName="newMeetingDate">
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
-          <mat-datepicker-toggle matSuffix [for]="newMeetingDatePicker"></mat-datepicker-toggle>
+            </mat-error>
-          <mat-datepicker #newMeetingDatePicker></mat-datepicker>
+          </mat-form-field>
-          <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 type="button" mat-raised-button [routerLink]="['../../']">
-        <button mat-raised-button color="primary" [disabled]="!centerEditMeetingScheduleForm.valid" (click)="submit()">{{"labels.buttons.Submit" | translate}}</button>
+          {{ '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-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
-          <mat-select formControlName="repeatsOnDay" required>
+            <mat-select formControlName="repeatsOnDay" required>
-            <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
+              <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
-              {{ day.value }}
+                {{ day.value }}
-            </mat-option>
+              </mat-option>
-          </mat-select>
+            </mat-select>
-          <mat-error *ngIf="centerEditMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
+            <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}}
+              {{ 'labels.inputs.At least' | translate }} <strong>{{ 'labels.inputs.one' | translate }}</strong>
-          </mat-error>
+              {{ 'labels.inputs.day must be selected' | translate }}
-        </mat-form-field>
+            </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-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 type="button" mat-raised-button [routerLink]="['../../']">
-        <button mat-raised-button color="primary" [disabled]="!centerEditMeetingForm.valid" (click)="submit()">{{"labels.buttons.Submit" | translate}}</button>
+          {{ '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>
+      <mat-label>{{ 'labels.inputs.Add Groups' | translate }}</mat-label>
-      <input matInput [formControl]="groupChoice" [matAutocomplete]="groupsAutocomplete">
+      <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">{{ 'labels.inputs.name' | translate }}</div>
-        <div class="mat-cell">{{groupChoice.value.name}}</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">{{ 'labels.inputs.Id' | translate }}</div>
-        <div class="mat-cell">{{groupChoice.value.id}}</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">{{ 'labels.inputs.Office' | translate }}</div>
-        <div class="mat-cell">{{groupChoice.value.officeName}}</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">
-    <mat-nav-list  *ngIf="groupMembers?.length">
+        <span matLine class="p-t-10">{{ group.name }}</span>
-      <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>

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

@@ -3,17 +3,20 @@
     <mat-card-title-group class="header-title-group">
       <div class="profile-image-container">
         <div>
-          <img mat-card-md-image class="profile-image" src="assets/images/center_placeholder.png">
+          <img mat-card-md-image class="profile-image" src="assets/images/center_placeholder.png" />
         </div>
       </div>
       <div class="mat-typography center-card-title">
         <mat-card-title>
           <h3 fxFlex="95%">
-            <i class="fa fa-stop" matTooltip="{{ centerViewData.status.value }}"
+            <i
-              [ngClass]="centerViewData.status.code |statusLookup"></i>
+              class="fa fa-stop"
-            <b>{{"labels.heading.Center Name" | translate}} :</b> {{centerViewData.name}}
+              matTooltip="{{ centerViewData.status.value }}"
+              [ngClass]="centerViewData.status.code | statusLookup"
+            ></i>
+            <b>{{ 'labels.heading.Center Name' | translate }} :</b> {{ centerViewData.name }}
           </h3>
-          <div fxFlex="5%" *ngIf="!(centerViewData.status.value==='Closed')">
+          <div fxFlex="5%" *ngIf="!(centerViewData.status.value === 'Closed')">
             <button mat-icon-button [matMenuTriggerFor]="centerMenu" aria-label="Center actions" yPosition="below">
               <mat-icon matListIcon class="actions-menu">
                 <fa-icon icon="bars" size="sm"></fa-icon>
@@ -25,36 +28,40 @@
           <div fxLayout="row" fxLayout.lt-md="column">
             <div fxFlex="50%">
               <p>
-                {{"labels.inputs.Account" | translate}} #:{{centerViewData.accountNo}} <br />
+                {{ 'labels.inputs.Account' | translate }} #:{{ centerViewData.accountNo }} <br />
-                {{"labels.inputs.Office" | translate}}: {{centerViewData.officeName}} <br />
+                {{ 'labels.inputs.Office' | translate }}: {{ centerViewData.officeName }} <br />
                 <span *ngIf="centerViewData.externalId">
-                  {{"labels.inputs.External Id" | translate}}:
+                  {{ 'labels.inputs.External Id' | translate }}:
-                  <mifosx-external-identifier externalId="{{centerViewData.externalId}}"></mifosx-external-identifier><br />
+                  <mifosx-external-identifier externalId="{{ centerViewData.externalId }}"></mifosx-external-identifier
+                  ><br />
                 </span>
                 <span *ngIf="centerViewData.staffName">
-                  {{"labels.inputs.Staff" | translate}}: {{centerViewData.staffName}} <br />
+                  {{ 'labels.inputs.Staff' | translate }}: {{ centerViewData.staffName }} <br />
                 </span>
-                {{"labels.inputs.Activation Date" | translate}} :
+                {{ 'labels.inputs.Activation Date' | translate }} :
-                {{(centerViewData.activationDate)?(centerViewData.activationDate | dateFormat) :'Not Activated'}}<br />
+                {{ centerViewData.activationDate ? (centerViewData.activationDate | dateFormat) : 'Not Activated'
+                }}<br />
               </p>
             </div>
             <div fxFlex="45%" class="center-meeting" fxLayoutAlign="start start">
               <div *ngIf="centerViewData.collectionMeetingCalendar; else unassigned">
                 <p>
-                  {{"labels.inputs.Next Meeting on" | translate}}: {{centerViewData.collectionMeetingCalendar?.nextTenRecurringDates[0] | dateFormat}}
+                  {{ 'labels.inputs.Next Meeting on' | translate }}:
+                  {{ centerViewData.collectionMeetingCalendar?.nextTenRecurringDates[0] | dateFormat }}
                   <span *ngIf="editMeeting">
-                    <i class="fa fa-edit" (click)="doAction('Edit Meeting')"
+                    <i class="fa fa-edit" (click)="doAction('Edit Meeting')" *mifosxHasPermission="'UPDATE_MEETING'"></i
-                      *mifosxHasPermission="'UPDATE_MEETING'"></i><br />
+                    ><br />
                   </span>
-                  {{"labels.inputs.Meeting Frequency" | translate}}: {{centerViewData.collectionMeetingCalendar?.frequency.value | lowercase}}
+                  {{ 'labels.inputs.Meeting Frequency' | translate }}:
+                  {{ centerViewData.collectionMeetingCalendar?.frequency.value | lowercase }}
                 </p>
               </div>
               <ng-template #unassigned>
                 <div>
                   <p>
-                    {{"labels.inputs.Next Meeting on" | translate}}: {{"labels.text.Unassigned" | translate}}
+                    {{ 'labels.inputs.Next Meeting on' | translate }}: {{ 'labels.text.Unassigned' | translate }}
                     <i class="fa fa-calendar"></i><br />
-                    {{"labels.inputs.Meeting Frequency" | translate}}: {{"labels.text.N/A" | translate}}
+                    {{ 'labels.inputs.Meeting Frequency' | translate }}: {{ 'labels.text.N/A' | translate }}
                   </p>
                 </div>
               </ng-template>
@@ -64,66 +71,105 @@
       </div>
 
       <mat-menu #centerMenu="matMenu">
-
+        <span *ngIf="!(centerViewData.status.value === 'Active')">
-        <span *ngIf="!(centerViewData.status.value==='Active')">
+          <button mat-menu-item *mifosxHasPermission="'ACTIVATE_CENTER'" (click)="doAction('Activate')">
-          <button mat-menu-item *mifosxHasPermission="'ACTIVATE_CENTER'" (click)="doAction('Activate')"><i
+            <i class="fa fa-check-sign"></i> {{ 'labels.buttons.Activate' | translate }}
-              class="fa fa-check-sign"></i> {{"labels.buttons.Activate" | translate}} </button>
-        </span>
-        <button mat-menu-item *mifosxHasPermission="'UPDATE_CENTER'" (click)="doAction('Edit')"><i
-            class="fa fa-edit"></i> {{"labels.buttons.Edit" | translate}} </button>
-        <button mat-menu-item *mifosxHasPermission="'CREATE_GROUP'"><i class="fa fa-plus"></i> {{"labels.buttons.Add Group" | translate}} </button>
-        <button mat-menu-item *mifosxHasPermission="'ASSOCIATEGROUPS_CENTER'" (click)="doAction('Manage Groups')"> <i
-            class="fa fa-edit"></i> {{"labels.buttons.Manage Groups" | translate}} </button>
-        <span *ngIf="centerViewData.active">
-          <button mat-menu-item *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"
-            [routerLink]="['savings-accounts', 'create']">
-            <i class="fa fa-file"></i> {{"labels.buttons.Centers Saving Application" | translate}}
           </button>
         </span>
-        <button mat-menu-item [matMenuTriggerFor]="More"> {{"labels.buttons.More" | translate}} </button>
+        <button mat-menu-item *mifosxHasPermission="'UPDATE_CENTER'" (click)="doAction('Edit')">
+          <i class="fa fa-edit"></i> {{ 'labels.buttons.Edit' | translate }}
+        </button>
+        <button mat-menu-item *mifosxHasPermission="'CREATE_GROUP'">
+          <i class="fa fa-plus"></i> {{ 'labels.buttons.Add Group' | translate }}
+        </button>
+        <button mat-menu-item *mifosxHasPermission="'ASSOCIATEGROUPS_CENTER'" (click)="doAction('Manage Groups')">
+          <i class="fa fa-edit"></i> {{ 'labels.buttons.Manage Groups' | translate }}
+        </button>
+        <span *ngIf="centerViewData.active">
+          <button
+            mat-menu-item
+            *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"
+            [routerLink]="['savings-accounts', 'create']"
+          >
+            <i class="fa fa-file"></i> {{ 'labels.buttons.Centers Saving Application' | translate }}
+          </button>
+        </span>
+        <button mat-menu-item [matMenuTriggerFor]="More">{{ 'labels.buttons.More' | translate }}</button>
         <mat-menu #More="matMenu">
           <span *ngIf="centerViewData.collectionMeetingCalendar">
-            <button mat-menu-item *mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'"
+            <button
-              (click)="doAction('Attendance')"> {{"labels.buttons.Attendance" | translate}} </button>
+              mat-menu-item
+              *mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'"
+              (click)="doAction('Attendance')"
+            >
+              {{ 'labels.buttons.Attendance' | translate }}
+            </button>
           </span>
-          <span *ngIf="!(centerViewData.staffId)">
+          <span *ngIf="!centerViewData.staffId">
             <button mat-menu-item *mifosxHasPermission="'ASSIGNSTAFF_GROUP'" (click)="doAction('Assign Staff')">
-              {{"labels.buttons.Assign Staff" | translate}} </button>
+              {{ 'labels.buttons.Assign Staff' | translate }}
+            </button>
           </span>
           <span *ngIf="centerViewData.staffId">
             <button mat-menu-item *mifosxHasPermission="'UNASSIGNSTAFF_GROUP'" (click)="doAction('Unassign Staff')">
-              {{"labels.buttons.Unassign Staff" | translate}} </button>
+              {{ 'labels.buttons.Unassign Staff' | translate }}
+            </button>
           </span>
-          <span *ngIf="centerViewData.status.value==='Active'">
+          <span *ngIf="centerViewData.status.value === 'Active'">
-            <button mat-menu-item *mifosxHasPermission="'DELETE_CENTER'" (click)="doAction('Delete')"> {{"labels.buttons.Delete" | translate}}</button>
+            <button mat-menu-item *mifosxHasPermission="'DELETE_CENTER'" (click)="doAction('Delete')">
+              {{ 'labels.buttons.Delete' | translate }}
+            </button>
           </span>
-          <button mat-menu-item *mifosxHasPermission="'CLOSE_CENTER'" (click)="doAction('Close')"> {{"labels.buttons.Close" | translate}} </button>
+          <button mat-menu-item *mifosxHasPermission="'CLOSE_CENTER'" (click)="doAction('Close')">
-          <span *ngIf="centerViewData.status.value==='Active' && !(centerViewData.collectionMeetingCalendar)">
+            {{ 'labels.buttons.Close' | translate }}
+          </button>
+          <span *ngIf="centerViewData.status.value === 'Active' && !centerViewData.collectionMeetingCalendar">
             <button mat-menu-item *mifosxHasPermission="'CREATE_MEETING'" (click)="doAction('Attach Meeting')">
-              {{"labels.buttons.Attach Meeting" | translate}} </button>
+              {{ 'labels.buttons.Attach Meeting' | translate }}
+            </button>
           </span>
-          <button mat-menu-item *mifosxHasPermission="'READ_Staff Assignment History'"
+          <button
-            (click)="doAction('Staff Assignment History')"> {{"labels.buttons.Staff Assignment History" | translate}} </button>
+            mat-menu-item
+            *mifosxHasPermission="'READ_Staff Assignment History'"
+            (click)="doAction('Staff Assignment History')"
+          >
+            {{ 'labels.buttons.Staff Assignment History' | translate }}
+          </button>
         </mat-menu>
       </mat-menu>
     </mat-card-title-group>
-
   </mat-card-header>
   <mat-card-content>
     <nav mat-tab-nav-bar class="navigation-tabs">
-      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
+      <a
-        [active]="general.isActive">
+        mat-tab-link
-        {{"labels.inputs.General" | translate}}
+        [routerLink]="['./general']"
+        routerLinkActive
+        #general="routerLinkActive"
+        [active]="general.isActive"
+      >
+        {{ 'labels.inputs.General' | translate }}
       </a>
-      <a mat-tab-link *mifosxHasPermission="'READ_GROUPNOTE'" [routerLink]="['./notes']" routerLinkActive
+      <a
-        #notes="routerLinkActive" [active]="notes.isActive">
+        mat-tab-link
-        {{"labels.inputs.Notes" | translate}}
+        *mifosxHasPermission="'READ_GROUPNOTE'"
+        [routerLink]="['./notes']"
+        routerLinkActive
+        #notes="routerLinkActive"
+        [active]="notes.isActive"
+      >
+        {{ 'labels.inputs.Notes' | translate }}
       </a>
       <span *ngFor="let centerDatatable of centerDatatables">
-        <a mat-tab-link *mifosxHasPermission="'READ_' + centerDatatable.registeredTableName"
+        <a
-          [routerLink]="['./datatables',centerDatatable.registeredTableName]" routerLinkActive
+          mat-tab-link
-          #datatable="routerLinkActive" [active]="datatable.isActive">
+          *mifosxHasPermission="'READ_' + centerDatatable.registeredTableName"
-          {{centerDatatable.registeredTableName}}
+          [routerLink]="['./datatables', centerDatatable.registeredTableName]"
+          routerLinkActive
+          #datatable="routerLinkActive"
+          [active]="datatable.isActive"
+        >
+          {{ centerDatatable.registeredTableName }}
         </a>
       </span>
     </nav>

src/app/centers/centers-view/general-tab/general-tab.component.html

@@ -1,130 +1,173 @@
 <div class="tab-container mat-typography">
-  <div *ngIf="centerViewData.status.value==='Closed'">
+  <div *ngIf="centerViewData.status.value === 'Closed'">
-    <h3 class="closedCenter">{{"labels.heading.Center Closed" | translate}}</h3>
+    <h3 class="closedCenter">{{ 'labels.heading.Center Closed' | translate }}</h3>
   </div>
-  <h3>{{"labels.heading.Summary Details" | translate}}</h3>
+  <h3>{{ 'labels.heading.Summary Details' | translate }}</h3>
   <div fxLayout="row" fxLayoutGap="32px" class="summary-details-container">
     <p>
-      {{"labels.inputs.Active Clients" | translate}}: {{centerSummaryData.activeClients}}<br />
+      {{ 'labels.inputs.Active Clients' | translate }}: {{ centerSummaryData.activeClients }}<br />
-      {{"labels.inputs.Active Group Loans" | translate}}: {{centerSummaryData.activeGroupLoans}}<br />
+      {{ 'labels.inputs.Active Group Loans' | translate }}: {{ centerSummaryData.activeGroupLoans }}<br />
-      {{"labels.inputs.Active Client Loans" | translate}}: {{centerSummaryData.activeClientLoans}}<br />
+      {{ 'labels.inputs.Active Client Loans' | translate }}: {{ centerSummaryData.activeClientLoans }}<br />
-      {{"labels.inputs.Active Overdue Group Loans" | translate}}: {{centerSummaryData.overdueGroupLoans}}<br />
+      {{ 'labels.inputs.Active Overdue Group Loans' | translate }}: {{ centerSummaryData.overdueGroupLoans }}<br />
     </p>
     <p>
-      {{"labels.inputs.Active Group Borrowers" | translate}}: {{centerSummaryData.activeGroupBorrowers}}<br />
+      {{ 'labels.inputs.Active Group Borrowers' | translate }}: {{ centerSummaryData.activeGroupBorrowers }}<br />
-      {{"labels.inputs.Active Client Borrowers" | translate}}: {{centerSummaryData.activeClientBorrowers}}<br />
+      {{ 'labels.inputs.Active Client Borrowers' | translate }}: {{ centerSummaryData.activeClientBorrowers }}<br />
-      {{"labels.inputs.Active Overdue Client Loans" | translate}}: {{centerSummaryData.overdueClientLoans}}<br />
+      {{ 'labels.inputs.Active Overdue Client Loans' | translate }}: {{ centerSummaryData.overdueClientLoans }}<br />
     </p>
   </div>
 
   <!-- Groups -->
   <ng-container *ngIf="groupResourceData.length > 0">
-
+    <h3>{{ 'labels.heading.Groups' | translate }}</h3>
-    <h3>{{"labels.heading.Groups"|translate}}</h3>
 
     <table mat-table [dataSource]="groupResourceData" matSort>
-
       <ng-container matColumnDef="Account No">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account Number" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account Number' | translate }}</th>
-        <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" matTooltip="{{ element.status.value }}"
+        <td mat-cell *matCellDef="let element">
-            [ngClass]="element.status.code|statusLookup"></i>
+          <i
-          {{element.accountNo}} </td>
+            class="fa fa-stop"
+            matTooltip="{{ element.status.value }}"
+            [ngClass]="element.status.code | statusLookup"
+          ></i>
+          {{ element.accountNo }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="Group Name">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Group Name" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Group Name' | translate }}</th>
-        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+        <td mat-cell *matCellDef="let element">{{ element.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Office Name">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Office Name" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Office Name' | translate }}</th>
-        <td mat-cell *matCellDef="let element"> {{element.officeName}} </td>
+        <td mat-cell *matCellDef="let element">{{ element.officeName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Submitted On">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Submitted On" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Submitted On' | translate }}</th>
-        <td mat-cell *matCellDef="let element"> {{element.timeline.submittedOnDate | dateFormat}} </td>
+        <td mat-cell *matCellDef="let element">{{ element.timeline.submittedOnDate | dateFormat }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="groupsColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: groupsColumns;" [routerLink]="['/groups', row.id, 'general']"></tr>
+      <tr mat-row *matRowDef="let row; columns: groupsColumns" [routerLink]="['/groups', row.id, 'general']"></tr>
-
     </table>
-
   </ng-container>
 
   <!-- savings overview table -->
   <ng-container *ngIf="!(savingsAccountData === undefined)">
-
     <ng-container *ngIf="savingsAccountData.length > 0">
-
+      <h3>{{ 'labels.heading.Savings Account Overview' | translate }}</h3>
-      <h3>{{"labels.heading.Savings Account Overview" | translate}}</h3>
 
       <table mat-table [dataSource]="savingsAccountData" matSort>
-
         <ng-container matColumnDef="Account No">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}</th>
-          <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" matTooltip="{{ element.status.value }}"
+          <td mat-cell *matCellDef="let element">
-              [ngClass]="element.status.code|statusLookup"></i>
+            <i
-            {{element.accountNo}} </td>
+              class="fa fa-stop"
+              matTooltip="{{ element.status.value }}"
+              [ngClass]="element.status.code | statusLookup"
+            ></i>
+            {{ element.accountNo }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="Products">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Products" | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Products' | translate }}</th>
-          <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+          <td mat-cell *matCellDef="let element">{{ element.productName }}</td>
         </ng-container>
 
         <ng-container matColumnDef="Balance">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Balance" | translate}}</th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Balance' | translate }}</th>
-          <td mat-cell *matCellDef="let element"> {{element.accountBalance}} </td>
+          <td mat-cell *matCellDef="let element">{{ element.accountBalance }}</td>
         </ng-container>
 
         <ng-container matColumnDef="Actions">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
           <td mat-cell *matCellDef="let element">
             <ng-container *ngIf="element.status.active">
-              <button class="account-action-button" mat-raised-button color="primary" *ngIf="element.depositType.id === 100"
+              <button
-                (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Deposit']">
+                class="account-action-button"
-                <i class="fa fa-arrow-right" matTooltip="{{ 'tooltips.Deposit' | translate}}"></i>
+                mat-raised-button
+                color="primary"
+                *ngIf="element.depositType.id === 100"
+                (click)="routeEdit($event)"
+                [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Deposit']"
+              >
+                <i class="fa fa-arrow-right" matTooltip="{{ 'tooltips.Deposit' | translate }}"></i>
               </button>
-              <button class="account-action-button" mat-raised-button color="primary" *ngIf="element.depositType.id === 300"
+              <button
-                (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Deposit']">
+                class="account-action-button"
-                <i class="fa fa-arrow-right" matTooltip="{{ 'tooltips.Deposit' | translate}}"></i>
+                mat-raised-button
+                color="primary"
+                *ngIf="element.depositType.id === 300"
+                (click)="routeEdit($event)"
+                [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Deposit']"
+              >
+                <i class="fa fa-arrow-right" matTooltip="{{ 'tooltips.Deposit' | translate }}"></i>
               </button>
-              <button class="account-action-button" mat-raised-button color="primary" *ngIf="element.depositType.id === 100"
+              <button
-                (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Withdrawal']">
+                class="account-action-button"
-                <i class="fa fa-arrow-left" matTooltip="{{ 'tooltips.Withdraw' | translate}}"></i>
+                mat-raised-button
+                color="primary"
+                *ngIf="element.depositType.id === 100"
+                (click)="routeEdit($event)"
+                [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Withdrawal']"
+              >
+                <i class="fa fa-arrow-left" matTooltip="{{ 'tooltips.Withdraw' | translate }}"></i>
               </button>
-              <button class="account-action-button" mat-raised-button color="primary" *ngIf="element.depositType.id === 300"
+              <button
-                (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Withdrawal']">
+                class="account-action-button"
-                <i class="fa fa-arrow-left" matTooltip="{{ 'tooltips.Withdraw' | translate}}"></i>
+                mat-raised-button
+                color="primary"
+                *ngIf="element.depositType.id === 300"
+                (click)="routeEdit($event)"
+                [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Withdrawal']"
+              >
+                <i class="fa fa-arrow-left" matTooltip="{{ 'tooltips.Withdraw' | translate }}"></i>
               </button>
             </ng-container>
             <ng-container *ngIf="element.status.submittedAndPendingApproval">
-              <button class="account-action-button" mat-raised-button color="primary"
+              <button
-                (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Approve']">
+                class="account-action-button"
-                <i class="fa fa-check" matTooltip="{{ 'tooltips.Approve' | translate}}"></i>
+                mat-raised-button
+                color="primary"
+                (click)="routeEdit($event)"
+                [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Approve']"
+              >
+                <i class="fa fa-check" matTooltip="{{ 'tooltips.Approve' | translate }}"></i>
               </button>
             </ng-container>
             <ng-container *ngIf="!element.status.submittedAndPendingApproval && !element.status.active">
-              <button class="account-action-button" mat-raised-button color="primary"
+              <button
-                (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Undo Approval']">
+                class="account-action-button"
-                <i class="fa fa-undo" matTooltip="{{ 'tooltips.Undo Approve' | translate}}"></i>
+                mat-raised-button
+                color="primary"
+                (click)="routeEdit($event)"
+                [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Undo Approval']"
+              >
+                <i class="fa fa-undo" matTooltip="{{ 'tooltips.Undo Approve' | translate }}"></i>
               </button>
-              <button class="account-action-button" mat-raised-button color="primary"
+              <button
-                (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Activate']">
+                class="account-action-button"
-                <i class="fa fa-power-off" matTooltip="{{ 'tooltips.Activate' | translate}}"></i>
+                mat-raised-button
+                color="primary"
+                (click)="routeEdit($event)"
+                [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Activate']"
+              >
+                <i class="fa fa-power-off" matTooltip="{{ 'tooltips.Activate' | translate }}"></i>
               </button>
             </ng-container>
           </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="savingsAccountColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: savingsAccountColumns;" [routerLink]="['../', 'savings-accounts', row.id, 'transactions']"></tr>
+        <tr
+          mat-row
+          *matRowDef="let row; columns: savingsAccountColumns"
+          [routerLink]="['../', 'savings-accounts', row.id, 'transactions']"
+        ></tr>
       </table>
-
     </ng-container>
-
   </ng-container>
-
 </div>

src/app/centers/centers-view/notes-tab/notes-tab.component.html

@@ -1,29 +1,46 @@
 <div class="tab-container mat-typography">
-  <h3>{{"labels.heading.Notes" | translate}}</h3>
+  <h3>{{ 'labels.heading.Notes' | translate }}</h3>
   <div>
-    <form #formRef="ngForm" [formGroup]="noteForm" fxLayout="row" fxLayoutAlign="start baseline" fxLayoutGap="20px"
+    <form
-      (ngSubmit)="submit()">
+      #formRef="ngForm"
+      [formGroup]="noteForm"
+      fxLayout="row"
+      fxLayoutAlign="start baseline"
+      fxLayoutGap="20px"
+      (ngSubmit)="submit()"
+    >
       <mat-form-field fxFlex="calc(90%-20px)">
-        <textarea formControlName="note" matInput placeholder="{{'labels.text.Write a note' | translate}} ...."></textarea>
+        <textarea
+          formControlName="note"
+          matInput
+          placeholder="{{ 'labels.text.Write a note' | translate }} ...."
+        ></textarea>
       </mat-form-field>
-      <button mat-raised-button fxFlex color="primary" [disabled]="!noteForm.valid" *mifosxHasPermission="'CREATE_GROUPNOTE'">
+      <button
-        <fa-icon icon="plus" class="m-r-10"></fa-icon> {{"labels.buttons.Add" | translate}}
+        mat-raised-button
+        fxFlex
+        color="primary"
+        [disabled]="!noteForm.valid"
+        *mifosxHasPermission="'CREATE_GROUPNOTE'"
+      >
+        <fa-icon icon="plus" class="m-r-10"></fa-icon> {{ 'labels.buttons.Add' | translate }}
       </button>
     </form>
   </div>
   <mat-list>
-    <mat-list-item *ngFor="let centerNote of centerNotes; let i=index;">
+    <mat-list-item *ngFor="let centerNote of centerNotes; let i = index">
       <fa-icon icon="sticky-note" matListIcon></fa-icon>
-      <h3 matLine>{{centerNote.note}} </h3>
+      <h3 matLine>{{ centerNote.note }}</h3>
       <p matLine>
-        <span>{{"labels.inputs.Created By" | translate}}: {{centerNote.createdByUsername}}</span><br />
+        <span>{{ 'labels.inputs.Created By' | translate }}: {{ centerNote.createdByUsername }}</span
-        <span>{{"labels.inputs.Date" | translate}}: {{centerNote.createdOn | dateFormat}}</span>
+        ><br />
+        <span>{{ 'labels.inputs.Date' | translate }}: {{ centerNote.createdOn | dateFormat }}</span>
       </p>
       <div fxLayout="row" fxLayoutAlign="flex-start">
-        <button mat-button color="primary" (click)="editNote(centerNote.id,centerNote.note,i)">
+        <button mat-button color="primary" (click)="editNote(centerNote.id, centerNote.note, i)">
           <fa-icon icon="edit"></fa-icon>
         </button>
-        <button mat-button color="warn" (click)="deleteNote(centerNote.id,i)">
+        <button mat-button color="warn" (click)="deleteNote(centerNote.id, i)">
           <fa-icon icon="trash"></fa-icon>
         </button>
       </div>

src/app/centers/centers.component.html

@@ -2,60 +2,73 @@
   <div fxLayout="row" fxLayoutAlign="start center">
     <div class="search-box">
       <mat-form-field>
-        <input matInput placeholder="Search by Name" [formControl]="name">
+        <input matInput placeholder="Search by Name" [formControl]="name" />
       </mat-form-field>
       <mat-form-field>
-        <input matInput placeholder="Search by ExternalID" [formControl]="externalId">
+        <input matInput placeholder="Search by ExternalID" [formControl]="externalId" />
       </mat-form-field>
       <mat-checkbox #showClosedCenters labelPosition="after" (change)="changeShowClosedCenters()">
-        {{"labels.inputs.Show Closed Centers" | translate}}
+        {{ 'labels.inputs.Show Closed Centers' | translate }}
       </mat-checkbox>
     </div>
     <div class="action-button" fxLayoutGap="25px">
-      <button mat-raised-button color="primary" [routerLink]="['../', 'organization', 'bulk-import', 'Centers']" *mifosxHasPermission="'CREATE_CENTER'">
+      <button
-        <fa-icon icon="download" class="m-r-10"></fa-icon>{{"labels.buttons.Import Center" | translate}}
+        mat-raised-button
+        color="primary"
+        [routerLink]="['../', 'organization', 'bulk-import', 'Centers']"
+        *mifosxHasPermission="'CREATE_CENTER'"
+      >
+        <fa-icon icon="download" class="m-r-10"></fa-icon>{{ 'labels.buttons.Import Center' | translate }}
       </button>
       <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CENTER'">
-        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{"labels.buttons.Create Center" | translate}}
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Create Center' | translate }}
       </button>
     </div>
   </div>
 
   <table mat-table [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.name" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
-      <td mat-cell *matCellDef="let center"> {{ center.name }} </td>
+      <td mat-cell *matCellDef="let center">{{ center.name }}</td>
     </ng-container>
 
     <ng-container matColumnDef="accountNo">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account" | translate}} # </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account' | translate }} #</th>
-      <td mat-cell *matCellDef="let center"> {{ center.accountNo }} </td>
+      <td mat-cell *matCellDef="let center">{{ center.accountNo }}</td>
     </ng-container>
 
     <ng-container matColumnDef="externalId">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.External Id" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.External Id' | translate }}</th>
-      <td mat-cell *matCellDef="let center"> {{ center.externalId }} </td>
+      <td mat-cell *matCellDef="let center">{{ center.externalId }}</td>
     </ng-container>
 
     <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
       <td mat-cell *matCellDef="let row">
-        <div [ngClass]="row.status.code|statusLookup">
+        <div [ngClass]="row.status.code | statusLookup">
           <fa-icon icon="stop"></fa-icon>
         </div>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="officeName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Office Name" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office Name' | translate }}</th>
-      <td mat-cell *matCellDef="let center"> {{ center.officeName }} </td>
+      <td mat-cell *matCellDef="let center">{{ center.officeName }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id, 'general']" class="select-row"></tr>
+    <tr
+      mat-row
+      *matRowDef="let row; columns: displayedColumns"
+      [routerLink]="[row.id, 'general']"
+      class="select-row"
+    ></tr>
   </table>
 
-  <mat-paginator [length]="dataSource?.records$ | async" [pageSize]="10" [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+  <mat-paginator
-
+    [length]="dataSource?.records$ | async"
+    [pageSize]="10"
+    [pageSizeOptions]="[10, 25, 50, 100]"
+    showFirstLastButtons
+  ></mat-paginator>
 </mat-card>

src/app/centers/create-center/create-center.component.html

@@ -1,38 +1,36 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="centerForm">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{"labels.inputs.name" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
-            <input matInput required formControlName="name">
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="centerForm.controls.name.hasError('required')">
-              {{"labels.inputs.Center Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Center Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="centerForm.controls.name.hasError('pattern')">
-              {{"labels.inputs.Center Name" | translate}} <strong>{{"labels.inputs.cannot" | translate}}</strong> {{"labels.inputs.begin with a special character or number" | translate}}
+              {{ 'labels.inputs.Center Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+              {{ 'labels.inputs.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="centerForm.controls.officeId.hasError('required')">
-              {{"labels.inputs.Office" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <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 }}
@@ -41,89 +39,108 @@
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="active">
-            {{"labels.inputs.Active" | translate}}
+            {{ 'labels.inputs.Active' | translate }}
           </mat-checkbox>
 
           <mat-form-field *ngIf="this.centerForm.controls.active.value" (click)="activationDatePicker.open()">
-            <mat-label>{{"labels.inputs.Activation Date" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Activation Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
+            <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="centerForm.controls.activationDate.hasError('required')">
-              {{"labels.inputs.Activation Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Activation Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
-            <input matInput formControlName="externalId">
+            <input matInput formControlName="externalId" />
           </mat-form-field>
 
           <mat-form-field (click)="submittedOnDatePicker.open()">
-            <mat-label>{{"labels.inputs.Submitted On" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" required formControlName="submittedOnDate">
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="submittedOnDatePicker"
+              required
+              formControlName="submittedOnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #submittedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="centerForm.controls.submittedOnDate.hasError('required')">
-              {{"labels.inputs.Submission Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Submission Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Select and Add groups" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Select and Add groups' | translate }}</mat-label>
             <mat-select [formControl]="groupChoice">
               <mat-option *ngFor="let group of groupsData" [value]="group">
                 {{ group.name }}
               </mat-option>
             </mat-select>
           </mat-form-field>
-
         </div>
 
         <div fxLayout="row">
-
           <div class="mat-table" *ngIf="groupChoice.value">
             <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">{{ 'labels.inputs.name' | translate }}</div>
-              <div class="mat-cell">{{groupChoice.value.name}}</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">{{ 'labels.inputs.Id' | translate }}</div>
-              <div class="mat-cell">{{groupChoice.value.id}}</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">{{ 'labels.inputs.Office' | translate }}</div>
-              <div class="mat-cell">{{groupChoice.value.officeName}}</div>
+              <div class="mat-cell">{{ groupChoice.value.officeName }}</div>
             </div>
           </div>
 
           <mat-nav-list *ngIf="groupMembers.length">
-            <h3 matSubheader>{{"labels.heading.Selected Groups" | translate}}</h3>
+            <h3 matSubheader>{{ 'labels.heading.Selected Groups' | translate }}</h3>
-            <div mat-list-item *ngFor="let group of groupMembers index as i">
+            <div mat-list-item *ngFor="let group of groupMembers; index as i">
               <button mat-icon-button (click)="removeGroup(i)">
                 <fa-icon icon="trash"></fa-icon>
               </button>
-              <span matLine>{{group.name}}</span>
+              <span matLine>{{ group.name }}</span>
             </div>
           </mat-nav-list>
-
         </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]="['../']">
-        <button mat-raised-button color="primary" [disabled]="!centerForm.valid" (click)="submit()" *mifosxHasPermission="'CREATE_CENTER'">{{"labels.buttons.Submit" | translate}}</button>
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!centerForm.valid"
+          (click)="submit()"
+          *mifosxHasPermission="'CREATE_CENTER'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/centers/edit-center/edit-center.component.html

@@ -1,26 +1,23 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="editCenterForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{"labels.inputs.name" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
-            <input matInput required formControlName="name">
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="editCenterForm.controls.name.hasError('required')">
-              {{"labels.inputs.Center Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Center Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="editCenterForm.controls.name.hasError('pattern')">
-              {{"labels.inputs.Center Name" | translate}} <strong>{{"labels.inputs.cannot" | translate}}</strong> {{"labels.inputs.begin with a special character or number" | translate}}
+              {{ 'labels.inputs.Center Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+              {{ 'labels.inputs.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <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 staffs" [value]="staff.id">
                 {{ staff.displayName }}
@@ -29,34 +26,40 @@
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
-            <input matInput formControlName="externalId">
+            <input matInput formControlName="externalId" />
           </mat-form-field>
 
-          <ng-container *ngIf="centerData.status.value==='Pending'" (click)="activatedOnDatePicker.open()">
+          <ng-container *ngIf="centerData.status.value === 'Pending'" (click)="activatedOnDatePicker.open()">
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Activation Date" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Activation Date' | translate }}</mat-label>
-              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required
+              <input
-                formControlName="activationDate">
+                matInput
+                [min]="minDate"
+                [max]="maxDate"
+                [matDatepicker]="activatedOnDatePicker"
+                required
+                formControlName="activationDate"
+              />
               <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #activatedOnDatePicker></mat-datepicker>
               <mat-error *ngIf="editCenterForm.controls.activationDate.hasError('required')">
-                {{"labels.inputs.Activation Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.Activation Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
           </ng-container>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">{{"labels.buttons.Cancel" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../general']">
-        <button mat-raised-button color="primary" [disabled]="!editCenterForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!editCenterForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/clients/client-stepper/client-address-step/client-address-step.component.html

@@ -1,19 +1,15 @@
 <div class="mat-typography">
-
+  <h3>{{ 'labels.heading.Address' | translate }}</h3>
-  <h3>{{"labels.heading.Address" | translate}}</h3>
 
   <div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
     <button mat-raised-button color="primary" (click)="addAddress()">
-      <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 *ngIf="clientAddressData.length > 0">
-
     <mat-expansion-panel *ngFor="let address of clientAddressData; index as i" class="address">
-
       <mat-expansion-panel-header>
-
         <mat-panel-title>
           {{ getSelectedValue('addressTypeIdOptions', address.addressTypeId)?.name }}
         </mat-panel-title>
@@ -21,49 +17,63 @@
         <mat-panel-description>
           {{ address.relationship }}
         </mat-panel-description>
-
       </mat-expansion-panel-header>
 
       <mat-divider></mat-divider>
 
       <div class="address-actions" fxLayout="row" fxLayoutAlign="flex-end center">
-        <button mat-button color="primary" (click)="editAddress(address,i)">
+        <button mat-button color="primary" (click)="editAddress(address, i)">
           <fa-icon icon="edit"></fa-icon>
         </button>
-        <button mat-button color="warn" (click)="deleteAddress(address,i)">
+        <button mat-button color="warn" (click)="deleteAddress(address, i)">
           <fa-icon icon="trash"></fa-icon>
         </button>
         <mat-slide-toggle [checked]="address.isActive" (change)="toggleAddress(address)"></mat-slide-toggle>
       </div>
 
       <p>
-        <span *ngIf="isFieldEnabled('street')">{{"labels.inputs.Street" | translate}} : {{address.street}}<br /></span>
+        <span *ngIf="isFieldEnabled('street')"
-        <span *ngIf="isFieldEnabled('addressLine1')">{{"labels.inputs.Address Line" | translate}} 1 : {{address.addressLine1}}<br /></span>
+          >{{ 'labels.inputs.Street' | translate }} : {{ address.street }}<br
-        <span *ngIf="isFieldEnabled('addressLine2')">{{"labels.inputs.Address Line" | translate}} 2 : {{address.addressLine2}}<br /></span>
+        /></span>
-        <span *ngIf="isFieldEnabled('addressLine3')">{{"labels.inputs.Address Line" | translate}} 3 : {{address.addressLine3}}<br /></span>
+        <span *ngIf="isFieldEnabled('addressLine1')"
-        <span *ngIf="isFieldEnabled('townVillage')">{{"labels.inputs.Town / Village" | translate}} : {{address.townVillage}}<br /></span>
+          >{{ 'labels.inputs.Address Line' | translate }} 1 : {{ address.addressLine1 }}<br
-        <span *ngIf="isFieldEnabled('city')">{{"labels.inputs.City" | translate}} : {{address.city}}<br /></span>
+        /></span>
-        <span *ngIf="isFieldEnabled('stateProvinceId')">{{"labels.inputs.State / Province" | translate}} :
+        <span *ngIf="isFieldEnabled('addressLine2')"
-          {{getSelectedValue('stateProvinceIdOptions',address.stateProvinceId)?.name}}<br /></span>
+          >{{ 'labels.inputs.Address Line' | translate }} 2 : {{ address.addressLine2 }}<br
-        <span *ngIf="isFieldEnabled('countryId')">{{"labels.inputs.Country" | translate}} :
+        /></span>
-          {{getSelectedValue('countryIdOptions',address.countryId)?.name}}<br /></span>
+        <span *ngIf="isFieldEnabled('addressLine3')"
-        <span *ngIf="isFieldEnabled('postalCode')">{{"labels.inputs.Postal Code" | translate}} : {{address.postalCode}}<br /></span>
+          >{{ 'labels.inputs.Address Line' | translate }} 3 : {{ address.addressLine3 }}<br
-        <span *ngIf="isFieldEnabled('isActive')">{{"labels.inputs.Active Status" | translate}} : {{address.isActive}}<br /></span>
+        /></span>
+        <span *ngIf="isFieldEnabled('townVillage')"
+          >{{ 'labels.inputs.Town / Village' | translate }} : {{ address.townVillage }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('city')">{{ 'labels.inputs.City' | translate }} : {{ address.city }}<br /></span>
+        <span *ngIf="isFieldEnabled('stateProvinceId')"
+          >{{ 'labels.inputs.State / Province' | translate }} :
+          {{ getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('countryId')"
+          >{{ 'labels.inputs.Country' | translate }} : {{ getSelectedValue('countryIdOptions', address.countryId)?.name
+          }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('postalCode')"
+          >{{ 'labels.inputs.Postal Code' | translate }} : {{ address.postalCode }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('isActive')"
+          >{{ 'labels.inputs.Active Status' | translate }} : {{ address.isActive }}<br
+        /></span>
       </p>
-
     </mat-expansion-panel>
-
   </mat-accordion>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Previous" | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{"labels.buttons.Next" | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </div>

src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.html

@@ -1,51 +1,68 @@
 <form [formGroup]="datatableForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <div *ngFor="let datatableInput of datatableInputs" fxFlex="48%">
       <mat-form-field fxFlex="100%" *ngIf="!isBoolean(datatableInput.columnDisplayType)">
+        <mat-label>{{ getInputName(datatableInput) }}</mat-label>
 
-        <mat-label>{{getInputName(datatableInput)}}</mat-label>
+        <mat-select
-
+          *ngIf="isDropdown(datatableInput.columnDisplayType)"
-        <mat-select *ngIf="isDropdown(datatableInput.columnDisplayType)" formControlName="{{datatableInput.controlName}}">
+          formControlName="{{ datatableInput.controlName }}"
+        >
           <mat-option *ngFor="let code of datatableInput.columnValues" [value]="code.id">
             {{ code.value }}
           </mat-option>
         </mat-select>
 
-        <input matInput type="number" *ngIf="isNumeric(datatableInput.columnDisplayType)"
+        <input
-        formControlName="{{datatableInput.controlName}}">
+          matInput
+          type="number"
+          *ngIf="isNumeric(datatableInput.columnDisplayType)"
+          formControlName="{{ datatableInput.controlName }}"
+        />
 
-        <input matInput *ngIf="isString(datatableInput.columnDisplayType)"
+        <input
-        formControlName="{{datatableInput.controlName}}">
+          matInput
+          *ngIf="isString(datatableInput.columnDisplayType)"
+          formControlName="{{ datatableInput.controlName }}"
+        />
 
-        <textarea matInput *ngIf="isText(datatableInput.columnDisplayType)"
+        <textarea
-        formControlName="{{datatableInput.controlName}}"></textarea>
+          matInput
+          *ngIf="isText(datatableInput.columnDisplayType)"
+          formControlName="{{ datatableInput.controlName }}"
+        ></textarea>
 
         <span *ngIf="isDate(datatableInput.columnDisplayType)" (click)="datePicker.open()">
-          <input matInput [matDatepicker]="datePicker" formControlName="{{datatableInput.controlName}}" class="date-picker">
+          <input
+            matInput
+            [matDatepicker]="datePicker"
+            formControlName="{{ datatableInput.controlName }}"
+            class="date-picker"
+          />
           <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
           <mat-datepicker #datePicker></mat-datepicker>
         </span>
       </mat-form-field>
 
-      <mat-checkbox *ngIf="isBoolean(datatableInput.columnDisplayType)" formControlName="{{datatableInput.controlName}}"
+      <mat-checkbox
-        labelPosition="before" class="margin-v">
+        *ngIf="isBoolean(datatableInput.columnDisplayType)"
-        {{getInputName(datatableInput)}}
+        formControlName="{{ datatableInput.controlName }}"
+        labelPosition="before"
+        class="margin-v"
+      >
+        {{ getInputName(datatableInput) }}
       </mat-checkbox>
     </div>
-
   </div>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Previous" | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{"labels.buttons.Next" | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>

src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.html

@@ -1,104 +1,113 @@
-<h1 mat-dialog-title>{{ data.context }} {{"labels.heading.Family Member" | translate}}</h1>
+<h1 mat-dialog-title>{{ data.context }} {{ 'labels.heading.Family Member' | translate }}</h1>
 
 <form [formGroup]="familyMemberForm">
-
   <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutAlign="start center" fxLayoutGap="2%">
-
     <mat-form-field fxFlex="48%">
-      <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="familyMemberForm.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="48%">
-      <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="48%">
-      <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="familyMemberForm.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="48%">
-      <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="48%">
-      <mat-label>{{"labels.inputs.Age" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Age' | translate }}</mat-label>
-      <input type="number" formControlName="age" matInput [min]="0"/>
+      <input type="number" formControlName="age" matInput [min]="0" />
       <mat-error *ngIf="familyMemberForm.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="48%">{{"labels.inputs.Is Dependent" | translate}}?</mat-checkbox>
+    <mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="48%"
+      >{{ 'labels.inputs.Is Dependent' | translate }}?</mat-checkbox
+    >
 
     <mat-form-field fxFlex="48%">
-      <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 data.options.relationshipIdOptions" [value]="relation.id">
-          {{ relation.name | translateKey:'catalogs' }}
+          {{ relation.name | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="familyMemberForm.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="48%">
-      <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 data.options.genderIdOptions" [value]="gender.id">
-          {{ gender.name | translateKey:'catalogs' }}
+          {{ gender.name | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="familyMemberForm.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="48%">
-      <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 data.options.professionIdOptions" [value]="profession.id">
-          {{ profession.name | translateKey:'catalogs' }}
+          {{ profession.name | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <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 data.options.maritalStatusIdOptions"
+        <mat-option *ngFor="let maritalStatus of data.options.maritalStatusIdOptions" [value]="maritalStatus.id">
-          [value]="maritalStatus.id">
+          {{ maritalStatus.name | translateKey: 'catalogs' }}
-          {{ maritalStatus.name | translateKey:'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
-
     <mat-form-field fxFlex="98%" (click)="dueDatePicker.open()">
-      <mat-label>{{"labels.inputs.Date Of Birth" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Date Of Birth' | translate }}</mat-label>
-      <input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker" required>
+      <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="familyMemberForm.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>
 
   <mat-dialog-actions align="center">
-    <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate}}</button>
+    <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
-    <button mat-raised-button color="primary" [disabled]="!familyMemberForm.valid" [mat-dialog-close]="{ member: familyMember }">{{"labels.buttons.Confirm" | translate}}</button>
+    <button
+      mat-raised-button
+      color="primary"
+      [disabled]="!familyMemberForm.valid"
+      [mat-dialog-close]="{ member: familyMember }"
+    >
+      {{ 'labels.buttons.Confirm' | translate }}
+    </button>
   </mat-dialog-actions>
-
 </form>

src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html

@@ -1,67 +1,65 @@
 <div class="mat-typography">
+  <h3>{{ 'labels.heading.Family Members' | translate }}</h3>
 
-    <h3>{{"labels.heading.Family Members" | translate}}</h3>
+  <div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
+    <button mat-raised-button color="primary" (click)="addFamilyMember()">
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
+    </button>
+  </div>
 
-    <div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
+  <mat-accordion>
-      <button mat-raised-button color="primary" (click)="addFamilyMember()">
+    <mat-expansion-panel *ngFor="let member of clientFamilyMembers; index as i" class="family-member">
-        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{"labels.buttons.Add" | translate}}
+      <mat-expansion-panel-header>
-      </button>
+        <mat-panel-title>
-    </div>
+          {{ member.firstName }} {{ member.middleName ? member.middleName + ' ' + member.lastName : member.lastName }}
+        </mat-panel-title>
 
-    <mat-accordion>
+        <mat-panel-description>
+          {{ member.relationship }}
+        </mat-panel-description>
+      </mat-expansion-panel-header>
 
-      <mat-expansion-panel *ngFor="let member of clientFamilyMembers;index as i" class="family-member">
+      <mat-divider></mat-divider>
 
-        <mat-expansion-panel-header>
+      <div class="family-member-actions" fxLayout="row" fxLayoutAlign="flex-end">
+        <button mat-button color="primary">
+          <fa-icon icon="edit" (click)="editFamilyMember(member, i)"></fa-icon>
+        </button>
+        <button mat-button color="warn" (click)="deleteFamilyMember(member.firstName, i)">
+          <fa-icon icon="trash"></fa-icon>
+        </button>
+      </div>
 
-          <mat-panel-title>
+      <p>
-            {{ member.firstName }} {{ member.middleName ? member.middleName + ' ' + member.lastName : member.lastName }}
+        {{ 'labels.inputs.First Name' | translate }} : {{ member.firstName }}<br />
-          </mat-panel-title>
+        {{ 'labels.inputs.Middle Name' | translate }} : {{ member.middleName }}<br />
-
+        {{ 'labels.inputs.Last Name' | translate }} : {{ member.lastName }}<br />
-          <mat-panel-description>
+        {{ 'labels.inputs.Qualification' | translate }} : {{ member.qualification }}<br />
-            {{member.relationship}}
+        {{ 'labels.inputs.Relationship' | translate }} :
-          </mat-panel-description>
+        {{ member.relationshipId | find: clientTemplate.familyMemberOptions.relationshipIdOptions : 'id' : 'name'
-
+        }}<br />
-        </mat-expansion-panel-header>
+        {{ 'labels.inputs.Age' | translate }} : {{ member.age }}<br />
-
+        {{ 'labels.inputs.Is Dependent' | translate }} : {{ member.isDependent ? 'Yes' : 'No' }}<br />
-        <mat-divider></mat-divider>
+        {{ 'labels.inputs.Marital Status' | translate }} :
-
+        {{ member.maritalStatusId | find: clientTemplate.familyMemberOptions.maritalStatusIdOptions : 'id' : 'name'
-        <div class="family-member-actions" fxLayout="row" fxLayoutAlign="flex-end">
+        }}<br />
-          <button mat-button color="primary">
+        {{ 'labels.inputs.Gender' | translate }} :
-            <fa-icon icon="edit" (click)="editFamilyMember(member, i)"></fa-icon>
+        {{ member.genderId | find: clientTemplate.familyMemberOptions.genderIdOptions : 'id' : 'name' }}<br />
-          </button>
+        {{ 'labels.inputs.Profession' | translate }} :
-          <button mat-button color="warn" (click)="deleteFamilyMember(member.firstName,i)">
+        {{ member.professionId | find: clientTemplate.familyMemberOptions.professionIdOptions : 'id' : 'name' }}<br />
-            <fa-icon icon="trash"></fa-icon>
+        {{ 'labels.inputs.Date Of Birth' | translate }} : {{ member.dateOfBirth | dateFormat }}<br />
-          </button>
+      </p>
-        </div>
+    </mat-expansion-panel>
-
+  </mat-accordion>
-        <p>
-          {{"labels.inputs.First Name" | translate}} : {{ member.firstName }}<br />
-          {{"labels.inputs.Middle Name" | translate}} : {{ member.middleName }}<br />
-          {{"labels.inputs.Last Name" | translate}} : {{ member.lastName }}<br />
-          {{"labels.inputs.Qualification" | translate}} : {{ member.qualification }}<br />
-          {{"labels.inputs.Relationship" | translate}} : {{ member.relationshipId | find:clientTemplate.familyMemberOptions.relationshipIdOptions:'id':'name' }}<br />
-          {{"labels.inputs.Age" | translate}} : {{ member.age }}<br />
-          {{"labels.inputs.Is Dependent" | translate}} : {{ member.isDependent ? 'Yes' : 'No' }}<br />
-          {{"labels.inputs.Marital Status" | translate}} : {{ member.maritalStatusId | find:clientTemplate.familyMemberOptions.maritalStatusIdOptions:'id':'name' }}<br />
-          {{"labels.inputs.Gender" | translate}} : {{ member.genderId | find:clientTemplate.familyMemberOptions.genderIdOptions:'id':'name' }}<br />
-          {{"labels.inputs.Profession" | translate}} : {{member.professionId | find:clientTemplate.familyMemberOptions.professionIdOptions:'id':'name' }}<br />
-          {{"labels.inputs.Date Of Birth" | translate}} : {{member.dateOfBirth | dateFormat}}<br />
-        </p>
-
-      </mat-expansion-panel>
-
-    </mat-accordion>
-
-    <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
-      <button mat-raised-button matStepperPrevious>
-        <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-        {{"labels.buttons.Previous" | translate}}
-      </button>
-      <button mat-raised-button matStepperNext>
-        {{"labels.buttons.Next" | translate}}
-        <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
-      </button>
-    </div>
 
+  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+    <button mat-raised-button matStepperPrevious>
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Previous' | translate }}
+    </button>
+    <button mat-raised-button matStepperNext>
+      {{ 'labels.buttons.Next' | translate }}
+      <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
+    </button>
+  </div>
 </div>

src/app/clients/client-stepper/client-general-step/client-general-step.component.html

@@ -1,88 +1,104 @@
 <form [formGroup]="createClientForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
       <mat-select required formControlName="officeId">
         <mat-option *ngFor="let office of officeOptions" [value]="office.id">
           {{ office.name }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="createClientForm.controls.officeId.hasError('required')">
-        {{"labels.inputs.Office" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="23%">
-      <mat-label>{{"labels.inputs.Legal Form" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Legal Form' | translate }}</mat-label>
       <mat-select required formControlName="legalFormId">
         <mat-option *ngFor="let legalForm of legalFormOptions" [value]="legalForm.id">
-          {{ legalForm.value | translateKey:'inputs'}}
+          {{ legalForm.value | translateKey: 'inputs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-form-field fxFlex="23%">
-      <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
-      <input matInput formControlName="externalId">
+      <input matInput formControlName="externalId" />
     </mat-form-field>
 
     <mat-form-field *ngIf="createClientForm.contains('fullname')" fxFlex="48%">
-      <mat-label>{{ 'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Name', 'Entity Name']) | translate }}</mat-label>
+      <mat-label>{{
-      <input matInput required formControlName="fullname">
+        'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Name', 'Entity Name']) | translate
+      }}</mat-label>
+      <input matInput required formControlName="fullname" />
       <mat-error *ngIf="createClientForm.controls.fullname.hasError('required')">
-        {{"labels.inputs.Client name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Client name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
       <mat-error *ngIf="createClientForm.controls.fullname.hasError('pattern')">
-        {{"labels.inputs.Client name" | translate}} <strong>{{"labels.inputs.cannot" | translate}}</strong> {{"labels.commons.begin with a special character or number" | translate}}
+        {{ 'labels.inputs.Client name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+        {{ 'labels.commons.begin with a special character or number' | translate }}
       </mat-error>
     </mat-form-field>
 
     <mat-form-field *ngIf="createClientForm.contains('firstname')" fxFlex="48%">
-      <mat-label>{{"labels.inputs.First Name" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
-      <input matInput required formControlName="firstname">
+      <input matInput required formControlName="firstname" />
       <mat-error *ngIf="createClientForm.controls.firstname.hasError('required')">
-        {{"labels.inputs.Client first name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Client first name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
       <mat-error *ngIf="createClientForm.controls.firstname.hasError('pattern')">
-        {{"labels.inputs.Client first name" | translate}} <strong>{{"labels.inputs.cannot" | translate}}</strong> {{"labels.commons.begin with a special character or number" | translate}}
+        {{ 'labels.inputs.Client first name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+        {{ 'labels.commons.begin with a special character or number' | translate }}
       </mat-error>
     </mat-form-field>
 
     <mat-form-field *ngIf="createClientForm.contains('middlename')" fxFlex="48%">
-      <mat-label>{{"labels.inputs.Middle Name" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
-      <input matInput formControlName="middlename">
+      <input matInput formControlName="middlename" />
       <mat-error *ngIf="createClientForm.controls.middlename.hasError('pattern')">
-        {{"labels.inputs.Client middle name" | translate}} <strong>{{"labels.inputs.cannot" | translate}}</strong> {{"labels.commons.begin with a special character or number" | translate}}
+        {{ 'labels.inputs.Client middle name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+        {{ 'labels.commons.begin with a special character or number' | translate }}
       </mat-error>
     </mat-form-field>
 
     <mat-form-field *ngIf="createClientForm.contains('lastname')" fxFlex="48%">
-      <mat-label>{{"labels.inputs.Last Name" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
-      <input matInput required formControlName="lastname">
+      <input matInput required formControlName="lastname" />
       <mat-error *ngIf="createClientForm.controls.lastname.hasError('required')">
-        {{"labels.inputs.Client last name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Client last name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
       <mat-error *ngIf="createClientForm.controls.lastname.hasError('pattern')">
-        {{"labels.inputs.Client last name" | translate}} <strong>{{"labels.inputs.cannot" | translate}}</strong> {{"labels.commons.begin with a special character or number" | translate}}
+        {{ 'labels.inputs.Client last name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+        {{ 'labels.commons.begin with a special character or number' | translate }}
       </mat-error>
     </mat-form-field>
 
     <mat-divider></mat-divider>
 
     <mat-form-field fxFlex="48%" (click)="dateOfBirthDatePicker.open()">
-      <mat-label>{{ 'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Date of Birth', 'Incorporation Date']) | translate }}</mat-label>
+      <mat-label>{{
-      <input matInput [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker" formControlName="dateOfBirth">
+        'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Date of Birth', 'Incorporation Date'])
+          | translate
+      }}</mat-label>
+      <input matInput [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker" formControlName="dateOfBirth" />
       <mat-datepicker-toggle matSuffix [for]="dateOfBirthDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #dateOfBirthDatePicker></mat-datepicker>
     </mat-form-field>
 
-    <div fxFlex="100%" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" formGroupName="clientNonPersonDetails"
+    <div
-      *ngIf="createClientForm.contains('clientNonPersonDetails')">
+      fxFlex="100%"
-
+      fxLayout="row wrap"
+      fxLayoutGap="2%"
+      fxLayout.lt-md="column"
+      formGroupName="clientNonPersonDetails"
+      *ngIf="createClientForm.contains('clientNonPersonDetails')"
+    >
       <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Constitution" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Constitution' | translate }}</mat-label>
         <mat-select formControlName="constitutionId" required>
           <mat-option *ngFor="let constitution of constitutionOptions" [value]="constitution.id">
             {{ constitution.name }}
@@ -91,7 +107,7 @@
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Main Business Line" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Main Business Line' | translate }}</mat-label>
         <mat-select formControlName="mainBusinessLineId">
           <mat-option *ngFor="let business of businessLineOptions" [value]="business.id">
             {{ business.name }}
@@ -100,26 +116,31 @@
       </mat-form-field>
 
       <mat-form-field fxFlex="48%" (click)="incorpValidityTillDateDatePicker.open()">
-        <mat-label>{{"labels.inputs.Incorporation Validity Till Date" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</mat-label>
-        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="incorpValidityTillDateDatePicker" formControlName="incorpValidityTillDate">
+        <input
+          matInput
+          [min]="minDate"
+          [max]="maxDate"
+          [matDatepicker]="incorpValidityTillDateDatePicker"
+          formControlName="incorpValidityTillDate"
+        />
         <mat-datepicker-toggle matSuffix [for]="incorpValidityTillDateDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #incorpValidityTillDateDatePicker></mat-datepicker>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Incorporation Number" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Incorporation Number' | translate }}</mat-label>
-        <input matInput formControlName="incorpNumber">
+        <input matInput formControlName="incorpNumber" />
       </mat-form-field>
 
       <mat-form-field fxFlex="98%">
-        <mat-label>{{"labels.inputs.Remarks" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Remarks' | translate }}</mat-label>
         <textarea matInput formControlName="remarks" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
       </mat-form-field>
-
     </div>
 
     <mat-form-field *ngIf="createClientForm.value.legalFormId === 1" fxFlex="48%">
-      <mat-label>{{"labels.inputs.Gender" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
       <mat-select formControlName="genderId">
         <mat-option *ngFor="let gender of genderOptions" [value]="gender.id">
           {{ gender.name }}
@@ -128,7 +149,7 @@
     </mat-form-field>
 
     <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 staffOptions" [value]="staff.id">
           {{ staff.displayName }}
@@ -136,27 +157,33 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-checkbox *ngIf="createClientForm.value.legalFormId === 1" fxFlex="48%" labelPosition="before" formControlName="isStaff" class="margin-v">
+    <mat-checkbox
-      {{"labels.inputs.Is staff" | translate}}?
+      *ngIf="createClientForm.value.legalFormId === 1"
+      fxFlex="48%"
+      labelPosition="before"
+      formControlName="isStaff"
+      class="margin-v"
+    >
+      {{ 'labels.inputs.Is staff' | translate }}?
     </mat-checkbox>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Mobile No" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Mobile No' | translate }}</mat-label>
-      <input matInput type="number" formControlName="mobileNo">
+      <input matInput type="number" formControlName="mobileNo" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Email Address" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Email Address' | translate }}</mat-label>
-      <input matInput formControlName="emailAddress">
+      <input matInput formControlName="emailAddress" />
       <mat-error *ngIf="createClientForm.controls.emailAddress.errors?.email">
-        {{"error.Email not valid" | translate}}
+        {{ 'error.Email not valid' | translate }}
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Client Type" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Client Type' | translate }}</mat-label>
       <mat-select formControlName="clientTypeId">
         <mat-option *ngFor="let clientType of clientTypeOptions" [value]="clientType.id">
           {{ clientType.name }}
@@ -165,17 +192,27 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Client Classification" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Client Classification' | translate }}</mat-label>
       <mat-select formControlName="clientClassificationId">
-        <mat-option *ngFor="let clientClassification of clientClassificationTypeOptions" [value]="clientClassification.id">
+        <mat-option
+          *ngFor="let clientClassification of clientClassificationTypeOptions"
+          [value]="clientClassification.id"
+        >
           {{ clientClassification.name }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()">
-      <mat-label>{{"labels.inputs.Submitted On" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" formControlName="submittedOnDate" required>
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="submittedOnDatePicker"
+        formControlName="submittedOnDate"
+        required
+      />
       <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #submittedOnDatePicker></mat-datepicker>
     </mat-form-field>
@@ -183,47 +220,57 @@
     <br />
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="active" class="margin-v">
-      {{"labels.inputs.Active" | translate}}?
+      {{ 'labels.inputs.Active' | translate }}?
     </mat-checkbox>
 
-    <mat-form-field *ngIf="createClientForm.contains('activationDate')" fxFlex="48%" (click)="activatedOnDatePicker.open()">
+    <mat-form-field
-      <mat-label>{{"labels.inputs.Activation Date" | translate}}</mat-label>
+      *ngIf="createClientForm.contains('activationDate')"
-      <input matInput [min]="createClientForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required
+      fxFlex="48%"
-        formControlName="activationDate">
+      (click)="activatedOnDatePicker.open()"
+    >
+      <mat-label>{{ 'labels.inputs.Activation Date' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="createClientForm.value.submittedOnDate"
+        [max]="maxDate"
+        [matDatepicker]="activatedOnDatePicker"
+        required
+        formControlName="activationDate"
+      />
       <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #activatedOnDatePicker></mat-datepicker>
       <mat-error *ngIf="createClientForm.controls.activationDate.hasError('required')">
-        {{"labels.inputs.Activation Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Activation Date' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="addSavings" class="margin-v">
-      {{"labels.inputs.Open Savings Account" | translate}}?
+      {{ 'labels.inputs.Open Savings Account' | translate }}?
     </mat-checkbox>
 
     <mat-form-field *ngIf="createClientForm.contains('savingsProductId')" fxFlex="48%">
-      <mat-label>{{"labels.inputs.Savings Product" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Savings Product' | translate }}</mat-label>
       <mat-select required formControlName="savingsProductId">
         <mat-option *ngFor="let product of savingProductOptions" [value]="product.id">
           {{ product.name }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="createClientForm.controls.savingsProductId.hasError('required')">
-        {{"labels.inputs.Savings Product" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Savings Product' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-
   </div>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Previous" | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{"labels.buttons.Next" | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>

src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html

@@ -1,28 +1,30 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
-
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.General' | translate }}</h3>
-  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.General" | translate}}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.name" | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.name' | translate }}</span>
     <span fxFlex="60%" *ngIf="client.legalFormId === 2">{{ client.fullname }}</span>
-    <span fxFlex="60%" *ngIf="client.legalFormId === 1">{{ client.firstname }} {{ client.middlename ? client.middlename + ' ' + client.lastname : client.lastname }}</span>
+    <span fxFlex="60%" *ngIf="client.legalFormId === 1"
+      >{{ client.firstname }}
+      {{ client.middlename ? client.middlename + ' ' + client.lastname : client.lastname }}</span
+    >
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Office" | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Office' | translate }}</span>
-    <span fxFlex="60%">{{ client.officeId | find:clientTemplate.officeOptions:'id':'name' }}</span>
+    <span fxFlex="60%">{{ client.officeId | find: clientTemplate.officeOptions : 'id' : 'name' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Legal Form" | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Legal Form' | translate }}</span>
-    <span fxFlex="60%">{{ client.legalFormId | find:clientTemplate.clientLegalFormOptions:'id':'value' }}</span>
+    <span fxFlex="60%">{{ client.legalFormId | find: clientTemplate.clientLegalFormOptions : 'id' : 'value' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.staffId">
-    <span fxFlex="40%">{{"labels.inputs.Staff" | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Staff' | translate }}</span>
-    <span fxFlex="60%">{{ client.staffId | find:clientTemplate.staffOptions:'id':'displayName' }}</span>
+    <span fxFlex="60%">{{ client.staffId | find: clientTemplate.staffOptions : 'id' : 'displayName' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.dateOfBirth">
@@ -31,195 +33,211 @@
   </div>
 
   <div fxFlexFill *ngIf="client.externalId">
-    <span fxFlex="40%">{{"labels.inputs.External Id" | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.External Id' | translate }}</span>
     <span fxFlex="60%">
-      <mifosx-external-identifier externalId="{{client.externalId}}"></mifosx-external-identifier>
+      <mifosx-external-identifier externalId="{{ client.externalId }}"></mifosx-external-identifier>
     </span>
   </div>
 
   <div fxFlexFill *ngIf="client.mobileNo">
-    <span fxFlex="40%">{{"labels.inputs.Mobile No" | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Mobile No' | translate }}</span>
     <span fxFlex="60%">{{ client.mobileNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.emailAddress">
-    <span fxFlex="40%">{{"labels.inputs.Email Address" | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Email Address' | translate }}</span>
     <span fxFlex="60%">{{ client.emailAddress }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.clientTypeId">
-    <span fxFlex="40%">{{"labels.inputs.Client Type" | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Client Type' | translate }}</span>
-    <span fxFlex="60%">{{ client.clientTypeId | find:clientTemplate.clientTypeOptions:'id':'name' }}</span>
+    <span fxFlex="60%">{{ client.clientTypeId | find: clientTemplate.clientTypeOptions : 'id' : 'name' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.clientClassificationId">
-    <span fxFlex="40%">{{"labels.inputs.Client Classification" | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Client Classification' | translate }}</span>
-    <span fxFlex="60%">{{ client.clientClassificationId | find:clientTemplate.clientClassificationOptions:'id':'name' }}</span>
+    <span fxFlex="60%">{{
+      client.clientClassificationId | find: clientTemplate.clientClassificationOptions : 'id' : 'name'
+    }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.savingsProductId">
-    <span fxFlex="40%">{{"labels.inputs.Savings Product" | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Savings Product' | translate }}</span>
-    <span fxFlex="60%">{{ client.savingsProductId | find:clientTemplate.savingProductOptions:'id':'name' }}</span>
+    <span fxFlex="60%">{{ client.savingsProductId | find: clientTemplate.savingProductOptions : 'id' : 'name' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.submittedOnDate">
-    <span fxFlex="40%">{{"labels.inputs.Submitted On Date" | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Submitted On Date' | translate }}</span>
     <span fxFlex="60%">{{ client.submittedOnDate | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Active" | translate}}?</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Active' | translate }}?</span>
     <span fxFlex="60%">{{ client.active | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.activationDate">
-    <span fxFlex="40%">{{"labels.inputs.Activation Date" | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Activation Date' | translate }}</span>
     <span fxFlex="60%">{{ client.activationDate | dateFormat }}</span>
   </div>
 
   <ng-container *ngIf="client.legalFormId === 1">
-
     <div fxFlexFill *ngIf="client.genderId">
-      <span fxFlex="40%">{{"labels.inputs.Gender" | translate}}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Gender' | translate }}</span>
-      <span fxFlex="60%">{{ client.genderId | find:clientTemplate.genderOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ client.genderId | find: clientTemplate.genderOptions : 'id' : 'name' }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Is staff" | translate}}?</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Is staff' | translate }}?</span>
       <span fxFlex="60%">{{ client.isStaff | yesNo }}</span>
     </div>
-
   </ng-container>
 
   <ng-container *ngIf="client.legalFormId === 2">
-
     <div fxFlexFill *ngIf="client.clientNonPersonDetails.incorpValidityTillDate">
-      <span fxFlex="40%">{{"labels.inputs.Incorporation Validity Till Date" | translate}}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</span>
       <span fxFlex="60%">{{ client.clientNonPersonDetails.incorpValidityTillDate | dateFormat }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Incorportation Number" | translate}}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Incorportation Number' | translate }}</span>
       <span fxFlex="60%">{{ client.clientNonPersonDetails.incorpNumber || 'Not Provided' }}</span>
     </div>
 
     <div fxFlexFill *ngIf="client.clientNonPersonDetails.mainBusinessLineId">
-      <span fxFlex="40%">{{"labels.inputs.Main Business Line" | translate}}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Main Business Line' | translate }}</span>
-      <span fxFlex="60%">{{ client.clientNonPersonDetails.mainBusinessLineId | find:clientTemplate.clientNonPersonMainBusinessLineOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{
+        client.clientNonPersonDetails.mainBusinessLineId
+          | find: clientTemplate.clientNonPersonMainBusinessLineOptions : 'id' : 'name'
+      }}</span>
     </div>
 
     <div fxFlexFill *ngIf="client.clientNonPersonDetails.constitutionId">
-      <span fxFlex="40%">{{"labels.inputs.Constitution" | translate}}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Constitution' | translate }}</span>
-      <span fxFlex="60%">{{ client.clientNonPersonDetails.constitutionId | find:clientTemplate.clientNonPersonConstitutionOptions:'id':'name'}}</span>
+      <span fxFlex="60%">{{
+        client.clientNonPersonDetails.constitutionId
+          | find: clientTemplate.clientNonPersonConstitutionOptions : 'id' : 'name'
+      }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Remarks" | translate}}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Remarks' | translate }}</span>
       <span fxFlex="60%">{{ client.clientNonPersonDetails.remarks || 'N/A' }}</span>
     </div>
-
   </ng-container>
 
   <div fxFlexFill *ngIf="client.familyMembers.length" fxLayout="row wrap" fxLayout.lt-md="column" class="m-b-20">
-
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Family Members' | translate }}</h3>
-    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Family Members" | translate}}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <mat-accordion fxFlexFill class="m-t-5">
-
       <mat-expansion-panel *ngFor="let member of client.familyMembers" class="family-member">
-
         <mat-expansion-panel-header>
-
           <mat-panel-title>
             {{ member.firstName }} {{ member.middleName ? member.middleName + ' ' + member.lastName : member.lastName }}
           </mat-panel-title>
 
           <mat-panel-description>
-            {{member.relationship}}
+            {{ member.relationship }}
           </mat-panel-description>
-
         </mat-expansion-panel-header>
 
         <mat-divider></mat-divider>
 
         <p>
-          {{"labels.inputs.First Name" | translate}} : {{ member.firstName }}<br />
+          {{ 'labels.inputs.First Name' | translate }} : {{ member.firstName }}<br />
-          {{"labels.inputs.Middle Name" | translate}} : {{ member.middleName }}<br />
+          {{ 'labels.inputs.Middle Name' | translate }} : {{ member.middleName }}<br />
-          {{"labels.inputs.Last Name" | translate}} : {{ member.lastName }}<br />
+          {{ 'labels.inputs.Last Name' | translate }} : {{ member.lastName }}<br />
-          {{"labels.inputs.Qualification" | translate}} : {{ member.qualification }}<br />
+          {{ 'labels.inputs.Qualification' | translate }} : {{ member.qualification }}<br />
-          {{"labels.inputs.Relationship" | translate}} : {{ member.relationshipId | find:clientTemplate.familyMemberOptions.relationshipIdOptions:'id':'name' }}<br />
+          {{ 'labels.inputs.Relationship' | translate }} :
-          {{"labels.inputs.Age" | translate}} : {{ member.age }}<br />
+          {{ member.relationshipId | find: clientTemplate.familyMemberOptions.relationshipIdOptions : 'id' : 'name'
-          {{"labels.inputs.Is Dependent" | translate}} : {{ member.isDependent ? 'Yes' : 'No' }}<br />
+          }}<br />
-          {{"labels.inputs.Marital Status" | translate}} : {{ member.maritalStatusId | find:clientTemplate.familyMemberOptions.maritalStatusIdOptions:'id':'name' }}<br />
+          {{ 'labels.inputs.Age' | translate }} : {{ member.age }}<br />
-          {{"labels.inputs.Gender" | translate}} : {{ member.genderId | find:clientTemplate.familyMemberOptions.genderIdOptions:'id':'name' }}<br />
+          {{ 'labels.inputs.Is Dependent' | translate }} : {{ member.isDependent ? 'Yes' : 'No' }}<br />
-          {{"labels.inputs.Profession" | translate}} : {{ member.professionId | find:clientTemplate.familyMemberOptions.professionIdOptions:'id':'name' }}<br />
+          {{ 'labels.inputs.Marital Status' | translate }} :
-          {{"labels.inputs.Date Of Birth" | translate}} : {{ member.dateOfBirth | dateFormat }}<br />
+          {{ member.maritalStatusId | find: clientTemplate.familyMemberOptions.maritalStatusIdOptions : 'id' : 'name'
+          }}<br />
+          {{ 'labels.inputs.Gender' | translate }} :
+          {{ member.genderId | find: clientTemplate.familyMemberOptions.genderIdOptions : 'id' : 'name' }}<br />
+          {{ 'labels.inputs.Profession' | translate }} :
+          {{ member.professionId | find: clientTemplate.familyMemberOptions.professionIdOptions : 'id' : 'name' }}<br />
+          {{ 'labels.inputs.Date Of Birth' | translate }} : {{ member.dateOfBirth | dateFormat }}<br />
         </p>
-
       </mat-expansion-panel>
-
     </mat-accordion>
-
   </div>
 
-  <div fxFlexFill *ngIf="clientTemplate.isAddressEnabled && client.address && client.address.length" fxLayout="row wrap" fxLayout.lt-md="column">
+  <div
-
+    fxFlexFill
-    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Address" | translate}}</h3>
+    *ngIf="clientTemplate.isAddressEnabled && client.address && client.address.length"
+    fxLayout="row wrap"
+    fxLayout.lt-md="column"
+  >
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Address' | translate }}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <mat-accordion fxFlexFill class="m-t-5">
-
       <mat-expansion-panel *ngFor="let address of client.address" class="address">
-
         <mat-expansion-panel-header>
-
           <mat-panel-title>
             {{ getSelectedValue('addressTypeIdOptions', address.addressTypeId)?.name }}
           </mat-panel-title>
 
           <mat-panel-description>
-            {{address.relationship}}
+            {{ address.relationship }}
           </mat-panel-description>
-
         </mat-expansion-panel-header>
 
         <mat-divider></mat-divider>
 
         <p>
-          <span *ngIf="isFieldEnabled('street')">{{"labels.inputs.Street" | translate}} : {{address.street}}<br /></span>
+          <span *ngIf="isFieldEnabled('street')"
-          <span *ngIf="isFieldEnabled('addressLine1')">{{"labels.inputs.Address Line" | translate}} 1 : {{address.addressLine1}}<br /></span>
+            >{{ 'labels.inputs.Street' | translate }} : {{ address.street }}<br
-          <span *ngIf="isFieldEnabled('addressLine2')">{{"labels.inputs.Address Line" | translate}} 2 : {{address.addressLine2}}<br /></span>
+          /></span>
-          <span *ngIf="isFieldEnabled('addressLine3')">{{"labels.inputs.Address Line" | translate}} 3 : {{address.addressLine3}}<br /></span>
+          <span *ngIf="isFieldEnabled('addressLine1')"
-          <span *ngIf="isFieldEnabled('townVillage')">{{"labels.inputs.Town / Village" | translate}} : {{address.townVillage}}<br /></span>
+            >{{ 'labels.inputs.Address Line' | translate }} 1 : {{ address.addressLine1 }}<br
-          <span *ngIf="isFieldEnabled('city')">{{"labels.inputs.City" | translate}} : {{address.city}}<br /></span>
+          /></span>
-          <span *ngIf="isFieldEnabled('stateProvinceId')">{{"labels.inputs.State / Province" | translate}} :
+          <span *ngIf="isFieldEnabled('addressLine2')"
-            {{getSelectedValue('stateProvinceIdOptions',address.stateProvinceId)?.name}}<br /></span>
+            >{{ 'labels.inputs.Address Line' | translate }} 2 : {{ address.addressLine2 }}<br
-          <span *ngIf="isFieldEnabled('countryId')">{{"labels.inputs.Country" | translate}} :
+          /></span>
-            {{getSelectedValue('countryIdOptions',address.countryId)?.name}}<br /></span>
+          <span *ngIf="isFieldEnabled('addressLine3')"
-          <span *ngIf="isFieldEnabled('postalCode')">{{"labels.inputs.Postal Code" | translate}} : {{address.postalCode}}<br /></span>
+            >{{ 'labels.inputs.Address Line' | translate }} 3 : {{ address.addressLine3 }}<br
-          <span *ngIf="isFieldEnabled('isActive')">{{"labels.inputs.Active Status" | translate}} : {{address.isActive}}<br /></span>
+          /></span>
+          <span *ngIf="isFieldEnabled('townVillage')"
+            >{{ 'labels.inputs.Town / Village' | translate }} : {{ address.townVillage }}<br
+          /></span>
+          <span *ngIf="isFieldEnabled('city')">{{ 'labels.inputs.City' | translate }} : {{ address.city }}<br /></span>
+          <span *ngIf="isFieldEnabled('stateProvinceId')"
+            >{{ 'labels.inputs.State / Province' | translate }} :
+            {{ getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name }}<br
+          /></span>
+          <span *ngIf="isFieldEnabled('countryId')"
+            >{{ 'labels.inputs.Country' | translate }} :
+            {{ getSelectedValue('countryIdOptions', address.countryId)?.name }}<br
+          /></span>
+          <span *ngIf="isFieldEnabled('postalCode')"
+            >{{ 'labels.inputs.Postal Code' | translate }} : {{ address.postalCode }}<br
+          /></span>
+          <span *ngIf="isFieldEnabled('isActive')"
+            >{{ 'labels.inputs.Active Status' | translate }} : {{ address.isActive }}<br
+          /></span>
         </p>
-
       </mat-expansion-panel>
-
     </mat-accordion>
-
   </div>
-
 </div>
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Previous" | translate}}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button [routerLink]="['../']">
-    {{"labels.buttons.Cancel" | translate}}
+    {{ 'labels.buttons.Cancel' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="submitEvent.emit()">
-    {{"labels.buttons.Submit" | translate}}
+    {{ 'labels.buttons.Submit' | translate }}
   </button>
 </div>

src/app/clients/clients-view/address-tab/address-tab.component.html

@@ -1,52 +1,64 @@
 <div class="tab-container mat-typography">
-
+  <h3>{{ 'labels.heading.Address' | translate }}</h3>
-  <h3>{{"labels.heading.Address" | translate}}</h3>
 
   <div fxLayout="row" fxLayoutAlign="flex-end">
     <button mat-raised-button color="primary" (click)="addAddress()">
-      <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 address of clientAddressData; index as i" class="address">
-    <mat-expansion-panel *ngFor="let address of clientAddressData;index as i" class="address">
-
       <mat-expansion-panel-header>
         <mat-panel-title>
-          {{address.addressType}}
+          {{ address.addressType }}
         </mat-panel-title>
         <mat-panel-description>
-          {{address.relationship}}
+          {{ address.relationship }}
         </mat-panel-description>
       </mat-expansion-panel-header>
 
       <mat-divider [inset]="true"></mat-divider>
 
       <div class="address-actions" fxLayout="row" fxLayoutAlign="flex-end center">
-        <button mat-button color="primary" (click)="editAddress(address,i)">
+        <button mat-button color="primary" (click)="editAddress(address, i)">
           <fa-icon icon="edit"></fa-icon>
         </button>
         <mat-slide-toggle [checked]="address.isActive" (change)="toggleAddress(address)"></mat-slide-toggle>
       </div>
 
       <p>
-        <span *ngIf="isFieldEnabled('street')">{{"labels.inputs.Street" | translate}} : {{address.street}}<br /></span>
+        <span *ngIf="isFieldEnabled('street')"
-        <span *ngIf="isFieldEnabled('addressLine1')">{{"labels.inputs.Address Line" | translate}} 1 : {{address.addressLine1}}<br /></span>
+          >{{ 'labels.inputs.Street' | translate }} : {{ address.street }}<br
-        <span *ngIf="isFieldEnabled('addressLine2')">{{"labels.inputs.Address Line" | translate}} 2 : {{address.addressLine2}}<br /></span>
+        /></span>
-        <span *ngIf="isFieldEnabled('addressLine3')">{{"labels.inputs.Address Line" | translate}} 3 : {{address.addressLine3}}<br /></span>
+        <span *ngIf="isFieldEnabled('addressLine1')"
-        <span *ngIf="isFieldEnabled('townVillage')">{{"labels.inputs.Town / Village" | translate}} : {{address.townVillage}}<br /></span>
+          >{{ 'labels.inputs.Address Line' | translate }} 1 : {{ address.addressLine1 }}<br
-        <span *ngIf="isFieldEnabled('city')">{{"labels.inputs.City" | translate}} : {{address.city}}<br /></span>
+        /></span>
-        <span *ngIf="isFieldEnabled('stateProvinceId')">{{"labels.inputs.State / Province" | translate}} :
+        <span *ngIf="isFieldEnabled('addressLine2')"
-          {{getSelectedValue('stateProvinceIdOptions',address.stateProvinceId)?.name}}<br /></span>
+          >{{ 'labels.inputs.Address Line' | translate }} 2 : {{ address.addressLine2 }}<br
-        <span *ngIf="isFieldEnabled('countryId')">{{"labels.inputs.Country" | translate}} :
+        /></span>
-          {{getSelectedValue('countryIdOptions',address.countryId)?.name}}<br /></span>
+        <span *ngIf="isFieldEnabled('addressLine3')"
-        <span *ngIf="isFieldEnabled('postalCode')">{{"labels.inputs.Postal Code" | translate}} : {{address.postalCode}}<br /></span>
+          >{{ 'labels.inputs.Address Line' | translate }} 3 : {{ address.addressLine3 }}<br
-        <span *ngIf="isFieldEnabled('isActive')">{{"labels.inputs.Active Status" | translate}} : {{address.isActive}}<br /></span>
+        /></span>
+        <span *ngIf="isFieldEnabled('townVillage')"
+          >{{ 'labels.inputs.Town / Village' | translate }} : {{ address.townVillage }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('city')">{{ 'labels.inputs.City' | translate }} : {{ address.city }}<br /></span>
+        <span *ngIf="isFieldEnabled('stateProvinceId')"
+          >{{ 'labels.inputs.State / Province' | translate }} :
+          {{ getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('countryId')"
+          >{{ 'labels.inputs.Country' | translate }} : {{ getSelectedValue('countryIdOptions', address.countryId)?.name
+          }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('postalCode')"
+          >{{ 'labels.inputs.Postal Code' | translate }} : {{ address.postalCode }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('isActive')"
+          >{{ 'labels.inputs.Active Status' | translate }} : {{ address.isActive }}<br
+        /></span>
       </p>
-
     </mat-expansion-panel>
-
   </mat-accordion>
-
 </div>

src/app/clients/clients-view/charges/charges-overview/charges-overview.component.html

@@ -1,49 +1,48 @@
 <mat-card class="charges-card">
-
   <div class="tab-container mat-typography">
-
+    <h2>{{ 'labels.heading.Charges Overview' | translate }}</h2>
-    <h2>{{"labels.heading.Charges Overview" | translate}}</h2>
 
     <table mat-table [dataSource]="dataSource">
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
-        <td mat-cell *matCellDef="let chargeOverviewData"><i class="fa fa-stop"
+        <td mat-cell *matCellDef="let chargeOverviewData">
-            [ngClass]="(!(chargeOverviewData.isWaived || chargeOverviewData.isPaid))|statusLookup"></i>
+          <i
-          {{chargeOverviewData.name}} </td>
+            class="fa fa-stop"
+            [ngClass]="!(chargeOverviewData.isWaived || chargeOverviewData.isPaid) | statusLookup"
+          ></i>
+          {{ chargeOverviewData.name }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="dueAsOf">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Due as of" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Due as of' | translate }}</th>
-        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.dueDate | dateFormat}} </td>
+        <td mat-cell *matCellDef="let chargeOverviewData">{{ chargeOverviewData.dueDate | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="due">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Due" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Due' | translate }}</th>
-        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amount}} </td>
+        <td mat-cell *matCellDef="let chargeOverviewData">{{ chargeOverviewData.amount }}</td>
       </ng-container>
 
       <ng-container matColumnDef="paid">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Paid" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Paid' | translate }}</th>
-        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountPaid}} </td>
+        <td mat-cell *matCellDef="let chargeOverviewData">{{ chargeOverviewData.amountPaid }}</td>
       </ng-container>
 
       <ng-container matColumnDef="waived">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Waived" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Waived' | translate }}</th>
-        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountWaived}} </td>
+        <td mat-cell *matCellDef="let chargeOverviewData">{{ chargeOverviewData.amountWaived }}</td>
       </ng-container>
 
       <ng-container matColumnDef="outstanding">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Outstanding" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Outstanding' | translate }}</th>
-        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountOutstanding}} </td>
+        <td mat-cell *matCellDef="let chargeOverviewData">{{ chargeOverviewData.amountOutstanding }}</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, 20, 25]" showFirstLastButtons></mat-paginator>
-
   </div>
 </mat-card>

src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.html

@@ -1,38 +1,42 @@
 <div class="container mat-typography">
-
   <mat-card>
-
     <form [formGroup]="transactionForm" (ngSubmit)="submit()">
-
       <div fxLayout="column">
-
         <mat-form-field>
-          <mat-label> {{"labels.inputs.Amount" | translate}} </mat-label>
+          <mat-label> {{ 'labels.inputs.Amount' | translate }} </mat-label>
-          <input matInput required autofocus formControlName="amount">
+          <input matInput required autofocus formControlName="amount" />
           <mat-error *ngIf="transactionForm.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 (click)="transactionDatePicker.open()">
-          <mat-label> {{"labels.inputs.Transaction date" | translate}} </mat-label>
+          <mat-label> {{ 'labels.inputs.Transaction date' | translate }} </mat-label>
-          <input matInput [min]="minDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
+          <input
+            matInput
+            [min]="minDate"
+            [matDatepicker]="transactionDatePicker"
+            required
+            formControlName="transactionDate"
+          />
           <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #transactionDatePicker></mat-datepicker>
           <mat-error *ngIf="transactionForm.controls.transactionDate.hasError('required')">
-            {{"labels.inputs.Transaction date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+            {{ 'labels.inputs.Transaction date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
-
       </div>
 
       <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../..','general']">{{"labels.buttons.Cancel" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../..', 'general']">
-        <button mat-raised-button color="primary" [disabled]="!transactionForm.valid">{{"labels.buttons.Submit" | translate}}</button>
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!transactionForm.valid">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </div>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/clients/clients-view/charges/view-charge/view-charge.component.html

@@ -1,115 +1,115 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['pay']" *mifosxHasPermission="'PAY_CLIENTCHARGE'">
     <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Pay" | translate}}
+    {{ 'labels.buttons.Pay' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="waiveCharge()" *mifosxHasPermission="'WAIVE_CLIENTCHARGE'">
     <i class="fa fa-flag"></i>
-    {{"labels.buttons.Waive Charge" | translate}}
+    {{ 'labels.buttons.Waive Charge' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="deleteCharge()">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Delete" | translate}}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
+    <mat-card-title>
-    <mat-card-title> <i class="fa fa-stop" [ngClass]="(!(chargeData.isWaived || chargeData.isPaid))|statusLookup"></i>
+      <i class="fa fa-stop" [ngClass]="!(chargeData.isWaived || chargeData.isPaid) | statusLookup"></i>
       {{ chargeData.name }}
     </mat-card-title>
 
     <mat-divider></mat-divider>
 
     <mat-card-content>
-
       <div class="share-account-tables p-t-20" fxLayout="row wrap" fxFlex="50%">
-
         <table>
-
           <tbody>
-
             <tr>
-              <td> {{"labels.inputs.Currency" | translate}} </td>
+              <td>{{ 'labels.inputs.Currency' | translate }}</td>
-              <td> {{ chargeData.currency.name }} </td>
+              <td>{{ chargeData.currency.name }}</td>
             </tr>
 
             <tr>
-              <td> {{"labels.inputs.Charge Time Type" | translate}} </td>
+              <td>{{ 'labels.inputs.Charge Time Type' | translate }}</td>
-              <td> {{ chargeData.chargeTimeType.value }} </td>
+              <td>{{ chargeData.chargeTimeType.value }}</td>
             </tr>
 
             <tr>
-              <td> {{"labels.inputs.Charge Calculation Type" | translate}} </td>
+              <td>{{ 'labels.inputs.Charge Calculation Type' | translate }}</td>
-              <td> {{ chargeData.chargeCalculationType.value }} </td>
+              <td>{{ chargeData.chargeCalculationType.value }}</td>
             </tr>
 
             <tr>
-              <td> {{"labels.inputs.Due as of" | translate}} </td>
+              <td>{{ 'labels.inputs.Due as of' | translate }}</td>
-              <td> {{ chargeData.dueDate | dateFormat }} </td>
+              <td>{{ chargeData.dueDate | dateFormat }}</td>
             </tr>
 
             <tr>
-              <td> {{"labels.inputs.Due" | translate}} </td>
+              <td>{{ 'labels.inputs.Due' | translate }}</td>
-              <td> {{ chargeData.amount }} </td>
+              <td>{{ chargeData.amount }}</td>
             </tr>
 
             <tr>
-              <td> {{"labels.inputs.Paid" | translate}} </td>
+              <td>{{ 'labels.inputs.Paid' | translate }}</td>
-              <td> {{ chargeData.amountPaid }} </td>
+              <td>{{ chargeData.amountPaid }}</td>
             </tr>
 
             <tr>
-              <td> {{"labels.inputs.Waived" | translate}} </td>
+              <td>{{ 'labels.inputs.Waived' | translate }}</td>
-              <td> {{ chargeData.amountWaived }} </td>
+              <td>{{ chargeData.amountWaived }}</td>
             </tr>
             <tr>
-              <td> {{"labels.inputs.Outstanding" | translate}} </td>
+              <td>{{ 'labels.inputs.Outstanding' | translate }}</td>
-              <td> {{ chargeData.amountOutstanding }} </td>
+              <td>{{ chargeData.amountOutstanding }}</td>
             </tr>
-
           </tbody>
-
         </table>
-
       </div>
-
     </mat-card-content>
 
-    <div fxLayout="row wrap" class="content" style="padding-top:10px">
+    <div fxLayout="row wrap" class="content" style="padding-top: 10px">
-      <h1><b> {{"labels.heading.Transactions" | translate}} </b></h1>
+      <h1>
+        <b> {{ 'labels.heading.Transactions' | translate }} </b>
+      </h1>
 
       <table mat-table [dataSource]="chargeData.clientTransactionDatas" *ngIf="chargeData.clientTransactionDatas">
-
         <ng-container matColumnDef="id">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.ID" | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.ID' | translate }}</th>
-          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.id}} </td>
+          <td mat-cell *matCellDef="let element" [ngClass]="{ strikeoff: element.reversed }">{{ element.id }}</td>
         </ng-container>
 
         <ng-container matColumnDef="officeName">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Office Name" | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Office Name' | translate }}</th>
-          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.officeName }} </td>
+          <td mat-cell *matCellDef="let element" [ngClass]="{ strikeoff: element.reversed }">
+            {{ element.officeName }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="type">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
-          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.type.value}} </td>
+          <td mat-cell *matCellDef="let element" [ngClass]="{ strikeoff: element.reversed }">
+            {{ element.type.value }}
+          </td>
         </ng-container>
         <ng-container matColumnDef="transactionDate">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Date" | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Transaction Date' | translate }}</th>
-          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.date | dateFormat}} </td>
+          <td mat-cell *matCellDef="let element" [ngClass]="{ strikeoff: element.reversed }">
+            {{ element.date | dateFormat }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="amount">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
-          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.amount | formatNumber }} </td>
+          <td mat-cell *matCellDef="let element" [ngClass]="{ strikeoff: element.reversed }">
+            {{ element.amount | formatNumber }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="actions">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
-          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}">
+          <td mat-cell *matCellDef="let element" [ngClass]="{ strikeoff: element.reversed }">
             <button mat-raised-button color="primary" (click)="undoTransaction(element.id)" class="delBtn">
               <fa-icon icon="trash" class="m-r-10"></fa-icon>
             </button>
@@ -117,16 +117,14 @@
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="viewChargeTableColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: viewChargeTableColumns;"></tr>
+        <tr mat-row *matRowDef="let row; columns: viewChargeTableColumns"></tr>
       </table>
-
     </div>
 
-
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../../','general']">{{"labels.buttons.Back" | translate}}</button>
+      <button type="button" mat-raised-button [routerLink]="['../../', 'general']">
+        {{ 'labels.buttons.Back' | translate }}
+      </button>
     </mat-card-actions>
-
   </mat-card>
-
 </div>

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>
+          <mat-label>{{ 'labels.inputs.Transfer Date' | translate }}</mat-label>
-          <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate">
+          <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 type="button" mat-raised-button [routerLink]="['../../']">
-        <button mat-raised-button color="primary" [disabled]="!acceptClientTransferForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+          {{ '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-form-field fxFlex (click)="activationDatePicker.open()">
+          <mat-label>{{ 'labels.inputs.Activated On Date' | translate }}</mat-label>
-            <mat-label>{{"labels.inputs.Activated On Date" | translate}}</mat-label>
+          <input
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
+            matInput
-            <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
+            [min]="minDate"
-            <mat-datepicker #activationDatePicker></mat-datepicker>
+            [max]="maxDate"
-            <mat-error *ngIf="activateClientForm.controls.activationDate.hasError('required')">
+            [matDatepicker]="activationDatePicker"
-              {{"labels.inputs.Activated On Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+            required
-            </mat-error>
+            formControlName="activationDate"
-          </mat-form-field>
+          />
-
+          <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 type="button" mat-raised-button [routerLink]="['../../']">
-        <button mat-raised-button color="primary" [disabled]="!activateClientForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+          {{ '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"
+                <mat-option
-                  [value]="chargeCalculation.id">
+                  *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>
+              <mat-label>{{ 'labels.inputs.Due for collection on' | translate }}</mat-label>
-              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required
+              <input
-                formControlName="dueDate">
+                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>
+              <mat-label>{{ 'labels.inputs.Due On' | translate }}</mat-label>
-              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="feeOnMonthDayPicker" required
+              <input
-                formControlName="feeOnMonthDay">
+                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 type="button" mat-raised-button [routerLink]="['../../']">
-          <button mat-raised-button color="primary" [disabled]="!clientChargeForm.valid">{{"labels.buttons.Submit" | translate}}</button>
+            {{ '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-form-field>
+              <mat-label>{{ 'labels.inputs.Base Price' | translate }}</mat-label>
-                        <mat-label>{{"labels.inputs.Collateral" | translate}}</mat-label>
+              <input matInput required formControlName="basePrice" />
-                        <mat-select required formControlName="collateralId">
+            </mat-form-field>
-                            <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>
 
-                    <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-form-field>
-                            <mat-label>{{"labels.inputs.name" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Quantity' | translate }}</mat-label>
-                            <input matInput required formControlName="name">
+              <input matInput required formControlName="quantity" />
-                        </mat-form-field>
+              <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-form-field>
-                            <mat-label>{{"labels.inputs.Type/Quality" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Total' | translate }}</mat-label>
-                            <input matInput required formControlName="quality">
+              <input matInput required formControlName="totalValue" />
-                        </mat-form-field>
+            </mat-form-field>
 
-                        <mat-form-field>
+            <mat-form-field>
-                            <mat-label>{{"labels.inputs.Unit Type" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Total Collateral Value' | translate }}</mat-label>
-                            <input matInput required formControlName="unitType">
+              <input matInput required formControlName="totalCollateralValue" />
-                        </mat-form-field>
+            </mat-form-field>
-
+          </div>
-                        <mat-form-field>
+        </div>
-                            <mat-label>{{"labels.inputs.Base Price" | translate}}</mat-label>
+      </mat-card-content>
-                            <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-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 type="button" mat-raised-button [routerLink]="['../../']">
-        <button mat-raised-button color="primary" [disabled]="!clientAssignStaffForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+          {{ '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>
+            <mat-label>{{ 'labels.inputs.Closed On Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closureDatePicker" required formControlName="closureDate">
+            <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 type="button" mat-raised-button [routerLink]="['../../']">
-        <button mat-raised-button color="warn" [disabled]="!closeClientForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+          {{ '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%">
+          <div fxFlex="48%" fxLayoutGap="5px" fxLayout="row">
-                        <mat-label> {{"labels.inputs.User Name" | translate}} </mat-label>
+            <mat-checkbox labelPosition="before" formControlName="passwordNeverExpires">
-                        <input matInput required formControlName="username">
+              {{ 'labels.inputs.Override Password Expire Policy' | translate }} ?
-                        <mat-error *ngIf="createSelfServiceForm.controls.username.hasError('required')">
+            </mat-checkbox>
-                            {{"labels.inputs.User Name" | translate}} {{"labels.commons.is" | translate}}
-                            <strong>{{"labels.commons.required" | translate}}</strong>
-                        </mat-error>
-                    </mat-form-field>
 
-                    <mat-form-field fxFlex="48%">
+            <i
-                        <mat-label> {{"labels.inputs.First Name" | translate}} </mat-label>
+              class="fa fa-question-circle fa fa-align-left"
-                        <input matInput required formControlName="firstname">
+              title="Determines if passwords do not expire for this user even if global configuration for password expiry is enabled"
-                        <mat-error *ngIf="createSelfServiceForm.controls.firstname.hasError('required')">
+            ></i>
-                            {{"labels.inputs.First Name" | translate}} {{"labels.commons.is" | translate}}
+          </div>
-                            <strong>{{"labels.commons.required" | translate}}</strong>
-                        </mat-error>
-                    </mat-form-field>
 
-                    <mat-form-field fxFlex="48%">
+          <mat-form-field fxFlex="48%" *ngIf="!hidePasswordField">
-                        <mat-label> {{"labels.inputs.Last Name" | translate}} </mat-label>
+            <mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
-                        <input matInput required formControlName="lastname">
+            <input matInput formControlName="password" type="password" />
-                        <mat-error *ngIf="createSelfServiceForm.controls.lastname.hasError('required')">
+            <mat-error *ngIf="createSelfServiceForm.controls.password.hasError('required')">
-                            {{"labels.inputs.Last Name" | translate}} {{"labels.commons.is" | translate}}
+              {{ 'labels.inputs.Password' | translate }} <strong>{{ 'labels.commons.is required' | translate }}</strong>
-                            <strong>{{"labels.commons.required" | translate}}</strong>
+            </mat-error>
-                        </mat-error>
+            <mat-error *ngIf="createSelfServiceForm.controls.password.hasError('minlength')">
-                    </mat-form-field>
+              {{ '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-form-field fxFlex="48%" *ngIf="!hidePasswordField">
-                        <mat-label> {{"labels.inputs.Email" | translate}} </mat-label>
+            <mat-label> {{ 'labels.inputs.Repeat Password' | translate }} </mat-label>
-                        <input matInput required formControlName="email">
+            <input matInput required formControlName="repeatPassword" type="password" />
-                        <mat-error *ngIf="createSelfServiceForm.controls.email.hasError('required')">
+            <mat-error *ngIf="createSelfServiceForm.controls.repeatPassword.hasError('required')">
-                            {{"labels.inputs.Email" | translate}} {{"labels.commons.is" | translate}}
+              {{ 'labels.inputs.Repeat password' | translate }} {{ 'labels.commons.is' | translate }}
-                            <strong>{{"labels.commons.required" | translate}}</strong>
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
-                        </mat-error>
+            </mat-error>
-                        <mat-error *ngIf="createSelfServiceForm.controls.email.hasError('email')">
+            <mat-error *ngIf="createSelfServiceForm.controls.repeatPassword.hasError('notequal')">
-                            {{"labels.inputs.Email should be a" | translate}} <strong>{{"labels.inputs.valid" |
+              {{ 'labels.inputs.Passwords should be' | translate }}
-                                translate}}</strong> {{"labels.inputs.email" | translate}}.
+              <strong>{{ 'labels.inputs.matched' | translate }}</strong>
-                        </mat-error>
+            </mat-error>
-                    </mat-form-field>
+          </mat-form-field>
 
-                    <mat-checkbox labelPosition="before" formControlName="sendPasswordToEmail" fxFlex="48%">
+          <mat-form-field fxFlex="48%">
-                        {{"labels.inputs.Auto Generate Password" | translate}}
+            <mat-label> {{ 'labels.inputs.Status' | translate }} </mat-label>
-                    </mat-checkbox>
+            <input matInput formControlName="status" />
-
+          </mat-form-field>
-                    <div fxFlex="48%" fxLayoutGap="5px" fxLayout="row">
+        </div>
-
-                        <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-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-form-field fxFlex (click)="reactivationDatePicker.open()">
+          <mat-label>{{ 'labels.inputs.Re Activation On Date' | translate }}</mat-label>
-            <mat-label>{{"labels.inputs.Re Activation On Date" | translate}}</mat-label>
+          <input
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="reactivationDatePicker" required formControlName="reactivationDate">
+            matInput
-            <mat-datepicker-toggle matSuffix [for]="reactivationDatePicker"></mat-datepicker-toggle>
+            [min]="minDate"
-            <mat-datepicker #reactivationDatePicker></mat-datepicker>
+            [max]="maxDate"
-            <mat-error *ngIf="reactivateClientForm.controls.reactivationDate.hasError('required')">
+            [matDatepicker]="reactivationDatePicker"
-              {{"labels.inputs.Reactivation Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+            required
-            </mat-error>
+            formControlName="reactivationDate"
-          </mat-form-field>
+          />
-
+          <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 type="button" mat-raised-button [routerLink]="['../../']">
-        <button mat-raised-button color="primary" [disabled]="!reactivateClientForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+          {{ '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>
+          <mat-label>{{ 'labels.inputs.Transfer Date' | translate }}</mat-label>
-          <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate">
+          <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 type="button" mat-raised-button [routerLink]="['../../']">
-        <button mat-raised-button color="primary" [disabled]="!rejectClientTransferForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+          {{ '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>
+            <mat-label>{{ 'labels.inputs.Rejection Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="rejectionDatePicker" required formControlName="rejectionDate">
+            <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 type="button" mat-raised-button [routerLink]="['../../']">
-        <button mat-raised-button color="warn" [disabled]="!rejectClientForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+          {{ '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
-                <mat-radio-button fxLayout="column" class="radio-button" *ngFor="let options of question.responseDatas"
+                  fxLayout="column"
-                  style="margin-bottom: 5px; align-items: normal; white-space: normal;" [value]="options">
+                  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-cancel" color="danger" [routerLink]="['../../general']">
-    <button mat-raised-button class="button-submit" color="primary" (click)=submit()>{{"labels.buttons.Submit" | translate}}</button>
+      {{ '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>
+            <mat-label>{{ 'labels.inputs.Transfer Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transferDatePicker" required formControlName="transferDate">
+            <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 type="button" mat-raised-button [routerLink]="['../../']">
-        <button mat-raised-button color="primary" [disabled]="!transferClientForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+          {{ '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-form-field fxFlex (click)="reopenedDatePicker.open()">
+          <mat-label>{{ 'labels.inputs.Reopened On Date' | translate }}</mat-label>
-            <mat-label>{{"labels.inputs.Reopened On Date" | translate}}</mat-label>
+          <input
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="reopenedDatePicker" required formControlName="reopenedDate">
+            matInput
-            <mat-datepicker-toggle matSuffix [for]="reopenedDatePicker"></mat-datepicker-toggle>
+            [min]="minDate"
-            <mat-datepicker #reopenedDatePicker></mat-datepicker>
+            [max]="maxDate"
-            <mat-error *ngIf="undoClientRejectionForm.controls.reopenedDate.hasError('required')">
+            [matDatepicker]="reopenedDatePicker"
-              {{"labels.inputs.Reopened On Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+            required
-            </mat-error>
+            formControlName="reopenedDate"
-          </mat-form-field>
+          />
-
+          <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 type="button" mat-raised-button [routerLink]="['../../']">
-        <button mat-raised-button color="primary" [disabled]="!undoClientRejectionForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+          {{ '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>
+          <mat-label>{{ 'labels.inputs.Transfer Date' | translate }}</mat-label>
-          <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate">
+          <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 type="button" mat-raised-button [routerLink]="['../../']">
-        <button mat-raised-button color="primary" [disabled]="!undoClientTransferForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+          {{ '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 type="button" mat-raised-button [routerLink]="['../../']">
-        <button mat-raised-button color="primary" [disabled]="!clientSavingsAccountForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+          {{ '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>
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <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>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="surveyName">{{ 'labels.inputs.Survey' | translate }}</th>
-        <td mat-cell *matCellDef="let survey"> {{ survey.surveyName }} </td>
+        <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>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="createdBy">
-        <td mat-cell *matCellDef="let survey"> {{ survey.createdBy }} </td>
+          {{ '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>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.DateTime' | translate }}</th>
-        <td mat-cell *matCellDef="let survey"> {{ survey.date  | datetimeFormat }} </td>
+        <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>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Score' | translate }}</th>
-        <td mat-cell *matCellDef="let survey"> {{ survey.score | formatNumber }} </td>
+        <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>
+            <mat-label>{{ 'labels.inputs.Withdrawal Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="withdrawalDatePicker" required formControlName="withdrawalDate">
+            <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 type="button" mat-raised-button [routerLink]="['../../']">
-        <button mat-raised-button color="primary" [disabled]="!withdrawClientForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+          {{ '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>

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

@@ -1,39 +1,57 @@
 <mat-card class="account-card">
-
   <mat-card-header fxLayout="column" class="header">
-
     <mat-card-title-group class="header-title-group">
-
       <div class="profile-image-container">
         <div>
-          <img mat-card-md-image class="profile-image"
+          <img
-            [src]="(clientImage)?clientImage:'assets/images/user_placeholder.png'">
+            mat-card-md-image
+            class="profile-image"
+            [src]="clientImage ? clientImage : 'assets/images/user_placeholder.png'"
+          />
         </div>
         <div fxLayoutAlign="center center" class="m-b-5">
-          <button class="client-image-button" mat-raised-button (click)="doAction('Upload Image')"
+          <button
-            matTooltip="{{ 'tooltips.Upload Image' | translate}}" *mifosxHasPermission="'CREATE_CLIENTIMAGE'">
+            class="client-image-button"
+            mat-raised-button
+            (click)="doAction('Upload Image')"
+            matTooltip="{{ 'tooltips.Upload Image' | translate }}"
+            *mifosxHasPermission="'CREATE_CLIENTIMAGE'"
+          >
             <i class="fa fa-upload"></i>
           </button>
-          <button class="client-image-button" mat-raised-button (click)="doAction('Capture Image')"
+          <button
-            matTooltip="{{ 'tooltips.Capture Image' | translate}}" *mifosxHasPermission="'CREATE_CLIENTIMAGE'">
+            class="client-image-button"
+            mat-raised-button
+            (click)="doAction('Capture Image')"
+            matTooltip="{{ 'tooltips.Capture Image' | translate }}"
+            *mifosxHasPermission="'CREATE_CLIENTIMAGE'"
+          >
             <i class="fa fa-camera"></i>
           </button>
-          <button class="client-image-button" mat-raised-button (click)="doAction('Delete Image')"
+          <button
-            matTooltip="{{ 'tooltips.Delete Image' | translate}}" *mifosxHasPermission="'DELETE_CLIENTIMAGE'">
+            class="client-image-button"
+            mat-raised-button
+            (click)="doAction('Delete Image')"
+            matTooltip="{{ 'tooltips.Delete Image' | translate }}"
+            *mifosxHasPermission="'DELETE_CLIENTIMAGE'"
+          >
             <i class="fa fa-trash"></i>
           </button>
-          <br>
+          <br />
         </div>
-        <p (click)="doAction('View Signature')" class="signature">{{"labels.inputs.View Signature" | translate}}</p>
+        <p (click)="doAction('View Signature')" class="signature">{{ 'labels.inputs.View Signature' | translate }}</p>
       </div>
 
       <div class="mat-typography account-card-title">
-
         <mat-card-title fxLayout="row wrap" class="content">
           <h3 fxFlex="95%">
-            <i class="fa fa-stop" [ngClass]="clientViewData.status.code|statusLookup"
+            <i
-              matTooltip="{{'labels.status.' + clientViewData.status.value | translate}}"></i>
+              class="fa fa-stop"
-            <b>{{"labels.inputs.Client Name" | translate}} :</b><mifosx-entity-name entityName="{{clientViewData.displayName}}"></mifosx-entity-name>
+              [ngClass]="clientViewData.status.code | statusLookup"
+              matTooltip="{{ 'labels.status.' + clientViewData.status.value | translate }}"
+            ></i>
+            <b>{{ 'labels.inputs.Client Name' | translate }} :</b
+            ><mifosx-entity-name entityName="{{ clientViewData.displayName }}"></mifosx-entity-name>
           </h3>
           <div fxFlex="5%">
             <button mat-icon-button [matMenuTriggerFor]="clientMenu" aria-label="Client actions" yPosition="below">
@@ -50,56 +68,90 @@
               <table class="account-overview">
                 <tbody>
                   <tr>
-                    <td><b>{{"labels.inputs.Office" | translate}}</b></td>
+                    <td>
-                    <td><mifosx-entity-name entityName="{{clientViewData.officeName}}"></mifosx-entity-name></td>
+                      <b>{{ 'labels.inputs.Office' | translate }}</b>
+                    </td>
+                    <td><mifosx-entity-name entityName="{{ clientViewData.officeName }}"></mifosx-entity-name></td>
                   </tr>
                   <tr>
-                    <td><b>{{"labels.inputs.Client" | translate}}</b></td>
+                    <td>
-                    <td><mifosx-account-number accountNo="{{clientViewData.accountNo}}"></mifosx-account-number></td>
+                      <b>{{ 'labels.inputs.Client' | translate }}</b>
+                    </td>
+                    <td><mifosx-account-number accountNo="{{ clientViewData.accountNo }}"></mifosx-account-number></td>
                   </tr>
                   <tr>
-                    <td><b>{{"labels.inputs.External Id" | translate}}</b></td>
+                    <td>
-                    <td><mifosx-external-identifier externalId="{{clientViewData.externalId}}" completed="true"></mifosx-external-identifier></td>
+                      <b>{{ 'labels.inputs.External Id' | translate }}</b>
+                    </td>
+                    <td>
+                      <mifosx-external-identifier
+                        externalId="{{ clientViewData.externalId }}"
+                        completed="true"
+                      ></mifosx-external-identifier>
+                    </td>
                   </tr>
                   <tr *ngIf="clientViewData.activationDate">
-                    <td><b>{{"labels.inputs.Activation Date" | translate}}</b></td>
+                    <td>
-                    <td>{{clientViewData.activationDate | dateFormat}}</td>
+                      <b>{{ 'labels.inputs.Activation Date' | translate }}</b>
+                    </td>
+                    <td>{{ clientViewData.activationDate | dateFormat }}</td>
                   </tr>
                   <tr>
-                    <td><b>{{"labels.inputs.Staff" | translate}}</b></td>
+                    <td>
-                    <td *ngIf="clientViewData.staffName">{{clientViewData.staffName}}</td>
+                      <b>{{ 'labels.inputs.Staff' | translate }}</b>
-                    <td *ngIf="!clientViewData.staffName">{{'labels.inputs.Unassigned' | translate}}</td>
+                    </td>
+                    <td *ngIf="clientViewData.staffName">{{ clientViewData.staffName }}</td>
+                    <td *ngIf="!clientViewData.staffName">{{ 'labels.inputs.Unassigned' | translate }}</td>
                   </tr>
                 </tbody>
-              </table> 
+              </table>
             </div>
             <div fxFlex="50%">
               <table class="account-overview">
                 <tbody>
                   <tr *ngIf="clientViewData.groups.length > 0">
-                    <td><b>{{"labels.inputs.Member Of" | translate}}</b></td>
+                    <td>
-                    <td><span *ngFor="let group of clientViewData.groups">
+                      <b>{{ 'labels.inputs.Member Of' | translate }}</b>
-                      <span class="m-r-3">{{group.name}}</span>
+                    </td>
-                    </span></td>
+                    <td>
+                      <span *ngFor="let group of clientViewData.groups">
+                        <span class="m-r-3">{{ group.name }}</span>
+                      </span>
+                    </td>
                   </tr>
                   <tr *ngIf="clientViewData.clientType">
-                    <td><b>{{"labels.inputs.Client Type" | translate}}</b></td>
+                    <td>
-                    <td>{{clientViewData.clientType.name}}</td>
+                      <b>{{ 'labels.inputs.Client Type' | translate }}</b>
+                    </td>
+                    <td>{{ clientViewData.clientType.name }}</td>
                   </tr>
                   <tr>
-                    <td><b>{{"labels.inputs.Mobile Number" | translate}}</b></td>
+                    <td>
-                    <td><mifosx-external-identifier externalId="{{clientViewData.mobileNo}}" completed="true"></mifosx-external-identifier></td>
+                      <b>{{ 'labels.inputs.Mobile Number' | translate }}</b>
+                    </td>
+                    <td>
+                      <mifosx-external-identifier
+                        externalId="{{ clientViewData.mobileNo }}"
+                        completed="true"
+                      ></mifosx-external-identifier>
+                    </td>
                   </tr>
                   <tr>
-                    <td><b>{{"labels.inputs.Email" | translate}}</b></td>
+                    <td>
-                    <td><mifosx-external-identifier externalId="{{clientViewData.emailAddress}}" completed="true"></mifosx-external-identifier></td>
+                      <b>{{ 'labels.inputs.Email' | translate }}</b>
+                    </td>
+                    <td>
+                      <mifosx-external-identifier
+                        externalId="{{ clientViewData.emailAddress }}"
+                        completed="true"
+                      ></mifosx-external-identifier>
+                    </td>
                   </tr>
                 </tbody>
-              </table> 
+              </table>
             </div>
           </div>
         </mat-card-subtitle>
-
       </div>
 
       <mat-menu #clientMenu="matMenu">
@@ -107,28 +159,28 @@
           <mat-icon matListIcon>
             <fa-icon icon="edit" size="sm"></fa-icon>
           </mat-icon>
-          <span>{{"labels.buttons.Edit" | translate}}</span>
+          <span>{{ 'labels.buttons.Edit' | translate }}</span>
         </button>
 
         <button *ngIf="isActive()" mat-menu-item [matMenuTriggerFor]="accountApplications">
           <mat-icon matListIcon>
             <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
           </mat-icon>
-          <span>{{"labels.buttons.Applications" | translate}}</span>
+          <span>{{ 'labels.buttons.Applications' | translate }}</span>
         </button>
 
         <button mat-menu-item [matMenuTriggerFor]="Actions">
           <mat-icon matListIcon>
             <fa-icon icon="tasks" size="sm"></fa-icon>
           </mat-icon>
-          <span>{{"labels.buttons.Actions" | translate}}</span>
+          <span>{{ 'labels.buttons.Actions' | translate }}</span>
         </button>
 
         <button mat-menu-item (click)="doAction('Assign Staff')" *ngIf="!clientViewData.staffId">
           <mat-icon matListIcon>
             <fa-icon icon="user-tie" size="sm"></fa-icon>
           </mat-icon>
-          <span>{{"labels.buttons.Assign Staff" | translate}}</span>
+          <span>{{ 'labels.buttons.Assign Staff' | translate }}</span>
         </button>
 
         <span *ngIf="clientViewData.staffId">
@@ -136,110 +188,213 @@
             <mat-icon matListIcon>
               <fa-icon icon="user-tie" size="sm"></fa-icon>
             </mat-icon>
-            <span>{{"labels.buttons.Unassign Staff" | translate}}</span>
+            <span>{{ 'labels.buttons.Unassign Staff' | translate }}</span>
           </button>
         </span>
 
-        <button mat-menu-item [matMenuTriggerFor]="More">{{"labels.buttons.More" | translate}}</button>
+        <button mat-menu-item [matMenuTriggerFor]="More">{{ 'labels.buttons.More' | translate }}</button>
-
       </mat-menu>
 
       <mat-menu #accountApplications="matMenu">
-        <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'"
+        <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'" [routerLink]="['loans-accounts', 'create']">
-          [routerLink]="['loans-accounts', 'create']">{{"labels.buttons.New Loan Account" | translate}}</button>
+          {{ 'labels.buttons.New Loan Account' | translate }}
-        <button mat-menu-item *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"
+        </button>
-          [routerLink]="['savings-accounts', 'create']">{{"labels.buttons.New Savings Account" | translate}}</button>
+        <button
-        <button mat-menu-item *mifosxHasPermission="'CREATE_SHAREACCOUNT'"
+          mat-menu-item
-          [routerLink]="['shares-accounts', 'create']">{{"labels.buttons.New Share Account" | translate}}</button>
+          *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"
-        <button mat-menu-item *mifosxHasPermission="'CREATE_RECURRINGDEPOSITACCOUNT'"
+          [routerLink]="['savings-accounts', 'create']"
-          [routerLink]="['recurring-deposits-accounts', 'create-recurring-deposits-account']">{{"labels.buttons.New Recurring Deposit Account" | translate}}</button>
+        >
-        <button mat-menu-item *mifosxHasPermission="'CREATE_FIXEDDEPOSITACCOUNT'"
+          {{ 'labels.buttons.New Savings Account' | translate }}
-          [routerLink]="['fixed-deposits-accounts', 'create']">{{"labels.buttons.New Fixed Deposits Account" | translate}}</button>
+        </button>
+        <button mat-menu-item *mifosxHasPermission="'CREATE_SHAREACCOUNT'" [routerLink]="['shares-accounts', 'create']">
+          {{ 'labels.buttons.New Share Account' | translate }}
+        </button>
+        <button
+          mat-menu-item
+          *mifosxHasPermission="'CREATE_RECURRINGDEPOSITACCOUNT'"
+          [routerLink]="['recurring-deposits-accounts', 'create-recurring-deposits-account']"
+        >
+          {{ 'labels.buttons.New Recurring Deposit Account' | translate }}
+        </button>
+        <button
+          mat-menu-item
+          *mifosxHasPermission="'CREATE_FIXEDDEPOSITACCOUNT'"
+          [routerLink]="['fixed-deposits-accounts', 'create']"
+        >
+          {{ 'labels.buttons.New Fixed Deposits Account' | translate }}
+        </button>
       </mat-menu>
 
       <mat-menu #Actions="matMenu">
-        <button mat-menu-item (click)="doAction('Close')">{{"labels.buttons.Close" | translate}}</button>
+        <button mat-menu-item (click)="doAction('Close')">{{ 'labels.buttons.Close' | translate }}</button>
-        <button mat-menu-item (click)="doAction('Transfer Client')">{{"labels.buttons.Transfer Client" | translate}}</button>
+        <button mat-menu-item (click)="doAction('Transfer Client')">
-        <span *ngIf="clientViewData.status.value === 'Pending'"><button mat-menu-item
+          {{ 'labels.buttons.Transfer Client' | translate }}
-            (click)="doAction('Activate')">{{"labels.buttons.Activate" | translate}}</button></span>
+        </button>
-        <span *ngIf="clientViewData.status.value === 'Pending'"><button mat-menu-item
+        <span *ngIf="clientViewData.status.value === 'Pending'"
-            (click)="doAction('Withdraw')">{{"labels.buttons.Withdraw" | translate}}</button></span>
+          ><button mat-menu-item (click)="doAction('Activate')">
-        <span *ngIf="clientViewData.status.value === 'Pending'"><button mat-menu-item
+            {{ 'labels.buttons.Activate' | translate }}
-            (click)="doAction('Reject')">{{"labels.buttons.Reject" | translate}}</button></span>
+          </button></span
-        <span *ngIf="clientViewData.status.value === 'Pending'"><button mat-menu-item
+        >
-            *mifosxHasPermission="'DELETE_CLIENT'" (click)="doAction('Delete')">{{"labels.buttons.Delete" | translate}}</button></span>
+        <span *ngIf="clientViewData.status.value === 'Pending'"
-        <span *ngIf="clientViewData.status.value === 'Closed'"><button mat-menu-item
+          ><button mat-menu-item (click)="doAction('Withdraw')">
-            (click)="doAction('Reactivate')">{{"labels.buttons.Reactivate" | translate}}</button></span>
+            {{ 'labels.buttons.Withdraw' | translate }}
-        <span *ngIf="clientViewData.status.value === 'Rejected'"><button mat-menu-item
+          </button></span
-            (click)="doAction('Undo Rejection')">{{"labels.buttons.Undo Rejection" | translate}}</button></span>
+        >
-        <span *ngIf="clientViewData.status.value === 'Transfer in progress'"><button mat-menu-item
+        <span *ngIf="clientViewData.status.value === 'Pending'"
-            (click)="doAction('Undo Transfer')">{{"labels.buttons.Undo Transfer" | translate}}</button></span>
+          ><button mat-menu-item (click)="doAction('Reject')">{{ 'labels.buttons.Reject' | translate }}</button></span
-        <span *ngIf="clientViewData.status.value === 'Transfer in progress'"><button mat-menu-item
+        >
-            (click)="doAction('Accept Transfer')">{{"labels.buttons.Accept Transfer" | translate}}</button></span>
+        <span *ngIf="clientViewData.status.value === 'Pending'"
-        <span *ngIf="clientViewData.status.value === 'Transfer in progress'"><button mat-menu-item
+          ><button mat-menu-item *mifosxHasPermission="'DELETE_CLIENT'" (click)="doAction('Delete')">
-            (click)="doAction('Reject Transfer')">{{"labels.buttons.Reject transfer" | translate}}</button></span>
+            {{ 'labels.buttons.Delete' | translate }}
+          </button></span
+        >
+        <span *ngIf="clientViewData.status.value === 'Closed'"
+          ><button mat-menu-item (click)="doAction('Reactivate')">
+            {{ 'labels.buttons.Reactivate' | translate }}
+          </button></span
+        >
+        <span *ngIf="clientViewData.status.value === 'Rejected'"
+          ><button mat-menu-item (click)="doAction('Undo Rejection')">
+            {{ 'labels.buttons.Undo Rejection' | translate }}
+          </button></span
+        >
+        <span *ngIf="clientViewData.status.value === 'Transfer in progress'"
+          ><button mat-menu-item (click)="doAction('Undo Transfer')">
+            {{ 'labels.buttons.Undo Transfer' | translate }}
+          </button></span
+        >
+        <span *ngIf="clientViewData.status.value === 'Transfer in progress'"
+          ><button mat-menu-item (click)="doAction('Accept Transfer')">
+            {{ 'labels.buttons.Accept Transfer' | translate }}
+          </button></span
+        >
+        <span *ngIf="clientViewData.status.value === 'Transfer in progress'"
+          ><button mat-menu-item (click)="doAction('Reject Transfer')">
+            {{ 'labels.buttons.Reject transfer' | translate }}
+          </button></span
+        >
       </mat-menu>
 
       <mat-menu #More="matMenu">
-        <button mat-menu-item (click)="doAction('Add Charge')" *mifosxHasPermission="'CREATE_CLIENTCHARGE'"> {{"labels.buttons.Add Charge" | translate}}
+        <button mat-menu-item (click)="doAction('Add Charge')" *mifosxHasPermission="'CREATE_CLIENTCHARGE'">
+          {{ 'labels.buttons.Add Charge' | translate }}
         </button>
-        <button mat-menu-item (click)="doAction('Create Collateral')">{{"labels.buttons.Create Collateral" | translate}}</button>
+        <button mat-menu-item (click)="doAction('Create Collateral')">
-        <button mat-menu-item (click)="doAction('Survey')">{{"labels.buttons.Survey" | translate}}</button>
+          {{ 'labels.buttons.Create Collateral' | translate }}
-        <button mat-menu-item (click)="doAction('Update Default Savings')"
+        </button>
-          *mifosxHasPermission="'UPDATESAVINGSACCOUNT_CLIENT'"> {{"labels.buttons.Update Default Savings" | translate}} </button>
+        <button mat-menu-item (click)="doAction('Survey')">{{ 'labels.buttons.Survey' | translate }}</button>
-        <button mat-menu-item (click)="doAction('Upload Signature')" *mifosxHasPermission="'CREATE_CLIENTIMAGE'"> {{"labels.buttons.Upload Signature" | translate}} </button>
+        <button
-        <button mat-menu-item (click)="doAction('Delete Signature')" *mifosxHasPermission="'DELETE_CLIENTIMAGE'"> {{"labels.buttons.Delete Signature" | translate}} </button>
+          mat-menu-item
-        <button mat-menu-item (click)="doAction('Client Screen Reports')"> {{"labels.buttons.Client Screen Reports" | translate}} </button>
+          (click)="doAction('Update Default Savings')"
-        <button mat-menu-item (click)="doAction('Create Standing Instructions')"
+          *mifosxHasPermission="'UPDATESAVINGSACCOUNT_CLIENT'"
-          *mifosxHasPermission="'CREATE_STANDINGINSTRUCTION'"> {{"labels.buttons.Create Standing Instructions" | translate}}</button>
+        >
-        <span *ngIf="clientViewData.status.value!=='Transfer on hold'">
+          {{ 'labels.buttons.Update Default Savings' | translate }}
-          <button mat-menu-item (click)="doAction('View Standing Instructions')"
+        </button>
-            *mifosxHasPermission="'READ_STANDINGINSTRUCTION'"> {{"labels.buttons.View Standing Instructions" | translate}}</button>
+        <button mat-menu-item (click)="doAction('Upload Signature')" *mifosxHasPermission="'CREATE_CLIENTIMAGE'">
+          {{ 'labels.buttons.Upload Signature' | translate }}
+        </button>
+        <button mat-menu-item (click)="doAction('Delete Signature')" *mifosxHasPermission="'DELETE_CLIENTIMAGE'">
+          {{ 'labels.buttons.Delete Signature' | translate }}
+        </button>
+        <button mat-menu-item (click)="doAction('Client Screen Reports')">
+          {{ 'labels.buttons.Client Screen Reports' | translate }}
+        </button>
+        <button
+          mat-menu-item
+          (click)="doAction('Create Standing Instructions')"
+          *mifosxHasPermission="'CREATE_STANDINGINSTRUCTION'"
+        >
+          {{ 'labels.buttons.Create Standing Instructions' | translate }}
+        </button>
+        <span *ngIf="clientViewData.status.value !== 'Transfer on hold'">
+          <button
+            mat-menu-item
+            (click)="doAction('View Standing Instructions')"
+            *mifosxHasPermission="'READ_STANDINGINSTRUCTION'"
+          >
+            {{ 'labels.buttons.View Standing Instructions' | translate }}
+          </button>
         </span>
-        <button mat-menu-item (click)="doAction('Create Self Service User')"> {{"labels.buttons.Create Self Service User" | translate}}</button>
+        <button mat-menu-item (click)="doAction('Create Self Service User')">
+          {{ 'labels.buttons.Create Self Service User' | translate }}
+        </button>
       </mat-menu>
-
     </mat-card-title-group>
-
   </mat-card-header>
 
   <mat-card-content>
     <nav mat-tab-nav-bar class="navigation-tabs">
-      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
+      <a
-        [active]="general.isActive">
+        mat-tab-link
-        {{"labels.inputs.General" | translate}}
+        [routerLink]="['./general']"
+        routerLinkActive
+        #general="routerLinkActive"
+        [active]="general.isActive"
+      >
+        {{ 'labels.inputs.General' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./address']" routerLinkActive #address="routerLinkActive"
+      <a
-        [active]="address.isActive">
+        mat-tab-link
-        {{"labels.inputs.Address" | translate}}
+        [routerLink]="['./address']"
+        routerLinkActive
+        #address="routerLinkActive"
+        [active]="address.isActive"
+      >
+        {{ 'labels.inputs.Address' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./family-members']" routerLinkActive #familyMembers="routerLinkActive"
+      <a
-        [active]="familyMembers.isActive">
+        mat-tab-link
-        {{"labels.inputs.Family Members" | translate}}
+        [routerLink]="['./family-members']"
+        routerLinkActive
+        #familyMembers="routerLinkActive"
+        [active]="familyMembers.isActive"
+      >
+        {{ 'labels.inputs.Family Members' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./identities']" routerLinkActive #identities="routerLinkActive"
+      <a
-        [active]="identities.isActive" *mifosxHasPermission="'READ_CLIENTIDENTIFIER'">
+        mat-tab-link
-        {{"labels.inputs.Identities" | translate}}
+        [routerLink]="['./identities']"
+        routerLinkActive
+        #identities="routerLinkActive"
+        [active]="identities.isActive"
+        *mifosxHasPermission="'READ_CLIENTIDENTIFIER'"
+      >
+        {{ 'labels.inputs.Identities' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./documents']" routerLinkActive #documents="routerLinkActive"
+      <a
-        [active]="documents.isActive" *mifosxHasPermission="'READ_DOCUMENT'">
+        mat-tab-link
-        {{"labels.inputs.Documents" | translate}}
+        [routerLink]="['./documents']"
+        routerLinkActive
+        #documents="routerLinkActive"
+        [active]="documents.isActive"
+        *mifosxHasPermission="'READ_DOCUMENT'"
+      >
+        {{ 'labels.inputs.Documents' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./notes']" routerLinkActive #notes="routerLinkActive" [active]="notes.isActive"
+      <a
-        *mifosxHasPermission="'READ_CLIENTNOTE'">
+        mat-tab-link
-        {{"labels.inputs.Notes" | translate}}
+        [routerLink]="['./notes']"
+        routerLinkActive
+        #notes="routerLinkActive"
+        [active]="notes.isActive"
+        *mifosxHasPermission="'READ_CLIENTNOTE'"
+      >
+        {{ 'labels.inputs.Notes' | translate }}
       </a>
       <ng-container *ngFor="let clientDatatable of clientDatatables">
-        <a mat-tab-link [routerLink]="['./datatables',clientDatatable.registeredTableName]" routerLinkActive
+        <a
-          #datatable="routerLinkActive" [active]="datatable.isActive"
+          mat-tab-link
-          *mifosxHasPermission="'READ_' + clientDatatable.registeredTableName">
+          [routerLink]="['./datatables', clientDatatable.registeredTableName]"
-          {{clientDatatable.registeredTableName}}
+          routerLinkActive
+          #datatable="routerLinkActive"
+          [active]="datatable.isActive"
+          *mifosxHasPermission="'READ_' + clientDatatable.registeredTableName"
+        >
+          {{ clientDatatable.registeredTableName }}
         </a>
       </ng-container>
     </nav>
 
     <router-outlet></router-outlet>
-
   </mat-card-content>
-
 </mat-card>

src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.html

@@ -1,27 +1,27 @@
 <div fxLayout="column" fxLayoutGap="2%">
-
+  <h1 mat-dialog-title align="center">{{ 'labels.heading.Capture Client Image' | translate }}</h1>
-  <h1 mat-dialog-title align="center">{{"labels.heading.Capture Client Image" | translate}}</h1>
 
   <video #video width="540" height="480" autoplay></video>
 
   <!-- Using a class will break renderer changes -->
-  <canvas #canvas [ngStyle]="{'display': 'none'}"></canvas>
+  <canvas #canvas [ngStyle]="{ display: 'none' }"></canvas>
 
   <!-- Using a class will break renderer changes -->
-  <p #fallback [ngStyle]="{'display': 'none'}" align="center"></p>
+  <p #fallback [ngStyle]="{ display: 'none' }" align="center"></p>
 
   <div fxFlex="20%" align="center">
     <button #captureButton *ngIf="!isCaptured" mat-stroked-button color="primary" (click)="capture()">
-      {{"labels.buttons.Capture" | translate}}
+      {{ 'labels.buttons.Capture' | translate }}
     </button>
     <button *ngIf="isCaptured" mat-stroked-button color="primary" (click)="recapture()">
-      <fa-icon icon="undo" size="sm" class="m-r-10"></fa-icon>{{"labels.buttons.Recapture" | translate}}
+      <fa-icon icon="undo" size="sm" class="m-r-10"></fa-icon>{{ 'labels.buttons.Recapture' | translate }}
     </button>
   </div>
 
   <mat-dialog-actions align="end">
-    <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate}}</button>
+    <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
-    <button [disabled]="!isCaptured" mat-raised-button color="primary" [mat-dialog-close]="clientImageDataURL">{{"labels.buttons.Upload" | translate}}</button>
+    <button [disabled]="!isCaptured" mat-raised-button color="primary" [mat-dialog-close]="clientImageDataURL">
+      {{ 'labels.buttons.Upload' | translate }}
+    </button>
   </mat-dialog-actions>
-
 </div>

src/app/clients/clients-view/custom-dialogs/delete-signature-dialog/delete-signature-dialog.component.html

@@ -1,15 +1,19 @@
-<h1 mat-dialog-title>{{"labels.heading.Delete Client Signature" | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Delete Client Signature' | translate }}</h1>
 
 <div *ngIf="signatureId" mat-dialog-content>
-  <p>{{"labels.text.Delete clients signature" | translate}} ?</p>
+  <p>{{ 'labels.text.Delete clients signature' | translate }} ?</p>
 </div>
 
 <div *ngIf="!signatureId" mat-dialog-content>
-  <p>{{"labels.text.Client Signature is not provided." | translate}}</p>
+  <p>{{ 'labels.text.Client Signature is not provided.' | translate }}</p>
 </div>
 
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate}}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
-  <button mat-raised-button *ngIf="signatureId" color="warn" [mat-dialog-close]="{ delete: true, id: signatureId }">{{"labels.buttons.Confirm" | translate}}</button>
+  <button mat-raised-button *ngIf="signatureId" color="warn" [mat-dialog-close]="{ delete: true, id: signatureId }">
-  <button mat-raised-button *ngIf="!signatureId" color="primary" [mat-dialog-close]="{ upload: true }">{{"labels.buttons.Upload" | translate}}</button>
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
+  <button mat-raised-button *ngIf="!signatureId" color="primary" [mat-dialog-close]="{ upload: true }">
+    {{ 'labels.buttons.Upload' | translate }}
+  </button>
 </mat-dialog-actions>

src/app/clients/clients-view/custom-dialogs/edit-notes-dialog/edit-notes-dialog.component.html

@@ -1,13 +1,19 @@
-<h1 mat-dialog-title>{{"labels.heading.Edit Note" | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Edit Note' | translate }}</h1>
 <div>
   <form #formRef="ngForm" [formGroup]="noteForm">
     <mat-form-field>
       <textarea formControlName="note" matInput placeholder="Write a note ...."></textarea>
     </mat-form-field>
     <mat-dialog-actions align="end">
-      <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate}}</button>
+      <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
-      <button mat-raised-button color="primary" [disabled]="noteForm.pristine"
+      <button
-        [mat-dialog-close]="{ editForm: noteForm }">{{"labels.buttons.Confirm" | translate}}</button>
+        mat-raised-button
+        color="primary"
+        [disabled]="noteForm.pristine"
+        [mat-dialog-close]="{ editForm: noteForm }"
+      >
+        {{ 'labels.buttons.Confirm' | translate }}
+      </button>
     </mat-dialog-actions>
   </form>
 </div>

src/app/clients/clients-view/custom-dialogs/unassign-staff-dialog/unassign-staff-dialog.component.html

@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{"labels.heading.Unassign Staff" | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Unassign Staff' | translate }}</h1>
 <div mat-dialog-content>
-  <p>{{"labels.text.Unassign Staff client" | translate}} ?</p>
+  <p>{{ 'labels.text.Unassign Staff client' | translate }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate}}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">{{"labels.buttons.Confirm" | translate}}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>

src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.html

@@ -1,27 +1,34 @@
-<h1 mat-dialog-title>{{"labels.heading.Upload" | translate}} {{ entityType }} {{"labels.heading.Documents" | translate}}</h1>
+<h1 mat-dialog-title>
+  {{ 'labels.heading.Upload' | translate }} {{ entityType }} {{ 'labels.heading.Documents' | translate }}
+</h1>
 <div>
   <form [formGroup]="uploadDocumentForm" fxLayout="column">
-
     <mat-form-field fxFlex>
-      <mat-label>{{"labels.inputs.File Name" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.File Name' | translate }}</mat-label>
       <input formControlName="fileName" required matInput />
       <mat-error *ngIf="uploadDocumentForm.controls.fileName.hasError('required')">
-        {{"labels.inputs.File Name" | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.File Name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex *ngIf="!documentIdentifier">
-      <mat-label>{{"labels.inputs.Description" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
       <input formControlName="description" matInput />
     </mat-form-field>
 
     <mifosx-file-upload flex="60%" (change)="onFileSelect($event)"></mifosx-file-upload>
 
     <mat-dialog-actions align="end">
-      <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate}}</button>
+      <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
-      <button mat-raised-button color="primary" [disabled]="!uploadDocumentForm.valid"
+      <button
-        [mat-dialog-close]="uploadDocumentForm.value">{{"labels.buttons.Confirm" | translate}}</button>
+        mat-raised-button
+        color="primary"
+        [disabled]="!uploadDocumentForm.valid"
+        [mat-dialog-close]="uploadDocumentForm.value"
+      >
+        {{ 'labels.buttons.Confirm' | translate }}
+      </button>
     </mat-dialog-actions>
-
   </form>
 </div>

src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.html

@@ -1,12 +1,12 @@
-<h1 mat-dialog-title>{{"labels.heading.Upload Client Image" | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Upload Client Image' | translate }}</h1>
 
 <div>
-
   <mifosx-file-upload flex="60%" (change)="onFileSelect($event)" acceptFilter=".png,.jpeg,.jpg"></mifosx-file-upload>
 
   <mat-dialog-actions align="end">
-      <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate}}</button>
+    <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
-      <button mat-raised-button color="primary" [disabled]="!image" [mat-dialog-close]="image">{{"labels.buttons.Confirm" | translate}}</button>
+    <button mat-raised-button color="primary" [disabled]="!image" [mat-dialog-close]="image">
+      {{ 'labels.buttons.Confirm' | translate }}
+    </button>
   </mat-dialog-actions>
-
 </div>

src/app/clients/clients-view/custom-dialogs/upload-signature-dialog/upload-signature-dialog.component.html

@@ -1,12 +1,12 @@
-<h1 mat-dialog-title>{{"labels.heading.Upload Client Signature" | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Upload Client Signature' | translate }}</h1>
 
 <div>
-
   <mifosx-file-upload flex="60%" (change)="onFileSelect($event)" acceptFilter=".png,.jpeg,.jpg"></mifosx-file-upload>
 
   <mat-dialog-actions align="end">
-      <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate}}</button>
+    <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
-      <button mat-raised-button color="primary" [disabled]="!signature" [mat-dialog-close]="signature">{{"labels.buttons.Confirm" | translate}}</button>
+    <button mat-raised-button color="primary" [disabled]="!signature" [mat-dialog-close]="signature">
+      {{ 'labels.buttons.Confirm' | translate }}
+    </button>
   </mat-dialog-actions>
-
 </div>

src/app/clients/clients-view/custom-dialogs/view-signature-dialog/view-signature-dialog.component.html

@@ -1,15 +1,19 @@
-<h1 mat-dialog-title>{{"labels.heading.View Client Signature" | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.View Client Signature' | translate }}</h1>
 
 <div *ngIf="signatureId" mat-dialog-content>
-  <img [src]="signatureImage" alt="Signature">
+  <img [src]="signatureImage" alt="Signature" />
 </div>
 
 <div *ngIf="!signatureId" mat-dialog-content>
-  <p>{{"labels.text.Client Signature is not provided." | translate}}</p>
+  <p>{{ 'labels.text.Client Signature is not provided.' | translate }}</p>
 </div>
 
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Close" | translate}}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Close' | translate }}</button>
-  <button mat-raised-button *ngIf="signatureId" color="warn" [mat-dialog-close]="{ delete: true }">{{"labels.buttons.Delete" | translate}}</button>
+  <button mat-raised-button *ngIf="signatureId" color="warn" [mat-dialog-close]="{ delete: true }">
-  <button mat-raised-button *ngIf="!signatureId" color="primary" [mat-dialog-close]="{ upload: true }">{{"labels.buttons.Upload" | translate}}</button>
+    {{ 'labels.buttons.Delete' | translate }}
+  </button>
+  <button mat-raised-button *ngIf="!signatureId" color="primary" [mat-dialog-close]="{ upload: true }">
+    {{ 'labels.buttons.Upload' | translate }}
+  </button>
 </mat-dialog-actions>

src/app/clients/clients-view/documents-tab/documents-tab.component.html

@@ -1,4 +1,6 @@
-<mifosx-entity-documents-tab [entityType]="entityType" [entityId]="entityId"
+<mifosx-entity-documents-tab
+  [entityType]="entityType"
+  [entityId]="entityId"
   [entityDocuments]="entityDocuments"
   [callbackUpload]="uploadDocument"
   [callbackDownload]="downloadDocument"

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"
+          <mat-option
-            [value]="maritalStatus.id">
+            *ngFor="let maritalStatus of addFamilyMemberTemplate.maritalStatusIdOptions"
-            {{ maritalStatus.name | translateKey:'catalogs'}}
+            [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>
+        <mat-label>{{ 'labels.inputs.Date Of Birth' | translate }}</mat-label>
-        <input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker"
+        <input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker" required />
-          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="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="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"
+          <mat-option
-            [value]="maritalStatus.id">
+            *ngFor="let maritalStatus of addFamilyMemberTemplate.maritalStatusIdOptions"
-            {{ maritalStatus.name | translateKey:'catalogs'}}
+            [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>
+        <mat-label>{{ 'labels.inputs.Date Of Birth' | translate }}</mat-label>
-        <input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker"
+        <input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker" required />
-          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="button" mat-raised-button [routerLink]="['../../']">
-      <button type="submit" mat-raised-button color="primary" [disabled]="editFamilyMemberForm.pristine||!editFamilyMemberForm.valid">{{"labels.buttons.Submit" | translate}}</button>
+        {{ '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.firstName"
-          <span *ngIf="member.middleName">{{"labels.inputs.Middle Name" | translate}} : {{member.middleName}}<br /></span>
+            >{{ 'labels.inputs.First Name' | translate }} : {{ member.firstName }}<br
-          <span *ngIf="member.lastName">{{"labels.inputs.Last Name" | translate}} : {{member.lastName}}<br /></span>
+          /></span>
-          <span *ngIf="member.qualification">{{"labels.inputs.Qualification" | translate}} : {{member.qualification}}<br /></span>
+          <span *ngIf="member.middleName"
-          <span *ngIf="member.mobileNumber">{{"labels.inputs.Mobile Number" | translate}} : {{member.mobileNumber}}<br /></span>
+            >{{ 'labels.inputs.Middle Name' | translate }} : {{ member.middleName }}<br
-          <span *ngIf="member.age">{{"labels.inputs.Age" | translate}} : {{member.age}}<br /></span>
+          /></span>
-          <span *ngIf="member.isDependent">{{"labels.inputs.Is Dependent" | translate}} : {{member.isDependent | yesNo}}<br /></span>
+          <span *ngIf="member.lastName">{{ 'labels.inputs.Last Name' | translate }} : {{ member.lastName }}<br /></span>
-          <span *ngIf="member.maritalStatus">{{"labels.inputs.Marital Status" | translate}} : {{member.maritalStatus}}<br /></span>
+          <span *ngIf="member.qualification"
-          <span *ngIf="member.gender">{{"labels.inputs.Gender" | translate}} : {{member.gender}}<br /></span>
+            >{{ 'labels.inputs.Qualification' | translate }} : {{ member.qualification }}<br
-          <span *ngIf="member.profession">{{"labels.inputs.Profession" | translate}} : {{member.profession}}<br /></span>
+          /></span>
-          <span *ngIf="member.dateOfBirth">{{"labels.inputs.Date Of Birth" | translate}} : {{member.dateOfBirth | dateFormat}}<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>

src/app/clients/clients-view/identities-tab/identities-tab.component.html

@@ -1,65 +1,83 @@
 <div class="tab-container mat-typography">
+  <h3>{{ 'labels.heading.Identities' | translate }}</h3>
 
-    <h3>{{"labels.heading.Identities" | translate}}</h3>
+  <button
+    mat-raised-button
+    class="f-right"
+    color="primary"
+    (click)="addIdentifier()"
+    *mifosxHasPermission="'CREATE_CLIENTIDENTIFIER'"
+  >
+    <fa-icon icon="plus" class="m-r-10"></fa-icon> {{ 'labels.buttons.Add' | translate }}
+  </button>
 
-    <button mat-raised-button class="f-right" color="primary" (click)="addIdentifier()" *mifosxHasPermission="'CREATE_CLIENTIDENTIFIER'">
+  <table mat-table #identifiersTable [dataSource]="clientIdentities">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon> {{"labels.buttons.Add" | translate}}
+    <ng-container matColumnDef="id">
-    </button>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Id' | translate }}</th>
+      <td mat-cell *matCellDef="let identity">{{ identity.id }}</td>
+    </ng-container>
 
-    <table mat-table #identifiersTable [dataSource]="clientIdentities">
+    <ng-container matColumnDef="type">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
+      <td mat-cell *matCellDef="let identity">{{ identity.documentType.name }}</td>
+    </ng-container>
 
-        <ng-container matColumnDef="id">
+    <ng-container matColumnDef="documentKey">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Id" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Document Key' | translate }}</th>
-          <td mat-cell *matCellDef="let identity">{{identity.id}}</td>
+      <td mat-cell *matCellDef="let identity">{{ identity.documentKey }}</td>
-        </ng-container>
+    </ng-container>
 
-        <ng-container matColumnDef="type">
+    <ng-container matColumnDef="description">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
-          <td mat-cell *matCellDef="let identity"> {{identity.documentType.name}}</td>
+      <td mat-cell *matCellDef="let identity">{{ identity.description }}</td>
-        </ng-container>
+    </ng-container>
 
-        <ng-container matColumnDef="documentKey">
+    <ng-container matColumnDef="documents">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Document Key" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Identity Documents' | translate }}</th>
-          <td mat-cell *matCellDef="let identity"> {{identity.documentKey}} </td>
+      <td mat-cell *matCellDef="let identity">
-        </ng-container>
+        <div *ngFor="let document of identity.documents">
+          {{ document.name }}
+          <fa-icon
+            icon="cloud-download-alt"
+            (click)="download(document.parentEntityId, document.id)"
+            *mifosxHasPermission="'READ_DOCUMENT'"
+          ></fa-icon>
+        </div>
+      </td>
+    </ng-container>
 
-        <ng-container matColumnDef="description">
+    <ng-container matColumnDef="status">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Description" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
-          <td mat-cell *matCellDef="let identity"> {{identity.description}} </td>
+      <td mat-cell *matCellDef="let identity">
-        </ng-container>
+        {{ identity.status === 'clientIdentifierStatusType.active' ? 'active' : 'inactive' }}
+      </td>
+    </ng-container>
 
-        <ng-container matColumnDef="documents">
+    <ng-container matColumnDef="actions">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Identity Documents" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
-          <td mat-cell *matCellDef="let identity">
+      <td mat-cell *matCellDef="let identity; let i = index">
-            <div *ngFor="let document of identity.documents">
+        <button
-              {{document.name}}
+          class="identity-action-button"
-              <fa-icon icon="cloud-download-alt" (click)="download(document.parentEntityId,document.id)" *mifosxHasPermission="'READ_DOCUMENT'"></fa-icon>
+          mat-raised-button
-            </div>
+          color="primary"
-          </td>
+          (click)="uploadDocument(i, identity.id)"
-        </ng-container>
+          *mifosxHasPermission="'CREATE_DOCUMENT'"
-
+        >
-        <ng-container matColumnDef="status">
+          <fa-icon icon="eye"></fa-icon>
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status" | translate}} </th>
+        </button>
-          <td mat-cell *matCellDef="let identity">
+        <button
-              {{(identity.status==='clientIdentifierStatusType.active')?'active':'inactive'}}
+          class="identity-action-button"
-          </td>
+          mat-raised-button
-        </ng-container>
+          color="warn"
-
+          (click)="deleteIdentifier(identity.clientId, identity.id, i)"
-        <ng-container matColumnDef="actions">
+          *mifosxHasPermission="'DELETE_CLIENTIDENTIFIER'"
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
+        >
-          <td mat-cell *matCellDef="let identity; let i = index">
+          <fa-icon icon="times"></fa-icon>
-            <button class="identity-action-button" mat-raised-button color="primary" (click)="uploadDocument(i,identity.id)" *mifosxHasPermission="'CREATE_DOCUMENT'">
+        </button>
-              <fa-icon icon="eye"></fa-icon>
+      </td>
-            </button>
+    </ng-container>
-            <button class="identity-action-button" mat-raised-button color="warn" (click)="deleteIdentifier(identity.clientId,identity.id,i)" *mifosxHasPermission="'DELETE_CLIENTIDENTIFIER'">
-              <fa-icon icon="times"></fa-icon>
-            </button>
-          </td>
-        </ng-container>
-
-        <tr mat-header-row *matHeaderRowDef="identitiesColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: identitiesColumns;"></tr>
-
-    </table>
 
+    <tr mat-header-row *matHeaderRowDef="identitiesColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: identitiesColumns"></tr>
+  </table>
 </div>

src/app/clients/clients-view/notes-tab/notes-tab.component.html

@@ -1,4 +1,5 @@
-<mifosx-entity-notes-tab [entityId]="entityId"
+<mifosx-entity-notes-tab
+  [entityId]="entityId"
   [entityNotes]="entityNotes"
   [callbackAdd]="addNote"
   [callbackEdit]="editNote"

src/app/clients/clients.component.html

@@ -2,19 +2,30 @@
   <div fxLayout="row" fxLayoutAlign="start center">
     <div class="search-box m-r-30">
       <mat-form-field class="search-box">
-        <input matInput placeholder="Search by client name, external Id, mobile" class="search-box" (keydown.enter)="search($event.target.value)">
+        <input
+          matInput
+          placeholder="Search by client name, external Id, mobile"
+          class="search-box"
+          (keydown.enter)="search($event.target.value)"
+        />
       </mat-form-field>
     </div>
     <div class="filter-box" *ngIf="existsClientsToFilter">
-      <mat-checkbox #showClosedAccounts labelPosition="after" class="m-r-10">{{"labels.inputs.Show Closed Accounts" | translate}}
+      <mat-checkbox #showClosedAccounts labelPosition="after" class="m-r-10"
+        >{{ 'labels.inputs.Show Closed Accounts' | translate }}
       </mat-checkbox>
     </div>
     <div class="action-button" fxLayoutGap="25px">
-      <button mat-raised-button color="primary" [routerLink]="['../', 'organization', 'bulk-import', 'Clients']" *mifosxHasPermission="'CREATE_CLIENT'">
+      <button
-        <fa-icon icon="download" class="m-r-10"></fa-icon>{{"labels.buttons.Import Client" | translate}}
+        mat-raised-button
+        color="primary"
+        [routerLink]="['../', 'organization', 'bulk-import', 'Clients']"
+        *mifosxHasPermission="'CREATE_CLIENT'"
+      >
+        <fa-icon icon="download" class="m-r-10"></fa-icon>{{ 'labels.buttons.Import Client' | translate }}
       </button>
       <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CLIENT'">
-        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{"labels.buttons.Create Client" | translate}}
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Create Client' | translate }}
       </button>
     </div>
   </div>
@@ -24,60 +35,63 @@
       <div class="loading"></div>
     </div>
     <table mat-table [dataSource]="dataSource" matSort (matSortChange)="sortChanged($event)">
-
       <!-- Name Column -->
       <ng-container matColumnDef="displayName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.name" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
-        <td mat-cell *matCellDef="let row" [routerLink]="[row.id,'general']"> {{row.displayName}} </td>
+        <td mat-cell *matCellDef="let row" [routerLink]="[row.id, 'general']">{{ row.displayName }}</td>
       </ng-container>
 
       <!-- Account no Column -->
       <ng-container matColumnDef="accountNumber">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account No" | translate}}</th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account No' | translate }}</th>
         <td mat-cell *matCellDef="let row">
-          <mifosx-account-number display="left" accountNo="{{row.accountNumber}}"></mifosx-account-number>
+          <mifosx-account-number display="left" accountNo="{{ row.accountNumber }}"></mifosx-account-number>
         </td>
       </ng-container>
 
       <!-- External ID Column -->
       <ng-container matColumnDef="externalId">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.External Id" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.External Id' | translate }}</th>
         <td mat-cell *matCellDef="let row">
-          <mifosx-external-identifier display="left" externalId="{{row.externalId}}"></mifosx-external-identifier>
+          <mifosx-external-identifier display="left" externalId="{{ row.externalId }}"></mifosx-external-identifier>
         </td>
       </ng-container>
 
       <!-- Status Column -->
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
         <td mat-cell *matCellDef="let row">
           <div [ngClass]="row.status.code | statusLookup">
             <fa-icon icon="stop"></fa-icon>
             <span class="m-l-10 status">
-              {{ row.status.value | translate}}
+              {{ row.status.value | translate }}
             </span>
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="officeName">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Office Name" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Office Name' | translate }}</th>
-        <td mat-cell *matCellDef="let row"> {{row.officeName}} </td>
+        <td mat-cell *matCellDef="let row">{{ row.officeName }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row">
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row"></tr>
-      </tr>
     </table>
 
-    <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="[5, 50, 100]" [length]="totalRows" (page)="pageChanged($event)"
+    <mat-paginator
-      showFirstLastButtons></mat-paginator>
+      [pageSize]="pageSize"
+      [pageSizeOptions]="[5, 50, 100]"
+      [length]="totalRows"
+      (page)="pageChanged($event)"
+      showFirstLastButtons
+    ></mat-paginator>
   </div>
 
   <div class="alert" [hidden]="!notExistsClientsToFilter">
     <div class="message">
       <i class="fa fa-exclamation-circle alert-check"></i>
-      {{"labels.text.No client was found" | translate}}
+      {{ 'labels.text.No client was found' | translate }}
     </div>
   </div>
 </mat-card>

src/app/clients/create-client/create-client.component.html

@@ -1,7 +1,5 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #clientStepper>
-
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -23,52 +21,50 @@
     </ng-template>
 
     <mat-step [stepControl]="clientGeneralForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.GENERAL' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{"labels.inputs.GENERAL" | translate}}</ng-template>
+      <mifosx-client-general-step
-
+        [clientTemplate]="clientTemplate"
-      <mifosx-client-general-step [clientTemplate]="clientTemplate" (legalFormChangeEvent)="legalFormChange($event)"></mifosx-client-general-step>
+        (legalFormChangeEvent)="legalFormChange($event)"
-
+      ></mifosx-client-general-step>
     </mat-step>
 
     <mat-step>
+      <ng-template matStepLabel>{{ 'labels.inputs.FAMILY MEMBERS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{"labels.inputs.FAMILY MEMBERS" | translate}}</ng-template>
+      <mifosx-client-family-members-step
-
+        #clientFamily
-      <mifosx-client-family-members-step #clientFamily [clientTemplate]="clientTemplate"></mifosx-client-family-members-step>
+        [clientTemplate]="clientTemplate"
-
+      ></mifosx-client-family-members-step>
     </mat-step>
 
     <mat-step *ngIf="clientTemplate.isAddressEnabled">
+      <ng-template matStepLabel>{{ 'labels.inputs.ADDRESS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{"labels.inputs.ADDRESS" | translate}}</ng-template>
+      <mifosx-client-address-step
-
+        #clientAddress
-      <mifosx-client-address-step #clientAddress [clientTemplate]="clientTemplate"
+        [clientTemplate]="clientTemplate"
-        [clientAddressFieldConfig]="clientAddressFieldConfig">
+        [clientAddressFieldConfig]="clientAddressFieldConfig"
+      >
       </mifosx-client-address-step>
-
     </mat-step>
 
     <mat-step *ngFor="let datatable of datatables">
-
+      <ng-template matStepLabel>{{ datatable.registeredTableName }}</ng-template>
-      <ng-template matStepLabel>{{datatable.registeredTableName}}</ng-template>
 
       <mifosx-client-datatable-step [datatableData]="datatable" #dtclient></mifosx-client-datatable-step>
-
     </mat-step>
 
     <mat-step *ngIf="areFormvalids()" completed>
-
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
-      <ng-template matStepLabel>{{"labels.inputs.PREVIEW" | translate}}</ng-template>
 
       <mifosx-client-preview-step
         [clientTemplate]="clientTemplate"
         [clientAddressFieldConfig]="clientAddressFieldConfig"
-        [client]="client" (submitEvent)="submit()"
+        [client]="client"
+        (submitEvent)="submit()"
       >
       </mifosx-client-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>

src/app/clients/edit-client/edit-client.component.html

@@ -1,27 +1,23 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="editClientForm">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="23%">
-            <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeOptions" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="editClientForm.controls.officeId.hasError('required')">
-              {{"labels.inputs.Office" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="23%">
-            <mat-label>{{"labels.inputs.Legal Form" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Legal Form' | translate }}</mat-label>
             <mat-select formControlName="legalFormId">
               <mat-option *ngFor="let legalForm of legalFormOptions" [value]="legalForm.id">
                 {{ legalForm.value }}
@@ -30,55 +26,62 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="23%">
-            <mat-label>{{"labels.inputs.Account No" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account No' | translate }}</mat-label>
-            <input matInput formControlName="accountNo">
+            <input matInput formControlName="accountNo" />
           </mat-form-field>
 
           <mat-form-field fxFlex="23%">
-            <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
-            <input matInput formControlName="externalId">
+            <input matInput formControlName="externalId" />
           </mat-form-field>
 
           <mat-form-field *ngIf="editClientForm.contains('fullname')" fxFlex="48%">
-            <mat-label>{{ 'labels.inputs.' + getDateLabel(legalFormId, ['Name', 'Entity Name']) | translate }}</mat-label>
+            <mat-label>{{
-            <input matInput required formControlName="fullname">
+              'labels.inputs.' + getDateLabel(legalFormId, ['Name', 'Entity Name']) | translate
+            }}</mat-label>
+            <input matInput required formControlName="fullname" />
             <mat-error *ngIf="editClientForm.controls.fullname.hasError('required')">
-              {{"labels.inputs.Client name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Client name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="editClientForm.contains('firstname')" fxFlex="48%">
-            <mat-label>{{"labels.inputs.First Name" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
-            <input matInput required formControlName="firstname">
+            <input matInput required formControlName="firstname" />
             <mat-error *ngIf="editClientForm.controls.firstname.hasError('required')">
-              {{"labels.inputs.Client first name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Client first name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="editClientForm.contains('middlename')" fxFlex="48%">
-            <mat-label>{{"labels.inputs.Middle Name" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
-            <input matInput formControlName="middlename">
+            <input matInput formControlName="middlename" />
           </mat-form-field>
 
           <mat-form-field *ngIf="editClientForm.contains('lastname')" fxFlex="48%">
-            <mat-label>{{"labels.inputs.Last Name" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
-            <input matInput required formControlName="lastname">
+            <input matInput required formControlName="lastname" />
             <mat-error *ngIf="editClientForm.controls.lastname.hasError('required')">
-              {{"labels.inputs.Client last name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Client last name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-divider></mat-divider>
 
           <mat-form-field fxFlex="48%" (click)="dateOfBirthDatePicker.open()">
-            <mat-label>{{ 'labels.inputs.' + getDateLabel(legalFormId, ['Date of Birth', 'Incorporation Date']) | translate }}</mat-label>
+            <mat-label>{{
-            <input matInput [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker" formControlName="dateOfBirth">
+              'labels.inputs.' + getDateLabel(legalFormId, ['Date of Birth', 'Incorporation Date']) | translate
+            }}</mat-label>
+            <input matInput [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker" formControlName="dateOfBirth" />
             <mat-datepicker-toggle matSuffix [for]="dateOfBirthDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #dateOfBirthDatePicker></mat-datepicker>
           </mat-form-field>
 
           <mat-form-field *ngIf="legalFormId === 1" fxFlex="48%">
-            <mat-label>{{"labels.inputs.Gender" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
             <mat-select formControlName="genderId">
               <mat-option *ngFor="let gender of genderOptions" [value]="gender.id">
                 {{ gender.name }}
@@ -87,7 +90,7 @@
           </mat-form-field>
 
           <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 staffOptions" [value]="staff.id">
                 {{ staff.displayName }}
@@ -95,11 +98,16 @@
             </mat-select>
           </mat-form-field>
 
-          <div fxFlex="100%" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" formGroupName="clientNonPersonDetails"
+          <div
-            *ngIf="editClientForm.contains('clientNonPersonDetails')">
+            fxFlex="100%"
-
+            fxLayout="row wrap"
+            fxLayoutGap="2%"
+            fxLayout.lt-md="column"
+            formGroupName="clientNonPersonDetails"
+            *ngIf="editClientForm.contains('clientNonPersonDetails')"
+          >
             <mat-form-field fxFlex="48%">
-              <mat-label>{{"labels.inputs.Constitution" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Constitution' | translate }}</mat-label>
               <mat-select formControlName="constitutionId" required>
                 <mat-option *ngFor="let constitution of constitutionOptions" [value]="constitution.id">
                   {{ constitution.name }}
@@ -108,7 +116,7 @@
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{"labels.inputs.Main Business Line" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Main Business Line' | translate }}</mat-label>
               <mat-select formControlName="mainBusinessLineId">
                 <mat-option *ngFor="let business of businessLineOptions" [value]="business.id">
                   {{ business.name }}
@@ -117,42 +125,52 @@
             </mat-form-field>
 
             <mat-form-field fxFlex="48%" (click)="incorpValidityTillDateDatePicker.open()">
-              <mat-label>{{"labels.inputs.Incorporation Validity Till Date" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</mat-label>
-              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="incorpValidityTillDateDatePicker" formControlName="incorpValidityTillDate">
+              <input
+                matInput
+                [min]="minDate"
+                [max]="maxDate"
+                [matDatepicker]="incorpValidityTillDateDatePicker"
+                formControlName="incorpValidityTillDate"
+              />
               <mat-datepicker-toggle matSuffix [for]="incorpValidityTillDateDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #incorpValidityTillDateDatePicker></mat-datepicker>
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{"labels.inputs.Incorporation No" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Incorporation No' | translate }}</mat-label>
-              <input matInput formControlName="incorpNumber">
+              <input matInput formControlName="incorpNumber" />
             </mat-form-field>
 
             <mat-form-field fxFlex="98%">
-              <mat-label>{{"labels.inputs.Remarks" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Remarks' | translate }}</mat-label>
               <textarea matInput formControlName="remarks" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
             </mat-form-field>
           </div>
 
-          <mat-checkbox *ngIf="legalFormId === 1" fxFlex="48%" labelPosition="before" formControlName="isStaff" class="margin-v">
+          <mat-checkbox
-            {{"labels.inputs.Is staff" | translate}}?
+            *ngIf="legalFormId === 1"
+            fxFlex="48%"
+            labelPosition="before"
+            formControlName="isStaff"
+            class="margin-v"
+          >
+            {{ 'labels.inputs.Is staff' | translate }}?
           </mat-checkbox>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Mobile No" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Mobile No' | translate }}</mat-label>
-            <input matInput type="number" formControlName="mobileNo">
+            <input matInput type="number" formControlName="mobileNo" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Email Address" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Email Address' | translate }}</mat-label>
-            <input matInput formControlName="emailAddress">
+            <input matInput formControlName="emailAddress" />
-            <mat-error *ngIf="editClientForm.controls.emailAddress.errors?.email">
+            <mat-error *ngIf="editClientForm.controls.emailAddress.errors?.email"> Email not valid </mat-error>
-              Email not valid
-            </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Client Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Client Type' | translate }}</mat-label>
             <mat-select formControlName="clientTypeId">
               <mat-option *ngFor="let clientType of clientTypeOptions" [value]="clientType.id">
                 {{ clientType.name }}
@@ -161,43 +179,58 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Client Classification" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Client Classification' | translate }}</mat-label>
             <mat-select formControlName="clientClassificationId">
-              <mat-option *ngFor="let clientClassification of clientClassificationTypeOptions" [value]="clientClassification.id">
+              <mat-option
+                *ngFor="let clientClassification of clientClassificationTypeOptions"
+                [value]="clientClassification.id"
+              >
                 {{ clientClassification.name }}
               </mat-option>
             </mat-select>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()">
-            <mat-label>{{"labels.inputs.Submitted On" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" formControlName="submittedOnDate" required>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="submittedOnDatePicker"
+              formControlName="submittedOnDate"
+              required
+            />
             <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #submittedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="editClientForm.controls.submittedOnDate.hasError('required')">
-              {{"labels.inputs.Submitted Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Submitted Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="activatedOnDatePicker.open()">
-            <mat-label>{{"labels.inputs.Activated On" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Activated On' | translate }}</mat-label>
-            <input matInput [min]="editClientForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker"
+            <input
-              formControlName="activationDate">
+              matInput
+              [min]="editClientForm.value.submittedOnDate"
+              [max]="maxDate"
+              [matDatepicker]="activatedOnDatePicker"
+              formControlName="activationDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #activatedOnDatePicker></mat-datepicker>
           </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]="['../general']">{{"labels.buttons.Cancel" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../general']">
-        <button mat-raised-button color="primary" [disabled]="!editClientForm.valid" (click)="submit()">{{"labels.buttons.Submit" | translate}}</button>
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!editClientForm.valid" (click)="submit()">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>