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'; import { AccountType } from '../../core/account-type'; /** Simple sort comparator for example ID/Name columns (for client-side sorting). */ const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) => (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 as AccountType).name, (b.type as AccountType).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; } }); } }