Transactions tab standarization

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

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

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

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { MatTabChangeEvent } from '@angular/material/tabs';
 import { SystemService } from '../system.service';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'mifosx-manage-jobs',
@@ -11,7 +12,8 @@ export class ManageJobsComponent implements OnInit {
   /** Process running flag */
   isCatchUpRunning = true;
 
-  constructor(private systemService: SystemService) { }
+  constructor(private systemService: SystemService,
+    private translateService: TranslateService) { }
 
   ngOnInit(): void {
   }
@@ -24,4 +26,8 @@ export class ManageJobsComponent implements OnInit {
     }
   }
 
+  title(label: string) {
+    return this.translateService.instant('labels.inputs.' + label);
+  }
+
 }

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

@@ -1,8 +1,8 @@
 <div>
-  <h2>Job: {{ displayName }}</h2>
+  <h2>{{'labels.inputs.Job' | translate}}: {{ displayName }}</h2>
   <table mat-table [dataSource]="updatedJobParameters">
     <ng-container matColumnDef="parameterName">
-      <th mat-header-cell *matHeaderCellDef>Parameter Name</th>
+      <th mat-header-cell *matHeaderCellDef>{{'labels.inputs.Parameter Name' | translate}}</th>
       <td mat-cell *matCellDef="let element; index as i">
         <mat-form-field>
           <input matInput type="text" placeholder="Parameter Name" [(ngModel)]="element.parameterName" />
@@ -11,7 +11,7 @@
     </ng-container>
 
     <ng-container matColumnDef="parameterValue">
-      <th mat-header-cell *matHeaderCellDef>Parameter Value</th>
+      <th mat-header-cell *matHeaderCellDef>{{'labels.inputs.Parameter Value' | translate}}</th>
       <td mat-cell *matCellDef="let element; index as i">
         <mat-form-field>
           <input matInput type="text" placeholder="Parameter Value" [(ngModel)]="element.parameterValue" />
@@ -36,6 +36,6 @@
 
   <button mat-button (click)="addParameter()">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Add Parameter
+    {{'labels.buttons.Add Parameter' | translate}}
   </button>
 </div>

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

@@ -0,0 +1,27 @@
+<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>
+</mat-dialog-content>
+
+<mat-dialog-actions align="center">
+    <button mat-raised-button mat-dialog-close>{{"labels.buttons.Close" | translate}}</button>
+</mat-dialog-actions>

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

