From d5de868eb9566202dfc67995e333e0e8378d9734 Mon Sep 17 00:00:00 2001 From: Developer 02 Date: Fri, 30 Aug 2024 23:25:22 +0200 Subject: [PATCH] feat: added filter and paginator --- .../envelope-table.component.html | 10 ++++- .../envelope-table.component.scss | 41 +++++-------------- .../envelope-table.component.ts | 41 ++++++++++++++----- 3 files changed, 49 insertions(+), 43 deletions(-) diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.html b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.html index f2d68c2d..af46cd56 100644 --- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.html +++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.html @@ -1,4 +1,9 @@ - + + Filter + + + +
@for (colId of displayedColumns; track colId) { @@ -45,4 +50,5 @@ (click)="expandedElement = expandedElement === element ? null : element"> -
\ No newline at end of file + + \ No newline at end of file diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.scss b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.scss index 19d1304d..25f0e5a8 100644 --- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.scss +++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.scss @@ -1,31 +1,10 @@ -.example-element-row td { - border-bottom-width: 0; - } - - .example-element-detail { - overflow: hidden; - display: flex; - } - - .example-element-diagram { - min-width: 80px; - border: 2px solid black; - padding: 8px; - font-weight: lighter; - margin: 8px 0; - height: 104px; - } - - .example-element-symbol { - font-weight: bold; - font-size: 40px; - line-height: normal; - } - - .example-element-description { - padding: 16px; - } - - .example-element-description-attribution { - opacity: 0.5; - } \ No newline at end of file +/* Structure */ +table { + width: 100%; +} + +.mat-mdc-form-field { + font-size: 14px; + width: 100%; + margin-top: 10px; +} \ No newline at end of file diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.ts index 57c147a7..f48de529 100644 --- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.ts +++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.ts @@ -1,15 +1,19 @@ -import { Component, Input, ViewChild } from '@angular/core'; +import { AfterViewInit, Component, Input, ViewChild } from '@angular/core'; import { EnvelopeReceiverService } from '../../services/envelope-receiver.service'; -import { MatTable, MatTableModule } from '@angular/material/table'; +import { MatTable, MatTableModule, MatTableDataSource } from '@angular/material/table'; import { CommonModule } from '@angular/common' import { MatIconModule } from '@angular/material/icon'; import { MatButtonModule } from '@angular/material/button'; import { animate, state, style, transition, trigger } from '@angular/animations'; +import { MatInputModule } from '@angular/material/input'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import {MatPaginator, MatPaginatorModule} from '@angular/material/paginator'; + @Component({ selector: 'app-envelope-table', standalone: true, - imports: [MatTableModule, CommonModule, MatTableModule, MatButtonModule, MatIconModule], + imports: [MatTableModule, CommonModule, MatTableModule, MatButtonModule, MatIconModule, MatFormFieldModule, MatInputModule, MatTableModule, MatPaginator, MatPaginatorModule], templateUrl: './envelope-table.component.html', animations: [ trigger('detailExpand', [ @@ -20,9 +24,7 @@ import { animate, state, style, transition, trigger } from '@angular/animations' ], styleUrl: './envelope-table.component.scss' }) -export class EnvelopeTableComponent { - - @Input() data: Array = [] +export class EnvelopeTableComponent implements AfterViewInit { @Input() options?: { min_status?: number; max_status?: number; ignore_status?: number[] } @@ -57,13 +59,24 @@ export class EnvelopeTableComponent { @ViewChild(MatTable) table!: MatTable; - constructor(private erService: EnvelopeReceiverService) { } + @ViewChild(MatPaginator) paginator!: MatPaginator; - async ngOnInit() { - if (this.data.length === 0) - this.data = await this.erService.getEnvelopeReceiverAsync(this.options); + dataSource = new MatTableDataSource(); + + constructor(private erService: EnvelopeReceiverService) { + this.dataSource.filterPredicate = (data: any, filter: string): boolean => { + const dataStr = Object.values(data as { [key: string]: any }).reduce((currentTerm, key) => { + return currentTerm + (key ? key.toString().toLowerCase() : ''); + }, '').trim().toLowerCase(); + return dataStr.indexOf(filter) !== -1; + }; } + async ngAfterViewInit() { + this.dataSource.paginator = this.paginator; + this.dataSource.data = await this.erService.getEnvelopeReceiverAsync(this.options); + } + public updateTable() { this.table.renderRows(); } @@ -71,4 +84,12 @@ export class EnvelopeTableComponent { isExpandedRow(index: number, row: any): boolean { return (row?.envelopeId === this.expandedElement?.envelopeId) && (row?.receiverId === this.expandedElement?.receiverId); } + + applyFilter(event: Event) { + const filterValue = (event.target as HTMLInputElement).value; + + this.dataSource.filter = "test82"; + + console.log(this.dataSource.filteredData) + } } \ No newline at end of file