Support additional export table report options (#1780)

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

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

@@ -0,0 +1,84 @@
+<div class="container" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+  <mat-form-field fxFlex="31%">
+    <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+    <mat-select [formControl]="entryTypeFilter">
+      <mat-option *ngFor="let filter of entryTypeFilterData" [value]="filter.value">
+        {{ filter.option }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field fxFlex="31%" (click)="transferDateFromPicker.open()">
+    <mat-label>Transfer Date From</mat-label>
+    <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transferDateFromPicker" [formControl]="transferDateFrom">
+    <mat-datepicker-toggle matSuffix [for]="transferDateFromPicker"></mat-datepicker-toggle>
+    <mat-datepicker #transferDateFromPicker></mat-datepicker>
+  </mat-form-field>
+
+  <mat-form-field fxFlex="31%" (click)="transferDateToPicker.open()">
+    <mat-label>Transfer Date To</mat-label>
+    <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transferDateToPicker" [formControl]="transferDateTo">
+    <mat-datepicker-toggle matSuffix [for]="transferDateToPicker"></mat-datepicker-toggle>
+    <mat-datepicker #transferDateToPicker></mat-datepicker>
+  </mat-form-field>
+
+  <mat-form-field fxFlex="31%">
+    <mat-label>Transfer External Id</mat-label>
+    <input matInput [formControl]="transferExternalId">
+  </mat-form-field>
+
+</div>
+
+<div class="mat-elevation-z8 container">
+
+  <table mat-table [dataSource]="dataSource" matSort>
+
+    <ng-container matColumnDef="investor">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Investor </th>
+      <td mat-cell *matCellDef="let item">  </td>
+    </ng-container>
+
+    <ng-container matColumnDef="loanAccount">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Loan </th>
+      <td mat-cell *matCellDef="let item">  </td>
+    </ng-container>
+
+    <ng-container matColumnDef="totalAmount">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Total Amount </th>
+      <td mat-cell *matCellDef="let item">  </td>
+    </ng-container>
+
+    <ng-container matColumnDef="principal">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Principal </th>
+      <td mat-cell *matCellDef="let item">  </td>
+    </ng-container>
+
+    <ng-container matColumnDef="interest">
+      <th mat-header-cell *matHeaderCellDef> Interest </th>
+      <td mat-cell *matCellDef="let item">  </td>
+    </ng-container>
+
+    <ng-container matColumnDef="fees">
+      <th mat-header-cell *matHeaderCellDef> Fees </th>
+      <td mat-cell *matCellDef="let item">  </td>
+    </ng-container>
+
+    <ng-container matColumnDef="penalties">
+      <th mat-header-cell *matHeaderCellDef> Penalties </th>
+      <td mat-cell *matCellDef="let item">  </td>
+    </ng-container>
+
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
+      <td mat-cell *matCellDef="let item">  </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['transactions/view', row.transactionId]" class="select-row"></tr>
+
+  </table>
+
+  <mat-paginator [pageSize]="50" [pageSizeOptions]="[50, 100, 200, 500]" showFirstLastButtons></mat-paginator>
+
+</div>

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

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

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

@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MatTableDataSource } from '@angular/material/table';
+
+@Component({
+  selector: 'mifosx-investors',
+  templateUrl: './investors.component.html',
+  styleUrls: ['./investors.component.scss']
+})
+export class InvestorsComponent implements OnInit {
+
+  /** Minimum transaction date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum transaction date allowed. */
+  maxDate = new Date();
+
+  transferDateFrom = new FormControl('');
+  transferDateTo = new FormControl('');
+  transferExternalId = new FormControl('');
+
+  /** Entry type filter form control. */
+  entryTypeFilter = new FormControl('');
+  /** Entry type filter data. */
+  entryTypeFilterData = [
+    {
+      option: 'All',
+      value: ''
+    },
+    {
+      option: 'Sale',
+      value: true
+    },
+    {
+      option: 'Buyed Back',
+      value: false
+    }
+  ];
+
+  /** Columns to be displayed in investors table. */
+  displayedColumns: string[] = ['investor', 'loanAccount', 'totalAmount', 'principal', 'interest', 'fees', 'penalties', 'actions'];
+  /** Data source for investors table. */
+  dataSource: MatTableDataSource<any> = new MatTableDataSource();
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}