payout details with invoice

src/app/app.module.ts

@@ -106,6 +106,7 @@ import { LenderConnectiveIncomeComponent } from './pay-in/lender-connective-inco
 import { LenderResimacXlsIncomeComponent } from './pay-in/lender-resimac-xls-income/lender-resimac-xls-income.component';
 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';
 
 
 
@@ -181,6 +182,7 @@ export function initializeApp(appConfig: AppConfig): () => Promise<void> {
     LenderResimacXlsIncomeComponent,
     LenderResimacPdfIncomeComponent,
     LenderPepperIncomeComponent,
+    PayOutDetailsComponent,
   ],
     imports: [
         BrowserModule,

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

@@ -6,6 +6,10 @@
     [sortable]="true"
     [pageable]="true"
     [filterable]="true"
+    [selectable]="selectTableSettings"
+
+    kendoGridSelectBy="Id"
+    [selectedKeys]="selected"
 
     [pageSize]="state.take"
     [skip]="state.skip"
@@ -13,6 +17,11 @@
     [filter]="state.filter"
     (dataStateChange)="dataStateChange($event)"
   >
+    <ng-template kendoGridToolbarTemplate [position]="'top'">
+      <button (click)="onSelectionEmit()" class="k-button">Custom action</button>
+    </ng-template>
+
+    <kendo-grid-checkbox-column *ngIf="EnableSelectButton" width="50" ></kendo-grid-checkbox-column>
     <kendo-grid-column field="Id" width="100">
       <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
         <kendo-grid-string-filter-cell

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

@@ -1,9 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {AuthService} from '../service/auth.service';
 import {HttpClient} from '@angular/common/http';
 import {RewardByUserModel} from '../models/reward-by-user.model';
-import {DataStateChangeEvent, GridDataResult,} from '@progress/kendo-angular-grid';
+import {DataStateChangeEvent, GridDataResult, SelectableSettings,} from '@progress/kendo-angular-grid';
 import {State, process} from '@progress/kendo-data-query';
+import {PayInModel} from '../models/pay-in.model';
+import {RewardModel} from '../models/reward.model';
 
 @Component({
   selector: 'app-list-all-rewards',
@@ -21,6 +23,19 @@ export class ListAllRewardsComponent implements OnInit {
   };
   public loading = true;
 
+  public selectTableSettings: SelectableSettings | boolean = true;
+  private multipleSelection: SelectableSettings = {
+    checkboxOnly: true,
+    mode: 'multiple',
+    drag: false
+  };
+
+  public EnableSelectButton = true;
+  @Input() selectedRewards: RewardModel[] = [];
+  public selected: number[] = [];
+
+  @Output() RewardsSelected: EventEmitter<PayInModel[]> = new EventEmitter<PayInModel[]>();
+
   constructor(private auth: AuthService, private http: HttpClient) { }
 
   ngOnInit(): void {
@@ -55,4 +70,8 @@ export class ListAllRewardsComponent implements OnInit {
     const url = this.auth.getUrl('avatar/') + peopleId;
     return 'url("' + url + '")';
   }
+
+  public onSelectionEmit(): void {
+    console.log(this.selected);
+  }
 }

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

@@ -0,0 +1,123 @@
+<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>
+          <div class="header-elements">
+            <kendo-chip
+              [removable]="true"
+              (remove)="onRemoveChip('somelabel', $event)"
+            >
+              <span class="k-avatar-image invoice-chip" [ngStyle]="{'background-image': background}"></span>
+              <span> approved</span>
+            </kendo-chip>
+
+            <kendo-chip
+              [removable]="false"
+              (remove)="onRemoveChip('somelabel', $event)"
+            >
+              <span class="k-avatar-image invoice-chip" [ngStyle]="{'background-image': background}"></span>
+              <span> approved</span>
+            </kendo-chip>
+          </div>
+        </div>
+        <div class="card-body">
+          <div class="row">
+            <div class="col-sm-6">
+              <div class="mb-4 pull-left">
+                <h6 class="left"><img src="assets/img/logo.png"></h6>
+                <ul class="list list-unstyled mb-0 text-left">
+                  <li>Suite 2304, Level 23, </li>
+                  <li>International Tower One, </li>
+                  <li>100 Barangaroo Ave,</li>
+                  <li>Barangaroo NSW 2000</li>
+                  <li>Australia</li>
+                  <li>+61 2 8197 0062</li>
+                </ul>
+              </div>
+            </div>
+            <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>
+                </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>
+        </div>
+        <div class="card-body">
+          <div class="d-md-flex flex-md-wrap">
+            <div class="pt-2 mb-3 wmin-md-400 ml-auto">
+              <h6 class="mb-3 text-left">Total due</h6>
+              <div class="table-responsive">
+                <table class="table">
+                  <tbody>
+                  <tr>
+                    <th class="text-left">Subtotal:</th>
+                    <td class="text-right">$1,090</td>
+                  </tr>
+                  <tr>
+                    <th class="text-left">Tax: <span class="font-weight-normal">(25%)</span></th>
+                    <td class="text-right">$27</td>
+                  </tr>
+                  <tr>
+                    <th class="text-left">Total:</th>
+                    <td class="text-right text-primary">
+                      <h5 class="font-weight-semibold">$1,160</h5>
+                    </td>
+                  </tr>
+                  </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>
+        <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

@@ -0,0 +1,119 @@
+div.InvoiceBody {
+  margin: 0;
+  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: .8125rem;
+  font-weight: 400;
+  line-height: 1.5385;
+  color: #333;
+  text-align: left;
+  background-color: darkgrey;
+  padding-top:20px;
+  padding-bottom:20px;
+
+  .container{
+    padding:0;
+
+    kendo-chip {
+      margin-left: 10px;
+    }
+    span.k-avatar-image.invoice-chip{
+      display:inline-block;
+      width:20px;
+      height:20px;
+      vertical-align:bottom;
+      border-radius: 50%;
+    }
+
+    .card {
+      position: relative;
+      display: -ms-flexbox;
+      display: flex;
+      -ms-flex-direction: column;
+      flex-direction: column;
+      min-width: 0;
+      word-wrap: break-word;
+      background-color: #fff;
+      background-clip: border-box;
+      border: 1px solid rgba(0, 0, 0, .125);
+      border-radius: .1875rem
+    }
+
+    .card-img-actions {
+      position: relative
+    }
+
+    .card-body {
+      -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+      padding: 1.25rem;
+      text-align: center;
+
+      h6.left {
+        text-align:left;
+      }
+
+      h5.amount{
+        color:red;
+      }
+    }
+
+    .card-title {
+      margin-top: 10px;
+      font-size: 17px
+    }
+
+    .invoice-color {
+      color: #ca974d !important
+    }
+
+    .card-header {
+      padding: .9375rem 1.25rem;
+      margin-bottom: 0;
+      background-color: rgba(0, 0, 0, .02);
+      border-bottom: 1px solid rgba(0, 0, 0, .125)
+    }
+
+    a {
+      text-decoration: none !important
+    }
+
+    .btn-light {
+      color: #333;
+      background-color: #fafafa;
+      border-color: #ddd
+    }
+
+    .header-elements-inline {
+      display: -ms-flexbox;
+      display: flex;
+      -ms-flex-align: center;
+      align-items: center;
+      -ms-flex-pack: justify;
+      justify-content: space-between;
+      -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap
+    }
+
+    @media (min-width: 768px) {
+      .wmin-md-400 {
+        min-width: 400px !important
+      }
+    }
+
+    .btn-primary {
+      color: #fff;
+      background-color: #ca974d;
+      border-color:white;
+    }
+
+    .btn-labeled>b {
+      position: absolute;
+      top: -1px;
+      background-color: #ca974d;
+      display: block;
+      line-height: 1;
+      padding: .62503rem
+    }
+  }
+}
+

src/app/pay-out-details/pay-out-details.component.spec.ts

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

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

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import {ChipRemoveEvent} from '@progress/kendo-angular-buttons';
+
+@Component({
+  selector: 'app-pay-out-details',
+  templateUrl: './pay-out-details.component.html',
+  styleUrls: ['./pay-out-details.component.scss']
+})
+export class PayOutDetailsComponent implements OnInit {
+  sales = [];
+
+  background = "url('https://svr2021.lawipac.com:8080/api/v1/avatar/0')";
+  constructor() { }
+
+  ngOnInit(): void {
+    this.sales = this.range(1, 20);
+    console.log(this.sales);
+  }
+
+  range(start, end) {
+    if(start === end) return [start];
+    return [start, ...this.range(start + 1, end)];
+  }
+
+  onRemoveChip(s: string, e: ChipRemoveEvent): void {
+    console.log(s, e);
+  }
+}

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

@@ -1 +1,2 @@
-<p>reward-paid works!</p>
+
+<app-pay-out-details></app-pay-out-details>

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

@@ -6,10 +6,11 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./reward-paid.component.scss']
 })
 export class RewardPaidComponent implements OnInit {
-
   constructor() { }
 
   ngOnInit(): void {
+
   }
 
+
 }