loan edit moved to ngModel

src/app/app-routing.module.ts

@@ -19,7 +19,8 @@ const routes: Routes = [
   {path : 'transaction', component: TransactionComponent, canActivate: [AuthGuard]},
   {path : 'transaction-list', component: TransactionListComponent, canActivate: [AuthGuard]},
   {path : 'list-all-loans', component: ListAllLoansComponent, },
-  {path : 'start-a-new-loan', component: LoanEditComponent, },
+  {path : 'edit-loan/:id', component: LoanEditComponent, },
+  {path : 'edit-loan', component: LoanEditComponent, },
 ];
 
 @NgModule({

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

@@ -12,6 +12,7 @@
   [filterable]="true"
   (dataStateChange)="dataStateChange($event)"
   (filterChange)="filterChange($event)"
+  (cellClick)="onCellClick($event)"
   class="fullheight_grid"
 >
   <ng-template kendoGridToolbarTemplate>

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

@@ -1,9 +1,10 @@
 import {Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
-import {DataStateChangeEvent, GridComponent, GridDataResult} from '@progress/kendo-angular-grid';
+import {CellCloseEvent, DataStateChangeEvent, GridComponent, GridDataResult} from '@progress/kendo-angular-grid';
 import {CompositeFilterDescriptor, SortDescriptor, toODataString} from '@progress/kendo-data-query';
 import {LoanSummaryService} from '../service/loan_summary.service';
 import {AuthService} from '../service/auth.service';
 import {Observable} from 'rxjs';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-list-all-loans',
@@ -23,7 +24,7 @@ export class ListAllLoansComponent implements OnInit {
   @ViewChild(GridComponent, { static: true }) public grid: GridComponent;
 
 
-  constructor(private service: LoanSummaryService, private auth: AuthService) { }
+  constructor(private service: LoanSummaryService, private auth: AuthService, private router: Router) { }
 
   public ngOnInit(): void {
     // Bind directly to the service as it is a Subject
@@ -44,7 +45,7 @@ export class ListAllLoansComponent implements OnInit {
     this.loadData();
 
     // Expand the first row initially
-    //this.grid.expandRow(0);
+    // this.grid.expandRow(0);
   }
 
   public filterChange(filter: CompositeFilterDescriptor): void {
@@ -68,4 +69,8 @@ export class ListAllLoansComponent implements OnInit {
     return this.service.queryAll({skip: 0, take: 999999, sort: this.sort, filter: this.filter});
   }
 
+  public onCellClick(event: CellCloseEvent): void {
+    this.router.navigate(['/edit-loan/' + event.dataItem.Id]);
+  }
+
 }

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

@@ -89,7 +89,7 @@ export class LoanEditPeopleComponent implements OnInit, AfterViewInit {
     }
 
     console.log(this.Loan.Client, this.Loan.Broker, this.Loan.OtherRewarder, this.role);
-    this.ps.syncPeople(this.Loan).subscribe( resp => {});
+    this.ps.syncPeople(this.Loan.cloneForJson()).subscribe( resp => {});
     this.NotifyNext.emit(true);
   }
 

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

@@ -1,12 +1,12 @@
 <div class="row">
   <div class="col-sm-9">
-      <form class="k-form" [formGroup]="basicInfo" (ngSubmit)="next()">
+      <form class="k-form" >
         <ng-container >
             <fieldset class="k-form-fieldset">
               <legend class="k-form-legend"></legend>
               <kendo-formfield>
                 <kendo-label [for]="LoanId" text="Loan ID"></kendo-label>
-                <input formControlName="LoanId" kendoTextBox #LoanId  />
+                <input kendoTextBox #LoanId  readonly name="LoanId" [(ngModel)]="Loan.Id" [ngModelOptions]="{standalone: true}"/>
 
                 <kendo-formhint>Unique transaction
                   ID from SuperCredit (Auto generated when save, cannot be changed) </kendo-formhint>
@@ -20,13 +20,15 @@
                 <kendo-label [for]="Status" [text]="'Progress Status'" ></kendo-label>
                 <kendo-dropdownlist
                   #Status
-                  formControlName="Status"
+                  name ="Status"
                   [data]="listLoanStatus"
                   [defaultItem]="{ text: 'Select Status', value: null }"
                   [textField]="'text'"
                   [valueField]="'value'"
                   required
                   [valuePrimitive] = "true"
+                  [(ngModel)] = "Loan.Status"
+                  [ngModelOptions]="{standalone: true}"
                 >
                 </kendo-dropdownlist>
                 <kendo-formhint>cannot be changed after settlement</kendo-formhint>
@@ -37,11 +39,9 @@
               <kendo-formfield>
                 <kendo-label [for]="Lender" text="Lender Organization">
                 </kendo-label>
-                <kendo-textbox (valueChange)="onLenderNameChange($event)"
-                               formControlName="Lender" #Lender
-                               [clearButton]="true"
-                ></kendo-textbox>
-                <kendo-formhint>E.g. NAB Bank, cannot be changed after settlement</kendo-formhint>
+                <kendo-textbox name="Lender" [(ngModel)] = "Loan.Lender"  #Lender  [clearButton]="true"
+                               disabled> </kendo-textbox>
+                <kendo-formhint>info determined by trail income info</kendo-formhint>
                 <kendo-formerror>Error: Lender is required</kendo-formerror>
               </kendo-formfield>
               <div class="vertical-spacer"></div>
@@ -49,7 +49,8 @@
               <kendo-formfield>
                 <kendo-label [for]="Item" text="Loan Target">
                 </kendo-label>
-                <kendo-textbox formControlName="Item" #Item  [clearButton]="true" ></kendo-textbox>
+                <kendo-textbox #Item  name="Item" [clearButton]="true" [(ngModel)]="Loan.Item" required minlength="1" maxlength="120"
+                               [ngModelOptions]="{standalone: true}"></kendo-textbox>
                 <kendo-formhint>E.g. 333 Opera House, Sydney Road, NSW 2000 , cannot be changed after settlement</kendo-formhint>
                 <kendo-formerror>Loan Target is required</kendo-formerror>
               </kendo-formfield>
@@ -57,8 +58,8 @@
 
 
               <kendo-formfield>
-                <kendo-label [for]="Amount"  text="Loan Limit"> </kendo-label>
-                <kendo-numerictextbox formControlName="Amount" #Amount  [min]="100" [max]="1000000000" [format]="'c0'"></kendo-numerictextbox>
+                <kendo-label [for]="Amount" text="Loan Limit"> </kendo-label>
+                <kendo-numerictextbox #Amount  name="Amount" [min]="100" [max]="1000000000" [format]="'c0'" [(ngModel)]="Loan.Amount"></kendo-numerictextbox>
                 <kendo-formhint>E.g. 80000, cannot be changed after settlement</kendo-formhint>
                 <kendo-formerror>Error: Limit should be between 100 ~ 1,000,000,000</kendo-formerror>
               </kendo-formfield>
@@ -66,18 +67,20 @@
 
               <kendo-formfield>
                 <kendo-label [for]="Settlement" [optional]="false" text="Settlement Date"></kendo-label>
-                <kendo-datepicker #Settlement formControlName="Settlement"
+                <kendo-datepicker #Settlement name="Settlement"
+                                  [(ngModel)]="Loan.Settlement"
                                   [min]="minSettlement" [max]="maxSettlement">
                 </kendo-datepicker>
-                <kendo-formhint>Date Settled</kendo-formhint>
+                <kendo-formhint>Date settled or expected to be settled</kendo-formhint>
               </kendo-formfield>
               <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
 
 
               <kendo-formfield>
                 <kendo-label [for]="Description" [optional]="false"
-                             text="Quick notes: ( < 1000 words ) " (click)="showDemoDescription($event)"></kendo-label>
-                <kendo-editor #Description formControlName="Description" style="height: 500px;" ></kendo-editor>
+                             text="Quick notes: ( < 1000 words ) "
+                             (click)="showDemoDescription($event)"></kendo-label>
+                <kendo-editor #Description name="description" style="height: 500px;" [(ngModel)]="Loan.Description"></kendo-editor>
               </kendo-formfield>
               <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
               <div class="vertical-spacer"></div>
@@ -85,14 +88,14 @@
               <kendo-formfield>
                 <kendo-label [for]="Rating" [optional]="false"
                              text="Rating: " (click)="showDemoDescription($event)"></kendo-label>
-                <app-rating-input #Rating formControlName="Rating" ></app-rating-input>
+                <app-rating-input #Rating name="rating" [(ngModel)]="Loan.Rating" ></app-rating-input>
               </kendo-formfield>
 
             </fieldset>
         </ng-container>
         <div class="k-form-buttons k-buttons-end">
           <div>
-            <button class="k-button k-primary" type="submit" >Next ▶ </button>
+            <button class="k-button k-primary" type="submit" (click)="next()" >Next ▶ </button>
           </div>
         </div>
       </form>

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

@@ -15,15 +15,12 @@ export class BasicinfoComponent implements OnInit {
   constructor( private service: LoanSingleService) { }
 
   @Input() Loan: LoanModel;
-  @Output() lenderNameChanged = new EventEmitter<string>();
   @Output() NotifyNext = new EventEmitter<boolean>();
   @Output()  errorOccurred = new EventEmitter<string>();
 
   public minSettlement: Date = new Date(2015, 0, 1);
   public maxSettlement: Date = new Date(2030, 4, 31);
 
-  public basicInfo: FormGroup ;
-
   public DemoDescription = `
        <h1> Rich Text Editing </h1>
        <table>
@@ -53,38 +50,14 @@ export class BasicinfoComponent implements OnInit {
   ];
 
   ngOnInit(): void {
-    this.basicInfo = new FormGroup({
-      LoanId: new FormControl({value: this.Loan.Id, disabled: true}),
-      Status: new FormControl(),
-      Item: new FormControl(this.Loan.Item,  Validators.required),
-      Lender : new FormControl({value: 'SuperCredit', disabled: false}, Validators.required),
-      Amount: new FormControl(100, [Validators.required , Validators.min(100), Validators.max(1000000000)]),
-      Settlement: new FormControl(new Date(2020, 0, 9)),
-      Description: new FormControl( '', Validators.maxLength(2000)),
-      Rating: new FormControl({value: this.Loan.Rating, disabled: false}),
-    });
-    this.LoadBasic();
-  }
-
-  onLenderNameChange(value: string): void {
-    console.log('emit lender change');
-    this.lenderNameChanged.emit(value);
   }
 
   public next(): void {
-    this.basicInfo.markAllAsTouched();
-    // console.log(this.basicInfo, this.Loan);
-    this.Loan.Lender = this.basicInfo.value.Lender;
-    this.Loan.Status = this.basicInfo.value.Status;
-    this.Loan.Item = this.basicInfo.value.Item;
-    this.Loan.Amount = this.basicInfo.value.Amount;
-    this.Loan.Settlement = this.basicInfo.value.Settlement;
-    this.Loan.Description = this.basicInfo.value.Description;
-    this.Loan.Rating = this.basicInfo.value.Rating;
     this.service.updateBasicInfo(this.Loan).subscribe(
       resp => {
-        // console.log(resp);
-        // move to next step
+        if ( this.Loan.Id === '' ) {
+          this.Loan.Id = resp.Id;
+        }
         this.NotifyNext.emit(true);
       },
       err => {
@@ -95,36 +68,8 @@ export class BasicinfoComponent implements OnInit {
     );
   }
 
-  public loanStatus(value: string): {text: string, value: string} {
-      this.listLoanStatus.forEach(( v) => {
-          if (v.value = value) {
-            return v;
-          }
-      });
-      return null;
-  }
-
   public showDemoDescription($event): void{
-    this.basicInfo.get('Description').setValue(this.DemoDescription);
-  }
-  public LoadBasic(): void  {
-    if (this.Loan === undefined) {
-      return ;
-    }
-    this.basicInfo.get('LoanId').setValue(this.Loan.Id);
-    this.basicInfo.get('Lender').setValue(this.Loan.Lender);
-    this.lenderNameChanged.emit(this.basicInfo.get('Lender').value);
-    this.basicInfo.get('Status').setValue(this.Loan.Status);
-    this.basicInfo.get('Item').setValue(this.Loan.Item);
-    this.basicInfo.get('Amount').setValue(this.Loan.Amount);
-    this.basicInfo.get('Settlement').setValue(this.Loan.Settlement);
-    this.basicInfo.get('Description').setValue(this.Loan.Description);
-    this.basicInfo.get('Rating').setValue(this.Loan.Rating);
-    return ;
-    if ( this.Loan.Status === 'Settled') {
-      this.basicInfo.get('Status').disable({onlySelf: true, emitEvent: false});
-      this.basicInfo.get('Item').disable({onlySelf: true, emitEvent: false});
-      this.basicInfo.get('Amount').disable({onlySelf: true, emitEvent: false});
-    }
+    this.Loan.Description = this.DemoDescription;
   }
+
 }

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

@@ -19,7 +19,6 @@
     <app-loan-basic-info *ngIf="currentStep === 0"
                          #basicInfo
                          [Loan]="Loan"
-                         (lenderNameChanged)="onLenderNameChange($event)"
                          (NotifyNext) ="next(0, $event)"
                          (errorOccurred)="showError($event)"
     ></app-loan-basic-info>

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

@@ -4,6 +4,8 @@ import {StepperComponent} from '@progress/kendo-angular-layout';
 import {LoanSingleService} from '../service/loan.single.service';
 import {LoanModel} from '../models/loan.model';
 import {BasicinfoComponent} from './basicinfo/basicinfo.component';
+import {ActivatedRoute} from '@angular/router';
+import {AuthService} from '../service/auth.service';
 
 
 @Component({
@@ -20,7 +22,6 @@ export class LoanEditComponent implements OnInit {
 
 
   public Loan: LoanModel = new LoanModel('');
-  public LenderName: string;
   public curStepSuccess = false;
 
   public showDelete = false;
@@ -35,7 +36,7 @@ export class LoanEditComponent implements OnInit {
   public dialogOpened = false;
   public errorMessage = '';
 
-  constructor( private lss: LoanSingleService) { }
+  constructor( private lss: LoanSingleService, private actRoute: ActivatedRoute, private auth: AuthService) { }
 
   // public get currentStepError(): boolean{
   //   const ret = false; // TODO: set the value
@@ -62,14 +63,14 @@ export class LoanEditComponent implements OnInit {
     this.currentStep -= 1;
   }
 
-  public onLenderNameChange(value: string): void{
-    this.LenderName = value;
-  }
-
 
   ngOnInit(): void {
-    const demoId = '049836b8-07ad-448a-b048-865e8e85f1fe';
-    this.loadLoanById(demoId);
+    const LoanId  = this.actRoute.snapshot.params.id;
+    if ( LoanId !== undefined && LoanId.length > 10 ) {
+      this.loadLoanById(LoanId);
+    }else{
+      this.startNewLoan();
+    }
   }
 
   public del(): void {
@@ -78,17 +79,21 @@ export class LoanEditComponent implements OnInit {
 
   public loadLoanById(id: string): void {
     const self = this;
-    console.log('loading loan ', this.Loan.Id);
+    console.log('loading loan for edit ... ', id);
     this.lss.getLoan(id).subscribe(
       resp => {
         this.Loan.Response = resp;
-        this.Loan.apiUrlFunc = self.lss.apiUrlFunc();
+        this.Loan.auth = this.auth;
+        this.Loan.lss = this.lss;
         self.LoanUpdated.emit(this.Loan);
-        self.basicInfo.LoadBasic();
       }
     );
   }
 
+  public startNewLoan(): void{
+      this.Loan = LoanModel.EmptyNew(this.lss, this.auth);
+  }
+
   public action(status): void {
     this.dialogOpened = false;
   }

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

@@ -14,7 +14,7 @@
                 (remove)="removeHandler($event)"
     >
       <ng-template kendoGridToolbarTemplate>
-        <button kendoGridAddCommand icon="plus" [primary]="true">Add new</button>
+        <button kendoGridAddCommand icon="plus" [primary]="true" class="toolbarAddNew">Add new</button>
       </ng-template>
 
       <kendo-grid-command-column title="action" width="80">

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

@@ -25,3 +25,7 @@
   margin-right: 8px;
   border-radius: 50%;
 }
+
+.toolbarAddNew {
+  margin-bottom:100px;
+}

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

@@ -113,6 +113,7 @@ export class PeopleRewardComponent implements OnInit {
       Amount: 0,
       Description: '',
       PayOutId: 0,
+      Ts: new Date()
     });
 
     sender.addRow(this.formGroup);
@@ -125,7 +126,7 @@ export class PeopleRewardComponent implements OnInit {
     this.formGroup = createFormGroup(dataItem);
     this.editedRowIndex = rowIndex;
     sender.editRow(rowIndex, this.formGroup);
-    console.log('editing' , dataItem, this.formGroup);
+    // console.log('editing' , dataItem, this.formGroup);
   }
 
   public cancelHandler({ sender, rowIndex }): void{
@@ -153,7 +154,7 @@ export class PeopleRewardComponent implements OnInit {
           this.pendingReward[idx].Description = reward.Description;
           this.pendingReward[idx].Ts = reward.Ts;
         }
-        console.log(resp);
+        // console.log(resp);
       }
 
     );

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

@@ -1,17 +1,26 @@
 <div class="row">
   <div class="col-sm-12">
     <form class="k-form">
-    <ng-container [formGroup]="trailIncome">
-      <bkp-divider><kendo-icon [name]="'file-pdf'"> </kendo-icon>&nbsp;Record from {{LenderName}} </bkp-divider>
+    <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-label [for]="LoanIdLabel" text="SuperCredit Loan ID"></kendo-label>
-      <p #LoanIdLabel> {{Loan.Id}} </p>
+      <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 formControlName="LenderLoanNumber" kendoTextBox />
-        <kendo-formhint>Unique transaction ID from Funds supplier </kendo-formhint>
+        <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>

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

@@ -29,6 +29,7 @@ export class TrailIncomeComponent implements OnInit {
 
   public trailIncome: FormGroup = new FormGroup({
     LenderLoanNumber: new FormControl(),
+    Lender: new FormControl(),
   });
 
   constructor() { }

src/app/main-menu-items.ts

@@ -11,15 +11,15 @@ export const mainMenuItems: any[] = [
         icon: 'more-vertical',
         items: [
             { text: 'Summary', fa: faChartArea, url: './#dashboard'},
-            { text: '--', separator: "true"  },
+            { text: '--', separator: 'true'  },
             { text: 'Logout', icon: 'logout', url: './#login'}]
     },
     {
         text: 'Loans',
         icon: 'dollar',
         items: [
-            { text: 'Start New Loan', icon: 'plus', url: "./#start-a-new-loan" },
-            { text: 'List All New', icon: 'table' ,url: './#list-all-loans' },
+            { text: 'Start New Loan', icon: 'plus', url: './#edit-loan/' },
+            { text: 'List All New', icon: 'table' , url: './#list-all-loans' },
         ]
     },
     {
@@ -28,7 +28,7 @@ export const mainMenuItems: any[] = [
         items: [
             { text: 'List All',  icon: 'table', url: '#' },
             { text: 'By Broker', icon: 'table', url: '#' },
-            { text: '--', separator: "true"  },
+            { text: '--', separator: 'true'  },
             { text: 'PaidImport From ...', icon : 'upload'}
         ]
     },
@@ -38,10 +38,10 @@ export const mainMenuItems: any[] = [
         items: [
             { text: 'Add ', icon: 'plus', url: '#' },
             { text: 'List All', fa: faIdCard },
-            { text: '--', separator: "true"  },
-            { text: 'Search' ,icon: 'search'},
-            { text: '--', separator: "true"  },
-            { text: 'Broadcast', icon:'email' },
+            { text: '--', separator: 'true'  },
+            { text: 'Search' , icon: 'search'},
+            { text: '--', separator: 'true'  },
+            { text: 'Broadcast', icon: 'email' },
         ]
     },
 
@@ -51,11 +51,11 @@ export const mainMenuItems: any[] = [
         items: [
             { text: 'Add ', icon: 'plus', url: '#' },
             { text: 'List All', fa: faIdCardAlt},
-            { text: '--', separator: "true"  },
+            { text: '--', separator: 'true'  },
             { text: 'Search' , icon: 'search'},
-            { text: '--', separator: "true"  },
+            { text: '--', separator: 'true'  },
             { text: 'Broadcast' , icon : 'email'},
-            { text: '--', separator: "true"  },
+            { text: '--', separator: 'true'  },
             { text: 'UnPaid', fa : faMoneyCheck },
         ]
     }

src/app/models/loan.model.ts

@@ -3,7 +3,8 @@ import {PeopleMapModel} from './people-map.model';
 import {BrokerModel} from './broker.model';
 import {PayInModel} from './pay-in.model';
 import {RewardModel} from './reward.model';
-import {ApiUrL} from '../service/auth.service';
+import {AuthService} from '../service/auth.service';
+import {LoanSingleService} from '../service/loan.single.service';
 
 export interface LoanModelCallBacks {
    getUserName(userId: string): string;
@@ -23,6 +24,7 @@ export class LoanModel {
     public Description?: string,
 
     public Lender?: string,
+    public LenderLoanNumber?: string,
     public Client?: PeopleModel[],
     public Broker?: BrokerModel[],
     public OtherRewarder?: PeopleModel[],
@@ -31,9 +33,20 @@ export class LoanModel {
     public PayIn?: PayInModel[],
     public PeopleMap?: PeopleMapModel[],
 
-    public apiUrlFunc?: ApiUrL
+    public auth?: AuthService,
+    public lss?: LoanSingleService
   ){}
 
+  public static EmptyNew(lss: LoanSingleService, auth: AuthService): LoanModel {
+    const nLoan = new LoanModel(
+      '', 0 , '', '', 0, new Date(), '',
+      '', '', [], [], [], [], [], [], [],
+      auth, lss
+    );
+    return nLoan;
+  }
+
+
   public set Response(resp: LoanModel) {
     this.Id = resp.Id;
 
@@ -45,6 +58,7 @@ export class LoanModel {
     this.Description = resp.Description;
 
     this.Lender = resp.Lender;
+    this.LenderLoanNumber = resp.LenderLoanNumber;
 
     this.setClient(resp.Client);
     this.setBroker(resp.Broker);
@@ -74,7 +88,7 @@ export class LoanModel {
 
   private setClient(v: any[]): void{
     this.Client = [];
-    v.forEach((c) =>{
+    v.forEach((c) => {
       this.Client.push(
         new PeopleModel(c.Id, c.First, c.Last, c.Middle, c.Title, c.Display, c.Nick)
       );
@@ -83,7 +97,7 @@ export class LoanModel {
 
   private setOtherRewarder(v: any[]): void{
       this.OtherRewarder = [];
-      v.forEach((c) =>{
+      v.forEach((c) => {
         this.OtherRewarder.push(
           new PeopleModel(c.Id, c.First, c.Last, c.Middle, c.Title, c.Display, c.Nick)
         );
@@ -177,7 +191,7 @@ export class LoanModel {
   }
 
   public getUserPhotoUrl(id: string): string {
-    const url = this.apiUrlFunc.getUrl('avatar/') + id;
+    const url = this.auth.getUrl('avatar/') + id;
     return 'url("' + url + '")';
   }
 
@@ -226,4 +240,27 @@ export class LoanModel {
     return role;
   }
 
+  // remove auth serivce and lss service for Json.stringify
+  public cloneForJson(): LoanModel {
+    return new LoanModel(
+      this.Id,
+      this.Amount,
+      this.Status,
+      this.Item,
+      this.Rating,
+      this.Settlement,
+      this.Description,
+      this.Lender,
+      this.LenderLoanNumber,
+      this.Client,
+      this.Broker,
+      this.OtherRewarder,
+      this.Reward,
+      this.RewardPeople,
+      this.PayIn,
+      this.PeopleMap,
+      undefined,
+      undefined
+    );
+  }
 }

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

@@ -7,7 +7,3 @@ kendo-multicolumncombobox {
   margin-right: 8px;
   border-radius: 50%;
 }
-
-.toolbarAddNew{
-  padding-bottom: 20px
-}

src/app/service/auth.service.ts

@@ -1,15 +1,7 @@
 import {EventEmitter, Injectable, OnDestroy, OnInit} from '@angular/core';
-import { NotificationService } from '@progress/kendo-angular-notification';
 import {HttpClient, HttpEvent, HttpHandler, HttpInterceptor, HttpParams, HttpRequest} from '@angular/common/http';
 import {apiV1LoginResponse} from '../models/api-v1-login-response';
-import {Observable} from 'rxjs';
-import {AppComponent} from '../app.component';
 import {Router} from '@angular/router';
-import {PeopleModel} from '../models/people.model';
-
-export interface ApiUrL {
-    getUrl(key: string): string;
-};
 
 @Injectable()
 export class AuthService {
@@ -111,11 +103,4 @@ export class AuthService {
       // not found if arrive here
       return s;
     }
-
-    public apiUrlFunc(): ApiUrL {
-      return {
-        getUrl: this.getUrl.bind(this)
-      };
-    }
-
 }

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

@@ -1,21 +1,22 @@
 import {HttpClient} from '@angular/common/http';
-import {ApiUrL, AuthService} from './auth.service';
+import {AuthService} from './auth.service';
 import {Observable} from 'rxjs';
 import {LoanModel} from '../models/loan.model';
 import {Injectable} from '@angular/core';
 import {RewardModel} from '../models/reward.model';
+import {ClonerService} from './clone.service';
 
 @Injectable()
 export class LoanSingleService {
 
-  constructor(private http: HttpClient, private auth: AuthService ){ }
+  constructor(private http: HttpClient, private auth: AuthService, private dcs: ClonerService ){ }
 
   getLoan(loanId: string): Observable<LoanModel> {
     return this.http.get<LoanModel>(this.auth.getUrl('loan/' + loanId));
   }
 
   public updateBasicInfo(loan: LoanModel): Observable<any>{
-    return this.http.post(this.auth.getUrl('loan/basic/' + loan.Id), loan);
+    return this.http.post(this.auth.getUrl('loan/basic/' + loan.Id), loan.cloneForJson());
   }
 
   public photoUrl(peopleId: string): string{
@@ -23,10 +24,6 @@ export class LoanSingleService {
     return 'url("' + url + '")';
   }
 
-  public apiUrlFunc(): ApiUrL {
-    return this.auth.apiUrlFunc();
-  }
-
   public saveReward(reward: RewardModel, isNew: boolean ): Observable<RewardModel> {
     console.log('saving', reward, isNew, this);
     return this.http.post<RewardModel>(this.auth.getUrl('reward/'), reward);
@@ -40,4 +37,5 @@ export class LoanSingleService {
       }
     );
   }
+
 }