106 lines
3.7 KiB
TypeScript
106 lines
3.7 KiB
TypeScript
import { PercentPipe } from '@angular/common';
|
|
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 { 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, Router, RouterLink } from '@angular/router';
|
|
import { debounceTime, distinctUntilChanged, Observable } from 'rxjs';
|
|
|
|
import { Customer } from '../../core/customer';
|
|
import { PagedResult } from '../../core/paged-result';
|
|
import { CustomerListDatasource } from './customer-list-datasource';
|
|
|
|
@Component({
|
|
selector: 'app-customer-list',
|
|
templateUrl: './customer-list.component.html',
|
|
styleUrls: ['./customer-list.component.css'],
|
|
imports: [
|
|
MatButtonModule,
|
|
|
|
MatIconModule,
|
|
MatTableModule,
|
|
PercentPipe,
|
|
RouterLink,
|
|
MatInputModule,
|
|
MatPaginatorModule,
|
|
MatSortModule,
|
|
ReactiveFormsModule,
|
|
],
|
|
})
|
|
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>;
|
|
}>;
|
|
|
|
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
|
|
displayedColumns = ['name', 'phone', 'address', 'printInBill', 'discounts'];
|
|
|
|
constructor() {
|
|
this.form = new FormGroup({
|
|
filter: new FormControl<string>('', { nonNullable: true }),
|
|
});
|
|
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: Customer) => (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);
|
|
}
|
|
}
|