i18n: Adding new languages: Part 1 (#1882)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>

src/app/centers/centers-routing.module.ts

@@ -4,9 +4,6 @@ import { Routes, RouterModule } from '@angular/router';
 /** Routing Imports */
 import { Route } from '../core/route/route.service';
 
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Components */
 import { CentersComponent } from './centers.component';
 import { CreateCenterComponent } from './create-center/create-center.component';
@@ -34,7 +31,7 @@ const routes: Routes = [
 
     {
       path: 'centers',
-      data: { title: extract('Centers'), breadcrumb: 'Centers' },
+      data: { title: 'Centers', breadcrumb: 'Centers' },
       children: [
         {
           path: '',
@@ -43,14 +40,14 @@ const routes: Routes = [
         {
           path: 'create',
           component: CreateCenterComponent,
-          data: { title: extract('Create Center'), breadcrumb: 'Create' },
+          data: { title: 'Create Center', breadcrumb: 'Create' },
           resolve: {
             offices: OfficesResolver,
           }
         },
         {
           path: ':centerId',
-          data: { title: extract('Centers View'), routeParamBreadcrumb: 'centerId' },
+          data: { title: 'Centers View', routeParamBreadcrumb: 'centerId' },
           resolve: {
             centerViewData: CenterViewResolver,
           },
@@ -66,7 +63,7 @@ const routes: Routes = [
                 {
                   path: 'general',
                   component: GeneralTabComponent,
-                  data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
+                  data: { title: 'General', breadcrumb: 'General', routeParamBreadcrumb: false },
                   resolve: {
                     centerSummaryData: CenterSummaryResolver,
                     centerViewData: CenterResourceResolver,
@@ -76,7 +73,7 @@ const routes: Routes = [
                 {
                   path: 'notes',
                   component: NotesTabComponent,
-                  data: { title: extract('Notes'), breadcrumb: 'Notes', routeParamBreadcrumb: false },
+                  data: { title: 'Notes', breadcrumb: 'Notes', routeParamBreadcrumb: false },
                   resolve: {
                     centerNotes: CenterNotesResolver
                   }
@@ -86,7 +83,7 @@ const routes: Routes = [
                   children: [{
                     path: ':datatableName',
                     component: DatatableTabComponent,
-                    data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
+                    data: { title: 'Data Table View', routeParamBreadcrumb: 'datatableName' },
                     resolve: {
                       centerDatatable: CenterDatatableResolver
                     }
@@ -97,14 +94,14 @@ const routes: Routes = [
             {
               path: 'edit',
               component: EditCenterComponent,
-              data: { title: extract('Edit Center'), breadcrumb: 'Edit', routeParamBreadcrumb: 'Edit' },
+              data: { title: 'Edit Center', breadcrumb: 'Edit', routeParamBreadcrumb: 'Edit' },
               resolve: {
                 centerData: CenterDataAndTemplateResolver,
               }
             },
             {
               path: 'actions/:name',
-              data: { title: extract('Center Actions'), routeParamBreadcrumb: 'name' },
+              data: { title: 'Center Actions', routeParamBreadcrumb: 'name' },
               component: CenterActionsComponent,
               resolve: {
                 centersActionData: CenterActionsResolver

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

@@ -7,20 +7,20 @@
       <mat-card-content>
 
           <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 matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
             <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #activationDatePicker></mat-datepicker>
             <mat-error *ngIf="activateCenterForm.controls.activationDate.hasError('required')">
-              {{"labels.inputs.Activated On Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Activated On Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!activateCenterForm.valid">{{ "labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!activateCenterForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
       </mat-card-actions>
 
     </form>

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

@@ -9,52 +9,52 @@
         <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">
             <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-option *ngFor="let day of repeatsOnDays" [value]="day.id">
               {{ day.value }}
             </mat-option>
           </mat-select>
           <mat-error *ngIf="centerMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
-            {{"labels.inputs.At least" |translate}} <strong>{{"labels.inputs.one" |translate}}</strong> {{"labels.inputs.day must be selected" |translate}}
+            {{"labels.inputs.At least" | translate}} <strong>{{"labels.inputs.one" | translate}}</strong> {{"labels.inputs.day must be selected" | translate}}
           </mat-error>
         </mat-form-field>
 
@@ -63,7 +63,7 @@
       </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]="!centerMeetingForm.valid" (click)="submit()">{{"labels.buttons.Submit | translate}}</button>
       </mat-card-actions>
 

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

@@ -9,14 +9,14 @@
         <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>
 
@@ -25,8 +25,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!centerAssignStaffForm.valid">{{ "labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!centerAssignStaffForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
       </mat-card-actions>
 
     </form>

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

@@ -3,30 +3,30 @@
   <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 }}
+          {{ 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>
       </ng-container>
 
       <ng-container matColumnDef="attendance">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attendance" |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attendance" | translate}} </th>
         <td mat-cell *matCellDef="let member" [ngSwitch]="member.attendanceType">
-          <span *ngSwitchCase="1">{{"labels.inputs.Present" |translate}}</span>
-          <span *ngSwitchCase="2">{{"labels.inputs.Absent" |translate}}</span>
-          <span *ngSwitchCase="3">{{"labels.inputs.Approved" |translate}}</span>
-          <span *ngSwitchCase="4">{{"labels.inputs.Leave" |translate}}</span>
-          <span *ngSwitchCase="5">{{"labels.inputs.Late" |translate}}</span>
+          <span *ngSwitchCase="1">{{"labels.inputs.Present" | translate}}</span>
+          <span *ngSwitchCase="2">{{"labels.inputs.Absent" | translate}}</span>
+          <span *ngSwitchCase="3">{{"labels.inputs.Approved" | translate}}</span>
+          <span *ngSwitchCase="4">{{"labels.inputs.Leave" | translate}}</span>
+          <span *ngSwitchCase="5">{{"labels.inputs.Late" | translate}}</span>
           <button mat-icon-button color="primary"
             (click)="editAttendance(member)">
             <fa-icon icon="pen"></fa-icon>
@@ -40,8 +40,8 @@
     </table>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
-      <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'CREATE_MEETING'">{{ "labels.buttons.Confirm" | translate}}</button>
+      <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
+      <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'CREATE_MEETING'">{{"labels.buttons.Confirm" | translate}}</button>
     </mat-card-actions>
 
   </mat-card>

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

@@ -9,24 +9,24 @@
         <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">
             <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>
 
@@ -35,8 +35,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="warn" [disabled]="!closeCenterForm.valid" *mifosxHasPermission="'CLOSE_CENTER'">{{ "labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="warn" [disabled]="!closeCenterForm.valid" *mifosxHasPermission="'CLOSE_CENTER'">{{"labels.buttons.Confirm" | translate}}</button>
       </mat-card-actions>
 
     </form>

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

@@ -9,24 +9,24 @@
         <div fxLayout="column">
 
         <mat-form-field>
-          <mat-label>{{ "labels.inputs.Existing Meeting Date" |translate}}</mat-label>
+          <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 }}
+              {{ 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>
+            {{"labels.inputs.Existing Meeting Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field (click)="newMeetingDatePicker.open()">
-          <mat-label>{{ "labels.inputs.Revised Meeting Date" |translate}}</mat-label>
+          <mat-label>{{"labels.inputs.Revised Meeting Date" | translate}}</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="newMeetingDatePicker" required formControlName="newMeetingDate">
           <mat-datepicker-toggle matSuffix [for]="newMeetingDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #newMeetingDatePicker></mat-datepicker>
           <mat-error *ngIf="centerEditMeetingScheduleForm.controls.newMeetingDate.hasError('required')">
-            {{ "labels.inputs.Revised Meeting Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
+            {{"labels.inputs.Revised Meeting Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
           </mat-error>
         </mat-form-field>
 
@@ -35,8 +35,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!centerEditMeetingScheduleForm.valid" (click)="submit()">{{ "labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!centerEditMeetingScheduleForm.valid" (click)="submit()">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>

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

@@ -1,7 +1,7 @@
 <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>
 
@@ -16,51 +16,51 @@
         <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-option *ngFor="let day of repeatsOnDays" [value]="day.id">
               {{ day.value }}
             </mat-option>
           </mat-select>
           <mat-error *ngIf="centerEditMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
-            {{"labels.inputs.At least" |translate}} <strong>{{"labels.inputs.one" |translate}}</strong> {{"labels.inputs.day must be selected" |translate}}
+            {{"labels.inputs.At least" | translate}} <strong>{{"labels.inputs.one" | translate}}</strong> {{"labels.inputs.day must be selected" | translate}}
           </mat-error>
         </mat-form-field>
 
         <mat-form-field class="m-b-5" (click)="startDatePicker.open()">
-          <mat-label>{{"labels.inputs.Above Changes are Effective from" |translate}}</mat-label>
+          <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>
+            {{"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}}
+            {{"labels.text.Repeats' and 'Repeats every" | translate}}
           </mat-hint>
         </mat-form-field>
 
@@ -69,8 +69,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!centerEditMeetingForm.valid" (click)="submit()">{{ "labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!centerEditMeetingForm.valid" (click)="submit()">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>

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

@@ -3,7 +3,7 @@
   <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">
     </mat-form-field>
 
@@ -15,21 +15,21 @@
 
     <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>
       <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>
       <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>
     </div>
@@ -38,7 +38,7 @@
 
   <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">

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

@@ -2,7 +2,7 @@
 
   <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>
 

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

@@ -11,7 +11,7 @@
           <h3 fxFlex="95%">
             <i class="fa fa-stop" matTooltip="{{ centerViewData.status.value }}"
               [ngClass]="centerViewData.status.code |statusLookup"></i>
-            <b>{{"labels.heading.Center Name" |translate}} :</b> {{centerViewData.name}}
+            <b>{{"labels.heading.Center Name" | translate}} :</b> {{centerViewData.name}}
           </h3>
           <div fxFlex="5%" *ngIf="!(centerViewData.status.value==='Closed')">
             <button mat-icon-button [matMenuTriggerFor]="centerMenu" aria-label="Center actions" yPosition="below">
@@ -25,36 +25,36 @@
           <div fxLayout="row" fxLayout.lt-md="column">
             <div fxFlex="50%">
               <p>
-                {{ "labels.inputs.Account" |translate}} #:{{centerViewData.accountNo}} <br />
-                {{ "labels.inputs.Office" |translate}}: {{centerViewData.officeName}} <br />
+                {{"labels.inputs.Account" | translate}} #:{{centerViewData.accountNo}} <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 />
                 </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 />
               </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')"
                       *mifosxHasPermission="'UPDATE_MEETING'"></i><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>
@@ -67,43 +67,43 @@
 
         <span *ngIf="!(centerViewData.status.value=='Active')">
           <button mat-menu-item *mifosxHasPermission="'ACTIVATE_CENTER'" (click)="doAction('Activate')"><i
-              class="fa fa-check-sign"></i> {{"labels.buttons.Activate" |translate}} </button>
+              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>
+            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>
+            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}}
+            <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 [matMenuTriggerFor]="More"> {{"labels.buttons.More" | translate}} </button>
         <mat-menu #More="matMenu">
           <span *ngIf="centerViewData.collectionMeetingCalendar">
             <button mat-menu-item *mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'"
-              (click)="doAction('Attendance')"> {{"labels.buttons.Attendance" |translate}} </button>
+              (click)="doAction('Attendance')"> {{"labels.buttons.Attendance" | translate}} </button>
           </span>
           <span *ngIf="!(centerViewData.staffId)">
-            <button mat-menu-item *mifosxHasPermission="'ASSIGNSTAFF_GROUP'" (click)="doAction('Assign Staff')"> 
-              {{"labels.buttons.Assign Staff" |translate}} </button>
+            <button mat-menu-item *mifosxHasPermission="'ASSIGNSTAFF_GROUP'" (click)="doAction('Assign Staff')">
+              {{"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'">
-            <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')"> {{"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>
+            <button mat-menu-item *mifosxHasPermission="'CREATE_MEETING'" (click)="doAction('Attach Meeting')">
+              {{"labels.buttons.Attach Meeting" | translate}} </button>
           </span>
           <button mat-menu-item *mifosxHasPermission="'READ_Staff Assignment History'"
-            (click)="doAction('Staff Assignment History')"> {{"labels.buttons.Staff Assignment History" |translate}} </button>
+            (click)="doAction('Staff Assignment History')"> {{"labels.buttons.Staff Assignment History" | translate}} </button>
         </mat-menu>
       </mat-menu>
     </mat-card-title-group>
@@ -113,11 +113,11 @@
     <nav mat-tab-nav-bar class="navigation-tabs">
       <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
         [active]="general.isActive">
-        {{"labels.inputs.General" |translate}}
+        {{"labels.inputs.General" | translate}}
       </a>
       <a mat-tab-link *mifosxHasPermission="'READ_GROUPNOTE'" [routerLink]="['./notes']" routerLinkActive
         #notes="routerLinkActive" [active]="notes.isActive">
-        {{"labels.inputs.Notes" |translate}}
+        {{"labels.inputs.Notes" | translate}}
       </a>
       <span *ngFor="let centerDatatable of centerDatatables">
         <a mat-tab-link *mifosxHasPermission="'READ_' + centerDatatable.registeredTableName"

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

@@ -1,19 +1,19 @@
 <div class="tab-container mat-typography">
   <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 Group Loans" |translate}}: {{centerSummaryData.activeGroupLoans}}<br />
-      {{ "labels.inputs.Active Client Loans" |translate}}: {{centerSummaryData.activeClientLoans}}<br />
-      {{ "labels.inputs.Active Overdue Group Loans" |translate}}: {{centerSummaryData.overdueGroupLoans}}<br />
+      {{"labels.inputs.Active Clients" | translate}}: {{centerSummaryData.activeClients}}<br />
+      {{"labels.inputs.Active Group Loans" | translate}}: {{centerSummaryData.activeGroupLoans}}<br />
+      {{"labels.inputs.Active Client Loans" | translate}}: {{centerSummaryData.activeClientLoans}}<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 Client Borrowers" |translate}}: {{centerSummaryData.activeClientBorrowers}}<br />
-      {{ "labels.inputs.Active Overdue Client Loans" |translate}}: {{centerSummaryData.overdueClientLoans}}<br />
+      {{"labels.inputs.Active Group Borrowers" | translate}}: {{centerSummaryData.activeGroupBorrowers}}<br />
+      {{"labels.inputs.Active Client Borrowers" | translate}}: {{centerSummaryData.activeClientBorrowers}}<br />
+      {{"labels.inputs.Active Overdue Client Loans" | translate}}: {{centerSummaryData.overdueClientLoans}}<br />
     </p>
   </div>
 
@@ -25,25 +25,25 @@
     <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 }}"
             [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>
       </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>
       </ng-container>
 
       <ng-container matColumnDef="Submitted On">
-        <th mat-header-cell *matHeaderCellDef> {{ "labels.inputs.Submitted On" |translate}} </th>
-        <td mat-cell *matCellDef="let element"> {{element.timeline.submittedOnDate  | dateFormat}} </td>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Submitted On" | translate}} </th>
+        <td mat-cell *matCellDef="let element"> {{element.timeline.submittedOnDate | dateFormat}} </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="groupsColumns"></tr>
@@ -58,62 +58,62 @@
 
     <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 }}"
               [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>
         </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>
         </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'"
                 (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Deposit']">
-                <i class="fa fa-arrow-right" matTooltip="{{ 'tooltips.Deposit' | translate }}"></i>
+                <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'"
                 (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Deposit']">
-                <i class="fa fa-arrow-right" matTooltip="{{ 'tooltips.Deposit' | translate }}"></i>
+                <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'"
                 (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Withdrawal']">
-                <i class="fa fa-arrow-left" matTooltip="{{ 'tooltips.Withdraw' | translate }}"></i>
+                <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'"
                 (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Withdrawal']">
-                <i class="fa fa-arrow-left" matTooltip="{{ 'tooltips.Withdraw' | translate }}"></i>
+                <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"
                 (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Approve']">
-                <i class="fa fa-check" matTooltip="{{ 'tooltips.Approve' | translate }}"></i>
+                <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"
                 (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Undo Approval']">
-                <i class="fa fa-undo" matTooltip="{{ 'tooltips.Undo Approve' | translate }}"></i>
+                <i class="fa fa-undo" matTooltip="{{ 'tooltips.Undo Approve' | translate}}"></i>
               </button>
               <button class="account-action-button" 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>
+                <i class="fa fa-power-off" matTooltip="{{ 'tooltips.Activate' | translate}}"></i>
               </button>
             </ng-container>
           </td>

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

@@ -1,5 +1,5 @@
 <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"
       (ngSubmit)="submit()">
@@ -7,7 +7,7 @@
         <textarea formControlName="note" matInput placeholder="Write a note ...."></textarea>
       </mat-form-field>
       <button 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}}
+        <fa-icon icon="plus" class="m-r-10"></fa-icon> {{"labels.buttons.Add" | translate}}
       </button>
     </form>
   </div>
@@ -16,8 +16,8 @@
       <fa-icon icon="sticky-note" matListIcon></fa-icon>
       <h3 matLine>{{centerNote.note}} </h3>
       <p matLine>
-        <span>{{ "labels.inputs.Created By" |translate}}: {{centerNote.createdByUsername}}</span><br />
-        <span>{{ "labels.inputs.Date" |translate}}: {{centerNote.createdOn  | dateFormat}}</span>
+        <span>{{"labels.inputs.Created By" | translate}}: {{centerNote.createdByUsername}}</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)">

src/app/centers/centers.component.html

@@ -8,15 +8,15 @@
         <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'">
-        <fa-icon icon="download" class="m-r-10"></fa-icon>{{ "labels.buttons.Import Center" | translate}}
+        <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>
@@ -24,22 +24,22 @@
   <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>
     </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>
     </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>
     </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">
           <fa-icon icon="stop"></fa-icon>
@@ -48,7 +48,7 @@
     </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>
     </ng-container>
 

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

@@ -9,30 +9,30 @@
         <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">
             <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,36 +41,36 @@
           </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">
             <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">
           </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">
             <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 }}
@@ -84,27 +84,27 @@
 
           <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>
             <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>
             <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>
           </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">
               <button mat-icon-button (click)="removeGroup(i)">
                 <fa-icon icon="trash"></fa-icon>
@@ -118,8 +118,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{ "labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!centerForm.valid" (click)="submit()" *mifosxHasPermission="'CREATE_CENTER'">{{ "labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{"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>

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

@@ -9,18 +9,18 @@
         <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">
             <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,19 +29,19 @@
           </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">
           </mat-form-field>
 
           <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
                 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>
@@ -51,8 +51,8 @@
       </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 mat-raised-button color="primary" [disabled]="!editCenterForm.valid">{{ "labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../general']">{{"labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!editCenterForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
       </mat-card-actions>
 
     </form>