feat: add view checker details page (#1220)

Fixes: #1219

src/app/tasks/checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component.html

@@ -114,7 +114,7 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id,'view']" class="select-row">
     </tr>
   </table>
 

src/app/tasks/checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component.scss

@@ -17,6 +17,11 @@
   .view-details{
     cursor: pointer;
   }
+  table {
+    tr.select-row:hover {
+      cursor: pointer;
+    }
+  }
 }
 
 .alert {

src/app/tasks/checker-inbox-and-tasks-tabs/loan-approval/loan-approval.component.ts

@@ -20,7 +20,7 @@ import { SettingsService } from 'app/settings/settings.service';
   styleUrls: ['./loan-approval.component.scss']
 })
 export class LoanApprovalComponent {
-  // settingsService: SettingsService;
+
   /** Offices Data */
   offices: any;
   /** Loans Data */

src/app/tasks/checker-inbox-and-tasks-tabs/reschedule-loan/reschedule-loan.component.ts

@@ -12,7 +12,6 @@ import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/conf
 
 /** Custom Services */
 import { TasksService } from '../../tasks.service';
-import { SettingsRoutingModule } from 'app/settings/settings-routing.module';
 import { SettingsService } from 'app/settings/settings.service';
 
 @Component({

src/app/tasks/common-resolvers/getCheckerInboxDetail.resolver.ts

@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { TasksService } from '../tasks.service';
+
+/**
+ * Checker Inbox Detail resolver.
+ */
+@Injectable()
+export class GetCheckerInboxDetailResolver implements Resolve<Object> {
+
+    /**
+     * @param {TasksService} tasksService Tasks service.
+     */
+    constructor(private tasksService: TasksService) { }
+
+    /**
+     * Returns the detail data of the checker inbox.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const checkerId = route.paramMap.get('id');
+        return this.tasksService.getCheckerInboxDetail(checkerId);
+    }
+
+}

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

@@ -15,6 +15,7 @@ import { ClientApprovalComponent } from './checker-inbox-and-tasks-tabs/client-a
 import { LoanApprovalComponent } from './checker-inbox-and-tasks-tabs/loan-approval/loan-approval.component';
 import { LoanDisbursalComponent } from './checker-inbox-and-tasks-tabs/loan-disbursal/loan-disbursal.component';
 import { RescheduleLoanComponent } from './checker-inbox-and-tasks-tabs/reschedule-loan/reschedule-loan.component';
+import { ViewCheckerInboxComponent } from './view-checker-inbox/view-checker-inbox.component';
 
 /** Custom Resolvers */
 import { GetMakerCheckers } from './common-resolvers/getmakercheckers.resolver';
@@ -23,6 +24,7 @@ import { GetOffices } from './common-resolvers/getOffices.resolver';
 import { GetLoans } from './common-resolvers/getLoans.resolver';
 import { GetRescheduleLoans } from './common-resolvers/getRescheduleLoans.resolver';
 import { MakerCheckerTemplate } from './common-resolvers/makerCheckerTemplate.resolver';
+import { GetCheckerInboxDetailResolver } from './common-resolvers/getCheckerInboxDetail.resolver';
 
 /** Tasks Routes */
 const routes: Routes = [
@@ -39,7 +41,7 @@ const routes: Routes = [
           resolve: {
             makerCheckerResource: GetMakerCheckers,
             makerCheckerTemplate: MakerCheckerTemplate
-          },
+          }
         },
         {
           path: 'client-approval',
@@ -75,7 +77,20 @@ const routes: Routes = [
           }
         }
       ]
-    }
+    },
+    {
+      path: 'checker-inbox-and-tasks/checker-inbox',
+      children: [
+        {
+          path: ':id/view',
+          component: ViewCheckerInboxComponent,
+          data: { title: extract('View Checker Inbox Component'), routeParamBreadcrumb: 'clientId' },
+          resolve: {
+            checkerInboxDetail: GetCheckerInboxDetailResolver
+          }
+        }
+      ]
+    },
   ])
 ];
 
@@ -88,7 +103,8 @@ const routes: Routes = [
     GetOffices,
     GetLoans,
     GetRescheduleLoans,
-    MakerCheckerTemplate
+    MakerCheckerTemplate,
+    GetCheckerInboxDetailResolver
   ]
 })
 export class TasksRoutingModule { }

src/app/tasks/tasks.module.ts

@@ -14,6 +14,7 @@ import { ClientApprovalComponent } from './checker-inbox-and-tasks-tabs/client-a
 import { LoanApprovalComponent } from './checker-inbox-and-tasks-tabs/loan-approval/loan-approval.component';
 import { LoanDisbursalComponent } from './checker-inbox-and-tasks-tabs/loan-disbursal/loan-disbursal.component';
 import { RescheduleLoanComponent } from './checker-inbox-and-tasks-tabs/reschedule-loan/reschedule-loan.component';
+import { ViewCheckerInboxComponent } from './view-checker-inbox/view-checker-inbox.component';
 
 /**
  * Tasks Module
@@ -31,7 +32,8 @@ import { RescheduleLoanComponent } from './checker-inbox-and-tasks-tabs/reschedu
     ClientApprovalComponent,
     LoanApprovalComponent,
     LoanDisbursalComponent,
-    RescheduleLoanComponent
+    RescheduleLoanComponent,
+    ViewCheckerInboxComponent
   ],
   providers: [DatePipe]
 })

src/app/tasks/tasks.service.spec.ts

@@ -6,7 +6,7 @@ describe('TasksService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
 
   it('should be created', () => {
-    const service: TasksService = TestBed.get(TasksService);
+    const service: TasksService = TestBed.inject(TasksService);
     expect(service).toBeTruthy();
   });
 });

src/app/tasks/tasks.service.ts

@@ -102,4 +102,12 @@ export class TasksService {
     return this.http.delete(`/makercheckers/${makerCheckerId}`);
   }
 
+  /**
+   * Get Maker Checker Details.
+   * @param {makerCheckerId} MakerCheckerId
+   */
+  getCheckerInboxDetail(makerCheckerId: any): Observable<any> {
+    return this.http.get(`/audits/${makerCheckerId}`);
+  }
+
 }

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 });
+        });
+      }
+    });
+  }
+
+}