From 43c5af933f75805d8cfb42d50f30e47e138b8f33 Mon Sep 17 00:00:00 2001
From: Patrick Sun <patrick@lawipac.com>
Date: Sun, 21 Mar 2021 19:20:24 +1100
Subject: [PATCH] broker earnings displayed successfully groupped with advanced
 features.

---
 .../broker-reward/broker-reward.component.html | 18 +++++++-----------
 .../broker-reward/broker-reward.component.ts   | 18 +++++++++++++++---
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/app/broker-reward/broker-reward.component.html b/src/app/broker-reward/broker-reward.component.html
index f7129bd..fe02f49 100644
--- a/src/app/broker-reward/broker-reward.component.html
+++ b/src/app/broker-reward/broker-reward.component.html
@@ -1,5 +1,7 @@
 <kendo-grid
-  [data]="gridData"
+  [groupable]="true"
+  [data]="gridView"
+  (groupChange)="groupChange($event)"
 >
   <kendo-grid-column field="Id"></kendo-grid-column>
 
@@ -10,14 +12,14 @@
   </kendo-grid-column>
   <kendo-grid-column field="Description"></kendo-grid-column>
 
-  <kendo-grid-column field="Item" Title="From Loan"></kendo-grid-column>
-  <kendo-grid-column field="Status">
+  <kendo-grid-column field="Item" title="From Loan"></kendo-grid-column>
+  <kendo-grid-column field="Status" title="Loan Status">
     <ng-template kendoGridCellTemplate let-dataItem>
       <span *ngIf="dataItem.Status != 'none'" class="badge badge-success">{{dataItem.Status}}</span>
     </ng-template>
   </kendo-grid-column>
 
-  <kendo-grid-column field="Ts">
+  <kendo-grid-column field="Ts" title="Date Rewarded">
     <ng-template kendoGridCellTemplate let-dataItem >
       <div *ngIf="dataItem.Settlement != null" >
         {{  dataItem.Ts | date: 'yyyy-MM-dd' }}
@@ -26,13 +28,7 @@
   </kendo-grid-column>
 
 
-  <kendo-grid-column field="Settlement">
-    <ng-template kendoGridCellTemplate let-dataItem >
-      <div *ngIf="dataItem.Settlement != null" >
-        {{  dataItem.Settlement | date: 'yyyy-MM-dd' }}
-      </div>
-    </ng-template>
-  </kendo-grid-column>
+  <kendo-grid-column field="PayOutId" title="Payment Record">  </kendo-grid-column>
 
 
 </kendo-grid>
diff --git a/src/app/broker-reward/broker-reward.component.ts b/src/app/broker-reward/broker-reward.component.ts
index 7aacae4..6e6b4d4 100644
--- a/src/app/broker-reward/broker-reward.component.ts
+++ b/src/app/broker-reward/broker-reward.component.ts
@@ -1,10 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import {HttpClient} from '@angular/common/http';
-import {GridDataResult} from '@progress/kendo-angular-grid';
-import {Observable} from 'rxjs';
 import {AuthService} from '../service/auth.service';
-import {map} from 'rxjs/operators';
 import {RewardByUserModel} from '../models/reward-by-user.model';
+import {DataResult, GroupDescriptor, process} from '@progress/kendo-data-query';
 
 @Component({
   selector: 'app-broker-reward',
@@ -15,6 +13,9 @@ export class BrokerRewardComponent implements OnInit {
 
   public gridData: RewardByUserModel[] = [] ;
 
+  public groups: GroupDescriptor[] = [{ field: 'Description' }, { field: 'Item' } ];
+  public gridView: DataResult;
+
   constructor(private http: HttpClient, private auth: AuthService ) { }
 
   ngOnInit(): void {
@@ -24,7 +25,18 @@ export class BrokerRewardComponent implements OnInit {
         rsp.forEach(v => {
           this.gridData.push(new RewardByUserModel(v));
         });
+        this.loadRewards();
       }
     );
   }
+
+  public groupChange(groups: GroupDescriptor[]): void {
+    this.groups = groups;
+    this.loadRewards();
+  }
+
+  private loadRewards(): void {
+    this.gridView = process(this.gridData, { group: this.groups });
+  }
+
 }