Investor Search data with actions (#1859)

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

src/app/core/shell/shell.component.ts

@@ -63,7 +63,9 @@ export class ShellComponent implements OnInit, OnDestroy {
    * Unsubscribes from progress bar.
    */
   ngOnDestroy() {
-    this.progressBar$.unsubscribe();
+    if (this.progressBar$) {
+      this.progressBar$.unsubscribe();
+    }
   }
 
 }

src/app/organization/investors/investors.component.html

@@ -61,18 +61,19 @@
                     <span class="m-l-10 status">{{record.status}}</span>
                   </div>
                 </td>
-                <td> Owner ExternalId </td>
+                <td class="field-name"> Owner ExternalId </td>
                 <td>
                   <mifosx-external-identifier externalId="{{record.owner.externalId}}"></mifosx-external-identifier>
                 </td>
-                <td> Effective From </td>
+                <td class="field-name"> Transfer ExternalId </td>
+                <td>
+                  <mifosx-external-identifier externalId="{{record.transferExternalId}}"></mifosx-external-identifier>
+                </td>
+                <td class="field-name"> Effective From </td>
                 <td> {{ record.effectiveFrom | dateFormat }} </td>
               </tr>
               </table>
             </mat-panel-title>
-          <mat-panel-description>
-            <mifosx-external-identifier externalId="{{record.transferExternalId}}"></mifosx-external-identifier>
-          </mat-panel-description>
 
         </mat-expansion-panel-header>
 
@@ -110,7 +111,7 @@
                   {{record.effectiveFrom | dateFormat}}
                 </td>
               </tr>
-              <tr>
+              <tr *ngIf="record.details">
                 <td fxFlex="25%" class="m-l-5">
                   <b>Details :</b>
                 </td>
@@ -149,6 +150,14 @@
           </table>
         </div>
 
+        <mat-divider [inset]="true"></mat-divider>
+
+        <div class="record-actions" fxLayout="row" fxLayoutAlign="flex-end" *ngIf="canBeCancelled(record)">
+          <button mat-button color="warn" (click)="cancelPendingSale(record)" matTooltip="Cancel Pending Sale">
+            <fa-icon icon="trash"></fa-icon>
+          </button>
+        </div>
+
       </mat-expansion-panel>
     </mat-accordion>
 

src/app/organization/investors/investors.component.scss

@@ -2,6 +2,17 @@
   color: black;
 }
 
+.field-name {
+  font-weight: 800;
+}
+
+.record-actions {
+  margin-top: 1%;
+  button{
+    margin-right: 1%;
+  }
+}
+
 .external-asset-transfer {
   margin-top: 10px;
   min-height: 160px;

src/app/organization/investors/investors.component.ts

@@ -1,13 +1,16 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
+import { Router } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
 import { ExternalAssetOwner } from 'app/loans/services/external-asset-owner';
 import { ExternalAssetOwnerService } from 'app/loans/services/external-asset-owner.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { CancelDialogComponent } from 'app/shared/cancel-dialog/cancel-dialog.component';
 
 @Component({
   selector: 'mifosx-investors',
@@ -73,6 +76,8 @@ export class InvestorsComponent implements OnInit {
   /** Columns to be displayed in investors table. */
   displayedColumns: string[] = ['status', 'effectiveFrom', 'ownerExternalId', 'loanAccount', 'transferExternalId', 'settlementDate', 'purchasePriceRatio', 'totalAmount', 'actions'];
   constructor(private settingsService: SettingsService,
+    private router: Router,
+    private dialog: MatDialog,
     private externalAssetOwner: ExternalAssetOwner,
     private externalAssetOwnerService: ExternalAssetOwnerService,
     private dateUtils: Dates) { }
@@ -155,6 +160,30 @@ export class InvestorsComponent implements OnInit {
     this.searchEAO();
   }
 
+  cancelPendingSale(transfer: any): void {
+    const deleteDataTableDialogRef = this.dialog.open(CancelDialogComponent, {
+      data: { cancelContext: `the Asset Transfer with the Owner External Id ${transfer.owner.externalId} ` }
+    });
+    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.cancel) {
+        const payload: any = {
+          transferExternalId: transfer.transferExternalId
+        };
+        this.externalAssetOwnerService.executeExternalAssetOwnerTransferCommand(transfer.transferId, payload, 'cancel')
+          .subscribe((result: any) => {
+            this.reload();
+        });
+      }
+    });
+  }
+
+  reload() {
+    const url: string = this.router.url;
+    console.log(url);
+    this.router.navigateByUrl(`/`, {skipLocationChange: true})
+      .then(() => this.router.navigate([url]));
+  }
+
   private resetPaginator() {
     this.currentPage = 0;
     this.paginator.firstPage();