From d26ddedd44bb8ffa883d3bf904cc8a4977ca48fb Mon Sep 17 00:00:00 2001 From: Patrick Sun Date: Wed, 5 May 2021 00:13:32 +1000 Subject: [PATCH] payout details with invoice --- src/app/app.module.ts | 2 + .../list-all-rewards.component.html | 9 ++ .../list-all-rewards.component.ts | 23 +++- .../pay-out-details.component.html | 123 ++++++++++++++++++ .../pay-out-details.component.scss | 119 +++++++++++++++++ .../pay-out-details.component.spec.ts | 25 ++++ .../pay-out-details.component.ts | 28 ++++ .../reward-paid/reward-paid.component.html | 3 +- src/app/reward-paid/reward-paid.component.ts | 3 +- 9 files changed, 331 insertions(+), 4 deletions(-) create mode 100644 src/app/pay-out-details/pay-out-details.component.html create mode 100644 src/app/pay-out-details/pay-out-details.component.scss create mode 100644 src/app/pay-out-details/pay-out-details.component.spec.ts create mode 100644 src/app/pay-out-details/pay-out-details.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 37030f9..57ea5f9 100644 --- a/src/app/app.module.ts +++ b/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 { LenderResimacXlsIncomeComponent, LenderResimacPdfIncomeComponent, LenderPepperIncomeComponent, + PayOutDetailsComponent, ], imports: [ BrowserModule, diff --git a/src/app/list-all-rewards/list-all-rewards.component.html b/src/app/list-all-rewards/list-all-rewards.component.html index d9568dc..ba5caef 100644 --- a/src/app/list-all-rewards/list-all-rewards.component.html +++ b/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)" > + + + + + = new EventEmitter(); + 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); + } } diff --git a/src/app/pay-out-details/pay-out-details.component.html b/src/app/pay-out-details/pay-out-details.component.html new file mode 100644 index 0000000..db7969a --- /dev/null +++ b/src/app/pay-out-details/pay-out-details.component.html @@ -0,0 +1,123 @@ +
+
+
+
+
+
+
Receiving End Invoice
+
+ + + approved + + + + + approved + +
+
+
+
+
+
+
+
    +
  • Suite 2304, Level 23,
    • +
  • International Tower One,
    • +
  • 100 Barangaroo Ave,
    • +
  • Barangaroo NSW 2000
    • +
  • Australia
    • +
  • +61 2 8197 0062
    • +
+
+
+
+
+
+

Invoice #BBB1243

+
    +
  • Date: March 15, 2020
    • +
  • Due date: March 30, 2020
    • +
+
+
+
+
+
+
Invoice To: + +
+
Payment Details: +
+
    +
  • +
    Total Amount:
    +
    • +
  • Organization:
    • +
  • BSB:
    • +
  • ACC:
    • +
+
    +
  • +
    $1,090
    +
    • +
  • Hong Kong Bank
    • +
  • Hong Kong
    • +
  • Thurnung street, 21
    • +
+
+
+
+
+
+ +
+
+
+
+
Total due
+
+ + + + + + + + + + + + + + + +
Subtotal:$1,090
Tax: (25%)$27
Total: +
$1,160
+
+
+
+
+
+
+
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
+
+
+
+
+
diff --git a/src/app/pay-out-details/pay-out-details.component.scss b/src/app/pay-out-details/pay-out-details.component.scss new file mode 100644 index 0000000..6c67f09 --- /dev/null +++ b/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 + } + } +} + diff --git a/src/app/pay-out-details/pay-out-details.component.spec.ts b/src/app/pay-out-details/pay-out-details.component.spec.ts new file mode 100644 index 0000000..a951c38 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PayOutDetailsComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PayOutDetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pay-out-details/pay-out-details.component.ts b/src/app/pay-out-details/pay-out-details.component.ts new file mode 100644 index 0000000..46af9b1 --- /dev/null +++ b/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); + } +} diff --git a/src/app/reward-paid/reward-paid.component.html b/src/app/reward-paid/reward-paid.component.html index 4b0bef9..e8bebd5 100644 --- a/src/app/reward-paid/reward-paid.component.html +++ b/src/app/reward-paid/reward-paid.component.html @@ -1 +1,2 @@ -

reward-paid works!

+ + diff --git a/src/app/reward-paid/reward-paid.component.ts b/src/app/reward-paid/reward-paid.component.ts index 710cdfd..161803a 100644 --- a/src/app/reward-paid/reward-paid.component.ts +++ b/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 { + } + }