feat: add view checker details page (#1220)

Fixes: #1219

src/app/tasks/view-checker-inbox/view-checker-inbox.component.html

@@ -0,0 +1,102 @@
+<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="1%" fxLayout.lt-md="column" class="container m-b-20">
+  <button mat-raised-button color="success" (click)="approveChecker()">
+    <fa-icon icon="check"></fa-icon>&nbsp;&nbsp;Approve
+  </button>
+  <button mat-raised-button color="warn" (click)="deleteChecker()">
+    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete
+  </button>
+  <button mat-raised-button color="reject" (click)="rejectChecker()">
+    <fa-icon icon="times"></fa-icon>&nbsp;&nbsp;Reject
+  </button>
+</div>
+
+<div class="container">
+
+  <mat-card>
+
+    <mat-card-content>
+
+      <div fxLayout="row wrap" fxLayout.lt-md="column">
+
+        <h2 class="mat-h2" fxFlexFill> View Checker Inbox </h2>
+
+        <mat-divider [inset]="true"></mat-divider>
+
+        <h3 class="mat-h3" fxFlexFill>Details</h3>
+
+        <mat-divider [inset]="true"></mat-divider>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">ID:</span>
+          <span fxFlex="60%">{{ checkerInboxDetail.id }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Status:</span>
+          <span fxFlex="60%">{{ checkerInboxDetail.processingResult }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">User:</span>
+          <span fxFlex="60%">{{ checkerInboxDetail.maker }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Action:</span>
+          <span fxFlex="60%">{{ checkerInboxDetail.actionName }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Entity:</span>
+          <span fxFlex="60%">{{ checkerInboxDetail.entityName }}</span>
+        </div>
+
+        <div fxFlexFill *ngIf="checkerInboxDetail.resourceId">
+          <span fxFlex="40%">Resource ID:</span>
+          <span fxFlex="60%">{{ checkerInboxDetail.resourceId }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Date:</span>
+          <span fxFlex="60%">{{ checkerInboxDetail.madeOnDate | date}}</span>
+        </div>
+
+        <div fxFlexFill *ngIf="checkerInboxDetail.officeName">
+          <span fxFlex="40%">Office:</span>
+          <span fxFlex="60%">{{ checkerInboxDetail.officeName }}</span>
+        </div>
+
+        <div fxFlexFill *ngIf="checkerInboxDetail.savingsAccountNo">
+          <span fxFlex="40%">Savings Account Number:</span>
+          <span fxFlex="60%">{{ checkerInboxDetail.savingsAccountNo }}</span>
+        </div>
+
+        <div fxFlexFill *ngIf="checkerInboxDetail.groupLevelName">
+          <span fxFlex="40%"> {{ checkerInboxDetail.groupLevelName }}</span>
+          <span fxFlex="60%">{{ checkerInboxDetail.groupName }}</span>
+        </div>
+
+        <ng-container *ngIf="displayJSONData">
+
+          <h3 class="mat-h3" fxFlexFill>Command</h3>
+
+          <mat-divider [inset]="true"></mat-divider>
+
+          <ng-container *ngFor="let json of jsondata | keyvalue">
+
+          <div fxFlexFill>
+            <span fxFlex="40%">{{ json.key }}:</span>
+            <span fxFlex="60%">{{ json.value }}</span>
+          </div>
+
+        </ng-container>
+
+        </ng-container>
+
+      </div>
+
+    </mat-card-content>
+
+  </mat-card>
+
+</div>

src/app/tasks/view-checker-inbox/view-checker-inbox.component.scss

@@ -0,0 +1,29 @@
+.mat-elevation-z1 {
+    margin: 1em 0 1.5em 0;
+}
+
+h2, h3, h4 {
+    margin: 0;
+    font-weight: 500;
+}
+
+span {
+    margin: 0.5em 0;
+}
+
+.margin-t {
+    margin-top: 1em;
+}
+
+mat-divider {
+  margin: 0 0 0.5em 0;
+}
+
+.mat-raised-button.mat-success {
+  color: #fff;
+  background-color: #008000ab;
+}
+.mat-raised-button.mat-reject {
+  color: #fff;
+  background-color: #FFCA00;
+}

src/app/tasks/view-checker-inbox/view-checker-inbox.component.spec.ts

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

src/app/tasks/view-checker-inbox/view-checker-inbox.component.ts

@@ -0,0 +1,94 @@
+/** Angular Imports */
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import * as _ from 'lodash';
+import { MatDialog } from '@angular/material/dialog';
+
+/** Custom Services */
+import { TasksService } from '../tasks.service';
+
+/** Dialog Components */
+import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
+
+@Component({
+  selector: 'mifosx-view-checker-inbox',
+  templateUrl: './view-checker-inbox.component.html',
+  styleUrls: ['./view-checker-inbox.component.scss']
+})
+export class ViewCheckerInboxComponent {
+
+  /** Checker Inbox Details Data */
+  checkerInboxDetail: any;
+  /** JsonData */
+  jsondata: any;
+  /** Checks if there is any object or not in jsondata */
+  displayJSONData = false;
+
+  /**
+   * Retrieves the maker checker id data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Dialog} dialog MatDialog.
+   * @param {router} router Router.
+   * @param {TasksService} tasksService Tasks Service.
+   */
+  constructor(private route: ActivatedRoute,
+    private dialog: MatDialog,
+    private router: Router,
+    private tasksService: TasksService) {
+    this.route.data.subscribe((data: { checkerInboxDetail: any }) => {
+      this.checkerInboxDetail = data.checkerInboxDetail;
+      this.jsondata = JSON.parse(this.checkerInboxDetail.commandAsJson);
+      this.displayJSONData = !(_.isEmpty(this.jsondata));
+    });
+   }
+
+
+   /**
+    * Approve Checker
+    */
+  approveChecker() {
+    const approveCheckerDialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      data: { heading: 'Approve Checker', dialogContext: 'Are you sure you want to approve checker' }
+    });
+    approveCheckerDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
+      if (response.confirm) {
+        this.tasksService.executeMakerCheckerAction(this.checkerInboxDetail.id, 'approve').subscribe((res: any) => {
+          this.router.navigate(['../../'], { relativeTo: this.route });
+        });
+      }
+    });
+  }
+
+  /**
+   * Reject checker
+   */
+  rejectChecker() {
+    const rejectCheckerDialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      data: { heading: 'Reject Checker', dialogContext: 'Are you sure you want to reject checker' }
+    });
+    rejectCheckerDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
+      if (response.confirm) {
+        this.tasksService.executeMakerCheckerAction(this.checkerInboxDetail.id, 'reject').subscribe((res: any) => {
+          this.router.navigate(['../../'], { relativeTo: this.route });
+        });
+      }
+    });
+  }
+
+  /**
+   * Delete Checker
+   */
+  deleteChecker() {
+    const deleteCheckerDialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      data: { heading: 'Delete Checker', dialogContext: 'Are you sure you want to delete checker' }
+    });
+    deleteCheckerDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
+      if (response.confirm) {
+        this.tasksService.deleteMakerChecker(this.checkerInboxDetail.id).subscribe((res: any) => {
+          this.router.navigate(['../../'], { relativeTo: this.route });
+        });
+      }
+    });
+  }
+
+}