IMP-332: Domain config move to new table. Add table2 sort (#394)

.github/workflows/main.yaml

@@ -43,8 +43,3 @@ jobs:
           webhook: ${{ secrets.MATTERMOST_WEBHOOK_URL }}
           channel: 'control-center-improvements'
           username: 'Frontend'
-      - uses: valitydev/action-mattermost-notify@v0.1.4
-        with:
-          webhook: ${{ secrets.MATTERMOST_WEBHOOK_URL }}
-          channel: 'frontend-deployments'
-          username: 'Frontend'

cspell.json

@@ -2,5 +2,5 @@
     "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
     "version": "0.2",
     "import": "./node_modules/@vality/cspell-config/cspell.config.js",
-    "words": ["submain", "papaparse", "msgpack", "termsets", "rreserve", "wght", "opsz"]
+    "words": ["submain", "papaparse", "msgpack", "termsets", "rreserve", "wght", "opsz", "dpan"]
 }

package-lock.json

@@ -26,7 +26,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.3.1-pr-68-5283c21.0",
+        "@vality/ng-core": "^18.4.1-pr-69-2efb51f.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",
@@ -5969,9 +5969,9 @@
       "integrity": "sha512-XWF7qM/CARRAey0scGVhfGU6jNq+UdlGE2mg3jn4eIFDuIWQJqsT+Bah300RBUrl+XgFsmj95C6HWRfeA5Q8kw=="
     },
     "node_modules/@vality/ng-core": {
-      "version": "18.3.1-pr-68-5283c21.0",
-      "resolved": "https://registry.npmjs.org/@vality/ng-core/-/ng-core-18.3.1-pr-68-5283c21.0.tgz",
-      "integrity": "sha512-RDD7xCe2Q+DI70J8ph2QB19U9DnAlpqW83XG9kLtLiqRDWTLfvm2yO0TxZ7AwgMUmRrwf6TJjdkgJGPk9+06RA==",
+      "version": "18.4.1-pr-69-2efb51f.0",
+      "resolved": "https://registry.npmjs.org/@vality/ng-core/-/ng-core-18.4.1-pr-69-2efb51f.0.tgz",
+      "integrity": "sha512-q01uhPxW88y9/rpPGfOLSPqsCL65ORZGcsxBd/2Rta+5wqLTSMlzz++gm13BmLUPKc8HvaRKDacOEfktVfCG3Q==",
       "dependencies": {
         "@angular/material-date-fns-adapter": "^18.2.2",
         "@ng-matero/extensions": "^18.2.0",

package.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.3.1-pr-68-5283c21.0",
+    "@vality/ng-core": "^18.4.1-pr-69-2efb51f.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",

renovate.json

@@ -1,4 +1,14 @@
 {
     "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-    "extends": ["local>valitydev/.github:renovate-config"]
+    "extends": ["local>valitydev/.github:renovate-config"],
+    "packageRules": [
+        {
+            "groupName": "Minor Updates",
+            "matchUpdateTypes": ["minor", "patch"]
+        },
+        {
+            "groupName": "Major Updates",
+            "matchUpdateTypes": ["major"]
+        }
+    ]
 }

src/app/sections/domain/domain-info/domain-info.component.html

@@ -1,5 +1,6 @@
 <cc-page-layout
     description="{{ (version$ | async) ? '#' + (version$ | async) : '' }}"
+    fullHeight
     title="Domain config"
 >
     <cc-page-layout-actions>

src/app/sections/domain/domain-info/domain-objects-table/domain-objects-table.component.html

@@ -1,11 +1,9 @@
-<v-table
+<v-table2
     [(sort)]="sort"
     [columns]="columns"
     [data]="objects$ | async"
-    [filterByColumns]="[]"
     [progress]="isLoading$ | async"
-    [size]="50"
-    noActions
+    noDownload
     sortOnFront
     standaloneFilter
     (update)="update()"
@@ -19,4 +17,4 @@
             style="overflow: auto"
         ></v-select-field>
     </v-table-inputs>
-</v-table>
+</v-table2>

src/app/sections/domain/domain-info/domain-objects-table/domain-objects-table.component.ts

@@ -3,17 +3,17 @@ import { Component, OnInit, DestroyRef, Output, EventEmitter } from '@angular/co
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { Sort } from '@angular/material/sort';
 import { Reference, DomainObject } from '@vality/domain-proto/domain';
 import {
     QueryParamsService,
-    Column,
-    createOperationColumn,
     SelectFieldModule,
     TableModule,
     ActionsModule,
     DialogService,
     getValueChanges,
+    Column2,
+    createMenuColumn,
+    TABLE_WRAPPER_STYLE,
 } from '@vality/ng-core';
 import sortBy from 'lodash-es/sortBy';
 import startCase from 'lodash-es/startCase';
@@ -51,6 +51,7 @@ interface DomainObjectData {
         ActionsModule,
         MatButtonModule,
     ],
+    host: { style: TABLE_WRAPPER_STYLE },
 })
 export class DomainObjectsTableComponent implements OnInit {
     @Output() selectedChange = new EventEmitter<string[]>();
@@ -77,54 +78,59 @@ export class DomainObjectsTableComponent implements OnInit {
         map(([objects, types]) => objects.filter((o) => types.includes(o.type))),
         shareReplay({ refCount: true, bufferSize: 1 }),
     );
-    columns: Column<DomainObjectData>[] = [
+    columns: Column2<DomainObjectData>[] = [
         {
             field: 'id',
-            formatter: (d: DomainObjectData) => getDomainObjectDetails(d.obj).id,
-            sortable: true,
+            cell: (d) => ({ value: getDomainObjectDetails(d.obj).id }),
+            sort: true,
+            sticky: 'start',
         },
         {
             field: 'name',
-            formatter: (d: DomainObjectData) => getDomainObjectDetails(d.obj).label,
-            sortable: true,
-            click: (d) => {
-                this.details(d);
-            },
+            cell: (d) => ({
+                value: getDomainObjectDetails(d.obj).label,
+                click: () => this.details(d),
+            }),
+            sort: true,
+            style: { width: 0 },
         },
         {
             field: 'description',
-            formatter: (d: DomainObjectData) => getDomainObjectDetails(d.obj).description,
-            sortable: true,
+            cell: (d) => ({ value: getDomainObjectDetails(d.obj).description }),
+            sort: true,
         },
         {
             field: 'type',
-            sortable: true,
-            formatter: (d) => startCase(d.type),
+            sort: true,
+            cell: (d) => ({ value: startCase(d.type) }),
+            hidden: getValueChanges(this.typesControl).pipe(map((t) => t.length <= 1)),
         },
-        createOperationColumn([
-            {
-                label: 'Details',
-                click: (d) => {
-                    this.details(d);
+        createMenuColumn((d) => ({
+            items: [
+                {
+                    label: 'Details',
+                    click: () => {
+                        this.details(d);
+                    },
                 },
-            },
-            {
-                label: 'Edit',
-                click: (d) => {
-                    this.dialogService
-                        .open(EditDomainObjectDialogComponent, { domainObject: d.obj })
-                        .afterClosed()
-                        .pipe(takeUntilDestroyed(this.destroyRef))
-                        .subscribe();
+                {
+                    label: 'Edit',
+                    click: () => {
+                        this.dialogService
+                            .open(EditDomainObjectDialogComponent, { domainObject: d.obj })
+                            .afterClosed()
+                            .pipe(takeUntilDestroyed(this.destroyRef))
+                            .subscribe();
+                    },
                 },
-            },
-            {
-                label: 'Delete',
-                click: (d) => {
-                    this.deleteDomainObjectService.delete(d.ref);
+                {
+                    label: 'Delete',
+                    click: () => {
+                        this.deleteDomainObjectService.delete(d.ref);
+                    },
                 },
-            },
-        ]),
+            ],
+        })),
     ];
     fields$ = this.metadataService.getDomainFields().pipe(
         map((fields) => sortBy(fields, 'type')),
@@ -140,7 +146,7 @@ export class DomainObjectsTableComponent implements OnInit {
         ),
     );
     isLoading$ = this.domainStoreService.isLoading$;
-    sort: Sort = { active: 'id', direction: 'asc' };
+    sort = { active: 'id', direction: 'asc' };
 
     constructor(
         private domainStoreService: DomainStoreService,

src/app/shared/components/thrift-api-crud/domain/utils/get-domain-object-details.ts

@@ -45,13 +45,49 @@ const GET_DOMAIN_OBJECTS_DETAILS: {
         label: o.ref.symbolic_code,
         description: o.data.name,
     }),
-    payment_method: (o) => ({
-        id: inlineJson(o.ref.id, Infinity),
-        label: o.data.name,
-        description: o.data.description,
-    }),
+    payment_method: (o) => {
+        let id: string;
+        const type = ` (${startCase(getUnionKey(o.ref.id))})`;
+        switch (getUnionKey(o.ref.id)) {
+            case 'payment_terminal':
+                id = o.ref.id.payment_terminal.id + type;
+                break;
+            case 'digital_wallet':
+                id = o.ref.id.digital_wallet.id + type;
+                break;
+            case 'generic':
+                id = `${o.ref.id.generic.payment_service.id} (Payment Service)`;
+                break;
+            case 'mobile':
+                id = o.ref.id.mobile.id + type;
+                break;
+            case 'crypto_currency':
+                id = o.ref.id.crypto_currency.id + type;
+                break;
+            case 'bank_card':
+                id =
+                    [
+                        o.ref.id.bank_card.payment_system?.id,
+                        o.ref.id.bank_card.payment_token?.id
+                            ? `(${o.ref.id.bank_card.payment_token?.id})`
+                            : null,
+                        o.ref.id.bank_card.tokenization_method === 0 ? '(DPAN)' : null,
+                        o.ref.id.bank_card.is_cvv_empty ? '(No CVV)' : null,
+                    ]
+                        .filter(Boolean)
+                        .join(' ') + type;
+                break;
+            default:
+                id = inlineJson(o.ref.id, Infinity, true);
+        }
+        return {
+            id,
+            label: o.data.name,
+            description: o.data.description,
+        };
+    },
     globals: (o) => ({
-        id: inlineJson(o.ref),
+        id: 'Global',
         label: startCase(getUnionKey(o.data)),
         description: inlineJson(o.data),
     }),