loan select incorporated

src/app/list-income/list-income.component.ts

 export class ListIncomeComponent implements OnInit {
   public uploadMeta: UploadMetaModel = new UploadMetaModel({});
   public Loan: LoanModel = new LoanModel({});
-  public startLoad = false
+  public startLoad = false;
 
   private UploadMetaFilterIsReady = false;
   private LoanFilterIsReady = false;
   }
 
   private checkStartUpload(): void {
-     this.startLoad = this.UploadMetaFilterIsReady
+     this.startLoad = this.UploadMetaFilterIsReady && this.LoanFilterIsReady;
   }
 }

src/app/loan-card/loan-card.component.html

-<div class="card loan" (click)="onClick()">
+<div class="card loan" (click)="onClick()" *ngIf="Loan!==undefined">
   <span class="badge badge-success">{{Loan.Item}}</span>
   <span> Amount: {{Loan.Amount | currency }}</span>
   <span> Settlement: {{Loan.Settlement | date:'yyyy-mm-dd' }}</span>

src/app/loan-select/loan-select.component.html

                  [Loan]="Loan" [ShowCloseButton]="false"></app-loan-card>
 </div>
 
-<kendo-popup [anchor]="anchor" [offset]="Offset" (anchorViewportLeave)="showPopup = false" *ngIf="showPopup">
+<kendo-popup [offset]="Offset" (anchorViewportLeave)="showPopup = false" *ngIf="showPopup">
   <div class='popup-content'>
     <app-list-all-loans #list
                         (LoanSelected)="onLoanSelected($event)"

src/app/loan-select/loan-select.component.scss

 .popup-content {
   box-shadow: 1px 1px 10px black;
   padding: 10px;
-  width: 90vw;
-  height: 50vw;
+  width: calc(100vw - 20px);
+  height:calc(100vh - 96px);
   color: #787878;
   background-color: #fcf7f8;
   border: 1px solid rgba(0,0,0,.05);

src/app/loan-select/loan-select.component.ts

-import { Component, Input, OnInit, ViewChild} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
 import {LoanModel} from '../models/loan.model';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {ListAllLoansComponent} from '../list-all-loans/list-all-loans.component';
   @ViewChild('list', {static: false} ) list: ListAllLoansComponent;
   @Input() Max = 1; // we do not support multiple loan selection at the moment
   @Input() readOnly = false;
+  @Output() valueChange: EventEmitter<LoanModel> = new EventEmitter<LoanModel>();
   public Loan: LoanModel; // for multiple selection ,it has to be array; we don't support it now.
 
   // popup
   public showPopup = false;
-  public Offset = { left: 0, top: 0 };
+  public Offset = { left: 10, top: 48 };
 
   // formControl state
   private disabled = false;
   }
 
   onLoanSelected(loan: LoanModel): void {
+    if (this.Loan.Id !== loan.Id){
+      this.valueChange.emit(loan);
+      this.onChange(loan);
+      this.Loan = loan;
+    }
     this.Loan = loan;
     this.markAsTouched();
     this.onTouched();
-    this.onChange(loan);
+
     this.showPopup = false;
   }
 

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

                      [editable]="true "
                      [sortable]="false">
     <ng-template kendoGridCellTemplate let-dataItem>
-      <app-loan-card *ngIf="dataItem.LoanId !== '' " [LoanId]="dataItem.LoanId"></app-loan-card>
+      <app-loan-card *ngIf="dataItem.LoanId !== '' " [Loan]="dataItem.Loan"></app-loan-card>
     </ng-template>
     <ng-template kendoGridEditTemplate let-dataItem>
-      <app-loan-select [formControl]="incomeFormGroup.get('Loan')"
+      <app-loan-select [formControl]="incomeFormGroup.get('Loan')" (valueChange)="onLoanChange($event)"
                        [readOnly]="this.filterLoan !== undefined && this.filterLoan.Id !==''"
       ></app-loan-select>
     </ng-template>

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

   constructor(private pis: PayInService, private lss: LoanSingleService, private router: Router) { }
 
   ngOnInit(): void {
-    this.debouncedLoadFilteredData = debounce(this.loadFilteredData, 100);
+    this.debouncedLoadFilteredData = debounce(this.loadFilteredData, 500);
+    if (this.privateLoadDataNow) { // not in delayed loading mode
+      this.debouncedLoadFilteredData();
+    }
   }
 
   public loadFilteredData(): void{
   }
 
   @Input()  set LoadDataNow( value: boolean) {
-    this.privateLoadDataNow = value;
-    if ( value === true ) {
+
+    if ( value === true && this.privateLoadDataNow === false) {
       this.debouncedLoadFilteredData();
     }
+    this.privateLoadDataNow = value;
   }
   get LoadDataNow(): boolean {
     return this.privateLoadDataNow;
 
     const pi = this.buildPayInForSave(v, isNew);
     this.lss.savePayIn(pi, isNew).subscribe(
-      (resp: PayInModel) => {
-        this.Loan.cuPayIn(resp);
-        this.updatePiInGrid(new PayInModel(resp));
+      (resp: PayInModelEx) => {
+        this.Loan.cuPayIn( new PayInModel(resp));
+        this.updatePiInGrid(new PayInModelEx(resp));
       },
       err => {
         // TODO: this.errorOccurred.emit('Error saving Income');
     this.filter.Sort = sort;
     this.loadFilteredData();
   }
+
+  public onLoanChange(loan: LoanModel): void {
+    if ( loan.Id !== '' ) {
+      this.incomeFormGroup.get('Lender').setValue(loan.Lender);
+      this.incomeFormGroup.get('Lender').disable({onlySelf: true, emitEvent: false});
+    }
+  }
 }

src/app/service/loan.single.service.ts

 import {RewardModel} from '../models/reward.model';
 import {ClonerService} from './clone.service';
 import {PayInModel} from '../models/pay-in.model';
+import {PayInModelEx} from '../models/pay-in-ex.model';
 
 @Injectable()
 export class LoanSingleService {
     );
   }
 
-  public savePayIn(payIn: PayInModel, isNew: boolean): Observable<PayInModel> {
-    return this.http.post<PayInModel>(this.auth.getUrl('payIn/'), payIn);
+  public savePayIn(payIn: PayInModel, isNew: boolean): Observable<PayInModelEx> {
+    return this.http.post<PayInModelEx>(this.auth.getUrl('payIn/'), payIn);
   }
 
   public removePayIn(id: number): void {