build: Use prettier for html

Stop ignoring html files in prettier and fix existing issues.

src/app/system/manage-jobs/cob-workflow/cob-workflow.component.html

@@ -1,11 +1,14 @@
 <div class="container m-b-20 space-top" fxLayout="row" fxLayoutGap="20px">
   <div #cobCatchUpStatus>
-    <h2 class="no-m">{{'labels.heading.COB Catch-Up is' | translate}}:<span class="m-l-20 m-r-20">{{ isCatchUpRunning ? ( 'labels.catalogs.Running' | translate ) : ('labels.catalogs.Inactive' | translate)}}</span>
+    <h2 class="no-m">
+      {{ 'labels.heading.COB Catch-Up is' | translate }}:<span class="m-l-20 m-r-20">{{
+        isCatchUpRunning ? ('labels.catalogs.Running' | translate) : ('labels.catalogs.Inactive' | translate)
+      }}</span>
     </h2>
   </div>
   <button mat-raised-button class="activate" (click)="runCatchUp()" *ngIf="!isCatchUpRunning">
     <fa-icon icon="times-circle" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Run Catch-Up' | translate}}
+    {{ 'labels.buttons.Run Catch-Up' | translate }}
   </button>
 </div>
 

src/app/system/manage-jobs/cob-workflow/loan-locked/loan-locked.component.html

@@ -1,81 +1,100 @@
 <div class="tab-container mat-typography" *ngIf="loans && loans.length > 0">
-
   <div fxLayout="row" fxLayoutAlign="start center">
     <div class="search-box" fxFlex="40%">
       <mat-form-field fxFlex="90%">
-        <input matInput placeholder="Filter by loan Id or error" (keyup)="applyFilter($event.target.value)">
+        <input matInput placeholder="Filter by loan Id or error" (keyup)="applyFilter($event.target.value)" />
       </mat-form-field>
     </div>
     <div fxFlex="60%" *ngIf="allowRunInlineJob">
       <button mat-raised-button color="success" *mifosxHasPermission="'EXECUTE_INLINE_JOB'" (click)="runInlineCOB()">
-        <fa-icon icon="play" class="m-r-10"></fa-icon>{{'Start inline COB' | translate}}
+        <fa-icon icon="play" class="m-r-10"></fa-icon>{{ 'Start inline COB' | translate }}
       </button>
     </div>
   </div>
 
   <table mat-table [dataSource]="dataSource">
-
     <ng-container matColumnDef="select">
       <th mat-header-cell *matHeaderCellDef>
-        <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
-          [indeterminate]="selection.hasValue() && !isAllSelected()" [aria-label]="checkboxLabel()">
+        <mat-checkbox
+          (change)="$event ? masterToggle() : null"
+          [checked]="selection.hasValue() && isAllSelected()"
+          [indeterminate]="selection.hasValue() && !isAllSelected()"
+          [aria-label]="checkboxLabel()"
+        >
         </mat-checkbox>
       </th>
       <td mat-cell *matCellDef="let row">