@@ -0,0 +1,47 @@
+.message {
+    height: auto;
+    font-weight: 500;
+}
+
+tr {
+    padding-bottom: 10px;
+}
+
+span:not(.note){
+    font-size: .9rem;
+    line-height: 14px    
+}
+
+.note-text {
+    height: 7.95rem;
+    overflow: hidden;
+    display: inline-block;
+    position: relative;
+    text-align: left;
+}
+
+.note-field:not(.show)::after {
+    content: '...';
+    padding-left: .5rem;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+}
+
+.show {
+    overflow: visible;
+    text-overflow: none;
+    height: auto;
+}
+
+button {
+    background: transparent;
+    font-size: small;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+}
+
+button:hover {
+    text-decoration: none;
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ErrorLogPopoverComponent } from './error-log-popover.component';
+
+describe('ErrorLogPopoverComponent', () => {
+  let component: ErrorLogPopoverComponent;
+  let fixture: ComponentFixture<ErrorLogPopoverComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ErrorLogPopoverComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ErrorLogPopoverComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,34 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { SchedulerJob } from '../models/scheduler-job.model';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { TranslateService } from '@ngx-translate/core';
+
+
+interface ErrorJobDataType {
+  job: SchedulerJob;
+}
+
+@Component({
+  selector: 'mifosx-error-log-popover',
+  templateUrl: './error-log-popover.component.html',
+  styleUrls: ['./error-log-popover.component.scss']
+})
+export class ErrorLogPopoverComponent implements OnInit {
+  show = false;
+
+  /* Initialize Selected Job */
+  job: SchedulerJob;
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: ErrorJobDataType,
+    private translateService: TranslateService) { }
+
+  ngOnInit(): void {
+    this.job = this.data.job;
+  }
+
+  buttonLabel(): string {
+    const label: string = this.show ? 'Show less' : 'Show more';
+    return this.translateService.instant('labels.buttons.' + label);
+  }
+
+}

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

@@ -1,15 +1,15 @@
 <div class="container m-b-20 space-top" fxLayout="row" fxLayoutGap="20px">
   <div #schedulerStatus>
-    <h2 class="no-m">Scheduler Status:<span class="m-l-20 m-r-20">{{ schedulerActive ? 'Active' : 'Inactive' }}</span>
+    <h2 class="no-m">{{'labels.heading.Scheduler Status' | translate}}:<span class="m-l-20 m-r-20">{{ schedulerActive ? 'Active' : 'Inactive' }}</span>
     </h2>
   </div>
   <button mat-raised-button class="suspend" (click)="suspendScheduler()" *ngIf="schedulerActive">
     <fa-icon icon="times-circle" class="m-r-10"></fa-icon>
-    Suspend
+    {{'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>
-    Activate
+    {{'labels.buttons.Activate' | translate}}
   </button>
 
 </div>
@@ -23,14 +23,18 @@
     </mat-form-field>
   </div>
 
-  <div class="container space-top" fxLayout="row" fxLayoutGap="20px">
+  <div class="space-top" fxLayout="row" fxLayoutGap="20px">
     <button mat-raised-button color="primary" (click)="runSelectedJobs()" [disabled]="!isAnyJobSelected()">
       <fa-icon icon="play" class="m-r-10"></fa-icon>
-      Run Selected Jobs
+      {{'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>
-      Add Custom Parameters
+      {{'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}}
     </button>
   </div>
 
@@ -53,12 +57,12 @@
       </ng-container>
 
       <ng-container matColumnDef="displayName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
-        <td mat-cell *matCellDef="let job"> {{ 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> Active ? </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"
@@ -67,31 +71,27 @@
         </td>
       </ng-container>
 
-      <ng-container matColumnDef="nextRunTime">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Next Run </th>
-        <td mat-cell *matCellDef="let job"> {{ job.nextRunTime }} </td>
-      </ng-container>
-
       <ng-container matColumnDef="previousRunTime">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Previous Run </th>
-        <td mat-cell *matCellDef="let job"><span *ngIf="job.lastRunHistory">{{ job.lastRunHistory.jobRunStartTime
-            }}</span></td>
-      </ng-container>
-
-      <ng-container matColumnDef="previousRunStatus">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Previous Run Status </th>
-        <td mat-cell *matCellDef="let job" class="center">
+        <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="Successful"
               matTooltipPosition="right" icon="check-circle" size="lg"></fa-icon>
             <fa-icon *ngIf="!(job.lastRunHistory.status == 'success')" class="fail" matTooltip="Failed"
               matTooltipPosition="right" icon="times-circle" size="lg"></fa-icon>
+          <span *ngIf="job.lastRunHistory" class="m-l-5">
+            {{ 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>
+      </ng-container>
+
       <ng-container matColumnDef="currentlyRunning">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Currently Running </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"
@@ -101,10 +101,10 @@
       </ng-container>
 
       <ng-container matColumnDef="errorLog">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Error Log </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"
-            *ngIf="!(job.lastRunHistory && job.lastRunHistory.status == 'success')" matTooltip="Error Log"
+          <button mat-icon-button class="errorlog" (click)="showErrorLog(job)"
+            *ngIf="!(job.lastRunHistory && job.lastRunHistory.status == 'success')" matTooltip="{{'labels.inputs.Error Log' | translate}}"
             matTooltipPosition="right">
             <fa-icon icon="exclamation-circle" size="lg"></fa-icon>
           </button>
@@ -112,7 +112,7 @@
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.jobId]" class="select-row"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
 
     </table>
 
@@ -125,7 +125,7 @@
 <div class="container space-top" fxLayout="row" fxLayoutGap="20px">
   <button mat-raised-button color="primary" (click)="runSelectedJobs()" [disabled]="!isAnyJobSelected()">
     <fa-icon icon="play" class="m-r-10"></fa-icon>
-    Run Selected Jobs<ng-template #templateSchedulerJobs let-data let-popover="popover">
+    {{'labels.buttons.Run Selected Jobs' | translate}}<ng-template #templateSchedulerJobs let-data let-popover="popover">
       <h2>Template</h2>
       <p>This is the template I am trying to use. Is that fine.</p>
       <button (click)="popover.close();nextStepSchedulerJobs()">Next</button>
@@ -133,7 +133,7 @@
   </button>
   <button mat-raised-button color="primary" (click)="refresh()">
     <fa-icon icon="sync" class="m-r-10"></fa-icon>
-    Refresh
+    {{'labels.buttons.Refresh' | translate}}
   </button>
 </div>
 
@@ -141,10 +141,10 @@
   <h4>Scheduler Status. Button will be used to change the status.</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn"
-      (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
+      (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)">Next</button>
+      (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>
 
@@ -152,11 +152,11 @@
   <h4>Search bar to filter jobs.</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn"
-      (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+      (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
     <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateSchedulerStatus,schedulerStatus, 'bottom', true)">Back</button>
+      (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)">Next</button>
+      (click)="popover.close();showPopover(templateJobsTable,jobsTable, 'top', true)">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>
 
@@ -166,9 +166,9 @@
       Jobs</a></h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn"
-      (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+      (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
     <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+      (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>

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

@@ -39,3 +39,8 @@ table {
 .space-top {
   margin-top: 30px;
 }
+
+.cdk-column-displayName,
+.mat-column-displayName {
+  flex: 0 0 5px !important;
+}

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

@@ -17,6 +17,8 @@ import { ConfigurationWizardService } from '../../../configuration-wizard/config
 /** Custom Dialog Component */
 import { NextStepDialogComponent } from '../../../configuration-wizard/next-step-dialog/next-step-dialog.component';
 import { CustomParametersPopoverComponent } from './custom-parameters-popover/custom-parameters-popover.component';
+import { SchedulerJob } from './models/scheduler-job.model';
+import { ErrorLogPopoverComponent } from './error-log-popover/error-log-popover.component';
 
 /**
  * Manage scheduler jobs component.
@@ -33,7 +35,7 @@ export class ManageSchedulerJobsComponent implements OnInit, AfterViewInit {
   /** Scheduler data */
   schedulerData: any;
   /** Columns to be displayed in manage scheduler jobs table. */
-  displayedColumns: string[] = ['select', 'displayName', 'active', 'nextRunTime', 'previousRunTime', 'previousRunStatus', 'currentlyRunning', 'errorLog'];
+  displayedColumns: string[] = ['select', 'displayName', 'active', 'previousRunTime', 'currentlyRunning', 'nextRunTime', 'errorLog'];
   /** Data source for manage scheduler jobs table. */
   dataSource: MatTableDataSource<any>;
   /** Initialize Selection */
@@ -252,4 +254,14 @@ export class ManageSchedulerJobsComponent implements OnInit, AfterViewInit {
     });
   }
 
+  showErrorLog(job: SchedulerJob): void {
+    if (job.lastRunHistory) {
+      this.dialog.open(ErrorLogPopoverComponent, {
+        data: {
+          job: job
+        }
+      });
+    }
+  }
+
 }

src/app/system/manage-jobs/scheduler-jobs/models/scheduler-job.model.ts

@@ -0,0 +1,19 @@
+export interface SchedulerJob {
+    jobId:            number;
+    displayName:      string;
+    nextRunTime:      Date;
+    cronExpression:   string;
+    active:           boolean;
+    currentlyRunning: boolean;
+    lastRunHistory:   LastRunHistory;
+}
+
+export interface LastRunHistory {
+    version:            number;
+    jobRunStartTime:    Date;
+    jobRunEndTime:      Date;
+    status:             string;
+    jobRunErrorMessage: string;
+    triggerType:        string;
+    jobRunErrorLog:     string;
+}

src/app/system/system.module.ts

@@ -74,6 +74,7 @@ import { CobWorkflowComponent } from './manage-jobs/cob-workflow/cob-workflow.co
 import { LoanLockedComponent } from './manage-jobs/cob-workflow/loan-locked/loan-locked.component';
 import { CustomParametersPopoverComponent } from './manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-popover.component';
 import { CustomParametersTableComponent } from './manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-table/custom-parameters-table.component';
+import { ErrorLogPopoverComponent } from './manage-jobs/scheduler-jobs/error-log-popover/error-log-popover.component';
 
 @NgModule({
   imports: [
@@ -147,7 +148,8 @@ import { CustomParametersTableComponent } from './manage-jobs/scheduler-jobs/cus
     CobWorkflowComponent,
     LoanLockedComponent,
     CustomParametersPopoverComponent,
-    CustomParametersTableComponent
+    CustomParametersTableComponent,
+    ErrorLogPopoverComponent
   ],
 })
 export class SystemModule { }