loan selector completed with single loan selection capability

src/app/app-routing.module.ts

 import {ListAllPeopleComponent} from './list-all-people/list-all-people.component';
 import {ListIncomeComponent} from './list-income/list-income.component';
 import {UploadDetailComponent} from './upload-detail/upload-detail.component';
+import {LoansAllComponent} from './loans-all/loans-all.component';
 
 
 const routes: Routes = [
   {path : 'login', component: AuthComponent},
   {path : 'transaction', component: TransactionComponent, canActivate: [AuthGuard]},
   {path : 'transaction-list', component: TransactionListComponent, canActivate: [AuthGuard]},
-  {path : 'list-all-loans', component: ListAllLoansComponent,  canActivate: [AuthGuard]},
+  {path : 'list-all-loans', component: LoansAllComponent,  canActivate: [AuthGuard]},
   {path : 'edit-loan/:id', component: LoanEditComponent,  canActivate: [AuthGuard]},
   {path : 'edit-loan', component: LoanEditComponent,  canActivate: [AuthGuard]},
   {path : 'uploads', component: LenderUploadsComponent,  canActivate: [AuthGuard]},

src/app/app.module.ts

 import { UploadingProgressCardComponent } from './uploading-progress-card/uploading-progress-card.component';
 import { LoanSelectComponent } from './loan-select/loan-select.component';
 import {PopupModule} from '@progress/kendo-angular-popup';
+import { LoansAllComponent } from './loans-all/loans-all.component';
 
 
 
     PopupIncomeFilterComponent,
     LoanCardComponent,
     UploadingProgressCardComponent,
-    LoanSelectComponent
+    LoanSelectComponent,
+    LoansAllComponent
   ],
     imports: [
         BrowserModule,

src/app/list-all-loans/list-all-loans.component.html

   <ng-template *ngIf="EnableExportExcel || EnableExportPdf || EnableSelectButton" kendoGridToolbarTemplate>
     <button *ngIf="EnableExportExcel" kendoGridExcelCommand type="button" icon="file-excel" style="float:right;">Export to Excel</button>
     <button *ngIf="EnableExportPdf" kendoGridPDFCommand icon="file-pdf" style="float:right;">Export to PDF</button>
-    <div class="selected-loans" #notification>
+    <div class="selected-loans" #notification *ngIf="EnableSelectButton">
       <app-loan-card *ngFor="let l of SelectedLoans" [Loan]="l" [ShowCloseButton]="true"
                      (Closed)="RemoveFromSelection(l)"
                      @fadeIn @slideOutUp
       ></app-loan-card>
     </div>
-    <div class="selection-percentage" *ngIf="SelectedLoans.length >0">
+    <div *ngIf="EnableSelectButton && SelectedLoans.length >0" class="selection-percentage" >
       <span class="badge badge-info">{{SelectedLoans.length}}</span>/
       <span class="badge badge-info">{{MaxSelect}}</span>
     </div>

src/app/list-all-loans/list-all-loans.component.ts

   public pageSize = 10;
   public skip = 0;
   @Output() LoanSelected: EventEmitter<LoanModel[]|LoanModel> = new EventEmitter<LoanModel[]|LoanModel>();
+  @Output() LoanClicked: EventEmitter<LoanModel> = new EventEmitter<LoanModel>();
 
   @Input() EnableExportExcel = false;
   @Input() EnableExportPdf = false;
   }
 
   public onCellClick(event: CellCloseEvent): void {
-   //  this.LoanSelected.emit(event.dataItem);
+    this.LoanClicked.emit(event.dataItem);
   }
 
   public AddLoanToSelection(loan: LoanModel): void{

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

   constructor() {  }
 
   ngOnInit(): void {
-    console.log('init loan-select', this);
+    // console.log('init loan-select', this);
   }
 
   writeValue(loan: LoanModel): void {

src/app/loans-all/loans-all.component.html

+<div class="wrapper all-loans">
+  <app-list-all-loans [SingleSelection]="true"
+                      [EnableExportExcel]="true"
+                      [EnableExportPdf]="true"
+                      [EnableSelectButton]="false"
+                      (LoanClicked)="onClick($event)"
+  ></app-list-all-loans>
+</div>

src/app/loans-all/loans-all.component.scss

+div.wrapper.all-loans {
+  width: 100vw;
+  height: calc(100vh - 48px);
+
+  app-list-all-loans{
+    height: 100%;
+  }
+}

src/app/loans-all/loans-all.component.spec.ts

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

src/app/loans-all/loans-all.component.ts

+import { Component, OnInit } from '@angular/core';
+import {LoanModel} from '../models/loan.model';
+import {Router} from '@angular/router';
+
+@Component({
+  selector: 'app-loans-all',
+  templateUrl: './loans-all.component.html',
+  styleUrls: ['./loans-all.component.scss']
+})
+export class LoansAllComponent implements OnInit {
+
+  constructor(private router: Router) { }
+
+  ngOnInit(): void {
+  }
+
+  onClick(loan: LoanModel): void{
+    this.router.navigate(['edit-loan/', loan.Id]);
+  }
+}

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

       this.filter.UploadIds = [ value.Id.toString() ];
     }
     this.debouncedLoadFilteredData();
-    console.log('upload filter changed', value, this.filter);
+    //console.log('upload filter changed', value, this.filter);
   }
 
   get uploadMeta(): UploadMetaModel {
       this.filter.LoanIds = [ value.Id ];
     }
     this.debouncedLoadFilteredData();
-    console.log('filter loanId changed', value, this.filter);
+    // console.log('filter loanId changed', value, this.filter);
   }
 
   get Loan(): LoanModel {
     this.showOffsetBalance = offsetBalance >= 0 ;
     this.incomeFormGroup = this.createFormGroup(new PayInModelEx({}));
 
-    console.log(this.incomeFormGroup);
+    // console.log(this.incomeFormGroup);
     sender.addRow(this.incomeFormGroup);
   }
 
 
     return new FormGroup({
       Id: new FormControl({value: dataItem.Id, disabled: true}, Validators.required),
-      Lender: new FormControl(dataItem.Lender),
+      Lender: new FormControl({value: dataItem.Lender, disabled: Loan.Id !== '' }, Validators.required),
       Amount: new FormControl(dataItem.Amount),
-      LoanNumber: new FormControl(dataItem.LoanNumber),
+      LoanNumber: new FormControl(dataItem.LoanNumber, Validators.required),
       IncomeAmount: new FormControl(dataItem.IncomeAmount, Validators.required),
       IncomeType: new FormControl(dataItem.IncomeType, Validators.required),
       Ts: new FormControl(dataItem.Ts, Validators.required),
   }
 
   public cancelHandler({ sender, rowIndex }): void {
-    console.log(sender);
+    // console.log(sender);
     this.closeEditor(sender, rowIndex);
   }
 
   }
 
   public removeHandler({ dataItem }): void {
-    console.log('delete', dataItem);
+    // console.log('delete', dataItem);
 
     this.Loan.PayIn = this.Loan.PayIn.filter(v => v.Id !== dataItem.Id  );
     this.gridData.data = this.gridData.data.filter(v =>   v.Id !== dataItem.Id) ;