-        <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
-          [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
+        <mat-checkbox
+          (click)="$event.stopPropagation()"
+          (change)="$event ? selection.toggle(row) : null"
+          [checked]="selection.isSelected(row)"
+          [aria-label]="checkboxLabel(row)"
+        >
         </mat-checkbox>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="loanId">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Id" | translate}} </th>
-      <td mat-cell *matCellDef="let loan" class="view-details"> {{loan.loanId}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Id' | translate }}</th>
+      <td mat-cell *matCellDef="let loan" class="view-details">{{ loan.loanId }}</td>
     </ng-container>
 
     <ng-container matColumnDef="lockPlacedOn">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Lock Placed On" | translate}} </th>
-      <td mat-cell *matCellDef="let loan" class="view-details"> {{loan.lockPlacedOn | datetimeFormat}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Lock Placed On' | translate }}</th>
+      <td mat-cell *matCellDef="let loan" class="view-details">{{ loan.lockPlacedOn | datetimeFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="lockOwner">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Lock Owner" | translate}} </th>
-      <td mat-cell *matCellDef="let loan" class="view-details"> {{loan.lockOwner}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Lock Owner' | translate }}</th>
+      <td mat-cell *matCellDef="let loan" class="view-details">{{ loan.lockOwner }}</td>
     </ng-container>
 
     <ng-container matColumnDef="error">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Error" | translate}} </th>
-      <td mat-cell *matCellDef="let loan" class="view-details"> {{loan.error}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Error' | translate }}</th>
+      <td mat-cell *matCellDef="let loan" class="view-details">{{ loan.error }}</td>
     </ng-container>
 
     <ng-container matColumnDef="details">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.heading.Details" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.heading.Details' | translate }}</th>
       <td mat-cell *matCellDef="let loan" class="view-details">
-        <button mat-icon-button class="error-log" matTooltip="{{ 'tooltips.Error details' | translate}}" (click)="showDetails(loan)" matTooltipPosition="left">
+        <button
+          mat-icon-button
+          class="error-log"
+          matTooltip="{{ 'tooltips.Error details' | translate }}"
+          (click)="showDetails(loan)"
+          matTooltipPosition="left"
+        >
           <fa-icon icon="exclamation-circle" size="lg"></fa-icon>
         </button>
-        <button mat-icon-button matTooltip="{{ 'tooltips.View Loan Account' | translate}}" (click)="viewLoanAccount(loan)" matTooltipPosition="right">
+        <button
+          mat-icon-button
+          matTooltip="{{ 'tooltips.View Loan Account' | translate }}"
+          (click)="viewLoanAccount(loan)"
+          matTooltipPosition="right"
+        >
           <fa-icon icon="eye" size="lg"></fa-icon>
         </button>
       </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
-    </tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns" (click)="selection.toggle(row)"></tr>
   </table>
 
-  <mat-paginator [hidden]="!showPaginator" [pageSizeOptions]="[100, 500, 1000, 5000]" [pageSize]="pageSize"
-    [pageIndex]="currentPage" showFirstLastButtons (page)="changePaging($event)">
+  <mat-paginator
+    [hidden]="!showPaginator"
+    [pageSizeOptions]="[100, 500, 1000, 5000]"
+    [pageSize]="pageSize"
+    [pageIndex]="currentPage"
+    showFirstLastButtons
+    (page)="changePaging($event)"
+  >
   </mat-paginator>
-
 </div>
 
 <div class="alert" *ngIf="loans && loans.length === 0">
-
   <div class="message">
     <i class="fa fa-exclamation-circle alert-check"></i>
-    {{"labels.text.No loan locked available" | translate}}.
+    {{ 'labels.text.No loan locked available' | translate }}.
   </div>
-
 </div>

src/app/system/manage-jobs/manage-jobs.component.html

@@ -1,16 +1,15 @@
 <mat-card class="container-card">
   <mat-card-content>
     <mat-tab-group #tabGroup mat-align-tabs="center" (selectedTabChange)="onJobTabChange($event)">
-      <mat-tab label="{{title('Scheduler Jobs')}}">
+      <mat-tab label="{{ title('Scheduler Jobs') }}">
         <mifosx-manage-scheduler-jobs></mifosx-manage-scheduler-jobs>
       </mat-tab>
-      <mat-tab label="{{title('Workflow Jobs')}}">
+      <mat-tab label="{{ title('Workflow Jobs') }}">
         <mifosx-workflow-jobs></mifosx-workflow-jobs>
       </mat-tab>
-      <mat-tab label="{{title('COB')}}">
+      <mat-tab label="{{ title('COB') }}">
         <mifosx-cob-workflow [isCatchUpRunning]="isCatchUpRunning"></mifosx-cob-workflow>
       </mat-tab>
     </mat-tab-group>
-
   </mat-card-content>
 </mat-card>

src/app/system/manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-popover.component.html

@@ -1,13 +1,13 @@
-<h1 mat-dialog-title>{{'labels.buttons.Edit Job Custom Parameters' | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.buttons.Edit Job Custom Parameters' | translate }}</h1>
 
 <mat-dialog-content>
   <div class="jobs-container">
     <div *ngFor="let job of selectedJobs">
       <mifosx-custom-parameters-table
-      [displayName]="job.displayName"
-      [jobId]="job.jobId"
-      [jobParameters]="job.jobParameters"
-      (retrieveData)="runSelectedJobs($event)"
+        [displayName]="job.displayName"
+        [jobId]="job.jobId"
+        [jobParameters]="job.jobParameters"
+        (retrieveData)="runSelectedJobs($event)"
       >
       </mifosx-custom-parameters-table>
     </div>
@@ -15,17 +15,17 @@
 </mat-dialog-content>
 
 <mat-list>
-  <mat-list-item *ngFor="let message of messages" class="message" [ngClass]="{'green' : message.status}">
-    {{message.message}}
+  <mat-list-item *ngFor="let message of messages" class="message" [ngClass]="{ green: message.status }">
+    {{ message.message }}
   </mat-list-item>
 </mat-list>
 
 <mat-dialog-actions>
   <button mat-raised-button color="primary" (click)="runSelectedJobs()">
     <fa-icon icon="play" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Run Selected Jobs' | translate}}
+    {{ 'labels.buttons.Run Selected Jobs' | translate }}
   </button>
   <button mat-raised-button color="warn" [mat-dialog-close]="{ show: 0 }">
-    {{'labels.buttons.Close Custom Parameters' | translate}}
+    {{ 'labels.buttons.Close Custom Parameters' | translate }}
   </button>
 </mat-dialog-actions>

src/app/system/manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-table/custom-parameters-table.component.html

@@ -1,20 +1,34 @@
 <div>
-  <h2>{{'labels.inputs.Job' | translate}}: {{ displayName }}</h2>
+  <h2>{{ 'labels.inputs.Job' | translate }}: {{ displayName }}</h2>
   <table mat-table [dataSource]="updatedJobParameters">
     <ng-container matColumnDef="parameterName">
-      <th mat-header-cell *matHeaderCellDef>{{'labels.inputs.Parameter' | translate}} {{'labels.inputs.Name' | translate}}</th>
+      <th mat-header-cell *matHeaderCellDef>
+        {{ 'labels.inputs.Parameter' | translate }} {{ 'labels.inputs.Name' | translate }}
+      </th>
       <td mat-cell *matCellDef="let element; index as i">
         <mat-form-field>
-          <input matInput type="text" [placeholder]="('labels.inputs.Parameter' | translate) + ' ' + ('labels.inputs.Name' | translate)" [(ngModel)]="element.parameterName" />
+          <input
+            matInput
+            type="text"
+            [placeholder]="('labels.inputs.Parameter' | translate) + ' ' + ('labels.inputs.Name' | translate)"
+            [(ngModel)]="element.parameterName"
+          />
         </mat-form-field>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="parameterValue">
-      <th mat-header-cell *matHeaderCellDef>{{'labels.inputs.Parameter' | translate}} {{'labels.inputs.Value' | translate}}</th>
+      <th mat-header-cell *matHeaderCellDef>
+        {{ 'labels.inputs.Parameter' | translate }} {{ 'labels.inputs.Value' | translate }}
+      </th>
       <td mat-cell *matCellDef="let element; index as i">
         <mat-form-field>
-          <input matInput type="text" [placeholder]="('labels.inputs.Parameter' | translate) + ' ' + ('labels.inputs.Value' | translate)"  [(ngModel)]="element.parameterValue" />
+          <input
+            matInput
+            type="text"
+            [placeholder]="('labels.inputs.Parameter' | translate) + ' ' + ('labels.inputs.Value' | translate)"
+            [(ngModel)]="element.parameterValue"
+          />
         </mat-form-field>
       </td>
     </ng-container>
@@ -22,9 +36,14 @@
     <ng-container matColumnDef="actions">
       <th mat-header-cell *matHeaderCellDef></th>
       <td mat-cell *matCellDef="let row; let rowIndex = index">
-        <button type="button" mat-icon-button color="warn"
-          (click)="deleteParameter(rowIndex)" [matTooltip]="('labels.buttons.Delete' | translate)"
-          matTooltipPosition="left">
+        <button
+          type="button"
+          mat-icon-button
+          color="warn"
+          (click)="deleteParameter(rowIndex)"
+          [matTooltip]="'labels.buttons.Delete' | translate"
+          matTooltipPosition="left"
+        >
           <fa-icon icon="trash"></fa-icon>
         </button>
       </td>
@@ -36,6 +55,6 @@
 
   <button mat-button (click)="addParameter()">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Add' | translate}} {{'labels.inputs.Parameter' | translate}}
+    {{ 'labels.buttons.Add' | translate }} {{ 'labels.inputs.Parameter' | translate }}
   </button>
 </div>

src/app/system/manage-jobs/scheduler-jobs/edit-scheduler-job/edit-scheduler-job.component.html

@@ -1,44 +1,45 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="jobForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Job Name' | translate}}</mat-label>
-            <input matInput required formControlName="displayName">
+            <mat-label>{{ 'labels.inputs.Job Name' | translate }}</mat-label>
+            <input matInput required formControlName="displayName" />
             <mat-error *ngIf="jobForm.controls.displayName.hasError('required')">
-              {{'labels.inputs.Job Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Job Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Cron Expression' | translate}}</mat-label>
-            <input matInput required formControlName="cronExpression">
+            <mat-label>{{ 'labels.inputs.Cron Expression' | translate }}</mat-label>
+            <input matInput required formControlName="cronExpression" />
             <mat-error *ngIf="jobForm.controls.cronExpression.hasError('required')">
-              {{'labels.inputs.Cron Expression' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Cron Expression' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="active">
-            {{'labels.inputs.Is job active' | translate}}?
+            {{ 'labels.inputs.Is job active' | translate }}?
           </mat-checkbox>
-
         </div>
 
         <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]="!jobForm.valid" *mifosxHasPermission="'UPDATE_SCHEDULER'">{{'labels.buttons.Submit' | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!jobForm.valid"
+            *mifosxHasPermission="'UPDATE_SCHEDULER'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/system/manage-jobs/scheduler-jobs/error-log-popover/error-log-popover.component.html

@@ -1,27 +1,29 @@
-<h2 mat-dialog-title><span class="m-r-10">{{'labels.inputs.Job Name' | translate}}:</span>{{job.displayName}}</h2>
+<h2 mat-dialog-title>
+  <span class="m-r-10">{{ 'labels.inputs.Job Name' | translate }}:</span>{{ job.displayName }}
+</h2>
 <mat-dialog-content>
-    <table class="m-b-5">
-        <tbody>
-            <tr class="m-b-20">
-                <td class="header">{{'labels.inputs.Start Time' | translate}}</td>
-                <td>{{job.lastRunHistory.jobRunStartTime | datetimeFormat}}</td>
-                <td class="header">{{'labels.inputs.End Time' | translate}}</td>
-                <td>{{job.lastRunHistory.jobRunEndTime | datetimeFormat}}</td>
-            </tr>
-            <tr>
-                <td colspan="4" class="message">
-                    <div #content class="note-field" [class.show]="show" [class.note-text]="content.scrollHeight > 18">
-                        <span>{{job.lastRunHistory.jobRunErrorLog}}</span>
-                    </div>
-                    <button mat-flat-button *ngIf="content.scrollHeight > 18" class="show-button" (click)="show = !show">
-                        {{ buttonLabel() }}
-                    </button>
-                </td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="m-b-5">
+    <tbody>
+      <tr class="m-b-20">
+        <td class="header">{{ 'labels.inputs.Start Time' | translate }}</td>
+        <td>{{ job.lastRunHistory.jobRunStartTime | datetimeFormat }}</td>
+        <td class="header">{{ 'labels.inputs.End Time' | translate }}</td>
+        <td>{{ job.lastRunHistory.jobRunEndTime | datetimeFormat }}</td>
+      </tr>
+      <tr>
+        <td colspan="4" class="message">
+          <div #content class="note-field" [class.show]="show" [class.note-text]="content.scrollHeight > 18">
+            <span>{{ job.lastRunHistory.jobRunErrorLog }}</span>
+          </div>
+          <button mat-flat-button *ngIf="content.scrollHeight > 18" class="show-button" (click)="show = !show">
+            {{ buttonLabel() }}
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </mat-dialog-content>
 
 <mat-dialog-actions align="center">
-    <button mat-raised-button mat-dialog-close>{{"labels.buttons.Close" | translate}}</button>
-</mat-dialog-actions>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Close' | translate }}</button>
+</mat-dialog-actions>

src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html

@@ -1,182 +1,230 @@
 <div class="container m-b-20 space-top" fxLayout="row" fxLayoutGap="20px">
   <div #schedulerStatus>
-    <h2 class="no-m">{{'labels.heading.Scheduler Status' | translate}}:<span class="m-l-20 m-r-20">{{ schedulerActive ?
-        ( 'labels.inputs.Active' | translate ) : ('labels.catalogs.Inactive' | translate) }}</span>
+    <h2 class="no-m">
+      {{ 'labels.heading.Scheduler Status' | translate }}:<span class="m-l-20 m-r-20">{{
+        schedulerActive ? ('labels.inputs.Active' | translate) : ('labels.catalogs.Inactive' | translate)
+      }}</span>
     </h2>
   </div>
   <button mat-raised-button class="suspend" (click)="suspendScheduler()" *ngIf="schedulerActive">
     <fa-icon icon="times-circle" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Suspend' | translate}}
+    {{ 'labels.buttons.Suspend' | translate }}
   </button>
   <button mat-raised-button class="activate" (click)="activateScheduler()" *ngIf="!schedulerActive">
     <fa-icon icon="times-circle" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Activate' | translate}}
+    {{ 'labels.buttons.Activate' | translate }}
   </button>
-
 </div>
 
 <div class="container">
-
   <div #filter fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="space-top" fxLayout="row" fxLayoutGap="20px">
     <button mat-raised-button color="primary" (click)="openRunSelectedJobsDialog()" [disabled]="!isAnyJobSelected()">
       <fa-icon icon="play" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Run Selected Jobs' | translate}}
+      {{ 'labels.buttons.Run Selected Jobs' | translate }}
     </button>
     <button mat-raised-button color="primary" (click)="openCustomParametersDialog()" [disabled]="!isAnyJobSelected()">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Add Custom Parameters' | translate}}
+      {{ 'labels.buttons.Add Custom Parameters' | translate }}
     </button>
     <button mat-raised-button color="primary" (click)="refresh()">
       <fa-icon icon="sync" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Refresh' | translate}}
+      {{ 'labels.buttons.Refresh' | translate }}
     </button>
   </div>
 
   <div #jobsTable class="mat-elevation-z8 space-top">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="select">
         <th mat-header-cell *matHeaderCellDef>
-          <mat-checkbox class="m-r-10" (change)="$event ? masterToggle() : null"
+          <mat-checkbox
+            class="m-r-10"
+            (change)="$event ? masterToggle() : null"
             [checked]="selection.hasValue() && isAllSelected()"
-            [indeterminate]="selection.hasValue() && !isAllSelected()">
+            [indeterminate]="selection.hasValue() && !isAllSelected()"
+          >
           </mat-checkbox>
         </th>
         <td mat-cell *matCellDef="let row">
-          <mat-checkbox class="m-r-10" *ngIf="!row.currentlyRunning && row.active" (click)="$event.stopPropagation()"
-            (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
+          <mat-checkbox
+            class="m-r-10"
+            *ngIf="!row.currentlyRunning && row.active"
+            (click)="$event.stopPropagation()"
+            (change)="$event ? selection.toggle(row) : null"
+            [checked]="selection.isSelected(row)"
+          >
           </mat-checkbox>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="displayName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Name' | translate}} </th>
-        <td mat-cell *matCellDef="let job" [routerLink]="[job.jobId]"> {{ job.displayName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Name' | translate }}</th>
+        <td mat-cell *matCellDef="let job" [routerLink]="[job.jobId]">{{ job.displayName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="active">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Active' | translate}}</th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Active' | translate }}</th>
         <td mat-cell *matCellDef="let job" class="center">
           <div [className]="job.active === true ? 'currently-running' : 'not-currently-running'">
-            <fa-icon matTooltip="{{ job.active === true | yesNo }}" matTooltipPosition="right" icon="circle"
-              size="lg"></fa-icon>
+            <fa-icon
+              matTooltip="{{ job.active === true | yesNo }}"
+              matTooltipPosition="right"
+              icon="circle"
+              size="lg"
+            ></fa-icon>
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="previousRunTime">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Previous Run' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Previous Run' | translate }}</th>
         <td mat-cell *matCellDef="let job">
           <div *ngIf="job.lastRunHistory">
-            <fa-icon *ngIf="job.lastRunHistory.status === 'success'" class="success"
-              [matTooltip]="('tooltips.Successful' | translate)" matTooltipPosition="right" icon="check-circle"
-              size="lg"></fa-icon>
-            <fa-icon *ngIf="!(job.lastRunHistory.status === 'success')" class="fail"
-              [matTooltip]="('tooltips.Failed' | translate)" matTooltipPosition="right" icon="times-circle"
-              size="lg"></fa-icon>
+            <fa-icon
+              *ngIf="job.lastRunHistory.status === 'success'"
+              class="success"
+              [matTooltip]="'tooltips.Successful' | translate"
+              matTooltipPosition="right"
+              icon="check-circle"
+              size="lg"
+            ></fa-icon>
+            <fa-icon
+              *ngIf="!(job.lastRunHistory.status === 'success')"
+              class="fail"
+              [matTooltip]="'tooltips.Failed' | translate"
+              matTooltipPosition="right"
+              icon="times-circle"
+              size="lg"
+            ></fa-icon>
             <span *ngIf="job.lastRunHistory" class="m-l-5">
-              {{ job.lastRunHistory.jobRunStartTime | datetimeFormat}}</span>
+              {{ job.lastRunHistory.jobRunStartTime | datetimeFormat }}</span
+            >
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="nextRunTime">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Next Run' | translate}} </th>
-        <td mat-cell *matCellDef="let job"> {{ job.nextRunTime | datetimeFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Next Run' | translate }}</th>
+        <td mat-cell *matCellDef="let job">{{ job.nextRunTime | datetimeFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="currentlyRunning">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Currently Running' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Currently Running' | translate }}</th>
         <td mat-cell *matCellDef="let job" class="center">
           <div [className]="job.currentlyRunning === true ? 'currently-running' : 'not-currently-running'">
-            <fa-icon matTooltip="{{ job.currentlyRunning === true | yesNo }}" matTooltipPosition="right" icon="circle"
-              size="lg"></fa-icon>
+            <fa-icon
+              matTooltip="{{ job.currentlyRunning === true | yesNo }}"
+              matTooltipPosition="right"
+              icon="circle"
+              size="lg"
+            ></fa-icon>
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="errorLog">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Error Log' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Error Log' | translate }}</th>
         <td mat-cell *matCellDef="let job" class="center">
-          <button mat-icon-button class="errorlog" (click)="showErrorLog(job)"
+          <button
+            mat-icon-button
+            class="errorlog"
+            (click)="showErrorLog(job)"
             *ngIf="!(job.lastRunHistory && job.lastRunHistory.status === 'success')"
-            matTooltip="{{'labels.inputs.Error Log' | translate}}" matTooltipPosition="right">
+            matTooltip="{{ 'labels.inputs.Error Log' | translate }}"
+            matTooltipPosition="right"
+          >
             <fa-icon icon="exclamation-circle" size="lg"></fa-icon>
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
 
 <div class="container space-top" fxLayout="row" fxLayoutGap="20px">
   <button mat-raised-button color="primary" (click)="openRunSelectedJobsDialog()" [disabled]="!isAnyJobSelected()">
     <fa-icon icon="play" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Run Selected Jobs' | translate}}
+    {{ 'labels.buttons.Run Selected Jobs' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="refresh()">
     <fa-icon icon="sync" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Refresh' | translate}}
+    {{ 'labels.buttons.Refresh' | translate }}
   </button>
 </div>
 
 <ng-template #templateSchedulerStatus let-data let-popover="popover">
-  <h4>{{'labels.heading.Scheduler status' | translate}}.</h4>
+  <h4>{{ 'labels.heading.Scheduler status' | 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="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>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </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-data let-popover="popover">
-  <h4>{{'labels.heading.Search bar to filter jobs' | translate }}.</h4>
+  <h4>{{ 'labels.heading.Search bar to filter jobs' | 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="primary"
-      (click)="popover.close();showPopover(templateSchedulerStatus,schedulerStatus, 'bottom', true)">{{'labels.buttons.Back'
-      | translate}}</button>
-    <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateJobsTable,jobsTable, 'top', true)">{{'labels.buttons.Next' |
-      translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateSchedulerStatus, schedulerStatus, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateJobsTable, jobsTable, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateJobsTable let-data let-popover="popover">
-  <h4>{{'labels.heading.List of all scheduled batch jobs' | translate }} <a
-      href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895356/Manage+Scheduler+Jobs"
-      target="_blank">{{'labels.heading.Schedular Jobs' | translate}}</a></h4>
+  <h4>
+    {{ 'labels.heading.List of all scheduled batch jobs' | translate }}
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895356/Manage+Scheduler+Jobs" target="_blank">{{
+      'labels.heading.Schedular Jobs' | 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="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>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </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>
+</ng-template>

src/app/system/manage-jobs/scheduler-jobs/run-selected-jobs-popover/run-selected-jobs-popover.component.html

@@ -1,23 +1,23 @@
-<h1 mat-dialog-title>{{'labels.heading.Selected Jobs' | translate}}:</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Selected Jobs' | translate }}:</h1>
 
 <mat-dialog-content>
-    <div class="jobs-container">
-        <mifosx-run-selected-jobs-table [selectedJobs]="selectedJobs" (confirmedJobs)="runSelectedJobs()">
-        </mifosx-run-selected-jobs-table>
-    </div>
+  <div class="jobs-container">
+    <mifosx-run-selected-jobs-table [selectedJobs]="selectedJobs" (confirmedJobs)="runSelectedJobs()">
+    </mifosx-run-selected-jobs-table>
+  </div>
 </mat-dialog-content>
 
 <mat-list>
-    <mat-list-item *ngFor="let message of messages" class="message" ngClass]="{'green' : message.status}">
-        {{message.message}}
-    </mat-list-item>
+  <mat-list-item *ngFor="let message of messages" class="message" ngClass]="{'green' : message.status}">
+    {{ message.message }}
+  </mat-list-item>
 </mat-list>
 <mat-dialog-actions>
-    <button mat-raised-button color="primary" (click)="runSelectedJobs()">
-        <fa-icon icon="play" class="m-r-10"></fa-icon>
-        {{'labels.buttons.Confirm' | translate}}
-    </button>
-    <button mat-raised-button color="warn" [mat-dialog-close]="{ show: 0 }">
-        {{'labels.buttons.Cancel' | translate}}
-    </button>
-</mat-dialog-actions>
+  <button mat-raised-button color="primary" (click)="runSelectedJobs()">
+    <fa-icon icon="play" class="m-r-10"></fa-icon>
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ show: 0 }">
+    {{ 'labels.buttons.Cancel' | translate }}
+  </button>
+</mat-dialog-actions>

src/app/system/manage-jobs/scheduler-jobs/run-selected-jobs-popover/run-selected-jobs-table/run-selected-jobs-table.component.html

@@ -1,23 +1,27 @@
 <div>
-    <table mat-table [dataSource]="selectedJobs">
-        <ng-container matColumnDef="displayName">
-            <th mat-header-cell *matHeaderCellDef>{{'labels.inputs.Display Name' |
-                translate}}</th>
-            <td mat-cell *matCellDef="let element; index as i">{{ element.displayName
-                }}</td>
-        </ng-container>
+  <table mat-table [dataSource]="selectedJobs">
+    <ng-container matColumnDef="displayName">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Display Name' | translate }}</th>
+      <td mat-cell *matCellDef="let element; index as i">{{ element.displayName }}</td>
+    </ng-container>
 
-        <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef></th>
-            <td mat-cell *matCellDef="let row; let rowIndex = index">
-                <button type="button" mat-icon-button color="warn" (click)="removeJobFromSelection(rowIndex)"
-                    matTooltip="Delete" matTooltipPosition="left">
-                    <fa-icon icon="trash"></fa-icon>
-                </button>
-            </td>
-        </ng-container>
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef></th>
+      <td mat-cell *matCellDef="let row; let rowIndex = index">
+        <button
+          type="button"
+          mat-icon-button
+          color="warn"
+          (click)="removeJobFromSelection(rowIndex)"
+          matTooltip="Delete"
+          matTooltipPosition="left"
+        >
+          <fa-icon icon="trash"></fa-icon>
+        </button>
+      </td>
+    </ng-container>
 
-        <tr mat-header-row *matHeaderRowDef="columnsToDisplay" class="first-row"></tr>
-        <tr mat-row *matRowDef="let selectedJobs; columns: columnsToDisplay"></tr>
-    </table>
-</div>
+    <tr mat-header-row *matHeaderRowDef="columnsToDisplay" class="first-row"></tr>
+    <tr mat-row *matRowDef="let selectedJobs; columns: columnsToDisplay"></tr>
+  </table>
+</div>

src/app/system/manage-jobs/scheduler-jobs/view-history-scheduler-job/view-history-scheduler-job.component.html

@@ -1,65 +1,81 @@
 <div class="container">
-
   <div fxLayout="row" fxLayoutGap="20px">
-
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter By Version' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter By Version' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
-      <ng-container matColumnDef="version" >
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Version' | translate}} </th>
-        <td mat-cell *matCellDef="let jobHistoryData"> {{ jobHistoryData.version }} </td>
+      <ng-container matColumnDef="version">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Version' | translate }}</th>
+        <td mat-cell *matCellDef="let jobHistoryData">{{ jobHistoryData.version }}</td>
       </ng-container>
 
       <ng-container matColumnDef="run_start_time">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Start Time' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Start Time' | translate }}</th>
         <td mat-cell *matCellDef="let jobHistoryData">{{ jobHistoryData.jobRunStartTime | datetimeFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="run_end_time">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.End Time' | translate}}End time </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.End Time' | translate }}End time</th>
         <td mat-cell *matCellDef="let jobHistoryData">{{ jobHistoryData.jobRunEndTime | datetimeFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
         <td mat-cell *matCellDef="let jobHistoryData">
-          <fa-icon *ngIf="jobHistoryData.status === 'success'" class="success" matTooltip="{{ 'tooltips.Successful' | translate}}" matTooltipPosition="right" icon="check-circle" size="lg"></fa-icon>
-          <fa-icon *ngIf="!(jobHistoryData.status === 'success')" class="fail" matTooltip="{{ 'tooltips.Failed' | translate}}" matTooltipPosition="right" icon="times-circle" size="lg"></fa-icon>
+          <fa-icon
+            *ngIf="jobHistoryData.status === 'success'"
+            class="success"
+            matTooltip="{{ 'tooltips.Successful' | translate }}"
+            matTooltipPosition="right"
+            icon="check-circle"
+            size="lg"
+          ></fa-icon>
+          <fa-icon
+            *ngIf="!(jobHistoryData.status === 'success')"
+            class="fail"
+            matTooltip="{{ 'tooltips.Failed' | translate }}"
+            matTooltipPosition="right"
+            icon="times-circle"
+            size="lg"
+          ></fa-icon>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="run_type">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Run Type' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Run Type' | translate }}</th>
         <td mat-cell *matCellDef="let jobHistoryData">{{ jobHistoryData.triggerType }}</td>
       </ng-container>
 
       <ng-container matColumnDef="error_log">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Error Log' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Error Log' | translate }}</th>
         <td mat-cell *matCellDef="let jobHistoryData">
-          <button mat-icon-button class="errorlog" *ngIf="!(jobHistoryData.status === 'success')" matTooltip="{{ 'tooltips.Error Log' | translate}}" matTooltipPosition="right" (click)="openError(jobHistoryData.version)">
+          <button
+            mat-icon-button
+            class="errorlog"
+            *ngIf="!(jobHistoryData.status === 'success')"
+            matTooltip="{{ 'tooltips.Error Log' | translate }}"
+            matTooltipPosition="right"
+            (click)="openError(jobHistoryData.version)"
+          >
             <fa-icon icon="exclamation-circle" size="lg"></fa-icon>
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
 
     <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
-      <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>
     </div>
-
   </div>
-
 </div>

src/app/system/manage-jobs/scheduler-jobs/view-scheduler-job/view-scheduler-job.component.html

@@ -1,23 +1,19 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
   <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]="['viewhistory']">
-    {{'labels.buttons.View History' | translate }}
+    {{ 'labels.buttons.View History' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Job Name' | translate}}
+          {{ 'labels.inputs.Job Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -25,39 +21,37 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Cron Expression' | translate}}
+          {{ 'labels.inputs.Cron Expression' | translate }}
         </div>
 
         <div fxFlex="50%">
           {{ jobData.cronExpression }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Is Active Job' | translate}}?
-        </div>
+        <div fxFlex="50%" class="mat-body-strong">{{ 'labels.inputs.Is Active Job' | translate }}?</div>
 
         <div fxFlex="50%">
           {{ jobData.active | yesNo }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Follow' | translate}}
+          {{ 'labels.inputs.Follow' | translate }}
         </div>
 
         <div fxFlex="50%">
-          <a href="http://www.cronmaker.com/">	{{'labels.text.Click Here To Generate Cron Expression' | translate}} </a>
+          <a href="http://www.cronmaker.com/">
+            {{ 'labels.text.Click Here To Generate Cron Expression' | translate }}
+          </a>
         </div>
-
       </div>
-
     </mat-card-content>
 
     <mat-card-actions>
       <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
-        <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>
       </div>
     </mat-card-actions>
-
   </mat-card>
-
 </div>

src/app/system/manage-jobs/workflow-jobs/workflow-diagram/workflow-diagram.component.html

@@ -1,5 +1,14 @@
-<ngx-graph [view]="diagramSize" [links]="links" [nodes]="nodes" [curve]="curve" [layout]="layout"
-  [nodeHeight]="100" [layoutSettings]="layoutSettings" [enableZoom]="true" [center$]="center$">
+<ngx-graph
+  [view]="diagramSize"
+  [links]="links"
+  [nodes]="nodes"
+  [curve]="curve"
+  [layout]="layout"
+  [nodeHeight]="100"
+  [layoutSettings]="layoutSettings"
+  [enableZoom]="true"
+  [center$]="center$"
+>
   <ng-template #defsTemplate>
     <svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto">
       <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
@@ -21,17 +30,23 @@
     <svg:g class="edge">
       <svg:path class="line" stroke-width="2" marker-end="url(#arrow)"></svg:path>
       <svg:text class="edge-label" text-anchor="middle">
-        <textPath class="text-path" [attr.href]="'#' + link.id" [style.dominant-baseline]="link.dominantBaseline"
-          startOffset="50%">
+        <textPath
+          class="text-path"
+          [attr.href]="'#' + link.id"
+          [style.dominant-baseline]="link.dominantBaseline"
+          startOffset="50%"
+        >
           {{ link.label }}
         </textPath>
       </svg:text>
     </svg:g>
-    <svg:g class="link-midpoint" *ngIf="link.midPoint"
-      [attr.transform]="'translate(' + link.midPoint.x + ',' + link.midPoint.y + ')'">
+    <svg:g
+      class="link-midpoint"
+      *ngIf="link.midPoint"
+      [attr.transform]="'translate(' + link.midPoint.x + ',' + link.midPoint.y + ')'"
+    >
       <ellipse rx="30" ry="10" />
-      <svg:text alignment-baseline="central">{{ link.data.linkText | translateKey:'text' }}</svg:text>
+      <svg:text alignment-baseline="central">{{ link.data.linkText | translateKey: 'text' }}</svg:text>
     </svg:g>
   </ng-template>
-
 </ngx-graph>

src/app/system/manage-jobs/workflow-jobs/workflow-jobs.component.html

@@ -1,62 +1,76 @@
 <div class="container space-top" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
   <mat-form-field fxFlex="31%">
-    <mat-label>{{'labels.inputs.Job Name' | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Job Name' | translate }}</mat-label>
     <mat-select [formControl]="jobName" (selectionChange)="getWorkflowJobSteps($event.value)">
       <mat-option *ngFor="let job of jobNameOptions" [value]="job">
-        {{ job | translateKey:'catalogs' }}
+        {{ job | translateKey: 'catalogs' }}
       </mat-option>
     </mat-select>
   </mat-form-field>
 
   <div class="action-button" fxLayoutGap="25px" *ngIf="jobStepName">
     <button mat-raised-button color="primary" (click)="addJobStep()">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Link Job Step' | translate}}
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Link Job Step' | translate }}
     </button>
   </div>
 
   <div class="mat-elevation-z8 container" *ngIf="jobStepsData.length > 0">
-
-    <table mat-table [dataSource]="jobStepsData" #table cdkDropList [cdkDropListData]="jobStepsData"
-      (cdkDropListDropped)="dropTable($event)">
-
+    <table
+      mat-table
+      [dataSource]="jobStepsData"
+      #table
+      cdkDropList
+      [cdkDropListData]="jobStepsData"
+      (cdkDropListDropped)="dropTable($event)"
+    >
       <ng-container matColumnDef="stepName">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Step Name' | translate}} </th>
-        <td mat-cell *matCellDef="let jobStep"> {{ jobStep.stepName }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Step Name' | translate }}</th>
+        <td mat-cell *matCellDef="let jobStep">{{ jobStep.stepName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="stepOrder">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Order' | translate }} </th>
-        <td mat-cell *matCellDef="let jobStep"> {{ jobStep.order }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Order' | translate }}</th>
+        <td mat-cell *matCellDef="let jobStep">{{ jobStep.order }}</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 row; let rowIndex = index">
-          <button type="button" mat-icon-button color="warn" (click)="removeJobStep(rowIndex)" matTooltip="{{ 'tooltips.Delete' | translate}}"
-            matTooltipPosition="left">
+          <button
+            type="button"
+            mat-icon-button
+            color="warn"
+            (click)="removeJobStep(rowIndex)"
+            matTooltip="{{ 'tooltips.Delete' | translate }}"
+            matTooltipPosition="left"
+          >
             <fa-icon icon="trash"></fa-icon>
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row cdkDrag [cdkDragData]="row" *matRowDef="let row; columns: displayedColumns;"></tr>
+      <tr mat-row cdkDrag [cdkDragData]="row" *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
   </div>
 
-  <div *ngIf="stepOrderHasChanged" fxLayout="row" class="container margin-t space-top" fxLayout.xs="column"
-    fxLayoutAlign="center" fxLayoutGap="2%">
+  <div
+    *ngIf="stepOrderHasChanged"
+    fxLayout="row"
+    class="container margin-t space-top"
+    fxLayout.xs="column"
+    fxLayoutAlign="center"
+    fxLayoutGap="2%"
+  >
     <button mat-raised-button [routerLink]="['../']">
-      {{"labels.buttons.Cancel" | translate}}
+      {{ 'labels.buttons.Cancel' | translate }}
     </button>
     <button mat-raised-button color="primary" (click)="saveChanges()">
-      {{"labels.buttons.Apply Changes" | translate}}
+      {{ 'labels.buttons.Apply Changes' | translate }}
     </button>
   </div>
 
   <div class="container space-top" *ngIf="jobStepsData.length > 0 && !stepOrderHasChanged">
     <mifosx-workflow-diagram [jobStepsData]="jobStepsData"></mifosx-workflow-diagram>
   </div>
-
 </div>