Added email search claims param (#138)

package-lock.json

@@ -5876,8 +5876,8 @@
       "dev": true
     },
     "damsel": {
-      "version": "git+ssh://git@github.com/rbkmoney/damsel.git#efbc1e16fb17bbb4f92314f0b3e8712a9e2b2c59",
-      "from": "git+ssh://git@github.com/rbkmoney/damsel.git#efbc1e16fb17bbb4f92314f0b3e8712a9e2b2c59"
+      "version": "git+ssh://git@github.com/rbkmoney/damsel.git#85e1cd96af9e0387c310cdb58364bb859a452a75",
+      "from": "git+ssh://git@github.com/rbkmoney/damsel.git#85e1cd96af9e0387c310cdb58364bb859a452a75"
     },
     "dashdash": {
       "version": "1.14.1",

package.json

@@ -39,7 +39,7 @@
     "angular-file": "3.0.1",
     "angular2-prettyjson": "3.0.1",
     "ank-proto": "git+ssh://git@github.com:rbkmoney/ank-proto.git#21edf79b702e704ccc207bf7e03be1bbf830eed6",
-    "damsel": "git+ssh://git@github.com/rbkmoney/damsel.git#efbc1e16fb17bbb4f92314f0b3e8712a9e2b2c59",
+    "damsel": "git+ssh://git@github.com/rbkmoney/damsel.git#85e1cd96af9e0387c310cdb58364bb859a452a75",
     "file-storage-proto": "git+ssh://git@github.com:rbkmoney/file-storage-proto.git#281e1ca4cea9bf32229a6c389f0dcf5d49c05a0b",
     "fistful-proto": "git+ssh://git@github.com/rbkmoney/fistful-proto.git#c2113c853ed71a34bb6468b9a6cf9b468967af84",
     "humanize-duration": "~3.21.0",

src/app/sections/claim-search-form/claim-search-form.component.html

@@ -1,12 +1,21 @@
 <form fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px" [formGroup]="form">
-    <mat-form-field fxFlex="33">
+    <mat-form-field fxFlex="25">
         <mat-select placeholder="Claim statuses" formControlName="statuses" multiple>
             <mat-option *ngFor="let status of claimStatuses" [value]="status">{{
                 status | ccClaimStatus
             }}</mat-option>
         </mat-select>
     </mat-form-field>
-    <mat-form-field *ngIf="!hidePartyId" fxFlex="33">
+    <mat-form-field fxFlex="25">
+        <input
+            matInput
+            placeholder="Participant email"
+            formControlName="email"
+            type="string"
+            autocomplete="false"
+        />
+    </mat-form-field>
+    <mat-form-field *ngIf="!hidePartyId" fxFlex="25">
         <input
             matInput
             placeholder="Party ID"
@@ -15,7 +24,7 @@
             autocomplete="false"
         />
     </mat-form-field>
-    <mat-form-field fxFlex="33">
+    <mat-form-field fxFlex="25">
         <input
             matInput
             placeholder="Claim ID"

src/app/sections/claim-search-form/claim-search-form.component.ts

@@ -26,6 +26,7 @@ export class ClaimSearchFormComponent implements OnInit {
 
     form: FormGroup = this.fb.group({
         statuses: '',
+        email: '',
         claim_id: '',
         party_id: '',
     });
@@ -36,7 +37,7 @@ export class ClaimSearchFormComponent implements OnInit {
 
     ngOnInit() {
         this.form.valueChanges
-            .pipe(debounceTime(300), map(removeEmptyProperties))
+            .pipe(debounceTime(600), map(removeEmptyProperties))
             .subscribe((v) => {
                 this.router.navigate([location.pathname], { queryParams: v });
                 this.valueChanges.emit(formValueToSearchParams(v));

src/app/sections/claim-search-form/form-value-to-search-params.ts

@@ -1,16 +1,11 @@
-export const formValueToSearchParams = (params: {}) => {
-    const result = {};
-    for (const k in params) {
-        if (params.hasOwnProperty(k)) {
-            if (k === 'statuses') {
-                result[k] = (params[k] as string[]).reduce((acc, cv) => [...acc, { [cv]: {} }], []);
-            } else if (params[k]) {
-                if (params[k] === '') {
-                    break;
-                }
-                result[k] = params[k];
-            }
-        }
-    }
-    return result;
-};
+import pick from 'lodash-es/pick';
+import pickBy from 'lodash-es/pickBy';
+
+import { isNumeric, mapValuesToNumber, mapValuesToThriftEnum } from '../../shared/utils';
+import { SearchFormValue } from './search-form-value';
+
+export const formValueToSearchParams = (params: {}): SearchFormValue => ({
+    ...params,
+    ...mapValuesToThriftEnum(pick(params, 'statuses')),
+    ...mapValuesToNumber(pickBy(params, isNumeric)),
+});

src/app/sections/claim-search-form/query-params-to-form-value.ts

@@ -1,15 +1,13 @@
 import { Params } from '@angular/router';
+import pickBy from 'lodash-es/pickBy';
 
-export const queryParamsToFormValue = (params: Params) => {
-    const result = {};
-    for (const k in params) {
-        if (params.hasOwnProperty(k)) {
-            if (k === 'statuses' && typeof params[k] === 'string') {
-                result[k] = [params[k]];
-            } else {
-                result[k] = params[k];
-            }
-        }
-    }
-    return result;
-};
+import { wrapValuesToArray } from '../../shared/utils';
+
+const statusesAndPrimitives = (v, k) =>
+    k === 'statuses' && (typeof v === 'string' || typeof v === 'number');
+
+export const queryParamsToFormValue = (params: Params) => ({
+    ...params,
+    // Query param ?statuses=accepted will be present as { statuses: 'accepted' } in form. Selector value must be an array in multiple-selection mode.
+    ...wrapValuesToArray(pickBy(params, statusesAndPrimitives)),
+});

src/app/sections/claim-search-form/search-form-value.ts

@@ -3,6 +3,7 @@ import { ClaimID } from '../../thrift-services/damsel/gen-model/claim_management
 
 export interface SearchFormValue {
     claim_id?: ClaimID;
+    email?: string;
     party_id?: string;
     statuses?: ClaimStatus[];
 }

src/app/sections/search-claims/search-claims.service.ts

@@ -11,7 +11,7 @@ import { SearchFormValue } from '../claim-search-form';
 export class SearchClaimsService extends PartialFetcher<Claim, SearchFormValue> {
     private readonly searchLimit = 20;
 
-    claims$: Observable<Claim[]> = this.searchResult$.pipe();
+    claims$: Observable<Claim[]> = this.searchResult$;
 
     constructor(private claimManagementService: ClaimManagementService) {
         super();

src/app/shared/utils/index.ts

@@ -2,3 +2,7 @@ export * from './sort-units';
 export * from './to-optional';
 export * from './get-union-key';
 export * from './remove-empty-properties';
+export * from './map-values-to-thrift-enum';
+export * from './map-values-to-number';
+export * from './is-numeric';
+export * from './wrap-values-to-array';

src/app/shared/utils/is-numeric.ts

@@ -0,0 +1,2 @@
+export const isNumeric = (x): boolean =>
+    (typeof x === 'number' || typeof x === 'string') && !isNaN(Number(x));

src/app/shared/utils/map-values-to-number.ts

@@ -0,0 +1,4 @@
+import toNumber from 'lodash-es/toNumber';
+
+export const mapValuesToNumber = (obj: {}): {} =>
+    Object.entries(obj).reduce((acc, [k, v]) => ({ ...acc, [k]: toNumber(v) }), {});

src/app/shared/utils/map-values-to-thrift-enum.ts

@@ -0,0 +1,5 @@
+// Thrift enum ex: [{ enumVal: {} }, ...]
+const toThriftEnum = (arr: string[]) => arr.reduce((acc, cv) => [...acc, { [cv]: {} }], []);
+
+export const mapValuesToThriftEnum = (obj: {}): {} =>
+    Object.entries(obj).reduce((acc, [k, v]) => ({ ...acc, [k]: toThriftEnum(v as string[]) }), {});

src/app/shared/utils/remove-empty-properties.ts

@@ -1,5 +1,4 @@
-export const removeEmptyProperties = <T>(s: T) =>
-    Object.keys(s).reduce(
-        (acc, cur) => (!!s[cur] && s[cur] !== '' ? { ...acc, [cur]: s[cur] } : acc),
-        {} as T
-    );
+import identity from 'lodash-es/identity';
+import pickBy from 'lodash-es/pickBy';
+
+export const removeEmptyProperties = (s) => pickBy(s, identity);

src/app/shared/utils/wrap-values-to-array.ts

@@ -0,0 +1,2 @@
+export const wrapValuesToArray = (params: {}): {} =>
+    Object.entries(params).reduce((acc, [k, v]) => ({ ...acc, [k]: [v] }), {});