feat: added filter and paginator

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.html

@@ -1,4 +1,9 @@
-<table #table mat-table [dataSource]="data" class="mat-elevation-z8">
+<mat-form-field>
+    <mat-label>Filter</mat-label>
+    <input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input>
+</mat-form-field>
+
+<table #table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
 
     @for (colId of displayedColumns; track colId) {
     <ng-container matColumnDef="{{colId}}">
@@ -45,4 +50,5 @@
         (click)="expandedElement = expandedElement === element ? null : element">
     </tr>
     <!--<tr mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpandedRow" class="example-detail-row"></tr>-->
-</table>
+</table>
+<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>

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;
-  }
+/* Structure */
+table {
+  width: 100%;
+}
+
+.mat-mdc-form-field {
+  font-size: 14px;
+  width: 100%;
+  margin-top: 10px;
+}

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<any> = []
+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<any>;
 
-  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)
+  }
 }