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

src/app/payouts/payouts.component.html

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

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<Payout[]>;
     selectedPayouts: Payout[] = [];
 
     constructor(private payoutsService: PayoutsService,
                 private snackBar: MatSnackBar,
-                private cdRef: ChangeDetectorRef) {
+                private cdRef: ChangeDetectorRef,
+                private searchFormService: SearchFormService) {
     }
 
     ngOnInit() {
-        this.getPayouts({
+        this.payouts$ = this.payoutsService.payouts$;
-            fromTime: moment().subtract(1, 'weeks').utc().format(),
+        this.getPayouts(this.searchFormService.initSearchParams);
-            toTime: moment().add(1, 'days').utc().format(),
-            minAmount: 0,
-            maxAmount: 1000
-        });
     }
 
     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;

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<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)),
+                switchMap(() => this.get(this.lastSearchParams))
-                map(() => null)
             );
     }
 
     pay(payoutsIds: string[]): Observable<void> {
         return this.payoutsPapiService.pay(payoutsIds)
             .pipe(
-                switchMap(() => this.get(this.lastSearchParams)),
+                switchMap(() => this.get(this.lastSearchParams))
-                map(() => null)
             );
     }
 
     cancel(payoutId: string, params: PayoutCancelParams): Observable<void> {
         return this.payoutsPapiService.cancelPayout(payoutId, params)
             .pipe(
-                switchMap(() => this.get(this.lastSearchParams)),
+                switchMap(() => this.get(this.lastSearchParams))
-                map(() => null)
             );
     }
 

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)]],
+            minAmount: [minAmount / 100, [Validators.required, Validators.min(0)]],
-            maxAmount: [1000, [Validators.required, Validators.min(0)]]
+            maxAmount: [maxAmount / 100, [Validators.required, Validators.min(0)]]
         });
     }
 }

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