diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a58d81b..74e335d 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -52,6 +52,7 @@ import { ChartRecentTenLoansComponent } from './chart-recent-ten-loans/chart-rec import { ChartTopBrokersComponent } from './chart-top-brokers/chart-top-brokers.component'; import { ListAllLoansComponent } from './list-all-loans/list-all-loans.component'; import { TopBarComponent } from './top-bar/top-bar.component'; +import {LoanSummaryService} from './service/loan_summary.service'; @@ -111,6 +112,7 @@ import { TopBarComponent } from './top-bar/top-bar.component'; AuthGuard, AuthService, WebSocketService, + LoanSummaryService, { provide: HTTP_INTERCEPTORS, useClass: AuthHttpInterceptor, diff --git a/src/app/list-all-loans/list-all-loans.component.html b/src/app/list-all-loans/list-all-loans.component.html index 2976bd7..17cbd68 100644 --- a/src/app/list-all-loans/list-all-loans.component.html +++ b/src/app/list-all-loans/list-all-loans.component.html @@ -1 +1,113 @@ -

list-all-loans works!

+ + + +

{{dataItem.Index}}

+ + + + + +
+
+
{{ p }}
+
+ + + + + +
+
+
{{ p }}
+
+ + + + + +
+
+
{{ p }}
+
+ + + + + + + + + + + + + + + + + {{dataItem.Status}} + + + + + + + + + + + {{ dataItem.Amount | currency }} + + + + + + {{ dataItem.Balance | currency }} + + + + + + {{ dataItem.OffsetBalance | currency }} + + + + + + {{ dataItem.Trail | currency }} + + + + + + + + + + + + {{ dataItem.PayOut | currency }} + + + + +
+
{{ dataItem.Item }} details should be here.
+ +
+ diff --git a/src/app/list-all-loans/list-all-loans.component.scss b/src/app/list-all-loans/list-all-loans.component.scss index e69de29..f87900e 100644 --- a/src/app/list-all-loans/list-all-loans.component.scss +++ b/src/app/list-all-loans/list-all-loans.component.scss @@ -0,0 +1,73 @@ +.fullheight_grid { + height: calc(100vh - 48px) !important; +} + +.k-grid td:first-child{ + vertical-align: top; +} +.k-grid td.topAlign{ + vertical-align: top; +} + +.k-grid td.alignStatus{ + vertical-align: top; + text-align: left; +} + +.customer-photo{ + display: inline-block; + width: 32px; + height: 32px; + border-radius: 50%; + background-size: 32px 35px; + background-position: center center; + vertical-align: middle; + line-height: 32px; + box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2); + margin-left: 5px; +} + +.customer-name { + display: inline-block; + vertical-align: middle; + line-height: 32px; + padding-left: 10px; +} + +.k-grid-header .k-header.colGroupPeople, +.k-grid-header .k-header.colClient, +.k-grid-header .k-header.colBroker, +.k-grid-header .k-header.colOtherRewarder +{ + text-align:center; +} + +.k-grid-header .k-header.colGroupLoanDetails, +.k-grid-header .k-header.colGroupLenderDetails, +.k-grid-header .k-header.colGroupIncomeDistribution{ + border-left: 5px solid #ffeabe !important; +} +.colRating, .colAmount, .colPayOut{ + border-left: 5px solid #ffeabe !important; +} + +.colTrail{ + font-width: 300; + color: green ; + //border-left: 2px solid green !important; + //border-right: 2px solid green !important; + border-bottom: 2px solid green !important; +} + +.k-grid-header .k-header.colIncomeDistribution, +.k-grid-header .k-header.colGroupLoanDetails{ + background-color: #ffeabe; +} + +.red { + color: #d9534f; +} + +.text-bold { + font-weight: 600; +} diff --git a/src/app/list-all-loans/list-all-loans.component.spec.ts b/src/app/list-all-loans/list-all-loans.component.spec.ts index 0d208c1..c08ab49 100644 --- a/src/app/list-all-loans/list-all-loans.component.spec.ts +++ b/src/app/list-all-loans/list-all-loans.component.spec.ts @@ -22,4 +22,8 @@ describe('ListAllLoansComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + + + }); diff --git a/src/app/list-all-loans/list-all-loans.component.ts b/src/app/list-all-loans/list-all-loans.component.ts index 315dd76..ab97aff 100644 --- a/src/app/list-all-loans/list-all-loans.component.ts +++ b/src/app/list-all-loans/list-all-loans.component.ts @@ -1,15 +1,59 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core'; +import {DataStateChangeEvent, GridComponent, GridDataResult} from '@progress/kendo-angular-grid'; +import {Observable} from 'rxjs'; +import {SortDescriptor} from '@progress/kendo-data-query'; +import {LoanSummaryService} from '../service/loan_summary.service'; +import {images} from '../transaction-list/images'; +import {AuthService} from '../service/auth.service'; @Component({ selector: 'app-list-all-loans', templateUrl: './list-all-loans.component.html', - styleUrls: ['./list-all-loans.component.scss'] + styleUrls: ['./list-all-loans.component.scss'], + encapsulation: ViewEncapsulation.None, }) export class ListAllLoansComponent implements OnInit { + public view: LoanSummaryService; + public sort: Array = []; + public pageSize = 10; + public skip = 0; - constructor() { } + @ViewChild(GridComponent, { static: true }) public grid: GridComponent; - ngOnInit(): void { + + constructor(private service: LoanSummaryService, private auth: AuthService) { } + + public ngOnInit(): void { + // Bind directly to the service as it is a Subject + this.view = this.service; + + // Fetch the data with the initial state + this.loadData(); + } + + public dataStateChange({ skip, take, sort }: DataStateChangeEvent): void { + // Save the current state of the Grid component + this.skip = skip; + this.pageSize = take; + this.sort = sort; + + // Reload the data with the new state + this.loadData(); + + // console.log(this.skip, this.pageSize, this.sort); + + // Expand the first row initially + this.grid.expandRow(0); + } + + private loadData(): void { + this.service.query({ skip: this.skip, take: this.pageSize, sort: this.sort }); + } + + private photoURL(peopleId: any): string { + let url = this.auth.getUrl('avatar/') + peopleId; + console.log(url, peopleId); + return 'url("' + url + '")'; } } diff --git a/src/app/service/loan_summary.service.ts b/src/app/service/loan_summary.service.ts new file mode 100644 index 0000000..e68f0c2 --- /dev/null +++ b/src/app/service/loan_summary.service.ts @@ -0,0 +1,84 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { GridDataResult } from '@progress/kendo-angular-grid'; +import { toODataString } from '@progress/kendo-data-query'; +import { Observable, BehaviorSubject } from 'rxjs'; +import { map, tap } from 'rxjs/operators'; +import {AuthService} from './auth.service'; + +export abstract class LoanQueryService extends BehaviorSubject { + public loading: boolean; + + private BASE_URL = ''; + + constructor( + private http: HttpClient, + private auth: AuthService, + protected tableName: string + ) { + super(null); + this.BASE_URL = this.auth.getUrl('grid/loan/'); + } + + public query(state: any): void { + this.fetch(this.tableName, state) + .subscribe(x => super.next(x)); + } + + protected fetch(tableName: string, state: any): Observable { + const queryStr = `${toODataString(state)}&$count=true`; + this.loading = true; + + return this.http + .get(`${this.BASE_URL}${tableName}?${queryStr}`) + .pipe( + map(response => { + console.log( response.data[0]['Settlement']); + console.log( response.data[0]['LastPayInDate']); + return response; + }), + tap(() => this.loading = false) + ); + } +} + +@Injectable() +export class ProductsService extends LoanQueryService { + constructor(http: HttpClient, auth: AuthService) { super(http, auth, 'Products'); } + + public queryForCategory({ CategoryID }: { CategoryID: number }, state?: any): void { + this.query(Object.assign({}, state, { + filter: { + filters: [{ + field: 'CategoryID', operator: 'eq', value: CategoryID + }], + logic: 'and' + } + })); + } + + public queryForProductName(ProductName: string, state?: any): void { + this.query(Object.assign({}, state, { + filter: { + filters: [{ + field: 'ProductName', operator: 'contains', value: ProductName + }], + logic: 'and' + } + })); + } + +} + +@Injectable() +export class LoanSummaryService extends LoanQueryService { + constructor(http: HttpClient, auth: AuthService) { super(http, auth, 'full-loan-overview'); } + + queryAll(st?: any): Observable { + const state = Object.assign({}, st); + delete state.skip; + delete state.take; + + return this.fetch(this.tableName, state); + } +}