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 { Employee } from '../employee'; /** Simple sort comparator for example ID/Name columns (for client-side sorting). */ const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1); export class EmployeeListDataSource extends DataSource { private filterValue = ''; constructor( public data: Employee[], 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: Employee[]) => { if (this.paginator) { this.paginator.length = x.length; } }), ) .pipe(map((x: Employee[]) => this.getPagedData(this.getSortedData(x)))); } disconnect() {} private getFilteredData(data: Employee[]): Employee[] { return this.filterValue.split(' ').reduce( (p: Employee[], c: string) => p.filter((x) => { const employeeString = `${x.code} ${x.name} ${x.designation} ${x.costCentre}${ x.isActive ? ' active' : ' inactive' }`.toLowerCase(); return employeeString.indexOf(c) !== -1; }), Object.assign([], data), ); } private getPagedData(data: Employee[]) { if (this.paginator === undefined) { return data; } const startIndex = this.paginator.pageIndex * this.paginator.pageSize; return data.splice(startIndex, this.paginator.pageSize); } private getSortedData(data: Employee[]) { 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 'code': return compare(+a.code, +b.code, isAsc); case 'name': return compare(a.name, b.name, isAsc); case 'designation': return compare(a.designation, b.designation, isAsc); case 'salary': return compare(a.salary, b.salary, isAsc); case 'points': return compare(a.points, b.points, isAsc); case 'department': return compare(a.costCentre.name, b.costCentre.name, isAsc); case 'joiningDate': return compare(a.joiningDate, b.joiningDate, isAsc); case 'leavingDate': return compare(a.leavingDate || '', b.leavingDate || '', isAsc); default: return 0; } }); } }