83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
import { DataSource } from '@angular/cdk/collections';
|
|
import { MatPaginator } from '@angular/material/paginator';
|
|
import { MatSort } from '@angular/material/sort';
|
|
|
|
import { map } from 'rxjs/operators';
|
|
import { Observable, of as observableOf, merge, Subject } from 'rxjs';
|
|
import { Device } from '../../device';
|
|
import { SystemConfigService } from '../../services/system-config.service';
|
|
|
|
/**
|
|
* Data source for the DeviceList view. This class should
|
|
* encapsulate all logic for fetching and manipulating the displayed data
|
|
* (including sorting, pagination, and filtering).
|
|
*/
|
|
export class DeviceListDataSource extends DataSource<Device> {
|
|
data: Device[];
|
|
dataSubject: Subject<Device[]>;
|
|
paginator: MatPaginator;
|
|
sort: MatSort;
|
|
|
|
constructor(private systemConfigService: SystemConfigService) {
|
|
super();
|
|
}
|
|
|
|
/**
|
|
* Connect this data source to the table. The table will only update when
|
|
* the returned stream emits new items.
|
|
* @returns A stream of the items to be rendered.
|
|
*/
|
|
connect(): Observable<Device[]> {
|
|
// Combine everything that affects the rendered data into one update
|
|
// st
|
|
const dataMutations = [
|
|
this.dataSubject,
|
|
observableOf(this.data),
|
|
this.paginator.page,
|
|
this.sort.sortChange
|
|
];
|
|
|
|
return merge(...dataMutations).pipe(map(() => {
|
|
return this.getPagedData(this.getSortedData([...this.data]));
|
|
}));
|
|
}
|
|
|
|
/**
|
|
* Called when the table is being destroyed. Use this function, to clean up
|
|
* any open connections or free any held resources that were set up during connect.
|
|
*/
|
|
disconnect() { }
|
|
|
|
/**
|
|
* Paginate the data (client-side). If you're using server-side pagination,
|
|
* this would be replaced by requesting the appropriate data from the server.
|
|
*/
|
|
private getPagedData(data: Device[]) {
|
|
const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
|
|
return data.splice(startIndex, this.paginator.pageSize);
|
|
}
|
|
|
|
/**
|
|
* Sort the data (client-side). If you're using server-side sorting,
|
|
* this would be replaced by requesting the appropriate data from the server.
|
|
*/
|
|
private getSortedData(data: Device[]) {
|
|
if (!this.sort.active || this.sort.direction === '') {
|
|
return data;
|
|
}
|
|
|
|
return data.sort((a, b) => {
|
|
const isAsc = this.sort.direction === 'asc';
|
|
switch (this.sort.active) {
|
|
case 'name': return compare(a.name, b.name, isAsc);
|
|
case 'id': return compare(+a.deviceID, +b.deviceID, isAsc);
|
|
default: return 0;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function compare(a: string | number, b: string | number, isAsc: boolean) {
|
|
return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
|
|
}
|