valitydev/control-center
14
0
Fork 0
mirror of https://github.com/valitydev/control-center.git synced 2024-11-06 02:25:17 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FE-688: payout search UX update. (#16)

Browse Source
This commit is contained in:
Alexandra Usacheva 2018-10-10 16:43:35 +03:00 committed by GitHub
parent dda719f11d
commit b13c6ccab0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 39 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/payouts/payouts.component.html
View File

@ -20,6 +20,6 @@
<cc-payouts-actions [selectedPayouts]="selectedPayouts"></cc-payouts-actions>
</mat-card-content>
</mat-card>
<cc-payouts-table [payouts]="payouts" (valueChanges)="tableOnChange($event)"></cc-payouts-table>
<cc-payouts-table [payouts]="payouts$ | async" (valueChanges)="tableOnChange($event)"></cc-payouts-table>
</div>
</div>

20
src/app/payouts/payouts.component.ts
View File

@ -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<Payout[]>;
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;

21
src/app/payouts/payouts.service.ts
View File

@ -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<Payout[]> = new Subject();
private lastSearchParams: PayoutSearchParams;
constructor(private payoutsPapiService: PayoutsPapiService) {
}
get(params: PayoutSearchParams): Observable<PayoutsResponse> {
get(params: PayoutSearchParams): Observable<void> {
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<void> {
return this.payoutsPapiService.confirmPayouts(payoutsIds)
.pipe(
switchMap(() => this.get(this.lastSearchParams)),
map(() => null)
switchMap(() => this.get(this.lastSearchParams))
);
}
pay(payoutsIds: string[]): Observable<void> {
return this.payoutsPapiService.pay(payoutsIds)
.pipe(
switchMap(() => this.get(this.lastSearchParams)),
map(() => null)
switchMap(() => this.get(this.lastSearchParams))
);
}
cancel(payoutId: string, params: PayoutCancelParams): Observable<void> {
return this.payoutsPapiService.cancelPayout(payoutId, params)
.pipe(
switchMap(() => this.get(this.lastSearchParams)),
map(() => null)
switchMap(() => this.get(this.lastSearchParams))
);
}

20
src/app/payouts/search-form/search-form.service.ts
View File

@ -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)]]
});
}
}

5
src/app/payouts/search-form/to-search-params.ts
View File

@ -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;
}