before changing people model

package.json

     "@progress/kendo-angular-treeview": "^5.1.1",
     "@progress/kendo-angular-upload": "^7.1.0",
     "@progress/kendo-data-query": "^1.5.4",
-    "@progress/kendo-drawing": "^1.10.0",
-    "@progress/kendo-licensing": "^1.1.4",
+    "@progress/kendo-drawing": "^1.2.0",
+    "@progress/kendo-licensing": "^1.0.2",
     "@progress/kendo-svg-icons": "^0.1.2",
     "@progress/kendo-theme-default": "^4.36.0",
     "bootstrap": "^4.6.0",

src/app/app-routing.module.ts

 import {ListIncomeComponent} from './list-income/list-income.component';
 import {UploadDetailComponent} from './upload-detail/upload-detail.component';
 import {LoansAllComponent} from './loans-all/loans-all.component';
+import {RewardsAllComponent} from './rewards-all/rewards-all.component';
 
 
 const routes: Routes = [
   {path : 'broker-profile', component: BrokerProfileComponent,  canActivate: [AuthGuard]},
   {path : 'client-loan-list', component: ClientLoanListComponent, canActivate: [AuthGuard] },
   {path : 'client-profile', component: ClientProfileComponent, canActivate: [AuthGuard] },
-  {path : 'list-all-rewards', component: ListAllRewardsComponent, canActivate: [AuthGuard] },
+  {path : 'list-all-rewards', component: RewardsAllComponent, canActivate: [AuthGuard] },
   {path : 'list-reward-by-broker', component: AdminRewardByBrokerComponent , canActivate: [AuthGuard] },
   {path : 'reward-overview', component: RewardOverviewComponent, canActivate: [AuthGuard] },
   {path : 'reward-paid', component: RewardPaidComponent, canActivate: [AuthGuard] },

src/app/app.module.ts

 import { LenderResimacPdfIncomeComponent } from './pay-in/lender-resimac-pdf-income/lender-resimac-pdf-income.component';
 import { LenderPepperIncomeComponent } from './pay-in/lender-pepper-income/lender-pepper-income.component';
 import { PayOutDetailsComponent } from './pay-out-details/pay-out-details.component';
+import { PDFExportModule } from '@progress/kendo-angular-pdf-export';
+import { RewardSelectComponent } from './reward-select/reward-select.component';
+import { RewardsAllComponent } from './rewards-all/rewards-all.component';
+import { SinglePayoutRewardsListComponent } from './single-payout-rewards-list/single-payout-rewards-list.component';
+
 
 
 
     LenderResimacPdfIncomeComponent,
     LenderPepperIncomeComponent,
     PayOutDetailsComponent,
+    RewardSelectComponent,
+    RewardsAllComponent,
+    SinglePayoutRewardsListComponent,
   ],
     imports: [
         BrowserModule,
         FileSelectModule,
         ProgressBarModule,
         PagerModule,
-        PopupModule
+        PopupModule,
+        PDFExportModule
     ],
   providers: [
     MenuService,

src/app/chart-amount-of-loans/chart-amount-of-loans.component.ts

     this.share = [];
     this.label = [];
     this.count = [];
+    if ( ! Array.isArray(items) ) {
+      return;
+    }
     items.forEach( (value, index) =>{
       this.label.push(value.Kind);
       this.amount.push(value.Amount / 1000000);

src/app/chart-type-of-loans/chart-type-of-loans.component.ts

       map(
         input => {
           const ret = [];
-          input.forEach( (value, index) =>{
-            ret.push({
-              Kind: value.Kind + '  ' + (value.Share * 100).toFixed(2) + '%',
-              Count: value.Count,
-              Share: value.Share,
-              Amount: value.Amount
-            });          });
+          if (Array.isArray(input)) {
+            input.forEach( (value, index) =>{
+              ret.push({
+                Kind: value.Kind + '  ' + (value.Share * 100).toFixed(2) + '%',
+                Count: value.Count,
+                Share: value.Share,
+                Amount: value.Amount
+              });
+            });
+          }
           return ret;
         }
       )

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

-<div class="box">
-
   <kendo-grid
     [data]="gridView"
     [loading]="loading"
     [sort]="state.sort"
     [filter]="state.filter"
     (dataStateChange)="dataStateChange($event)"
+    class="fullheight_grid"
   >
     <ng-template kendoGridToolbarTemplate [position]="'top'">
       <button (click)="onSelectionEmit()" class="k-button">Custom action</button>
 
   </kendo-grid>
 
-</div>

src/app/list-all-rewards/list-all-rewards.component.scss

-.box {
-  display: flex;
-  flex-flow: column;
-  height: calc(100vh - 48px);
+kendo-grid.fullheight_grid{
+  height: 100% !important;
 }
 
-
-kendo-grid{
-  flex: 0 1 auto;
-  height: 100%;
-}
-
-
 .customer-photo{
   display: inline-block;
   width: 32px;

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

 
   public selectTableSettings: SelectableSettings | boolean = true;
   private multipleSelection: SelectableSettings = {
-    checkboxOnly: true,
+    checkboxOnly: false,
     mode: 'multiple',
     drag: false
   };

src/app/models/people.model.ts

-import {Observable} from 'rxjs';
-import {PeopleService} from '../service/people.service';
 
 export class PeopleModel{
   constructor(

src/app/models/reward-ex.model.ts

+import {LoanModel} from './loan.model';
+import {PayOutModel} from './payout.model';
+import {PeopleModel} from './people.model';
+
+export class RewardExModel {
+  public Id: number;
+  public Ts: Date;
+  public ToId: string;
+  public Amount: number;
+  public Description: string;
+  public LoanId: string;
+  public FromId: string;
+  public PayOutId: number;
+
+  public To?: PeopleModel;
+  public Loan?: LoanModel;
+  public From?: PeopleModel;
+  public PayOut?: PayOutModel;
+
+  constructor(payload: Partial<RewardExModel>) {
+    this.Id = payload.Id || 0;
+    if ( payload.Ts ) {
+      this.Ts = new Date(payload.Ts);
+    }else{
+      this.Ts = new Date('1800-01-01');
+    }
+    this.ToId = payload.ToId || '';
+    this.Amount = payload.Amount || 0;
+    this.Description = payload.Description || '';
+    this.LoanId = payload.LoanId || '';
+    this.FromId = payload.FromId || '';
+    this.PayOutId = payload.PayOutId || 0;
+
+    // TODO: must  make reward Ex workable
+    // if (payload.To) {
+    //   this.To = new PeopleModel(payload.To);
+    // }
+    //
+    // if (payload.Loan) {
+    //   this.Loan = new LoanModel(payload.Loan);
+    // }
+    //
+    // if ( payload.From) {
+    //   this.From = new PeopleModel(payload.From);
+    // }
+    //
+    // if ( payload. PayOut ) {
+    //   this.PayOut = new PayOutModel(payload.PayOut);
+    // }
+
+  }
+}

src/app/models/reward.model.ts

     private lc: LoanModelCallBacks
   ){}
 
+
   public get Role(): string {
     return this.lc.getUserRole(this.To);
   }

src/app/pay-out-details/pay-out-details.component.html

+
 <div class="InvoiceBody">
 <div class="container d-flex justify-content-center">
   <div class="row">
     <div class="col-md-12">
       <div class="card">
         <div class="card-header bg-transparent header-elements-inline">
-          <h6 class="card-title">Receiving End Invoice</h6>
+          <app-reward-select></app-reward-select>
           <div class="header-elements">
             <kendo-chip
               [removable]="true"
             </kendo-chip>
           </div>
         </div>
+        <kendo-pdf-export #pdf paperSize="A4" margin="0.5cm">
         <div class="card-body">
           <div class="row">
             <div class="col-sm-6">
               <div class="mb-4 ">
                 <div class="text-sm-right">
                   <h4 class="invoice-color mb-2 mt-md-2">Invoice #BBB1243</h4>
-                  <ul class="list list-unstyled mb-0">
-                    <li>Date: <span class="font-weight-semibold">March 15, 2020</span></li>
-                    <li>Due date: <span class="font-weight-semibold">March 30, 2020</span></li>
-                  </ul>
+                  <table class="invoice-to-details">
+                    <tr>
+                      <td class="left">To</td><td class="middle">:</td><td class="right"><h5 class="my-2">Tibco Turang</h5></td>
+                    </tr>
+                    <tr>
+                      <td class="left">email</td><td class="middle">:</td><td class="right">abc@hotmail.com</td>
+                    </tr>
+                    <tr>
+                      <td class="left">Date</td><td class="middle">:</td><td class="right">March 15, 2020</td>
+                    </tr>
+                    <tr>
+                      <td class="left">Pay Date</td><td class="middle">:</td><td class="right">March 15, 2020</td>
+                    </tr>
+                    <tr>
+                      <td class="left">Paid To</td><td class="middle">:</td><td class="right">BSB/ACC</td>
+                    </tr>
+
+                  </table>
                 </div>
               </div>
             </div>
           </div>
-          <div class="d-md-flex flex-md-wrap">
-            <div class="mb-4 mb-md-2 text-left"> <span class="text-muted">Invoice To:</span>
-              <ul class="list list-unstyled mb-0">
-                <li>
-                  <h5 class="my-2">Tibco Turang</h5>
-                </li>
-                <li>Gurung Street</li>
-                <li>23 BB Lane</li>
-                <li>Hong kong</li>
-                <li><a href="#" data-abc="true">tibco@samantha.com</a></li>
-              </ul>
-            </div>
-            <div class="mb-2 ml-auto"> <span class="text-muted">Payment Details:</span>
-              <div class="d-flex flex-wrap wmin-md-400">
-                <ul class="list list-unstyled mb-0 text-left">
-                  <li>
-                    <h5 class="my-2">Total Amount:</h5>
-                  </li>
-                  <li>Organization:</li>
-                  <li>BSB:</li>
-                  <li>ACC:</li>
-                </ul>
-                <ul class="list list-unstyled text-right mb-0 ml-auto">
-                  <li>
-                    <h5 class="font-weight-semibold my-2 amount">$1,090</h5>
-                  </li>
-                  <li><span class="font-weight-semibold">Hong Kong Bank</span></li>
-                  <li>Hong Kong</li>
-                  <li>Thurnung street, 21</li>
-                </ul>
-              </div>
-            </div>
-          </div>
         </div>
         <div class="table-responsive">
-          <app-list-all-rewards></app-list-all-rewards>
+          <app-single-payout-rewards-list></app-single-payout-rewards-list>
         </div>
         <div class="card-body">
           <div class="d-md-flex flex-md-wrap">
                   </tbody>
                 </table>
               </div>
-              <div class="text-right mt-3"> <button type="button" class="btn btn-primary"><b><i class="fa fa-paper-plane-o mr-1"></i></b> Send invoice</button> </div>
             </div>
           </div>
         </div>
+        </kendo-pdf-export>
+        <div class="text-right mt-3"> <button type="button" class="btn btn-primary" (click)="pdf.saveAs('invoice.pdf')"><b><i class="fa fa-paper-plane-o mr-1"></i></b> Send invoice</button> </div>
         <div class="card-footer"> <span class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Duis aute irure dolor in reprehenderit</span> </div>
       </div>
     </div>
   </div>
 </div>
 </div>
+

src/app/pay-out-details/pay-out-details.component.scss

   background-color: darkgrey;
   padding-top:20px;
   padding-bottom:20px;
+  height:100%;
 
   .container{
     padding:0;
       color: #ca974d !important
     }
 
+    table.invoice-to-details {
+      display:inline-block;
+      max-width: 400px;
+      td.left {
+        text-align: right;
+      }
+      td.middle{
+        width:15px;
+        text-align:center;
+      }
+      td.right{
+        text-align: right;
+      }
+    }
+
     .card-header {
       padding: .9375rem 1.25rem;
       margin-bottom: 0;

src/app/reward-paid/reward-paid.component.html

+<div class="box">
+  <app-pay-out-details></app-pay-out-details>
+</div>
 
-<app-pay-out-details></app-pay-out-details>

src/app/reward-paid/reward-paid.component.scss

+div.box{
+  height: calc( 100vh - 48px);
+  overflow: scroll;
+}

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

+<div #anchor class="anchor wrapper">
+  <button kendoButton *ngIf="!readOnly" (click)="onToggle()" [icon]="'edit'" ></button>
+</div>
+
+<kendo-popup [offset]="Offset" (anchorViewportLeave)="showPopup = false" *ngIf="showPopup">
+  <button kendoButton look="flat"
+          class="close-popup" icon="close-circle" style="float:right;"
+          (click)="onToggle()"
+  ></button>
+  <div class='popup-content'>
+      <app-list-all-rewards></app-list-all-rewards>
+  </div>
+</kendo-popup>

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

+.popup-content {
+  box-shadow: 1px 1px 10px black;
+  padding: 10px;
+  width: calc(100vw - 20px);
+  height:calc(100vh - 96px);
+  color: #787878;
+  background-color: #ca974d29;
+  border: 1px solid rgba(0,0,0,.05);
+  border-radius:0 20px 0 0;
+}
+
+div.anchor.wrapper {
+  width:100%;
+  position: relative;
+
+  button{
+    position: absolute;
+    /* left: 0px; */
+    right: 0px;
+    top: -10px;
+    color: red;
+    border-radius: 100%;
+    z-index: 1;
+  }
+}
+
+button.close-popup{
+  float: right;
+  position: absolute;
+  right: 0px;
+  border-radius: 100%;
+  z-index: 1;
+}

src/app/reward-select/reward-select.component.spec.ts

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

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

+import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {ListAllLoansComponent} from '../list-all-loans/list-all-loans.component';
+import {LoanModel} from '../models/loan.model';
+import {RewardModel} from '../models/reward.model';
+
+@Component({
+  selector: 'app-reward-select',
+  templateUrl: './reward-select.component.html',
+  styleUrls: ['./reward-select.component.scss']
+})
+export class RewardSelectComponent implements OnInit {
+  // @ViewChild('list', {static: false} ) list: list-all;
+  @Input() Max = 1; // we do not support multiple loan selection at the moment
+  @Input() readOnly = false;
+  @Output() valueChange: EventEmitter<RewardModel[]> = new EventEmitter<RewardModel[]>();
+  public Rewards: RewardModel[];
+
+  // popup
+  public showPopup = false;
+  public Offset = { left: 10, top: 48 };
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  public onToggle(): void {
+    this.showPopup = !this.showPopup;
+  }
+}

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

+<div class="box">
+  <app-list-all-rewards></app-list-all-rewards>
+</div>

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

+div.box{
+  height: calc(100vh - 48px);
+}

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

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

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

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

src/app/single-payout-rewards-list/single-payout-rewards-list.component.html

+<kendo-grid [scrollable]="false">
+</kendo-grid>
+

src/app/single-payout-rewards-list/single-payout-rewards-list.component.spec.ts

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

src/app/single-payout-rewards-list/single-payout-rewards-list.component.ts

+import {Component, Input, OnInit} from '@angular/core';
+import {RewardModel} from '../models/reward.model';
+
+@Component({
+  selector: 'app-single-payout-rewards-list',
+  templateUrl: './single-payout-rewards-list.component.html',
+  styleUrls: ['./single-payout-rewards-list.component.scss']
+})
+export class SinglePayoutRewardsListComponent implements OnInit {
+  @Input() items: RewardModel[] = [];
+  constructor() { }
+
+  ngOnInit(): void {
+    // this.items.push(new RewardModel({}));
+  }
+
+}