Feature: Paged customer list.

bookie/src/app/customers/customer-list/customer-list.component.ts

@@ -1,10 +1,16 @@
 import { PercentPipe } from '@angular/common';
-import { Component, OnInit, inject } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild, inject, AfterViewInit } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterLink } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { debounceTime, distinctUntilChanged, Observable } from 'rxjs';
+import { PagedResult } from 'src/app/core/paged-result';
 
 import { Customer } from '../../core/customer';
 import { CustomerListDatasource } from './customer-list-datasource';
@@ -13,22 +19,88 @@ import { CustomerListDatasource } from './customer-list-datasource';
   selector: 'app-customer-list',
   templateUrl: './customer-list.component.html',
   styleUrls: ['./customer-list.component.css'],
-  imports: [MatButtonModule, MatCardModule, MatIconModule, MatTableModule, PercentPipe, RouterLink],
+  imports: [
+    MatButtonModule,
+    MatCardModule,
+    MatIconModule,
+    MatTableModule,
+    PercentPipe,
+    RouterLink,
+    MatInputModule,
+    MatPaginatorModule,
+    MatSortModule,
+    ReactiveFormsModule,
+  ],
 })
-export class CustomerListComponent implements OnInit {
+export class CustomerListComponent implements OnInit, AfterViewInit {
   private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private cdr = inject(ChangeDetectorRef);
+
+  @ViewChild('filterElement', { static: true }) filterElement!: ElementRef<HTMLInputElement>;
+  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort!: MatSort;
+
+  data: PagedResult<Customer> = new PagedResult<Customer>([], 0, 0, 0);
+  filter: Observable<string>;
+  dataSource: CustomerListDatasource;
+  form: FormGroup<{
+    filter: FormControl<string>;
+  }>;
 
-  dataSource: CustomerListDatasource = new CustomerListDatasource([]);
-  list: Customer[] = [];
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['name', 'phone', 'address', 'printInBill', 'discounts'];
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { list: Customer[] };
-      data.list.forEach((c) => (c.discounts = c.discounts.filter((d) => d.discount !== 0)));
-      this.list = data.list;
+  constructor() {
+    this.form = new FormGroup({
+      filter: new FormControl<string>('', { nonNullable: true }),
     });
-    this.dataSource = new CustomerListDatasource(this.list);
+    this.filter = this.form.controls.filter.valueChanges.pipe(debounceTime(150), distinctUntilChanged());
+    this.dataSource = new CustomerListDatasource(this.data, this.paginator, this.sort);
+  }
+
+  ngOnInit() {
+    const q = this.route.snapshot.queryParamMap.get('q');
+    if (q) {
+      this.form.controls.filter.setValue(q, { emitEvent: false }); // Prevent infinite loop
+    }
+    this.route.data.subscribe((value) => {
+      const data = value as { data: PagedResult<Customer> };
+      data.data.items.forEach((c) => (c.discounts = c.discounts.filter((d) => d.discount !== 0)));
+      this.data = data.data;
+      this.dataSource = new CustomerListDatasource(this.data, this.paginator, this.sort);
+      this.cdr.detectChanges();
+    });
+    this.sort.sortChange.subscribe({
+      next: () =>
+        this.router.navigate([], {
+          relativeTo: this.route,
+          queryParams: { f: this.sort?.active ?? 'name', d: this.sort?.direction },
+          queryParamsHandling: 'merge',
+        }),
+    });
+    this.paginator.page.subscribe({
+      next: () =>
+        this.router.navigate([], {
+          relativeTo: this.route,
+          queryParams: { s: this.paginator.pageSize, p: this.paginator.pageIndex },
+          queryParamsHandling: 'merge',
+        }),
+    });
+    this.filter.subscribe({
+      next: (value) => {
+        this.router.navigate([], {
+          relativeTo: this.route,
+          queryParams: { q: value },
+          queryParamsHandling: 'merge',
+        });
+      },
+    });
+  }
+
+  ngAfterViewInit() {
+    setTimeout(() => {
+      this.filterElement.nativeElement.focus();
+    }, 0);
   }
 }