trail income editing complete with PayIn

src/app/app-routing.module.ts

 import { TransactionListComponent } from './transaction-list/transaction-list.component';
 import { TransactionComponent } from './transaction/transaction.component';
 import {ListAllLoansComponent} from './list-all-loans/list-all-loans.component';
-import {LoanAddNewComponent} from './loan-add-new/loan-add-new.component';
 import {LoanEditComponent} from './loan-edit/loan-edit.component';
+import {LenderUploadsComponent} from './lender-uploads/lender-uploads.component';
 
 
 const routes: Routes = [
   {path : 'list-all-loans', component: ListAllLoansComponent, },
   {path : 'edit-loan/:id', component: LoanEditComponent, },
   {path : 'edit-loan', component: LoanEditComponent, },
+  {path : 'uploads', component: LenderUploadsComponent, },
+  {path : 'uploads/:id', component: LenderUploadsComponent, },
 ];
 
 @NgModule({

src/app/app.module.ts

 import { RatingInputComponent } from './rating-input/rating-input.component';
 import { LoanEditPeopleComponent } from './loan-edit-people/loan-edit-people.component';
 import { PeopleCardComponent } from './people-card/people-card.component';
+import { LenderUploadsComponent } from './lender-uploads/lender-uploads.component';
 
 
 
     LoanDetailComponent,
     RatingInputComponent,
     LoanEditPeopleComponent,
-    PeopleCardComponent
+    PeopleCardComponent,
+    LenderUploadsComponent
   ],
   imports: [
     BrowserModule,

src/app/lender-uploads/lender-uploads.component.html

+<p>lender-uploads works!</p>

src/app/lender-uploads/lender-uploads.component.spec.ts

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

src/app/lender-uploads/lender-uploads.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-lender-uploads',
+  templateUrl: './lender-uploads.component.html',
+  styleUrls: ['./lender-uploads.component.scss']
+})
+export class LenderUploadsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/loan-edit-people/loan-edit-people.component.html

   <div>
     <button class="k-button k-primary" (click)="prev()" > ◀ Prev</button>
     <button kendoButton look="flat"  [disabled]="true">&nbsp;</button>
-    <button class="k-button k-primary" (click)="next()"> Next ▶</button>
+    <button kendoButton class="k-button k-primary" (click)="next()" icon="save"> (Save and) Next ▶  </button>
 
   </div>
 </div>

src/app/loan-edit-people/loan-edit-people.component.ts

       return;
     }
 
-    console.log(this.Loan.Client, this.Loan.Broker, this.Loan.OtherRewarder, this.role);
     this.ps.syncPeople(this.Loan.cloneForJson()).subscribe( resp => {});
     this.NotifyNext.emit(true);
   }

src/app/loan-edit/basicinfo/basicinfo.component.html

 <div class="row">
-  <div class="col-sm-9">
+  <div class="col-sm-12">
     <bkp-divider><kendo-icon [name]="'edit'"> </kendo-icon>&nbsp;Basic Information {{Loan.Lender}} </bkp-divider>
       <form class="k-form" #basicInfoForm="ngForm" (submit)="next(basicInfoForm)">
         <ng-container >
         </ng-container>
         <div class="k-form-buttons k-buttons-end">
           <div>
-            <button class="k-button k-primary" type="submit" >Next ▶ </button>
+            <button kendoButton class="k-button k-primary" type="submit" icon="save"> (Save and) Next ▶ </button>
           </div>
         </div>
       </form>
 
       <span class="k-form-separator"></span>
   </div>
-  <div class="col-sm-3">
-    <app-loan-edit-hint-card [currentStep]="'basicInfo'"> </app-loan-edit-hint-card>
-  </div>
 </div>

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

 
     <div style="margin-top:20px;"></div>
 
-    <div class="row">
-      <div class="col-sm-12" class="stepper">
+    <div class="row"  >
+      <div class="col-sm-12 stepper" >
         <kendo-stepper
           #stepper
           [steps]="steps"

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

     margin-top: 10px;
 }
 
+kendo-stepper{
+  margin: auto;
+}

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

 
   constructor( private lss: LoanSingleService, private actRoute: ActivatedRoute, private auth: AuthService, private router: Router) { }
 
