From b13c6ccab0677e46898538831d2e73e832492140 Mon Sep 17 00:00:00 2001 From: Alexandra Usacheva Date: Wed, 10 Oct 2018 16:43:35 +0300 Subject: [PATCH] FE-688: payout search UX update. (#16) --- src/app/payouts/payouts.component.html | 2 +- src/app/payouts/payouts.component.ts | 20 +++++++----------- src/app/payouts/payouts.service.ts | 21 ++++++++++--------- .../search-form/search-form.service.ts | 20 +++++++++++++----- .../payouts/search-form/to-search-params.ts | 5 ++++- 5 files changed, 39 insertions(+), 29 deletions(-) diff --git a/src/app/payouts/payouts.component.html b/src/app/payouts/payouts.component.html index 560f6301..73570889 100644 --- a/src/app/payouts/payouts.component.html +++ b/src/app/payouts/payouts.component.html @@ -20,6 +20,6 @@ - + diff --git a/src/app/payouts/payouts.component.ts b/src/app/payouts/payouts.component.ts index f2b05bca..513d619c 100644 --- a/src/app/payouts/payouts.component.ts +++ b/src/app/payouts/payouts.component.ts @@ -1,8 +1,8 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { MatSnackBar } from '@angular/material'; -import * as moment from 'moment'; +import { Observable } from 'rxjs'; -import { Payout, PayoutsResponse } from '../papi/model'; +import { Payout } from '../papi/model'; import { PayoutsService } from './payouts.service'; import { SearchFormService } from './search-form/search-form.service'; import { PayoutSearchParams } from '../papi/params'; @@ -18,21 +18,18 @@ import { PayoutSearchParams } from '../papi/params'; export class PayoutsComponent implements OnInit { isLoading: boolean; - payouts: Payout[]; + payouts$: Observable; selectedPayouts: Payout[] = []; constructor(private payoutsService: PayoutsService, private snackBar: MatSnackBar, - private cdRef: ChangeDetectorRef) { + private cdRef: ChangeDetectorRef, + private searchFormService: SearchFormService) { } ngOnInit() { - this.getPayouts({ - fromTime: moment().subtract(1, 'weeks').utc().format(), - toTime: moment().add(1, 'days').utc().format(), - minAmount: 0, - maxAmount: 1000 - }); + this.payouts$ = this.payoutsService.payouts$; + this.getPayouts(this.searchFormService.initSearchParams); } tableOnChange(selectedPayouts: Payout[]) { @@ -42,9 +39,8 @@ export class PayoutsComponent implements OnInit { getPayouts(params: PayoutSearchParams) { this.isLoading = true; - return this.payoutsService.get(params).subscribe((response: PayoutsResponse) => { + return this.payoutsService.get(params).subscribe(() => { this.isLoading = false; - this.payouts = response.payouts; }, (e) => { this.isLoading = false; const message = e.message; diff --git a/src/app/payouts/payouts.service.ts b/src/app/payouts/payouts.service.ts index e9ab6bd5..da866828 100644 --- a/src/app/payouts/payouts.service.ts +++ b/src/app/payouts/payouts.service.ts @@ -1,44 +1,45 @@ import { Injectable } from '@angular/core'; -import { Observable } from 'rxjs'; +import { Observable, Subject } from 'rxjs'; import { map, switchMap } from 'rxjs/operators'; -import { Payout, PayoutsResponse } from '../papi/model'; +import { Payout } from '../papi/model'; import { PayoutCancelParams, PayoutCreateParams, PayoutSearchParams } from '../papi/params'; import { PayoutsService as PayoutsPapiService } from '../papi/payouts.service'; @Injectable() export class PayoutsService { + payouts$: Subject = new Subject(); private lastSearchParams: PayoutSearchParams; constructor(private payoutsPapiService: PayoutsPapiService) { } - get(params: PayoutSearchParams): Observable { + get(params: PayoutSearchParams): Observable { this.lastSearchParams = params; - return this.payoutsPapiService.getPayouts(params); + return this.payoutsPapiService.getPayouts(params) + .pipe( + map((response) => this.payouts$.next(response.payouts)) + ); } confirm(payoutsIds: string[]): Observable { return this.payoutsPapiService.confirmPayouts(payoutsIds) .pipe( - switchMap(() => this.get(this.lastSearchParams)), - map(() => null) + switchMap(() => this.get(this.lastSearchParams)) ); } pay(payoutsIds: string[]): Observable { return this.payoutsPapiService.pay(payoutsIds) .pipe( - switchMap(() => this.get(this.lastSearchParams)), - map(() => null) + switchMap(() => this.get(this.lastSearchParams)) ); } cancel(payoutId: string, params: PayoutCancelParams): Observable { return this.payoutsPapiService.cancelPayout(payoutId, params) .pipe( - switchMap(() => this.get(this.lastSearchParams)), - map(() => null) + switchMap(() => this.get(this.lastSearchParams)) ); } diff --git a/src/app/payouts/search-form/search-form.service.ts b/src/app/payouts/search-form/search-form.service.ts index d1d9a135..ef8cb7bb 100644 --- a/src/app/payouts/search-form/search-form.service.ts +++ b/src/app/payouts/search-form/search-form.service.ts @@ -4,6 +4,7 @@ import * as moment from 'moment'; import values from 'lodash-es/values'; import { PayoutStatus } from '../../papi/model'; +import { PayoutSearchParams } from '../../papi/params'; @Injectable() export class SearchFormService { @@ -12,20 +13,29 @@ export class SearchFormService { payoutStatuses: string[]; + initSearchParams: PayoutSearchParams = { + fromTime: moment().startOf('day').utc().format(), + toTime: moment().add(1, 'days').startOf('day').utc().format(), + minAmount: 0, + maxAmount: 100000000000, + status: PayoutStatus.paid + }; + constructor(private fb: FormBuilder) { this.form = this.prepareForm(); this.payoutStatuses = values(PayoutStatus); } private prepareForm(): FormGroup { + const {status, fromTime, toTime, minAmount, maxAmount} = this.initSearchParams; return this.fb.group({ + status, + fromTime, + toTime, payoutIds: '', - status: '', - fromTime: moment().subtract(1, 'weeks').utc().toDate(), - toTime: moment().add(1, 'days').utc().toDate(), currencyCode: '', - minAmount: [0, [Validators.required, Validators.min(0)]], - maxAmount: [1000, [Validators.required, Validators.min(0)]] + minAmount: [minAmount / 100, [Validators.required, Validators.min(0)]], + maxAmount: [maxAmount / 100, [Validators.required, Validators.min(0)]] }); } } diff --git a/src/app/payouts/search-form/to-search-params.ts b/src/app/payouts/search-form/to-search-params.ts index 90347394..bfb76ac0 100644 --- a/src/app/payouts/search-form/to-search-params.ts +++ b/src/app/payouts/search-form/to-search-params.ts @@ -1,4 +1,4 @@ -import { PayoutSearchParams } from '../../papi/params/index'; +import { PayoutSearchParams } from '../../papi/params'; import reduce from 'lodash-es/reduce'; import * as moment from 'moment'; import toNumber from 'lodash-es/toNumber'; @@ -16,6 +16,9 @@ export const formValueToSearchParams = (formValues: object): PayoutSearchParams [key]: toNumber(toString(value).replace(/\s/g, '').replace(/,/g, '.')) * 100 } : acc; } + if (key === 'currencyCode') { + return value ? {...acc, [key]: value.toUpperCase()} : acc; + } if (value === '') { return acc; }