delete loan and validate basic info, and rearrange client and brokers.

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

 
 <bkp-divider>
-  <kendo-icon [name]="'ascx'" >  </kendo-icon>Loan Id: {{Loan.Id}}
+  <kendo-icon [name]="'user'" >  </kendo-icon>Loan Id: {{Loan.Id}}
 </bkp-divider>
 
 <form #form="ngForm">
-  <h5 class="title">Select Clients</h5>
-  <kendo-multiselect name="client" [data]="AllPeople" [textField]="'Display'"
-                     [valueField]="'Id'" [(ngModel)]="this.Loan.Client" [virtual]="virtual" required="true"
-                     (close)="rebuildPeopleMap($event)">
-    <ng-template kendoMultiSelectItemTemplate let-dataItem>
-      <img class="contact-image"  [src]="getContactImageUrl(dataItem.Id)" />
-      <span>{{ dataItem.First +' ' + dataItem.Last}}</span>
-    </ng-template>
-  </kendo-multiselect>
-
   <div class="container">
-    <div class="row clientCardContainer justify-content-center">
-      <div *ngFor="let v of this.Loan.Client" class="col-sm-4">
-        <app-people-card [peopleId]="v.Id"></app-people-card>
-      </div>
-    </div>
-  </div>
-
+    <div class="row">
+      <div class="col-sm-6">
+        <h5 class="title">Select Clients</h5>
+        <kendo-multiselect name="client" [data]="AllPeople" [textField]="'Display'"
+                           [valueField]="'Id'" [(ngModel)]="this.Loan.Client" [virtual]="virtual" required="true"
+                           (close)="rebuildPeopleMap($event)">
+          <ng-template kendoMultiSelectItemTemplate let-dataItem>
+            <img class="contact-image"  [src]="getContactImageUrl(dataItem.Id)" />
+            <span>{{ dataItem.First +' ' + dataItem.Last}}</span>
+          </ng-template>
+        </kendo-multiselect>
 
-
-  <h5 class="title">Assign Brokers</h5>
-    <kendo-multiselect name="brokers" [data]="AllBrokers" [textField]="'Display'"
-                       [valueField]="'Id'" [(ngModel)]="this.Loan.Broker" [virtual]="virtual"
-                       (close)="rebuildPeopleMap($event)"
-                       required="true"
-    >
-      <ng-template kendoMultiSelectItemTemplate let-dataItem>
-        <img class="contact-image"  [src]="getContactImageUrl(dataItem.Id)" />
-        <span>{{ dataItem.First +' ' + dataItem.Last}}</span>
-      </ng-template>
-    </kendo-multiselect>
-  <div class="container">
-    <div class="row brokerCardContainer justify-content-center">
-      <div *ngFor="let v of this.Loan.Broker" class="col-sm-4">
-        <app-people-card [peopleId]="v.Id"></app-people-card>
+        <div class="container">
+          <div class="row clientCardContainer justify-content-center">
+            <div *ngFor="let v of this.Loan.Client" class="col-sm-9">
+              <app-people-card [peopleId]="v.Id"></app-people-card>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-sm-6">
+        <h5 class="title">Assign Brokers</h5>
+        <kendo-multiselect name="brokers" [data]="AllBrokers" [textField]="'Display'"
+                           [valueField]="'Id'" [(ngModel)]="this.Loan.Broker" [virtual]="virtual"
+                           (close)="rebuildPeopleMap($event)"
+                           required="true"
+        >
+          <ng-template kendoMultiSelectItemTemplate let-dataItem>
+            <img class="contact-image"  [src]="getContactImageUrl(dataItem.Id)" />
+            <span>{{ dataItem.First +' ' + dataItem.Last}}</span>
+          </ng-template>
+        </kendo-multiselect>
+        <div class="container">
+          <div class="row brokerCardContainer justify-content-center">
+            <div *ngFor="let v of this.Loan.Broker" class="col-sm-9">
+              <app-people-card [peopleId]="v.Id"></app-people-card>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 
 
+
   <h5 class="title">Other Related</h5>
     <kendo-multiselect name="beneficiaries" [data]="AllPeople" [textField]="'Display'"
                        [valueField]="'Id'" [(ngModel)]="this.Loan.OtherRewarder" [virtual]="virtual"

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

 <div class="row">
   <div class="col-sm-9">
-      <form class="k-form" >
+    <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 >
             <fieldset class="k-form-fieldset">
-              <legend class="k-form-legend"></legend>
               <kendo-formfield>
                 <kendo-label [for]="LoanId" text="Loan ID"></kendo-label>
                 <input kendoTextBox #LoanId  readonly name="LoanId" [(ngModel)]="Loan.Id" [ngModelOptions]="{standalone: true}"/>
                   ID from SuperCredit (Auto generated when save, cannot be changed) </kendo-formhint>
                 <kendo-formerror>Error: the ID is required</kendo-formerror>
               </kendo-formfield>
