XYZ-111,XYZ-122,TECH-337: Fix tables & filters, add url validator

angular.json

@@ -170,6 +170,7 @@
         }
     },
     "cli": {
-        "schematicCollections": ["angular-eslint"]
+        "schematicCollections": ["angular-eslint"],
+        "analytics": false
     }
 }

projects/ng-thrift/src/lib/components/thrift-editor/components/thrift-form/thrift-form.component.html

@@ -1,53 +1,53 @@
-@if (!(extensionResult$ | async)?.hidden) {
+@if (!extensionResult()?.hidden) {
     <div>
-        @if ((extensionResult$ | async)?.type || (extensionResult$ | async)?.template) {
+        @if (extensionResult()?.type || extensionResult()?.template) {
             <v-extension-field
-                [data]="$any(data)"
-                [extensions]="extensions"
+                [data]="$any(data())"
+                [extensions]="extensions()"
                 [formControl]="control"
             ></v-extension-field>
         } @else {
-            @switch (data?.typeGroup) {
+            @switch (data()?.typeGroup) {
                 @case ('primitive') {
                     <v-primitive-field
-                        [data]="$any(data)"
-                        [extensions]="extensions"
+                        [data]="$any(data())"
+                        [extensions]="extensions()"
                         [formControl]="control"
                     ></v-primitive-field>
                 }
                 @case ('complex') {
                     <v-complex-form
-                        [data]="$any(data)"
-                        [extensions]="extensions"
+                        [data]="$any(data())"
+                        [extensions]="extensions()"
                         [formControl]="control"
                     ></v-complex-form>
                 }
                 @case ('object') {
-                    @switch (data.objectType) {
+                    @switch (data()?.objectType) {
                         @case ('struct') {
                             <v-struct-form
-                                [data]="$any(data)"
-                                [extensions]="extensions"
+                                [data]="$any(data())"
+                                [extensions]="extensions()"
                                 [formControl]="control"
                             ></v-struct-form>
                         }
                         @case ('union') {
                             <v-union-field
-                                [data]="$any(data)"
-                                [extensions]="extensions"
+                                [data]="$any(data())"
+                                [extensions]="extensions()"
                                 [formControl]="control"
                             ></v-union-field>
                         }
                         @case ('enum') {
                             <v-enum-field
-                                [data]="$any(data)"
+                                [data]="$any(data())"
                                 [formControl]="control"
                             ></v-enum-field>
                         }
                         @case ('typedef') {
                             <v-typedef-form
-                                [data]="$any(data)"
-                                [extensions]="extensions"
+                                [data]="$any(data())"
+                                [extensions]="extensions()"
                                 [formControl]="control"
                             ></v-typedef-form>
                         }

projects/ng-thrift/src/lib/components/thrift-editor/components/thrift-form/thrift-form.component.ts

@@ -1,30 +1,17 @@
-import { BehaviorSubject, Observable, defer, switchMap } from 'rxjs';
-import { distinctUntilChanged, map, shareReplay } from 'rxjs/operators';
+import { combineLatest, switchMap } from 'rxjs';
+import { shareReplay } from 'rxjs/operators';
 
 import { CommonModule } from '@angular/common';
-import {
-    Component,
-    DestroyRef,
-    HostBinding,
-    Input,
-    OnChanges,
-    OnInit,
-    SimpleChanges,
-    inject,
-} from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Component, HostBinding, computed, input } from '@angular/core';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { ReactiveFormsModule, Validator } from '@angular/forms';
 
 import { FormControlSuperclass, createControlProviders } from '@vality/matez';
 import { Field, ValueType } from '@vality/thrift-ts';
 
 import { ThriftData } from '../../../../models';
 import { ThriftAstMetadata } from '../../../../types';
-import {
-    ThriftFormExtension,
-    ThriftFormExtensionResult,
-    getExtensionsResult,
-} from '../../types/thrift-form-extension';
+import { ThriftFormExtension, getExtensionsResult } from '../../types/thrift-form-extension';
 import { ComplexFormComponent } from '../complex-form/complex-form.component';
 import { EnumFieldComponent } from '../enum-field/enum-field.component';
 import { ExtensionFieldComponent } from '../extension-field/extension-field.component';
@@ -50,57 +37,43 @@ import { UnionFieldComponent } from '../union-field/union-field.component';
         PrimitiveFieldComponent,
     ],
 })
-export class ThriftFormComponent<T>
-    extends FormControlSuperclass<T>
-    implements OnInit, OnChanges, Validator
-{
-    private destroyRef = inject(DestroyRef);
-    @Input() metadata!: ThriftAstMetadata[];
-    @Input() namespace!: string;
-    @Input() type?: ValueType;
-    @Input() field?: Field;
-    @Input() parent?: ThriftData;
-    @Input() extensions?: ThriftFormExtension[];
+export class ThriftFormComponent<T> extends FormControlSuperclass<T> implements Validator {
+    metadata = input.required<ThriftAstMetadata[]>();
+    namespace = input.required<string>();
+    type = input.required<ValueType>();
+    field = input<Field>();
+    parent = input<ThriftData>();
+    extensions = input<ThriftFormExtension[]>();
 
-    @HostBinding('class.v-thrift-form-hidden') hidden = false;
-
-    data!: ThriftData;
-    extensionResult$: Observable<ThriftFormExtensionResult> = defer(() => this.updated$).pipe(
-        switchMap(() => getExtensionsResult(this.extensions, this.data)),
+    data = computed(
+        () =>
+            new ThriftData(
+                this.metadata(),
+                this.namespace(),
+                this.type(),
+                this.field(),
+                this.parent(),
+            ),
+    );
+    private extensionResult$ = combineLatest([
+        toObservable(this.extensions),
+        toObservable(this.data),
+    ]).pipe(
+        switchMap(([extensions, data]) => getExtensionsResult(extensions, data)),
         shareReplay({ refCount: true, bufferSize: 1 }),
     );
-
-    private updated$ = new BehaviorSubject<void>(undefined);
-
-    override ngOnInit() {
-        this.extensionResult$
-            .pipe(
-                map((res) => !!res?.hidden),
-                distinctUntilChanged(),
-                takeUntilDestroyed(this.destroyRef),
-            )
-            .subscribe((hidden) => {
-                this.hidden = hidden;
-            });
-        return super.ngOnInit();
+    extensionResult = toSignal(this.extensionResult$);
+    @HostBinding('class.v-thrift-form-hidden') get hidden() {
+        return this.extensionResult()?.hidden;
     }
 
-    override ngOnChanges(changes: SimpleChanges) {
-        if (this.metadata && this.namespace && this.type) {
-            try {
-                this.data = new ThriftData(
-                    this.metadata,
-                    this.namespace,
-                    this.type,
-                    this.field,
-                    this.parent,
-                );
-                this.updated$.next(undefined);
-            } catch (err) {
-                this.data = undefined as never;
-                console.warn(err);
-            }
-        }
-        return super.ngOnChanges(changes);
+    override validate(control) {
+        return (
+            super.validate(control) ||
+            (this.extensionResult()?.validators || []).reduce((errors, validator) => {
+                const result = validator(control);
+                return result ? { ...(errors || {}), ...result } : errors;
+            }, null)
+        );
     }
 }

projects/ng-thrift/src/lib/components/thrift-editor/types/thrift-form-extension.ts

@@ -2,6 +2,7 @@ import { Observable, combineLatest, of, switchMap } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { TemplateRef } from '@angular/core';
+import { ValidatorFn } from '@angular/forms';
 import { ThemePalette } from '@angular/material/core';
 
 import { ThriftData } from '../../../models';
@@ -22,6 +23,7 @@ export interface ThriftFormExtensionResult<T = unknown> {
     isIdentifier?: boolean;
     label?: string;
     type?: 'datetime';
+    validators?: ValidatorFn[];
     converter?: Converter;
     hidden?: boolean;
     template?: TemplateRef<unknown>;

src/app/machines/machines.component.html

@@ -6,10 +6,11 @@
         <ng-template [formGroup]="filtersForm">
             <v-date-range-field formControlName="timespan"></v-date-range-field>
             <v-list-field formControlName="ids" label="IDs"></v-list-field>
-            <mat-form-field>
-                <mat-label>Namespace</mat-label>
-                <input formControlName="ns" matInput />
-            </mat-form-field>
+            <v-autocomplete-field
+                [options]="namespaces"
+                formControlName="ns"
+                label="Namespace"
+            ></v-autocomplete-field>
             <cc-domain-object-field
                 formControlName="provider_id"
                 name="provider"

src/app/machines/machines.component.ts

@@ -16,6 +16,7 @@ import {
     DialogService,
     FetchOptions,
     NotifyLogService,
+    Option,
     QueryParamsService,
     clean,
     countChanged,
@@ -116,6 +117,10 @@ export class MachinesComponent implements OnInit {
         map((v) => countChanged(this.initFilters, v, { timespan: isEqualDateRange })),
         shareReplay({ refCount: true, bufferSize: 1 }),
     );
+    namespaces: Option<string>[] = [
+        { label: 'invoice', value: 'invoice' },
+        { label: 'ff/withdrawal/session_v2', value: 'ff/withdrawal/session_v2' },
+    ];
 
     private initFilters = this.filtersForm.value;
 

src/app/machines/machines.module.ts

@@ -14,6 +14,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 
 import {
     ActionsModule,
+    AutocompleteFieldModule,
     DateRangeFieldModule,
     DialogModule,
     EnumKeyPipe,
@@ -60,6 +61,7 @@ import { MachinesComponent } from './machines.component';
         ThriftPipesModule,
         FiltersModule,
         TagModule,
+        AutocompleteFieldModule,
     ],
     declarations: [MachinesComponent, RepairByScenarioDialogComponent],
 })

src/app/withdrawals/withdrawals.component.ts

@@ -86,9 +86,13 @@ export class WithdrawalsComponent implements OnInit {
     columns: Column<StatWithdrawal>[] = [
         { field: 'id', sticky: 'start' },
         { field: 'external_id' },
+        createDomainObjectColumn((d) => ({ ref: { party_config: { id: d.party_id } } }), {
+            header: 'Merchant',
+        }),
         { field: 'created_at', cell: { type: 'datetime' } },
-        { field: 'identity_id' },
-        { field: 'source_id' },
+        createDomainObjectColumn((d) => ({ ref: { wallet_config: { id: d.source_id } } }), {
+            header: 'Wallet',
+        }),
         { field: 'destination_id' },
         createCurrencyColumn((d) => ({ amount: d.amount, code: d.currency_symbolic_code }), {
             field: 'amount',

src/components/thrift-api-crud/domain/services/domain-metadata-form-extensions/domain-metadata-form-extensions.service.ts

@@ -4,6 +4,7 @@ import { generate } from 'short-uuid';
 import { v4 } from 'uuid';
 
 import { Injectable, inject } from '@angular/core';
+import { Validators } from '@angular/forms';
 
 import { ThriftAstMetadata, metadata$ } from '@vality/domain-proto';
 import { DomainObject } from '@vality/domain-proto/domain';
@@ -40,6 +41,17 @@ export class DomainMetadataFormExtensionsService {
                         isIdentifier: true,
                     }),
             },
+            {
+                determinant: (data) => of(isTypeWithAliases(data, 'Url', 'webhooker')),
+                extension: () =>
+                    of({
+                        validators: [
+                            Validators.pattern(
+                                /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_+.~#?&/=]*)$/,
+                            ),
+                        ],
+                    }),
+            },
             {
                 determinant: (data) => of(isTypeWithAliases(data, 'AuthorID', 'domain_config_v2')),
                 extension: () =>