Add filter

.vercel/project.json

@@ -0,0 +1 @@
+{ "projectName": "trae_fraudbusters-ui_7iw0" }

src/app/sections/historical-data/components/inspect-results/historical-inspect-results-data.component.html

@@ -1,5 +1,5 @@
 <div fxLayout="column" [fxLayoutGap]="layoutGapM">
-    <fb-history-data-search (valueChanges)="search($event)"></fb-history-data-search>
+    <fb-history-data-search [showRuleFilters]="true" (valueChanges)="search($event)"></fb-history-data-search>
     <div *ngIf="inspectResults$ | async as inspectResults; else Empty" fxLayout="column" [fxLayoutGap]="layoutGapM">
         <fb-historical-data-inspect-results-list
             *ngIf="inspectResults.length > 0; else Empty"

src/app/sections/historical-data/components/inspect-results/historical-inspect-results-data.component.ts

@@ -37,6 +37,8 @@ export class HistoricalInspectResultsDataComponent {
             email: event.email,
             terminal: event.terminal,
             maskedPan: event.maskedPan,
+            template: event.template,
+            rule: event.rule,
             from: event.from,
             to: event.to,
         };

src/app/sections/historical-data/components/payments/historical-payments-data.component.html

@@ -1,5 +1,5 @@
 <div fxLayout="column" [fxLayoutGap]="layoutGapM">
-    <fb-history-data-search (valueChanges)="search($event)"></fb-history-data-search>
+    <fb-history-data-search [showRuleFilters]="true" (valueChanges)="search($event)"></fb-history-data-search>
     <div fxLayout fxLayoutAlign="end start">
         <button mat-button color="primary" (click)="createDataSet()" [disabled]="selectedPayments$.length === 0">
             CREATE NEW DATASET

src/app/sections/historical-data/components/payments/historical-payments-data.component.ts

@@ -62,6 +62,8 @@ export class HistoricalPaymentsDataComponent {
             email: event.email,
             terminal: event.terminal,
             maskedPan: event.maskedPan,
+            template: event.template,
+            rule: event.rule,
             from: event.from,
             to: event.to,
         };

src/app/sections/historical-data/components/search/history-data-search.component.html

@@ -59,5 +59,11 @@
         <mat-form-field appearance="outline">
             <input matInput placeholder="terminal" formControlName="terminal" type="string" autocomplete="false" />
         </mat-form-field>
+        <mat-form-field *ngIf="showRuleFilters" appearance="outline">
+            <input matInput placeholder="template" formControlName="template" type="string" autocomplete="false" />
+        </mat-form-field>
+        <mat-form-field *ngIf="showRuleFilters" appearance="outline">
+            <input matInput placeholder="rule" formControlName="rule" type="string" autocomplete="false" />
+        </mat-form-field>
     </div>
 </form>