-              <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
               <div class="vertical-spacer"></div>
 
 
                   required
                   [valuePrimitive] = "true"
                   [(ngModel)] = "Loan.Status"
-                  [ngModelOptions]="{standalone: true}"
                 >
                 </kendo-dropdownlist>
                 <kendo-formhint>cannot be changed after settlement</kendo-formhint>
               <kendo-formfield>
                 <kendo-label [for]="Item" text="Loan Target">
                 </kendo-label>
-                <kendo-textbox #Item  name="Item" [clearButton]="true" [(ngModel)]="Loan.Item" required minlength="1" maxlength="120"
-                               [ngModelOptions]="{standalone: true}"></kendo-textbox>
+                <kendo-textbox #Item  name="Item" [clearButton]="true" [(ngModel)]="Loan.Item"
+                               required minlength="1" maxlength="120"
+                               [showErrorIcon]="'initial'"></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>
         </ng-container>
         <div class="k-form-buttons k-buttons-end">
           <div>
-            <button class="k-button k-primary" type="submit" (click)="next()" >Next ▶ </button>
+            <button class="k-button k-primary" type="submit" >Next ▶ </button>
           </div>
         </div>
       </form>

src/app/loan-edit/basicinfo/basicinfo.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 {HttpErrorResponse} from '@angular/common/http';
   ngOnInit(): void {
   }
 
-  public next(): void {
+  public next(basicInfoForm: NgForm): void {
+
+    if ( ! basicInfoForm.valid ) {
+      basicInfoForm.form.markAllAsTouched();
+      this.errorOccurred.emit('Please check your input, there are some errors');
+      return ;
+    }
+
     this.service.updateBasicInfo(this.Loan).subscribe(
       resp => {
         if ( this.Loan.Id === '' ) {

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

                            (errorOccurred)="showError($event)"
     > </app-loan-trail-income>
 
-    <div class="row">
+    <div class="row" *ngIf="Loan.Id !==''">
       <div class="col-sm-12 delete-button">
         Delete this Loan <kendo-switch [(ngModel)]="showDelete">Allow Delete</kendo-switch>
       </div>

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

 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 {ActivatedRoute, Router} from '@angular/router';
 import {AuthService} from '../service/auth.service';
 
 
   public curStepSuccess = false;
 
   public showDelete = false;
+  public navigateTo = '';
 
   public steps = [
     { label: 'Basic Info', isValid: true , errMsg: 'There are some errors'},
   public dialogOpened = false;
   public errorMessage = '';
 
-  constructor( private lss: LoanSingleService, private actRoute: ActivatedRoute, private auth: AuthService) { }
+  constructor( private lss: LoanSingleService, private actRoute: ActivatedRoute, private auth: AuthService, private router: Router) { }
 
   // public get currentStepError(): boolean{
   //   const ret = false; // TODO: set the value
   }
 
   public del(): void {
-    console.log('delete loan', this.Loan.Id);
+    this.lss.deleteLoan(this.Loan.Id).subscribe(
+      resp => {
+        console.log(resp);
+        this.showError('Loan' + resp + 'has been deleted');
+        this.navigateTo='./#list-all-loans';
+      },
+      err => {
+        this.showError('Error Occurred, cannot delete: ' + err.toString());
+      }
+    );
   }
 
   public loadLoanById(id: string): void {
 
   public action(status): void {
     this.dialogOpened = false;
+    if ( this.navigateTo !== '' ) {
+      this.router.navigate([this.navigateTo]);
+    }
   }
 
   public showError(msg: string): void{
     this.errorMessage = msg;
     this.dialogOpened = true;
   }
+
 }

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

 <ng-container>
   <fieldset class="k-form-fieldset">
-    <legend class="k-form-legend"></legend>
-    <div>SuperCredit Loan Id: {{Loan.Id}}</div>
+
+    <bkp-divider><kendo-icon [name]="'dollar'"> </kendo-icon>&nbsp;Reward from Loan </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>
-    <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
 
     <kendo-grid [data]="pendingReward"
                 [height]="410"

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

 }
 
 .toolbarAddNew {
-  margin-bottom:100px;
+  margin-bottom:10px;
+}
+.vertical-spacer{
+  height : 1px;
+  margin-bottom: 20px;
 }

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

     );
   }
 
+  public deleteLoan(id: string): Observable<string> {
+    return this.http.delete<string>(this.auth.getUrl('loan/' + id));
+  }
+
 }