mirror of
https://github.com/valitydev/control-center.git
synced 2024-11-06 02:25:17 +00:00
IMP-105,IMP-106: Add tables filters, sort routing-rules shops and wallets (#280)
This commit is contained in:
Rinat Arsaev
GitHub
parent
7649b4e2ee
commit
644bec96b2
16
package-lock.json
generated
16
package-lock.json
generated
@ -29,7 +29,7 @@
|
||||
"@vality/dominant-cache-proto": "2.0.0",
|
||||
"@vality/fistful-proto": "2.0.1-ed97a0e.0",
|
||||
"@vality/magista-proto": "2.0.2-37b81e6.0",
|
||||
"@vality/ng-core": "16.2.1-pr-40-44df7b7.0",
|
||||
"@vality/ng-core": "16.2.1-pr-40-ea573e6.0",
|
||||
"@vality/payout-manager-proto": "2.0.0",
|
||||
"@vality/repairer-proto": "2.0.2-f5e3b7a.0",
|
||||
"@vality/thrift-ts": "2.4.1-8ad5123.0",
|
||||
@ -37,7 +37,6 @@
|
||||
"coerce-property": "15.0.1",
|
||||
"css-element-queries": "1.2.3",
|
||||
"date-fns": "2.30.0",
|
||||
"fuse.js": "6.6.2",
|
||||
"humanize-duration": "3.21.0",
|
||||
"inputmask": "5.0.7",
|
||||
"keycloak-angular": "14.0.0",
|
||||
@ -6001,9 +6000,9 @@
|
||||
"integrity": "sha512-gJizpTWuB74L+XuJ+dUaxAwJDkycdnuVwrXWIl/NKcS7++/zgrgTpw+tM5/Te3rWqkkCnSxC1SK0C4aPbbtifg=="
|
||||
},
|
||||
"node_modules/@vality/ng-core": {
|
||||
"version": "16.2.1-pr-40-44df7b7.0",
|
||||
"resolved": "https://registry.npmjs.org/@vality/ng-core/-/ng-core-16.2.1-pr-40-44df7b7.0.tgz",
|
||||
"integrity": "sha512-2j4CXD4mhPukIIwijJ3U2Hl+iMDQ5AQ6/LPvBU2TyXbQvc4v2Ne8S8CCXzKetCrUZkY2IGErUqF/5aJ9+j/v4A==",
|
||||
"version": "16.2.1-pr-40-ea573e6.0",
|
||||
"resolved": "https://registry.npmjs.org/@vality/ng-core/-/ng-core-16.2.1-pr-40-ea573e6.0.tgz",
|
||||
"integrity": "sha512-RgkZntHMFm9QYwE904ZVz1O+Go17FZH1tuTms3/RuAD6Kvrf4vJG+FaKCe7jCDYmzFMWXLfXGjfkQwazQA7zxA==",
|
||||
"dependencies": {
|
||||
"@angular/material-date-fns-adapter": "^16.0.0",
|
||||
"@ng-matero/extensions": "^16.0.0",
|
||||
@ -6012,6 +6011,7 @@
|
||||
"@s-libs/ng-core": "^16.0.0",
|
||||
"@s-libs/rxjs-core": "^16.0.0",
|
||||
"dinero.js": "^2.0.0-alpha.14",
|
||||
"fuse.js": "^7.0.0",
|
||||
"ng-let": "^16.0.1",
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
@ -13376,9 +13376,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/fuse.js": {
|
||||
"version": "6.6.2",
|
||||
"resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.6.2.tgz",
|
||||
"integrity": "sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA==",
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.0.0.tgz",
|
||||
"integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
"@vality/dominant-cache-proto": "2.0.0",
|
||||
"@vality/fistful-proto": "2.0.1-ed97a0e.0",
|
||||
"@vality/magista-proto": "2.0.2-37b81e6.0",
|
||||
"@vality/ng-core": "16.2.1-pr-40-44df7b7.0",
|
||||
"@vality/ng-core": "16.2.1-pr-40-ea573e6.0",
|
||||
"@vality/payout-manager-proto": "2.0.0",
|
||||
"@vality/repairer-proto": "2.0.2-f5e3b7a.0",
|
||||
"@vality/thrift-ts": "2.4.1-8ad5123.0",
|
||||
@ -45,7 +45,6 @@
|
||||
"coerce-property": "15.0.1",
|
||||
"css-element-queries": "1.2.3",
|
||||
"date-fns": "2.30.0",
|
||||
"fuse.js": "6.6.2",
|
||||
"humanize-duration": "3.21.0",
|
||||
"inputmask": "5.0.7",
|
||||
"keycloak-angular": "14.0.0",
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<div fxLayout="column" fxLayoutGap="24px">
|
||||
<div class="mat-headline-4">Shops</div>
|
||||
<v-input-field [formControl]="filterControl" fxFlex="100" label="Filter"></v-input-field>
|
||||
<cc-shops-table
|
||||
[progress]="progress$ | async"
|
||||
[shops]="shopsParty$ | async"
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
import { combineLatest, map } from 'rxjs';
|
||||
import { debounceTime, shareReplay, startWith, withLatestFrom } from 'rxjs/operators';
|
||||
import { withLatestFrom } from 'rxjs';
|
||||
import { map, shareReplay } from 'rxjs/operators';
|
||||
|
||||
import { PartyShopsService } from './party-shops.service';
|
||||
|
||||
@ -11,21 +10,7 @@ import { PartyShopsService } from './party-shops.service';
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class PartyShopsComponent {
|
||||
filterControl = new FormControl('');
|
||||
shopsParty$ = combineLatest([
|
||||
this.partyShopsService.shops$,
|
||||
this.filterControl.valueChanges.pipe(
|
||||
startWith(this.filterControl.value),
|
||||
debounceTime(200),
|
||||
),
|
||||
]).pipe(
|
||||
map(([shops, searchStr]) =>
|
||||
searchStr
|
||||
? shops.filter((s) =>
|
||||
JSON.stringify(s).toLowerCase().includes(searchStr.toLowerCase()),
|
||||
)
|
||||
: shops,
|
||||
),
|
||||
shopsParty$ = this.partyShopsService.shops$.pipe(
|
||||
withLatestFrom(this.partyShopsService.party$),
|
||||
map(([shops, party]) => shops.map((shop) => ({ shop, party }))),
|
||||
shareReplay({ refCount: true, bufferSize: 1 }),
|
||||
|
||||
@ -131,6 +131,9 @@ export class PayoutsComponent implements OnInit {
|
||||
|
||||
search(options?: UpdateOptions) {
|
||||
const value = this.qp.params;
|
||||
if (!value.dateRange) {
|
||||
return;
|
||||
}
|
||||
this.fetchPayoutsService.load(
|
||||
clean({
|
||||
common_search_query_params: clean({
|
||||
|
||||
@ -1,17 +1,10 @@
|
||||
<cc-page-layout title="Search merchants">
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<cc-parties-search-filters
|
||||
[initParams]="initSearchParams$ | async"
|
||||
(searchParamsChanged$)="searchParamsUpdated($event)"
|
||||
></cc-parties-search-filters>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<v-table
|
||||
[columns]="columns"
|
||||
[data]="parties$ | async"
|
||||
[filter]="initSearchParams$ | async"
|
||||
[progress]="inProgress$ | async"
|
||||
noActions
|
||||
(filterChange)="searchParamsUpdated($event)"
|
||||
></v-table>
|
||||
</cc-page-layout>
|
||||
|
||||
@ -3,12 +3,12 @@ import { Router } from '@angular/router';
|
||||
import { Party } from '@vality/deanonimus-proto/deanonimus';
|
||||
import { Column, createOperationColumn } from '@vality/ng-core';
|
||||
import startCase from 'lodash-es/startCase';
|
||||
import { map } from 'rxjs/operators';
|
||||
|
||||
import { FetchPartiesService } from '@cc/app/shared/services/fetch-parties.service';
|
||||
|
||||
import { getUnionKey } from '../../../utils';
|
||||
|
||||
import { PartiesSearchFiltersParams } from './parties-search-filters';
|
||||
import { SearchPartiesService } from './search-parties.service';
|
||||
|
||||
@Component({
|
||||
@ -17,7 +17,7 @@ import { SearchPartiesService } from './search-parties.service';
|
||||
providers: [SearchPartiesService, FetchPartiesService],
|
||||
})
|
||||
export class SearchPartiesComponent {
|
||||
initSearchParams$ = this.partiesService.data$;
|
||||
initSearchParams$ = this.partiesService.data$.pipe(map((p) => p?.text ?? ''));
|
||||
inProgress$ = this.fetchPartiesService.inProgress$;
|
||||
parties$ = this.fetchPartiesService.parties$;
|
||||
columns: Column<Party>[] = [
|
||||
@ -71,8 +71,8 @@ export class SearchPartiesComponent {
|
||||
private router: Router,
|
||||
) {}
|
||||
|
||||
searchParamsUpdated($event: PartiesSearchFiltersParams) {
|
||||
this.partiesService.preserve($event);
|
||||
this.fetchPartiesService.searchParties($event.text);
|
||||
searchParamsUpdated(filter: string) {
|
||||
this.partiesService.preserve({ text: filter });
|
||||
this.fetchPartiesService.searchParties(filter);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<cc-page-layout title="Terminals">
|
||||
<cc-page-layout-actions></cc-page-layout-actions>
|
||||
<v-input-field [formControl]="searchControl" label="Search"></v-input-field>
|
||||
<v-table
|
||||
[(sort)]="sort"
|
||||
[columns]="columns"
|
||||
@ -8,6 +7,7 @@
|
||||
[progress]="progress$ | async"
|
||||
size="50"
|
||||
sortOnFront
|
||||
standaloneFilter
|
||||
(update)="update()"
|
||||
>
|
||||
<v-table-actions>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { Component, ViewChild, TemplateRef } from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
import { Sort } from '@angular/material/sort';
|
||||
import { Router } from '@angular/router';
|
||||
import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
|
||||
@ -11,10 +10,10 @@ import {
|
||||
} from '@vality/domain-proto/domain';
|
||||
import { Column } from '@vality/ng-core';
|
||||
import startCase from 'lodash-es/startCase';
|
||||
import { combineLatest } from 'rxjs';
|
||||
import { startWith, map, debounceTime, tap, take } from 'rxjs/operators';
|
||||
import { of } from 'rxjs';
|
||||
import { map, take } from 'rxjs/operators';
|
||||
|
||||
import { objectToJSON, createFullTextSearch, getUnionValue, getUnionKey } from '../../../utils';
|
||||
import { getUnionValue, getUnionKey } from '../../../utils';
|
||||
import { DomainStoreService } from '../../api/domain-config';
|
||||
import { PartiesStoreService } from '../../api/payment-processing';
|
||||
import { SidenavInfoService } from '../../shared/components/sidenav-info';
|
||||
@ -25,7 +24,6 @@ import { SidenavInfoService } from '../../shared/components/sidenav-info';
|
||||
templateUrl: './terminals.component.html',
|
||||
})
|
||||
export class TerminalsComponent {
|
||||
searchControl = new FormControl('');
|
||||
columns: Column<TerminalObject>[] = [
|
||||
{ field: 'ref.id', sortable: true },
|
||||
{
|
||||
@ -83,32 +81,7 @@ export class TerminalsComponent {
|
||||
},
|
||||
},
|
||||
];
|
||||
data$ = combineLatest([
|
||||
this.domainStoreService.getObjects('terminal').pipe(
|
||||
map((objects) =>
|
||||
createFullTextSearch(
|
||||
objects,
|
||||
objects.map((o) => ({
|
||||
ref: o.ref.id,
|
||||
data: JSON.stringify(objectToJSON(o.data)),
|
||||
name: o.data.name,
|
||||
description: o.data.description,
|
||||
})),
|
||||
),
|
||||
),
|
||||
),
|
||||
this.searchControl.valueChanges.pipe(
|
||||
startWith(this.searchControl.value),
|
||||
debounceTime(100),
|
||||
),
|
||||
]).pipe(
|
||||
tap(([, search]) => {
|
||||
if (search) {
|
||||
this.sort = { active: '', direction: '' };
|
||||
}
|
||||
}),
|
||||
map(([fts, search]) => fts.search(search)),
|
||||
);
|
||||
data$ = this.domainStoreService.getObjects('terminal');
|
||||
progress$ = this.domainStoreService.isLoading$;
|
||||
sort: Sort = { active: 'data.name', direction: 'asc' };
|
||||
openedTerminal?: TerminalObject;
|
||||
@ -200,13 +173,15 @@ export class TerminalsComponent {
|
||||
}
|
||||
|
||||
private getProvider(terminalObj: TerminalObject) {
|
||||
return this.domainStoreService
|
||||
return terminalObj.data.provider_ref
|
||||
? this.domainStoreService
|
||||
.getObjects('provider')
|
||||
.pipe(
|
||||
map((providers) =>
|
||||
providers.find((p) => p.ref.id === terminalObj.data.provider_ref.id),
|
||||
),
|
||||
);
|
||||
)
|
||||
: of(null);
|
||||
}
|
||||
|
||||
private getTerminalShopWalletDelegates(terminalObj: TerminalObject) {
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
[progress]="progress"
|
||||
[size]="100"
|
||||
sortOnFront
|
||||
standaloneFilter
|
||||
(update)="update.emit()"
|
||||
></v-table>
|
||||
|
||||
|
||||
@ -1,12 +0,0 @@
|
||||
import Fuse from 'fuse.js';
|
||||
|
||||
export function createFullTextSearch<T extends object, O extends object>(
|
||||
source: T[],
|
||||
objects: O[],
|
||||
options: Fuse.IFuseOptions<O> = { keys: Object.keys(objects[0]) },
|
||||
) {
|
||||
const fuse = new Fuse(objects, options);
|
||||
return {
|
||||
search: (str: string) => (str ? fuse.search(str).map((r) => source[r.refIndex]) : source),
|
||||
};
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export * from './create-full-text-search';
|
||||
@ -15,4 +15,3 @@ export * from './enumerate';
|
||||
export * from './thrift-instance';
|
||||
export * from './csv';
|
||||
export * from './thrift';
|
||||
export * from './full-text-search';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user