src/app/sections/historical-data/components/search/history-data-search.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { debounceTime, map, take } from 'rxjs/operators';
@@ -12,6 +12,7 @@ import { removeEmptyProperties } from '../../../../shared/utils/remove-empty-pro
     styleUrls: ['search.component.scss'],
 })
 export class HistoryDataSearchComponent {
+    @Input() showRuleFilters = false;
     @Output() valueChanges: EventEmitter<string> = new EventEmitter();
 
     form: FormGroup = this.fb.group({
@@ -24,6 +25,8 @@ export class HistoryDataSearchComponent {
         fingerprint: '',
         email: '',
         terminal: '',
+        template: '',
+        rule: '',
         from: this.searchFieldService.todayFromTime().toISOString(),
         to: new Date().toISOString(),
     });
@@ -46,6 +49,8 @@ export class HistoryDataSearchComponent {
             params.fingerprint = v.fingerprint;
             params.email = v.email;
             params.terminal = v.terminal;
+            params.template = v.template;
+            params.rule = v.rule;
             params.country = v.country;
             this.router.navigate([location.pathname], { queryParams: params });
             this.valueChanges.emit(v);

src/app/sections/historical-data/search-historical-params.ts

@@ -14,4 +14,6 @@ export interface SearchHistoricalParams {
     email?: string;
     terminal?: string;
     maskedPan?: string;
+    template?: string;
+    rule?: string;
 }

src/app/sections/historical-data/services/fetch-historical.service.ts

@@ -23,6 +23,8 @@ export interface FetchPaymentParams {
     status?: string;
     fingerprint?: string;
     email?: string;
+    template?: string;
+    rule?: string;
 }
 
 export abstract class FetchHistoricalService<T, P> extends PartialFetcherContinuation<T, FetchPaymentParams> {
@@ -36,7 +38,21 @@ export abstract class FetchHistoricalService<T, P> extends PartialFetcherContinu
     protected abstract filter(params: SearchHistoricalParams): Observable<P>;
 
     protected fetch(params: FetchPaymentParams, continuationId?: string): Observable<FetchResultContinuation<T>> {
-        const { sortOrder, size, from, to, paymentId, cardToken, shopId, partyId, status, fingerprint, email } = params;
+        const {
+            sortOrder,
+            size,
+            from,
+            to,
+            paymentId,
+            cardToken,
+            shopId,
+            partyId,
+            status,
+            fingerprint,
+            email,
+            template,
+            rule,
+        } = params;
         return this.filter({
             from: this.datepipe.transform(from, DateFormat._yyyyMMDdHHMmSs),
             to: this.datepipe.transform(to, DateFormat._yyyyMMDdHHMmSs),
@@ -48,6 +64,8 @@ export abstract class FetchHistoricalService<T, P> extends PartialFetcherContinu
             status: status || '',
             fingerprint: fingerprint || '',
             email: email || '',
+            template: template || '',
+            rule: rule || '',
             size: size ? size : this.pageSize,
             ...(continuationId ? { continuationId } : {}),
         });

src/app/shared/components/charts/bar-chart/bar-chart.component.spec.ts

@@ -0,0 +1,11 @@
+import { BarChartComponent } from './bar-chart.component';
+import { DEFAULT_CONFIG } from './default-config';
+
+describe('BarChartComponent', () => {
+    it('creates an independent config containing formatter functions', () => {
+        const component = new BarChartComponent();
+
+        expect(component.config).toEqual(DEFAULT_CONFIG);
+        expect(component.config).not.toBe(DEFAULT_CONFIG);
+    });
+});

src/app/shared/components/charts/bar-chart/bar-chart.component.ts

@@ -1,4 +1,7 @@
 import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+// Apex options contain formatter callbacks, which structuredClone cannot clone.
+// eslint-disable-next-line you-dont-need-lodash-underscore/clone-deep
+import cloneDeep from 'lodash-es/cloneDeep';
 import { ApexAxisChartSeries } from 'ng-apexcharts';
 
 import { DEFAULT_CONFIG } from './default-config';
@@ -18,7 +21,7 @@ export class BarChartComponent implements OnChanges {
     @Input()
     height?: number;
 
-    config = structuredClone(DEFAULT_CONFIG);
+    config = cloneDeep(DEFAULT_CONFIG);
 
     ngOnChanges(changes: SimpleChanges) {
         if (changes.height && changes.height.currentValue !== changes.height.previousValue) {

src/app/shared/components/infinite-scroll-trigger.ts

@@ -0,0 +1,44 @@
+export class InfiniteScrollTrigger {
+    private observer?: IntersectionObserver;
+    private retryTimer?: number;
+    private isIntersecting = false;
+    private isLoading = false;
+    private requestPending = false;
+
+    constructor(private readonly loadMore: () => void) {}
+
+    observe(element: Element) {
+        this.observer = new IntersectionObserver(
+            ([entry]) => {
+                this.isIntersecting = entry.isIntersecting;
+                this.loadIfNeeded();
+            },
+            { rootMargin: '300px 0px' }
+        );
+        this.observer.observe(element);
+    }
+
+    setLoading(isLoading: boolean) {
+        const requestFinished = this.isLoading && !isLoading;
+        this.isLoading = isLoading;
+        if (requestFinished) {
+            this.requestPending = false;
+            this.retryTimer = window.setTimeout(() => this.loadIfNeeded());
+        }
+    }
+
+    disconnect() {
+        this.observer?.disconnect();
+        if (this.retryTimer) {
+            window.clearTimeout(this.retryTimer);
+        }
+    }
+
+    private loadIfNeeded() {
+        if (!this.isIntersecting || this.isLoading || this.requestPending) {
+            return;
+        }
+        this.requestPending = true;
+        this.loadMore();
+    }
+}

src/app/shared/components/show-more-panel-continuation/show-more-continuation-panel.component.html

@@ -1,3 +1,3 @@
-<mat-card class="show-more-panel" fxLayout>
-    <button mat-button (click)="getMore()" [disabled]="isLoading" fxFlex>SHOW MORE</button>
-</mat-card>
+<div #sentinel class="infinite-scroll-sentinel" aria-live="polite">
+    <mat-progress-spinner *ngIf="isLoading" color="primary" mode="indeterminate" diameter="32"></mat-progress-spinner>
+</div>

src/app/shared/components/show-more-panel-continuation/show-more-continuation-panel.component.scss

@@ -1,4 +1,7 @@
-.show-more-panel {
-    margin: 0;
-    padding: 0 !important;
+.infinite-scroll-sentinel {
+    display: flex;
+    min-height: 48px;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
 }

src/app/shared/components/show-more-panel-continuation/show-more-continuation-panel.component.ts

@@ -1,26 +1,52 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import {
+    AfterViewInit,
+    Component,
+    ElementRef,
+    EventEmitter,
+    Input,
+    NgZone,
+    OnDestroy,
+    Output,
+    ViewChild,
+} from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
-import { take } from 'rxjs/operators';
+
+import { InfiniteScrollTrigger } from '../infinite-scroll-trigger';
 
 @Component({
     selector: 'fb-show-more-continuation-panel',
     templateUrl: 'show-more-continuation-panel.component.html',
     styleUrls: ['show-more-continuation-panel.component.scss'],
 })
-export class ShowMoreContinuationPanelComponent {
-    @Input()
-    isLoading = false;
+export class ShowMoreContinuationPanelComponent implements AfterViewInit, OnDestroy {
+    @ViewChild('sentinel', { static: true }) sentinel: ElementRef<HTMLElement>;
+
+    @Input() set isLoading(value: boolean | null) {
+        this.loading = Boolean(value);
+        this.infiniteScrollTrigger.setLoading(this.loading);
+    }
+
+    get isLoading(): boolean {
+        return this.loading;
+    }
 
     @Output()
     showMore: EventEmitter<Params> = new EventEmitter();
 
-    queryParams = {};
+    private loading = false;
+    private readonly infiniteScrollTrigger: InfiniteScrollTrigger;
+
+    constructor(private route: ActivatedRoute, private ngZone: NgZone) {
+        this.infiniteScrollTrigger = new InfiniteScrollTrigger(() =>
+            this.ngZone.run(() => this.showMore.emit(this.route.snapshot.queryParams))
+        );
+    }
 
-    constructor(private route: ActivatedRoute) {
-        this.route.queryParams.pipe(take(1)).subscribe((v) => (this.queryParams = v));
+    ngAfterViewInit() {
+        this.infiniteScrollTrigger.observe(this.sentinel.nativeElement);
     }
 
-    getMore() {
-        this.showMore.emit(this.queryParams);
+    ngOnDestroy() {
+        this.infiniteScrollTrigger.disconnect();
     }
 }

src/app/shared/components/show-more-panel-continuation/show-more-continuation-panel.module.ts

@@ -1,13 +1,12 @@
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 import { ShowMoreContinuationPanelComponent } from './show-more-continuation-panel.component';
 
 @NgModule({
     declarations: [ShowMoreContinuationPanelComponent],
-    imports: [FlexModule, MatCardModule, MatButtonModule],
+    imports: [CommonModule, MatProgressSpinnerModule],
     exports: [ShowMoreContinuationPanelComponent],
 })
 export class ShowMoreContinuationPanelModule {}

src/app/shared/components/show-more-panel/show-more-panel.component.html

@@ -1,3 +1,3 @@
-<mat-card class="show-more-panel" fxLayout>
-    <button mat-button (click)="getMore()" [disabled]="isLoading" fxFlex>SHOW MORE</button>
-</mat-card>
+<div #sentinel class="infinite-scroll-sentinel" aria-live="polite">
+    <mat-progress-spinner *ngIf="isLoading" color="primary" mode="indeterminate" diameter="32"></mat-progress-spinner>
+</div>

src/app/shared/components/show-more-panel/show-more-panel.component.scss

@@ -1,4 +1,7 @@
-.show-more-panel {
-    margin: 0;
-    padding: 0 !important;
+.infinite-scroll-sentinel {
+    display: flex;
+    min-height: 48px;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
 }

src/app/shared/components/show-more-panel/show-more-panel.component.ts

@@ -1,24 +1,52 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import {
+    AfterViewInit,
+    Component,
+    ElementRef,
+    EventEmitter,
+    Input,
+    NgZone,
+    OnDestroy,
+    Output,
+    ViewChild,
+} from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
-import { take } from 'rxjs/operators';
+
+import { InfiniteScrollTrigger } from '../infinite-scroll-trigger';
 
 @Component({
     selector: 'fb-show-more-panel',
     templateUrl: 'show-more-panel.component.html',
     styleUrls: ['show-more-panel.component.scss'],
 })
-export class ShowMorePanelComponent {
-    @Input()
-    isLoading = false;
+export class ShowMorePanelComponent implements AfterViewInit, OnDestroy {
+    @ViewChild('sentinel', { static: true }) sentinel: ElementRef<HTMLElement>;
+
+    @Input() set isLoading(value: boolean | null) {
+        this.loading = Boolean(value);
+        this.infiniteScrollTrigger.setLoading(this.loading);
+    }
+
+    get isLoading(): boolean {
+        return this.loading;
+    }
 
     @Output()
     showMore: EventEmitter<Params> = new EventEmitter();
 
-    constructor(private route: ActivatedRoute) {
-        this.route.queryParams.pipe(take(1)).subscribe((v) => this.showMore.emit(v));
+    private loading = false;
+    private readonly infiniteScrollTrigger: InfiniteScrollTrigger;
+
+    constructor(private route: ActivatedRoute, private ngZone: NgZone) {
+        this.infiniteScrollTrigger = new InfiniteScrollTrigger(() =>
+            this.ngZone.run(() => this.showMore.emit(this.route.snapshot.queryParams))
+        );
+    }
+
+    ngAfterViewInit() {
+        this.infiniteScrollTrigger.observe(this.sentinel.nativeElement);
     }
 
-    getMore() {
-        this.showMore.emit();
+    ngOnDestroy() {
+        this.infiniteScrollTrigger.disconnect();
     }
 }

src/app/shared/components/show-more-panel/show-more-panel.module.ts

@@ -1,13 +1,12 @@
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 import { ShowMorePanelComponent } from './show-more-panel.component';
 
 @NgModule({
     declarations: [ShowMorePanelComponent],
-    imports: [FlexModule, MatCardModule, MatButtonModule],
+    imports: [CommonModule, MatProgressSpinnerModule],
     exports: [ShowMorePanelComponent],
 })
 export class ShowMorePanelModule {}