Message in run report when It is being exported to S3 (#1788)

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

src/app/groups/groups-view/group-actions/manage-group-members/manage-group-members.component.html

@@ -1,59 +1,66 @@
-<div class="container" fxLayout="row" fxLayoutGap="3%">
+<mat-card class="container">
 
-  <mat-card fxFlex class="client-card" fxLayout="column" fxLayoutGap="2%">
+  <mat-card-content fxLayout="row" >
 
-    <mat-form-field fxFlex="30%">
+    <mat-card fxFlex class="client-card" fxLayout="column" fxLayoutGap="2%">
-      <mat-label>Add Clients</mat-label>
-      <input matInput [formControl]="clientChoice" [matAutocomplete]="clientsAutocomplete">
-    </mat-form-field>
 
-    <mat-autocomplete autoActiveFirstOption #clientsAutocomplete="matAutocomplete" [displayWith]="displayClient">
+      <mat-form-field fxFlex="30%">
-      <mat-option *ngFor="let client of clientsData" [value]="client">
+        <mat-label>Add Clients</mat-label>
-        {{ client.displayName }}
+        <input matInput [formControl]="clientChoice" [matAutocomplete]="clientsAutocomplete">
-      </mat-option>
+      </mat-form-field>
-    </mat-autocomplete>
 
-    <div class="mat-table">
+      <mat-autocomplete autoActiveFirstOption #clientsAutocomplete="matAutocomplete" [displayWith]="displayClient">
-      <div class="mat-header-row">
+        <mat-option *ngFor="let client of clientsData" [value]="client">
-        <div class="mat-header-cell">Client Details</div>
+          {{ client.displayName }}
-        <button mat-icon-button (click)="addClient()">
+        </mat-option>
-          <fa-icon icon="plus"></fa-icon>
+      </mat-autocomplete>
-        </button>
+
-      </div>
+      <div class="mat-table">
-      <div class="mat-row">
+        <div class="mat-header-row">
-        <div class="mat-cell">Name</div>
+          <div class="mat-header-cell">Client Details</div>
-        <div class="mat-cell">{{clientChoice.value.displayName}}</div>
+          <button mat-icon-button (click)="addClient()">
-      </div>
+            <fa-icon icon="plus"></fa-icon>
-      <div class="mat-row">
+          </button>
-        <div class="mat-cell">Id</div>
+        </div>
-        <div class="mat-cell">{{clientChoice.value.id}}</div>
+        <div class="mat-row">
-      </div>
+          <div class="mat-cell">Name</div>
-      <div class="mat-row">
+          <div class="mat-cell">{{clientChoice.value.displayName}}</div>
-        <div class="mat-cell">Office</div>
+        </div>
-        <div class="mat-cell">{{clientChoice.value.officeName}}</div>
+        <div class="mat-row">
+          <div class="mat-cell">Id</div>
+          <div class="mat-cell">{{clientChoice.value.id}}</div>
+        </div>
+        <div class="mat-row">
+          <div class="mat-cell">Office</div>
+          <div class="mat-cell">{{clientChoice.value.officeName}}</div>
+        </div>
       </div>
+
+    </mat-card>
+
+    <mat-card fxFlex="50%">
+
+      <h3 matSubheader>Client Members</h3>
+
+      <mat-nav-list *ngIf="clientMembers?.length">
+        <div mat-list-item *ngFor="let client of clientMembers index as i">
+          <span matLine class="p-t-10">{{client.displayName}}</span>
+          <div fxFlex></div>
+          <button mat-icon-button color="warn" (click)="removeClient(i, client)" matTooltip="Remove Client from Group"
+            matTooltipPosition="left">
+            <fa-icon icon="trash"></fa-icon>
+          </button>
+        </div>
+      </mat-nav-list>
+
+    </mat-card>
+
+  </mat-card-content>
+
+  <mat-card-actions>
+    <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
+      <button type="button" mat-raised-button color="primary" [routerLink]="['../..']">{{ 'Back' | translate }}</button>
     </div>
+  </mat-card-actions>
 
-  </mat-card>
+</mat-card>
-
-  <mat-card fxFlex="50%">
-
-    <h3 matSubheader>Client Members</h3>
-
-    <mat-nav-list  *ngIf="clientMembers?.length">
-      <div mat-list-item *ngFor="let client of clientMembers index as i">
-        <span matLine class="p-t-10">{{client.displayName}}</span>
-        <div fxFlex></div>
-        <button mat-icon-button color="warn" (click)="removeClient(i, client)" matTooltip="Remove Client from Group" matTooltipPosition="left">
-          <fa-icon icon="trash"></fa-icon>
-        </button>
-      </div>
-    </mat-nav-list>
-
-  </mat-card>
-
-  <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-    <button type="button" mat-raised-button [routerLink]="['../']">Back</button>
-  </div>
-
-</div>

src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.ts

@@ -15,6 +15,7 @@ import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
 import { MatTableDataSource } from '@angular/material/table';
 import { LoanTransactionType } from 'app/loans/models/loan-transaction-type.model';
+import { AlertService } from 'app/core/alert/alert.service';
 
 /** Custom Dialogs */
 
@@ -57,6 +58,7 @@ export class ViewTransactionComponent implements OnInit {
    * @param {MatDialog} dialog Dialog reference.
    * @param {Dates} dateUtils Date Utils.
    * @param {SettingsService} settingsService Settings Service
+   * @param {AlertService} alertService Alert Service
    */
   constructor(private loansService: LoansService,
               private route: ActivatedRoute,
@@ -64,12 +66,12 @@ export class ViewTransactionComponent implements OnInit {
               private router: Router,
               public dialog: MatDialog,
               private settingsService: SettingsService,
-              private organizationService: OrganizationService) {
+              private organizationService: OrganizationService,
+              private alertService: AlertService) {
     this.route.data.subscribe((data: { loansAccountTransaction: any }) => {
       this.transactionData = data.loansAccountTransaction;
       this.allowEdition = !this.transactionData.manuallyReversed && !this.allowTransactionEdition(this.transactionData.type.id);
       this.allowUndo = !this.transactionData.manuallyReversed;
-      console.log(this.transactionData.type);
       this.allowChargeback = this.allowChargebackTransaction(this.transactionData.type) && !this.transactionData.manuallyReversed;
       let transactionsChargebackRelated = false;
       if (this.allowChargeback) {
@@ -187,6 +189,9 @@ export class ViewTransactionComponent implements OnInit {
           this.loansService.executeLoansAccountTransactionsCommand(accountId, 'chargeback', payload, this.transactionData.id).subscribe(() => {
             this.router.navigate(['../'], { relativeTo: this.route });
           });
+        } else {
+          this.alertService.alert({ type: 'BusinessRule',
+            message: 'Chargeback amount must be lower or equal to: ' + this.amountRelationsAllowed });
         }
       }
     });

src/app/reports/run-report/table-and-sms/table-and-sms.component.html

@@ -1,32 +1,53 @@
-<div *ngIf = "!hideOutput">
+<div class="container">
 
-  <div class="m-b-10" *ngIf = "dataObject.report.type === 'Table'" fxLayoutAlign="end">
+  <div *ngIf="!hideOutput && !toBeExportedToRepo">
-    <button mat-raised-button color="primary" (click)="downloadCSV()"  [disabled]="notExistsReportData">
-      Export CSV
-    </button>
-  </div>
 
-  <div class="table-output" [hidden]="notExistsReportData">
+    <div class="m-b-10" *ngIf="dataObject.report.type === 'Table'" fxLayoutAlign="end">
-    <table mat-table [dataSource]="dataSource">
+      <button mat-raised-button color="primary" (click)="downloadCSV()" [disabled]="notExistsReportData"
-      <div *ngFor= "let column of displayedColumns index as i">
+        matToolTip="Export the data to CSV file">
-        <ng-container [matColumnDef]="column">
+        Export CSV
-          <th mat-header-cell *matHeaderCellDef>{{column}}</th>
+      </button>
-          <td mat-cell *matCellDef="let param" >
+    </div>
-            <span *ngIf="isDecimal(i)">{{toDecimal(param.row[i])}}</span>
+
-            <span *ngIf="!isDecimal(i)">{{param.row[i]}}</span>
+    <div class="table-output" [hidden]="notExistsReportData">
-          </td>
+      <table mat-table [dataSource]="dataSource">
-        </ng-container>
+        <div *ngFor="let column of displayedColumns index as i">
+          <ng-container [matColumnDef]="column">
+            <th mat-header-cell *matHeaderCellDef>{{column}}</th>
+            <td mat-cell *matCellDef="let param">
+              <span *ngIf="isDecimal(i)">{{toDecimal(param.row[i])}}</span>
+              <span *ngIf="!isDecimal(i)">{{param.row[i]}}</span>
+            </td>
+          </ng-container>
+        </div>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
+      </table>
+      <mat-paginator [pageSizeOptions]="[100, 200, 300]" showFirstLastButtons></mat-paginator>
+    </div>
+
+    <div class="alert" [hidden]="!notExistsReportData">
+      <div class="message">
+        <i class="fa fa-exclamation-circle alert-check"></i>
+        No report data was generated
       </div>
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" ></tr>
-    </table>
-    <mat-paginator [pageSizeOptions]="[100, 200, 300]" showFirstLastButtons></mat-paginator>
-  </div>
-
-  <div class="alert" [hidden]="!notExistsReportData">
-    <div class="message">
-      <i class="fa fa-exclamation-circle alert-check"></i>
-      No report data was generated
     </div>
   </div>
+
+  <div class="alert" *ngIf="!hideOutput && toBeExportedToRepo">
+    <div class="message">
+      <i class="fa fa-exclamation-circle alert-check"></i>
+      The report request has been sent and the report will be exported to file repository
+    </div>
+  </div>
+
+  <div class="table-output" *ngIf="hideOutput">
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  </div>
+
+  <div class="back-button" *ngIf="!hideOutput">
+    <button type="button" color="primary" mat-raised-button [routerLink]="['../..']">
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>Back</button>
+  </div>
+
 </div>

src/app/reports/run-report/table-and-sms/table-and-sms.component.scss

@@ -11,3 +11,10 @@
     margin-left: 5px;
     margin-right: 5px;
 }
+
+.back-button {
+  text-align: center;
+  margin-top: 25px;
+  max-height: 2%;
+  margin-bottom: 2%;
+}

src/app/reports/run-report/table-and-sms/table-and-sms.component.ts

@@ -31,6 +31,7 @@ export class TableAndSmsComponent implements OnChanges {
   /** Data to be converted into CSV file */
   csvData: any;
   notExistsReportData = false;
+  toBeExportedToRepo = false;
 
   /** Paginator for run-report table. */
   @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -53,15 +54,19 @@ export class TableAndSmsComponent implements OnChanges {
   }
 
   getRunReportData() {
+    const exportS3 = this.dataObject.formData.exportS3;
     this.reportsService.getRunReportData(this.dataObject.report.name, this.dataObject.formData)
     .subscribe( (res: any) => {
-      this.csvData = res.data;
+      this.toBeExportedToRepo = exportS3;
-      this.notExistsReportData = (res.data.length === 0);
+      if (!this.toBeExportedToRepo) {
-      this.setOutputTable(res.data);
+        this.csvData = res.data;
-      res.columnHeaders.forEach((header: any) => {
+        this.notExistsReportData = (res.data.length === 0);
-        this.columnTypes.push(header.columnDisplayType);
+        this.setOutputTable(res.data);
-        this.displayedColumns.push(header.columnName);
+        res.columnHeaders.forEach((header: any) => {
-      });
+          this.columnTypes.push(header.columnDisplayType);
+          this.displayedColumns.push(header.columnName);
+        });
+      }
       this.hideOutput = false;
     });
   }