PayIn List works with no filter.

src/app/models/pay-in-list-result.model.ts

@@ -0,0 +1,7 @@
+import {GridDataResult} from '@progress/kendo-angular-grid';
+import {PayInModel} from './pay-in.model';
+
+export class PayInListResult implements GridDataResult {
+  public data: PayInModel[];
+  public total: number;
+}

src/app/models/pay-in-list.filter.model.ts

@@ -0,0 +1,12 @@
+export class PayInListFilterModel {
+  LoanIds: string[];
+  Uploads: string[];
+  Take: number;
+  Skip: number;
+  TsFrom: Date;
+  TsTo: Date;
+  IdFrom: number;
+  IdTo: number;
+  IncomeFrom: number;
+  IncomeTo: number;
+}

src/app/pay-in/pay-in.component.html

@@ -1,4 +1,4 @@
-<kendo-grid [data]="AllPayIn"
+<kendo-grid [data]="gridData"
             (add)="addHandler($event)"
             (cancel)="cancelHandler($event)"
             (save)="saveHandler($event)"
@@ -6,15 +6,22 @@
             (remove)="removeHandler($event)"
 >
   <ng-template kendoGridToolbarTemplate>
-    <button kendoGridAddCommand icon="plus" >Add new Income</button>
-    &nbsp; Show Uploads &nbsp; <kendo-switch></kendo-switch>
+    <div style="width:100%; margin:0px; display:block">
+      <div *ngIf="allowAddNew" class="add-new-tool-bar">
+        <button kendoGridAddCommand icon="plus" >Add new Income</button>
+      </div>
+      <div [ngStyle]="{'width': allowAddNew? '70%': '100%'}" class="filter-panel-wrapper" >
+          <button kendoButton icon="filter" >Loan</button>
+          <button kendoButton icon="filter" >Upload</button>
+      </div>
+    </div>
   </ng-template>
 
-  <kendo-grid-command-column title="command" width="100">
+  <kendo-grid-command-column *ngIf="allowEdit" title="command" width="100">
     <ng-template kendoGridCellTemplate let-isNew="isNew" let-dataItem>
       <button kendoGridEditCommand *ngIf="!dataItem.Uploads !== 0" icon="edit"></button>
       <button kendoGridRemoveCommand *ngIf="!dataItem.Uploads !== 0" icon="delete"></button>
-      <button kendoGridSaveCommand [disabled]="formGroup?.invalid" icon="save"></button>
+      <button kendoGridSaveCommand [disabled]="incomeFormGroup?.invalid" icon="save"></button>
       <button kendoGridCancelCommand icon="cancel"></button>
     </ng-template>
   </kendo-grid-command-column>

src/app/pay-in/pay-in.component.scss

@@ -1,5 +1,15 @@
 kendo-grid {
   height: calc(100vh - 48px);
+
+  .add-new-tool-bar{
+    width:30%;
+    display: inline-block;
+  }
+
+  .filter-panel-wrapper{
+    display: inline-block;
+    text-align:right;
+  }
 }
 
 .balance {
@@ -7,3 +17,5 @@ kendo-grid {
   margin-left: 0px !important;
   width: calc(100% - 60px) !important;
 }
+
+

src/app/pay-in/pay-in.component.ts

@@ -1,6 +1,9 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {PayInModel} from '../models/pay-in.model';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {PayInListFilterModel} from '../models/pay-in-list.filter.model';
+import {PayInService} from '../service/pay-in.service';
+import {PayInListResult} from '../models/pay-in-list-result.model';
 
 const createFormGroup = dataItem => new FormGroup({
   Id: new FormControl({value: dataItem.Id, disabled: true}, Validators.required),
@@ -17,31 +20,32 @@ const createFormGroup = dataItem => new FormGroup({
   styleUrls: ['./pay-in.component.scss']
 })
 export class PayInComponent implements OnInit {
-  @Input() public AllPayIn: PayInModel[] = [];
-  public formGroup: FormGroup;
+  @Input() loanFilter: string[] = [];
+  @Input() uploadsFilter: string[] = [];
+  @Input() allowAddNew = false; // TODO:
+  @Input() allowEdit = false; // TODO:
+  @Input() pageSize = 10;
+  @Input() skip = 0;
+  @Input() dateStart = new Date('1900-01-01');
+  @Input() dateEnd = new Date('2038-12-31');
+
+  public gridData: PayInListResult = { data: [], total: 0};
+  public incomeFormGroup: FormGroup;
   private editedRowIndex: number;
 
-  public trailIncome: FormGroup;
   public showBalance = true;
   public showOffsetBalance = true;
 
-  public splitButtonItems: Array<any> = [{
-    text: 'Keep Text Only',
-    icon: 'paste-plain-text',
-    click: () => { console.log('Keep Text Only click handler'); }
-  }, {
-    text: 'Paste as HTML',
-    icon: 'paste-as-html'
-  }, {
-    text: 'Paste Markdown',
-    icon: 'paste-markdown'
-  }, {
-    text: 'Set Default Paste'
-  }];
-
-  constructor() { }
+
+  constructor(private pis: PayInService) { }
 
   ngOnInit(): void {
+    this.pis.getPayInList(new PayInListFilterModel()).subscribe(
+      ( resp: PayInListResult) => {
+        console.log(resp);
+        this.gridData = resp;
+      }
+    );
   }
 
 
@@ -59,7 +63,7 @@ export class PayInComponent implements OnInit {
     // this.showBalance = balance >= 0 ;
     // this.showOffsetBalance = offsetBalance >= 0 ;
 
-    this.formGroup = createFormGroup({
+    this.incomeFormGroup = createFormGroup({
       Id: 0,
       Trail: 168,
       Ts: new Date(),
@@ -67,7 +71,7 @@ export class PayInComponent implements OnInit {
       OffsetBalance: offsetBalance
     });
 
-    sender.addRow(this.formGroup);
+    sender.addRow(this.incomeFormGroup);
   }
 
   public editHandler({ sender, rowIndex, dataItem }): void {
@@ -75,9 +79,9 @@ export class PayInComponent implements OnInit {
 
     this.showBalance = dataItem.Balance >= 0 ;
     this.showOffsetBalance = dataItem.OffsetBalance >= 0 ;
-    this.formGroup = createFormGroup(dataItem);
+    this.incomeFormGroup = createFormGroup(dataItem);
     this.editedRowIndex = rowIndex;
-    sender.editRow(rowIndex, this.formGroup);
+    sender.editRow(rowIndex, this.incomeFormGroup);
 
   }
 
@@ -133,6 +137,6 @@ export class PayInComponent implements OnInit {
   private closeEditor(grid, rowIndex = this.editedRowIndex): void{
     grid.closeRow(rowIndex);
     this.editedRowIndex = undefined;
-    this.formGroup = undefined;
+    this.incomeFormGroup = undefined;
   }
 }

src/app/service/pay-in.service.ts

@@ -0,0 +1,17 @@
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {PayInListFilterModel} from '../models/pay-in-list.filter.model';
+import {HttpClient} from '@angular/common/http';
+import {AuthService} from './auth.service';
+import {PayInListResult} from '../models/pay-in-list-result.model';
+
+
+
+@Injectable({providedIn: 'root'})
+export class PayInService {
+  constructor(private http: HttpClient, private auth: AuthService ){ }
+
+  public getPayInList(filter: PayInListFilterModel): Observable<PayInListResult> {
+     return this.http.post<PayInListResult>(this.auth.getUrl('pay-in-list/'), filter);
+  }
+}