Asset Externalization Owner management for Loans (#1771)

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

src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.html

@@ -0,0 +1,101 @@
+<div fxLayout="row" fxLayoutAlign="end" class="container m-b-20" *ngIf="dataSource?.data[0].manualEntry">
+  <button mat-raised-button color="primary" (click)="revertTransaction()" *mifosxHasPermission="'REVERSE_JOURNALENTRY'" [disabled]="dataSource?.data[0].reversed">
+    <span *ngIf="!dataSource.data[0].reversed">
+      <fa-icon icon="undo" class="m-r-10"></fa-icon>Revert Transaction
+    </span>
+    <span *ngIf="dataSource.data[0].reversed">Transaction Reverted</span>
+  </button>
+</div>
+
+<div class="container m-b-20" *ngIf="isViewTransaction()">
+
+    <mat-card class="mat-elevation-z8" *ngIf="dataSource">
+
+      <mat-card-content>
+
+        <div fxLayout="row wrap" class="content">
+
+          <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+            Office
+          </div>
+
+          <div fxFlex="25%" fxFlex.lt-md="50%">
+            {{ dataSource.data[0].officeName }}
+          </div>
+
+          <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+            Transaction Date
+          </div>
+
+          <div fxFlex="25%" fxFlex.lt-md="50%">
+            {{ dataSource.data[0].transactionDate | dateFormat }}
+          </div>
+
+          <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+            Created By
+          </div>
+
+          <div fxFlex="25%" fxFlex.lt-md="50%">
+            {{ dataSource.data[0].createdByUserName }}
+          </div>
+
+          <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+            Submitted on
+          </div>
+
+          <div fxFlex="25%" fxFlex.lt-md="50%">
+            {{ dataSource.data[0].submittedOnDate | datetimeFormat }}
+          </div>
+
+        </div>
+
+      </mat-card-content>
+
+    </mat-card>
+
+</div>
+
+<div class="mat-elevation-z8 container" fxLayoutAlign="center" fxLayout="row wrap">
+
+  <table mat-table [dataSource]="dataSource" matSort>
+
+    <ng-container matColumnDef="id">
+      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Entry ID </th>
+      <td mat-cell *matCellDef="let transaction"> {{ transaction.id }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="glAccountType">
+      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Type </th>
+      <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountType.value }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="glAccountCode">
+      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Account Code </th>
+      <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountCode }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="glAccountName">
+      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Account Name </th>
+      <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountName }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="debit">
+      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Debit </th>
+      <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'DEBIT'"> {{ (transaction.currency.displaySymbol || transaction.currency.code) }} {{ transaction.amount | formatNumber }} </span></td>
+    </ng-container>
+
+    <ng-container matColumnDef="credit">
+      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Credit </th>
+      <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'CREDIT'"> {{ (transaction.currency.displaySymbol || transaction.currency.code) }} {{ transaction.amount | formatNumber }} </span></td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="viewJournalEntry(row)" class="select-row"></tr>
+
+  </table>
+
+  <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" class="m-t-15 m-b-15">
+    <button type="button" color="primary" mat-raised-button (click)="goBack()">Back</button>
+  </div>
+
+</div>

src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.scss

@@ -0,0 +1,7 @@
+table {
+  width: 100%;
+
+  .select-row:hover {
+    cursor: pointer;
+  }
+}

src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.spec.ts

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

src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.ts

@@ -0,0 +1,125 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { ViewJournalEntryComponent } from '../view-journal-entry/view-journal-entry.component';
+import { RevertTransactionComponent } from 'app/accounting/revert-transaction/revert-transaction.component';
+import { AccountingService } from 'app/accounting/accounting.service';
+import { MatDialog } from '@angular/material/dialog';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatSort } from '@angular/material/sort';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'mifosx-view-journal-entry-transaction',
+  templateUrl: './view-journal-entry-transaction.component.html',
+  styleUrls: ['./view-journal-entry-transaction.component.scss']
+})
+export class ViewJournalEntryTransactionComponent implements OnInit {
+
+  title: string;
+  journalEntriesData: any[];
+  /** Transaction data.  */
+  transaction: any;
+  /** Transaction ID. */
+  transactionId: string;
+  /** Columns to be displayed in transaction table. */
+  displayedColumns: string[] = ['id', 'glAccountType', 'glAccountCode', 'glAccountName', 'debit', 'credit'];
+  /** Data source for transaction table. */
+  dataSource: MatTableDataSource<any>;
+
+  /** Paginator for transaction table. */
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  /** Sorter for transaction table. */
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+  /**
+   * @param {AccountingService} accountingService Accounting Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {MatDialog} dialog Dialog reference.
+   */
+  constructor(private accountingService: AccountingService,
+              private route: ActivatedRoute,
+              private router: Router,
+              public dialog: MatDialog,
+              private location: Location) {  }
+
+  /**
+   * Retrieves the transaction data from `resolve` and sets the transaction table.
+   */
+  ngOnInit() {
+    this.route.data.subscribe((data: { title: string, transaction: any, transferJournalEntryData: any }) => {
+      this.title = data.title;
+      if (this.isViewTransaction()) {
+        this.transaction = data.transaction;
+        this.transactionId = data.transaction.pageItems[0].transactionId;
+      } else if (this.isViewTransfer()) {
+        this.journalEntriesData = data.transferJournalEntryData.journalEntryData.content;
+      }
+      this.setTransaction();
+    });
+  }
+
+  isViewTransaction(): boolean {
+    return (this.title === 'View Transaction');
+  }
+
+  isViewTransfer(): boolean {
+    return (this.title === 'View Transfer');
+  }
+
+  /**
+   * Initializes the data source for transaction table with journal entries, paginator and sorter.
+   */
+  setTransaction() {
+    if (this.journalEntriesData != null) {
+      this.dataSource = new MatTableDataSource(this.journalEntriesData);
+    } else {
+      this.dataSource = new MatTableDataSource(this.transaction.pageItems);
+      this.dataSource.sortingDataAccessor = (transaction: any, property: any) => {
+        switch (property) {
+          case 'glAccountType': return transaction.glAccountType.value;
+          case 'debit': return transaction.amount;
+          case 'credit': return transaction.amount;
+          default: return transaction[property];
+        }
+      };
+    }
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  /**
+   * View details of selected journal entry.
+   * @param {any} journalEntry Selected journal entry.
+   */
+  viewJournalEntry(journalEntry: any) {
+    this.dialog.open(ViewJournalEntryComponent, {
+      data: { journalEntry: journalEntry }
+    });
+  }
+
+  /**
+   * Reverts the given transaction and redirects to reverted transaction.
+   * @param {transactionId} transactionId Transaction ID of transaction to be reverted.
+   */
+  revertTransaction(transactionId?: string) {
+    const revertTransactionDialogRef = this.dialog.open(RevertTransactionComponent, {
+      data: { reverted: this.dataSource.data[0].reversed, transactionId: transactionId }
+    });
+    revertTransactionDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.revert) {
+        this.accountingService.revertTransaction(this.transactionId, response.comments).subscribe((reversedTransaction: any) => {
+          this.dataSource.data[0].reversed = true;
+          this.revertTransaction(reversedTransaction.transactionId);
+        });
+      } else if (response.redirect) {
+        this.router.navigate(['../', transactionId], { relativeTo: this.route });
+      }
+    });
+  }
+
+  goBack(): void {
+    this.location.back();
+  }
+}