import { DataSource } from '@angular/cdk/collections'; import { EventEmitter } from '@angular/core'; import { MatPaginator, PageEvent } from '@angular/material/paginator'; import { MatSort, Sort } from '@angular/material/sort'; import { merge, Observable, of as observableOf } from 'rxjs'; import { map, tap } from 'rxjs/operators'; import { Account } from '../../core/account'; /** Simple sort comparator for example ID/Name columns (for client-side sorting). */ function compare(a: string | number | boolean, b: string | number | boolean, isAsc: boolean) { return (a < b ? -1 : 1) * (isAsc ? 1 : -1); } export class AccountListDataSource extends DataSource { private filterValue = ''; constructor( public data: Account[], private filter: Observable, private paginator?: MatPaginator, private sort?: MatSort, ) { super(); this.filter = filter.pipe( tap((x) => { this.filterValue = x; }), ); } connect(): Observable { const dataMutations: ( | Observable | Observable | EventEmitter | EventEmitter )[] = [observableOf(this.data), this.filter]; if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page); if (this.sort) dataMutations.push((this.sort as MatSort).sortChange); return merge(...dataMutations) .pipe( map(() => this.getFilteredData([...this.data])), tap((x: Account[]) => { if (this.paginator) this.paginator.length = x.length; }), ) .pipe(map((x: Account[]) => this.getPagedData(this.getSortedData(x)))); } disconnect() {} private getFilteredData(data: Account[]): Account[] { return this.filterValue.split(' ').reduce( (p: Account[], c: string) => p.filter((x) => { const accountString = `${x.name} ${x.type} ${x.costCentre}${ x.isActive ? ' active' : ' inactive' }`.toLowerCase(); return accountString.indexOf(c) !== -1; }), Object.assign([], data), ); } private getPagedData(data: Account[]) { if (this.paginator === undefined) return data; const startIndex = this.paginator.pageIndex * this.paginator.pageSize; return data.splice(startIndex, this.paginator.pageSize); } private getSortedData(data: Account[]) { if (this.sort === undefined) return data; if (!this.sort.active || this.sort.direction === '') { return data; } const sort = this.sort as MatSort; return data.sort((a, b) => { const isAsc = sort.direction === 'asc'; switch (sort.active) { case 'name': return compare(a.name, b.name, isAsc); case 'type': return compare(a.type.name, b.type.name, isAsc); case 'isActive': return compare(a.isActive, b.isActive, isAsc); case 'isReconcilable': return compare(a.isReconcilable, b.isReconcilable, isAsc); case 'costCentre': return compare(a.costCentre.name, b.costCentre.name, isAsc); default: return 0; } }); } }