EMP-55: Full move to new table2, remove old table code (#406)

Author: A77AY

package-lock.json

@@ -35,7 +35,7 @@
     "@vality/fistful-proto": "2.0.1-88e69a5.0",
     "@vality/machinegun-proto": "1.0.1-3decc8f.0",
     "@vality/magista-proto": "2.0.2-ec1bdb9.0",
-    "@vality/ng-core": "18.4.1-pr-78-9131f9a.0",
+    "@vality/ng-core": "18.4.1-pr-79-ca9078d.0",
     "@vality/ng-thrift": "18.0.1-pr-13-bdb6d51.0",
     "@vality/repairer-proto": "2.0.2-07b73e9.0",
     "@vality/scrooge-proto": "0.1.1-9ce7fc6.0",

package.json

@@ -8,13 +8,18 @@ import { MemoizeExpiring } from 'typescript-memoize';
 
 import { PartyManagementService } from '@cc/app/api/payment-processing';
 
+import { createDsl, FistfulStatisticsService } from '../../fistful-stat';
+
 @Injectable({
     providedIn: 'root',
 })
 export class PartiesStoreService {
     progress$ = new BehaviorSubject(0);
 
-    constructor(private partyManagementService: PartyManagementService) {}
+    constructor(
+        private partyManagementService: PartyManagementService,
+        private fistfulStatisticsService: FistfulStatisticsService,
+    ) {}
 
     @MemoizeExpiring(5 * 60_000)
     get(partyId: PartyID) {
@@ -34,8 +39,14 @@ export class PartiesStoreService {
 
     @MemoizeExpiring(5 * 60_000)
     getWallet(walletId: WalletID, partyId: PartyID) {
-        return this.get(partyId).pipe(
-            map((p) => p.wallets.get(walletId)),
+        // return this.get(partyId).pipe(
+        //     map((p) => p.wallets.get(walletId)),
+        //     progressTo(this.progress$),
+        //     shareReplay({ refCount: true, bufferSize: 1 }),
+        // );
+        // TODO: We get it from fistful because wallets are not returned in the party object
+        return this.getWallets(partyId).pipe(
+            map((wallets) => wallets.find((w) => w.id === walletId)),
             progressTo(this.progress$),
             shareReplay({ refCount: true, bufferSize: 1 }),
         );
@@ -57,4 +68,15 @@ export class PartiesStoreService {
             map(([party, shop]) => party.contracts.get(shop.contract_id)),
         );
     }
+
+    @MemoizeExpiring(5 * 60_000)
+    private getWallets(partyId: PartyID) {
+        return this.fistfulStatisticsService
+            .GetWallets({ dsl: createDsl({ wallets: { party_id: partyId } }) })
+            .pipe(
+                map(({ data }) => data.wallets),
+                progressTo(this.progress$),
+                shareReplay({ refCount: true, bufferSize: 1 }),
+            );
+    }
 }

src/app/api/payment-processing/stores/parties-store.service.ts

@@ -1,4 +1,4 @@
-<v-table2
+<v-table
     [columns]="columns"
     [data]="data"
     [hasMore]="hasMore"
@@ -7,4 +7,4 @@
     (update)="update.emit($event)"
 >
     <v-table-actions><ng-content></ng-content></v-table-actions>
-</v-table2>
+</v-table>

src/app/sections/claims/claims-table/claims-table.component.html

@@ -1,11 +1,11 @@
 import { Component, Input, Output, EventEmitter, booleanAttribute, input } from '@angular/core';
 import { toObservable } from '@angular/core/rxjs-interop';
 import { Claim } from '@vality/domain-proto/claim_management';
-import { Column2, LoadOptions, createMenuColumn } from '@vality/ng-core';
+import { Column, createMenuColumn, LoadOptions } from '@vality/ng-core';
 import { getUnionKey } from '@vality/ng-thrift';
-import startCase from 'lodash-es/startCase';
+import { startCase } from 'lodash-es';
 
-import { createPartyColumn } from '@cc/app/shared/utils/table2';
+import { createPartyColumn } from '@cc/app/shared';
 
 @Component({
     selector: 'cc-claims-table',
@@ -21,21 +21,23 @@ export class ClaimsTableComponent {
     @Output() update = new EventEmitter<LoadOptions>();
     @Output() more = new EventEmitter<void>();
 
-    columns: Column2<Claim>[] = [
+    columns: Column<Claim>[] = [
         { field: 'id', cell: (d) => ({ link: () => `/party/${d.party_id}/claim/${d.id}` }) },
         createPartyColumn((d) => ({ id: d.party_id }), { hidden: toObservable(this.noParty) }),
         {
             field: 'status',
             cell: (d) => ({
                 value: startCase(getUnionKey(d.status)),
-                tags: {
-                    pending: 'pending',
-                    review: 'pending',
-                    pending_acceptance: 'pending',
-                    accepted: 'success',
-                    denied: 'warn',
-                    revoked: 'neutral',
-                },
+                color: (
+                    {
+                        pending: 'pending',
+                        review: 'pending',
+                        pending_acceptance: 'pending',
+                        accepted: 'success',
+                        denied: 'warn',
+                        revoked: 'neutral',
+                    } as const
+                )[getUnionKey(d.status)],
             }),
         },
         { field: 'revision' },

src/app/sections/claims/claims-table/claims-table.component.ts

@@ -1,6 +1,6 @@
 <div style="display: flex; flex-direction: column; gap: 24px">
     <h1 class="mat-headline-5">Reverts</h1>
-    <v-table2
+    <v-table
         [columns]="columns"
         [data]="reverts$ | async"
         [hasMore]="hasMore$ | async"
@@ -18,5 +18,5 @@ <h1 class="mat-headline-5">Reverts</h1>
                 Create revert
             </button>
         </v-table-actions>
-    </v-table2>
+    </v-table>
 </div>

src/app/sections/deposit-details/reverts/reverts.component.html

@@ -1,11 +1,11 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { DepositStatus, StatDeposit, StatDepositRevert } from '@vality/fistful-proto/fistful_stat';
-import { DialogService, UpdateOptions, Column2 } from '@vality/ng-core';
+import { DialogService, UpdateOptions, Column } from '@vality/ng-core';
 import { getUnionKey } from '@vality/ng-thrift';
 import startCase from 'lodash-es/startCase';
 import { filter } from 'rxjs/operators';
 
-import { createCurrencyColumn } from '@cc/app/shared/utils/table2';
+import { createCurrencyColumn } from '@cc/app/shared';
 
 import { CreateRevertDialogComponent } from './create-revert-dialog/create-revert-dialog.component';
 import { FetchRevertsService } from './services/fetch-reverts/fetch-reverts.service';
@@ -23,7 +23,7 @@ export class RevertsComponent implements OnInit {
     reverts$ = this.fetchRevertsService.result$;
     hasMore$ = this.fetchRevertsService.hasMore$;
     isLoading$ = this.fetchRevertsService.isLoading$;
-    columns: Column2<StatDepositRevert>[] = [
+    columns: Column<StatDepositRevert>[] = [
         { field: 'id' },
         {
             field: 'status',

src/app/sections/deposit-details/reverts/reverts.component.ts

@@ -22,7 +22,7 @@
             <cc-merchant-field formControlName="party_id"></cc-merchant-field>
         </ng-template>
     </v-filters>
-    <v-table2
+    <v-table
         [columns]="columns"
         [data]="deposits$ | async"
         [hasMore]="hasMore$ | async"
@@ -34,5 +34,5 @@
             <button mat-raised-button (click)="createByFile()">Create by file</button>
             <button color="primary" mat-raised-button (click)="createDeposit()">Create</button>
         </v-table-actions>
-    </v-table2>
+    </v-table>
 </cc-page-layout>

src/app/sections/deposits/deposits.component.html

@@ -16,7 +16,7 @@ import {
     debounceTimeWithFirst,
     getValueChanges,
     countChanged,
-    Column2,
+    Column,
     getEnumKey,
     createMenuColumn,
 } from '@vality/ng-core';
@@ -25,7 +25,7 @@ import { endOfDay } from 'date-fns';
 import startCase from 'lodash-es/startCase';
 import { filter, map, shareReplay } from 'rxjs/operators';
 
-import { createCurrencyColumn } from '@cc/app/shared/utils/table2';
+import { createCurrencyColumn } from '@cc/app/shared';
 
 import { QueryDsl } from '../../api/fistful-stat';
 import { DATE_RANGE_DAYS, DEBOUNCE_TIME_MS } from '../../tokens';
@@ -53,7 +53,7 @@ export class DepositsComponent implements OnInit {
     deposits$ = this.fetchDepositsService.result$;
     hasMore$ = this.fetchDepositsService.hasMore$;
     isLoading$ = this.fetchDepositsService.isLoading$;
-    columns: Column2<StatDeposit>[] = [
+    columns: Column<StatDeposit>[] = [
         {
             field: 'id',
             cell: (d) => ({

src/app/sections/deposits/deposits.component.ts

@@ -1,5 +1,4 @@
-<v-table2
-    [(sort)]="sort"
+<v-table
     [columns]="columns"
     [data]="objects$ | async"
     [progress]="isLoading$ | async"
@@ -17,4 +16,4 @@
             style="overflow: auto"
         ></v-select-field>
     </v-table-inputs>
-</v-table2>
+</v-table>