-  // public get currentStepError(): boolean{
-  //   const ret = false; // TODO: set the value
-  //   this.curStepError = ret;
-  //   return ret;
-  // }
-
   public next(step: number, success: boolean): void {
+    console.log(this.Loan);
     this.steps[step].isValid = success;
     if (step === this.currentStep) {
       this.curStepSuccess = success;
     }
-    console.log(step, success);
+
     if ( this.curStepSuccess && (this.currentStep !== this.steps.length)) {
       this.currentStep += 1;
 
       resp => {
         console.log(resp);
         this.showError('Loan' + resp + 'has been deleted');
-        this.navigateTo='./#list-all-loans';
+        this.navigateTo = './#list-all-loans';
       },
       err => {
         this.showError('Error Occurred, cannot delete: ' + err.toString());
 
   public loadLoanById(id: string): void {
     const self = this;
-    console.log('loading loan for edit ... ', id);
+    // console.log('loading loan for edit ... ', id);
     this.lss.getLoan(id).subscribe(
       resp => {
         this.Loan.Response = resp;

src/app/loan-edit/people-reward/people-reward.component.html

   <div>
     <button class="k-button k-primary" (click)="prev()" > ◀ Prev</button>
     <button kendoButton look="flat"  [disabled]="true">&nbsp;</button>
-    <button class="k-button k-primary" (click)="next()"> Next ▶</button>
+    <button kendoButton class="k-button k-primary" (click)="next()" icon="save"> (Save and) Next ▶ </button>
 
   </div>
 </div>

src/app/loan-edit/people-reward/people-reward.component.ts

 
   constructor(private ls: LoanSingleService,
               private auth: AuthService,
-              private dcs: ClonerService,
-              private ps: PeopleService) {
+              private dcs: ClonerService
+              ) {
   }
 
   public ngOnInit(): void {
           this.pendingReward[idx].Amount = reward.Amount;
           this.pendingReward[idx].Description = reward.Description;
           this.pendingReward[idx].Ts = reward.Ts;
+          // update Loan
+          this.Loan.updateReward(resp.Amount, resp.Description, resp.Id, resp.LoanId, resp.PayOutId, resp.To, resp.From, resp.Ts);
         }
         // console.log(resp);
       }

src/app/loan-edit/trail-income/trail-income.component.html

 <div class="row">
   <div class="col-sm-12">
-    <form class="k-form">
-    <ng-container >
-      <bkp-divider><kendo-icon [name]="'file-pdf'"> </kendo-icon>&nbsp;Record from {{Loan.Lender}} </bkp-divider>
-      <div style="text-align: center">
-        <kendo-chip label="SuperCredit Loan ID {{Loan.Id}}"  [removable]="false" > </kendo-chip>
-      </div>
+    <form class="k-form" #trailIncome="ngForm" (submit)="next(trailIncome)">
+      <ng-container>
+        <bkp-divider>
+          <kendo-icon [name]="'file-pdf'"></kendo-icon>&nbsp;Record from {{Loan.Lender}} </bkp-divider>
+        <div style="text-align: center">
+          <kendo-chip label="SuperCredit Loan ID {{Loan.Id}}" [removable]="false"></kendo-chip>
+        </div>
+
+        <div class="vertical-spacer"></div>
+
+        <kendo-formfield>
+          <kendo-label [for]="Lender" text="Fund Supplier's Name"></kendo-label>
+          <input #Lender name="Lender" kendoTextBox [(ngModel)]="Loan.Lender" [readonly]="Loan.PayIn.length>0"/>
+          <kendo-formhint>Unique Name for a fund provider (readonly after income data is available)</kendo-formhint>
+          <kendo-formerror>Error: Lender name is required</kendo-formerror>
+        </kendo-formfield>
+        <div class="vertical-spacer"></div>
+
+        <kendo-formfield>
+          <kendo-label [for]="LenderLoanNumber" text="Fund Supplier's Loan Identification"></kendo-label>
+          <input #LenderLoanNumber name="LenderLoanNumber"
+                 kendoTextBox [(ngModel)]="Loan.LenderLoanNumber" [readonly]="Loan.PayIn.length>0"/>
+          <kendo-formhint>Unique transaction ID from Funds supplier (readonly after income data is available)</kendo-formhint>
+          <kendo-formerror>Error: the ID is required</kendo-formerror>
+        </kendo-formfield>
+        <div class="vertical-spacer"></div>
 
-      <div class="vertical-spacer"></div>
-
-      <kendo-formfield>
-        <kendo-label [for]="Lender" text="Fund Supplier's Name"></kendo-label>
-        <input #Lender name="Lender" kendoTextBox [(ngModel)]="Loan.Lender" />
-        <kendo-formhint>Unique Name for a fund provider </kendo-formhint>
-        <kendo-formerror>Error: Lender name is required</kendo-formerror>
-      </kendo-formfield>
-      <div class="vertical-spacer"></div>
-
-      <kendo-formfield>
-        <kendo-label [for]="LenderLoanNumber" text="Fund Supplier's Loan Identification"></kendo-label>
-        <input #LenderLoanNumber name="LenderLoanNumber" [(ngModel)]="Loan.LenderLoanNumber" kendoTextBox />
-        <kendo-formhint>Unique transaction ID from Funds supplier  </kendo-formhint>
-        <kendo-formerror>Error: the ID is required</kendo-formerror>
-      </kendo-formfield>
-      <div class="vertical-spacer"></div>
-
-
-      <bkp-divider><kendo-icon [name]="'table'"> </kendo-icon> &nbsp; Monthly Income </bkp-divider>
-
-      <kendo-grid [data]="gridData"
-                  [height]="410"
-                  (add)="addHandler($event)"
-                  (cancel)="cancelHandler($event)"
-                  (save)="saveHandler($event)"
-                  (edit)="editHandler($event)"
-                  (remove)="removeHandler($event)"
-      >
-        <ng-template kendoGridToolbarTemplate>
-          <button kendoGridAddCommand>Add new</button>
-        </ng-template>
-
-        <kendo-grid-command-column title="command" width="220">
-          <ng-template kendoGridCellTemplate let-isNew="isNew" let-dataItem>
-            <button kendoGridEditCommand [primary]="true" *ngIf="!dataItem.Paid">Edit</button>
-            <button kendoGridRemoveCommand *ngIf="!dataItem.Paid" >Remove</button>
-            <button kendoGridSaveCommand [disabled]="formGroup?.invalid">{{ isNew ? 'Add' : 'Update' }}</button>
-            <button kendoGridCancelCommand>{{ isNew ? 'Discard changes' : 'Cancel' }}</button>
-          </ng-template>
-        </kendo-grid-command-column>
 
-        <kendo-grid-column field="Amount" title="Trail Received" width="200" format="{0:c}" editor="numeric">
-        </kendo-grid-column>
+        <bkp-divider>
+          <kendo-icon [name]="'table'"></kendo-icon> &nbsp; Monthly Income
+        </bkp-divider>
 
-        <kendo-grid-column field="Ts" title="Trail Date" width="200"  editor="date">
-          <ng-template kendoGridCellTemplate let-dataItem>
-            {{ dataItem.Ts | date: 'yyyy-MM-dd' }}
+        <kendo-grid [data]="Loan.PayIn"
+                    [height]="410"
+                    (add)="addHandler($event)"
+                    (cancel)="cancelHandler($event)"
+                    (save)="saveHandler($event)"
+                    (edit)="editHandler($event)"
+                    (remove)="removeHandler($event)"
+        >
+          <ng-template kendoGridToolbarTemplate>
+            <button kendoGridAddCommand icon="plus" >Add new Income</button>
           </ng-template>
-        </kendo-grid-column>
 
-        <kendo-grid-column field="Balance" title="Balance" width="200" editor="numeric">
-        </kendo-grid-column>
+          <kendo-grid-command-column 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 kendoGridCancelCommand icon="cancel"></button>
+            </ng-template>
+          </kendo-grid-command-column>
+
+          <kendo-grid-column field="Id" title="Id" width="50" editable="false">
+          </kendo-grid-column>
+
+          <kendo-grid-column field="Trail" title="Trail Received" width="200" format="{0:c}" editor="numeric">
+          </kendo-grid-column>
+
+          <kendo-grid-column field="Ts" title="Trail Date" editor="date">
+            <ng-template kendoGridCellTemplate let-dataItem>
+              {{ dataItem.Ts | date: 'yyyy-MM-dd' }}
+            </ng-template>
+          </kendo-grid-column>
+
+          <kendo-grid-column field="Balance" title="Balance" width="220">
+            <ng-template kendoGridCellTemplate let-dataItem>
+              <div *ngIf="dataItem.Balance >=0 "> {{ dataItem.Balance | currency}} </div>
+              <div *ngIf="dataItem.Balance < 0 "> unknown  </div>
+            </ng-template>
+            <ng-template kendoGridEditTemplate
+                         let-dataItem="dataItem"
+                         let-formGroup="formGroup">
+
+              <kendo-switch [checked]="dataItem.Balance >=0"
+                            name="showBalance" [(ngModel)]="showBalance"
+                            ngModelOptions="{standalone: true}"
+                            [onLabel]="'Yes'"
+                            [offLabel]="'No'"
+                            >
+              </kendo-switch>
+
+              <kendo-numerictextbox  *ngIf="showBalance" name="balance" [formControl]="formGroup.get('Balance')"
+                                     [min]="-1" [max]="999999999" [autoCorrect]="true" class="balance">
+              </kendo-numerictextbox>
+            </ng-template>
+
+          </kendo-grid-column>
+
+
+          <kendo-grid-column field="OffsetBalance" title="Offset" width="200" >
+            <ng-template kendoGridCellTemplate let-dataItem>
+              <div *ngIf="dataItem.OffsetBalance >=0 "> {{ dataItem.OffsetBalance | currency}} </div>
+              <div *ngIf="dataItem.OffsetBalance < 0 "> unknown  </div>
+            </ng-template>
+            <ng-template kendoGridEditTemplate
+                         let-dataItem="dataItem"
+                         let-formGroup="formGroup">
+
+              <kendo-switch [checked]="dataItem.OffsetBalance >=0"
+                            name="showOffsetBalance" [(ngModel)]="showOffsetBalance"
+                            ngModelOptions="{standalone: true}"
+                            [onLabel]="'Yes'"
+                            [offLabel]="'No'"
+                            >
+              </kendo-switch>
+
+              <kendo-numerictextbox  *ngIf="showOffsetBalance" name="offsetBalance"
+                                     [formControl]="formGroup.get('OffsetBalance')"
+                                     [min]="-1" [max]="999999999" [autoCorrect]="true" class="balance">
+              </kendo-numerictextbox>
+            </ng-template>
+          </kendo-grid-column>
+
+          <kendo-grid-column field="Uploaded" title="Uploads" width="100" format="{0:c}" editable="false">
+            <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" >
+              <button kendoButton *ngIf="dataItem.Uploads > 0" (click)="visitUploads(dataItem)"  icon="attachment">
+              </button>
+              <p *ngIf="dataItem.Uploads <=0" align="center"> - </p>
+            </ng-template>
+          </kendo-grid-column>
 
-        <kendo-grid-column field="OffsetBalance" title="Offset Balance" width="200" editor="numeric">
-        </kendo-grid-column>
+        </kendo-grid>
 
-      </kendo-grid>
+        <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
+        <div class="vertical-spacer"></div>
 
-      <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
-      <div class="vertical-spacer"></div>
+      </ng-container>
 
-    </ng-container>
-  </form>
-    <div class="k-form-buttons k-buttons-end">
-      <div>
-        <button class="k-button k-primary" (click)="prev()" >◀ Prev</button>
+      <div class="k-form-buttons k-buttons-end">
+        <div>
+          <button class="k-button k-primary" (click)="prev()">◀ Prev</button>
+          <button kendoButton look="flat" [disabled]="true">&nbsp;</button>
+          <button kendoButton type="submit" class="k-button k-primary" (click)="next(trailIncome)" icon="save"> (Save and) Finish ▶</button>
+        </div>
       </div>
-    </div>
+    </form>
   </div>
 </div>

src/app/loan-edit/trail-income/trail-income.component.scss

   height: 10px;
   margin-bottom: 30px;
 }
+
+input {
+  width:100%;
+}
+
+.balance {
+  display: inline-block;
+  margin-left: 0px !important;
+  width: calc(100% - 60px) !important;
+}

src/app/loan-edit/trail-income/trail-income.component.ts

 import {Component, Input, OnInit, Output, EventEmitter} from '@angular/core';
-import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {FormControl, FormGroup, NgForm, Validators} from '@angular/forms';
 import {LoanModel} from '../../models/loan.model';
+import {LoanSingleService} from '../../service/loan.single.service';
+import {AuthService} from '../../service/auth.service';
+import {PayInModel} from '../../models/pay-in.model';
+import {Router} from '@angular/router';
 
 
 const createFormGroup = dataItem => new FormGroup({
-  Amount  : new FormControl(dataItem.Amount),
-  Ts: new FormControl(dataItem.Ts),
-  Balance: new FormControl(dataItem.Balance),
-  OffsetBalance: new FormControl(dataItem.OffsetBalance),
+  Id: new FormControl({value: dataItem.Id, disabled: true}, Validators.required),
+  Trail  : new FormControl(dataItem.Trail, Validators.required),
+  Ts: new FormControl(dataItem.Ts, Validators.required),
+  Balance: new FormControl(dataItem.Balance, Validators.required),
+  OffsetBalance: new FormControl(dataItem.OffsetBalance, Validators.required),
 });
 
 @Component({
 })
 export class TrailIncomeComponent implements OnInit {
   @Input() public Loan: LoanModel;
-  @Input() public LenderName: string;
+
   @Output() public NotifyNext = new EventEmitter<boolean>();
   @Output() public NotifyPrev = new EventEmitter<boolean>();
   @Output() public errorOccurred = new EventEmitter<string>();
 
-  public gridData: any[] = [];
-
   public formGroup: FormGroup;
   private editedRowIndex: number;
 
-  public trailIncome: FormGroup = new FormGroup({
-    LenderLoanNumber: new FormControl(),
-    Lender: new FormControl(),
-  });
+  public trailIncome: FormGroup;
+  public showBalance = true;
+  public showOffsetBalance = true;
 
-  constructor() { }
-  ngOnInit(): void { }
+  constructor(private ls: LoanSingleService,
+              private auth: AuthService,
+              private router: Router) { }
+  ngOnInit(): void {
+    // this.Loan.PayIn
+  }
 
   public addHandler({ sender }): void  {
     this.closeEditor(sender);
 
+    let balance = -1;
+    let offsetBalance = -1;
+    if ( this.Loan.PayIn.length >= 0) {
+      const idx = this.Loan.PayIn.length -1;
+      balance = this.Loan.PayIn[idx].Balance;
+      offsetBalance = this.Loan.PayIn[idx].OffsetBalance;
+    }
+
+    this.showBalance = balance >= 0 ;
+    this.showOffsetBalance = offsetBalance >= 0 ;
+
     this.formGroup = createFormGroup({
-      Amount: 1000,
-      Ts: new Date('2020-05-20'),
-      Balance: 800000,
-      OffsetBalance: 600000
+      Id: 0,
+      Trail: 168,
+      Ts: new Date(),
+      Balance: balance,
+      OffsetBalance: offsetBalance
     });
 
     sender.addRow(this.formGroup);
   public editHandler({ sender, rowIndex, dataItem }): void {
     this.closeEditor(sender);
 
-    if ( dataItem.Paid ) {
-      alert( 'cannot edit');
-    }else{
-      this.formGroup = createFormGroup(dataItem);
-
-      this.editedRowIndex = rowIndex;
-
-      sender.editRow(rowIndex, this.formGroup);
-    }
+    this.showBalance = dataItem.Balance >= 0 ;
+    this.showOffsetBalance = dataItem.OffsetBalance >= 0 ;
+    this.formGroup = createFormGroup(dataItem);
+    this.editedRowIndex = rowIndex;
+    sender.editRow(rowIndex, this.formGroup);
 
   }
 
   }
 
   public saveHandler({ sender, rowIndex, formGroup, isNew }): void {
-    const product = formGroup.value;
-
-    console.log('saving', product, formGroup);
-    // this.service.save(product, isNew);
+    const v = formGroup.getRawValue();
+
+    if ( !this.showBalance) { v.Balance = -1; }
+    if ( !this.showOffsetBalance) { v.OffsetBalance = -1; }
+
+    const pi = new PayInModel(
+      v.Id,
+      this.Loan.Amount,
+      v.Balance,
+      this.Loan.Lender,
+      this.Loan.Id,
+      this.Loan.LenderLoanNumber,
+      v.OffsetBalance,
+      this.Loan.Settlement,
+      v.Trail,
+      v.Ts,
+      0,
+    );
+
+    console.log('saving PayIn', pi);
+    this.ls.savePayIn(pi, isNew).subscribe(
+      (resp: PayInModel) => {
+        this.Loan.cuPayIn(resp);
+      },
+      err => {
+        this.errorOccurred.emit('Error saving Income');
+      }
+    );
 
     sender.closeRow(rowIndex);
   }
 
   public removeHandler({ dataItem }): void {
     console.log(dataItem);
-    // this.service.remove(dataItem);
+
+    const na = this.Loan.PayIn.filter(v => {
+      return v.Id !== dataItem.Id;
+    });
+
+    this.Loan.PayIn = na;
+    this.ls.removePayIn(dataItem.Id);
   }
 
   private closeEditor(grid, rowIndex = this.editedRowIndex): void{
     this.formGroup = undefined;
   }
 
-  public next(): void{
+  public next(trailIncome: NgForm): void{
     this.NotifyNext.emit(true);
+    this.router.navigate(['./list-all-loans']);
   }
 
   public prev(): void {
     this.NotifyPrev.emit(true);
   }
+
+  public visitUploads(pi: PayInModel): void {
+    this.router.navigate(['./uploads/' + pi.Uploads]);
+  }
+
 }

src/app/main-menu-items.ts

             { text: 'List All',  icon: 'table', url: '#' },
             { text: 'By Broker', icon: 'table', url: '#' },
             { text: '--', separator: 'true'  },
-            { text: 'PaidImport From ...', icon : 'upload'}
+            { text: 'Lender Monthly Uploads', icon: 'attachment' , url: './#uploads'}
         ]
     },
     {

src/app/models/loan.model.ts

     this.setReward(resp.Reward);
     this.setRewardPeople(resp.RewardPeople);
     this.PeopleMap = resp.PeopleMap;
-    this.PayIn = resp.PayIn;
+    this.setPayIn(resp.PayIn);
   }
 
   private setReward(v: any[]): void{
     return;
   }
 
+  private setPayIn(v: any[]): void{
+    this.PayIn = [];
+    v.forEach( pi =>{
+      this.PayIn.push(new PayInModel(
+        pi.Id,
+        pi.Amount,
+        pi.Balance,
+        pi.Lender,
+        pi.LoanId,
+        pi.LoanNumber,
+        pi.OffsetBalance,
+        new Date(pi.Settlement),
+        pi.Trail,
+        new Date(pi.Ts),
+        pi.Uploads,
+      ));
+    });
+  }
+
+  // Create or Update PayIn
+  public cuPayIn(pi: PayInModel): void{
+    // remove existing one
+    const na = this.PayIn.filter(v => v.Id !== pi.Id );
+    // add the incoming one
+    na.unshift(
+      new PayInModel(
+        pi.Id,
+        pi.Amount,
+        pi.Balance,
+        pi.Lender,
+        pi.LoanId,
+        pi.LoanNumber,
+        pi.OffsetBalance,
+        new Date(pi.Settlement),
+        pi.Trail,
+        new Date(pi.Ts),
+        pi.Uploads,
+      )
+    );
+    // update array element
+    this.PayIn = na;
+  }
+
   private setClient(v: any[]): void{
     this.Client = [];
     v.forEach((c) => {
     return r;
   }
 
+  public updateReward(Amount: number, Description: string, Id: number,
+                      LoanId: string, PayOutId: number, To: string , From: string, Ts: Date): RewardModel {
+    const r = new RewardModel(
+      Amount,
+      Description,
+      Id,
+      LoanId,
+      PayOutId,
+      To,
+      From,
+      new Date(Ts),
+      this.callBacks()
+    );
+    r.LoanId = this.Id; // Make sure Loan Id is same
+    const idx = this.Reward.findIndex( v => v.Id === Id );
+    this.Reward[idx].Amount = Amount;
+    this.Reward[idx].Description = Description;
+    this.Reward[idx].LoanId = r.LoanId; // Ensure Loan Id is correct
+    this.Reward[idx].PayOutId = PayOutId;
+    this.Reward[idx].To = To;
+    this.Reward[idx].From = From;
+    this.Reward[idx].Ts = new Date(Ts);
+
+    return r;
+  }
+
   public removeReward(Id: number): void {
     const na = this.Reward.filter(v => v.Id !== Id );
     this.Reward = na;

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

 
 export class PayInModel {
-  Id: number;
+  constructor(
+    public Id: number,
+    public Amount: number,
+    public Balance: number,
+    public Lender: string,
+    public LoanId: string,
+    public LoanNumber: string,
+    public OffsetBalance: number,
+    public Settlement: Date,
+    public Trail: number,
+    public Ts: Date,
+    public Uploads: number
+  ){}
 }

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

 import {Injectable} from '@angular/core';
 import {RewardModel} from '../models/reward.model';
 import {ClonerService} from './clone.service';
+import {PayInModel} from '../models/pay-in.model';
 
 @Injectable()
 export class LoanSingleService {
     );
   }
 
+  public savePayIn(payIn: PayInModel, isNew: boolean): Observable<PayInModel> {
+    return this.http.post<PayInModel>(this.auth.getUrl('payIn/'), payIn);
+  }
+
+  public removePayIn(id: number): void {
+    this.http.delete<PayInModel>(this.auth.getUrl('payIn/' + id)).subscribe(
+      resp => {
+        console.log(resp);
+      }
+    );
+  }
+
+  // delete means more than remove, it removes relevant data too
   public deleteLoan(id: string): Observable<string> {
     return this.http.delete<string>(this.auth.getUrl('loan/' + id));
   }