import { Component, ViewChild, OnInit, AfterViewInit } from "@angular/core"; import { MatPaginator, MatSort, MatSnackBar } from "@angular/material"; import { Router } from "@angular/router"; import { TranslateService } from "@ngx-translate/core"; import { DataSource } from "@angular/cdk/table"; import { DatasetCriteriaComponent } from "../shared/components/criteria/datasets/datasets-criteria.component"; import { DatasetCriteria } from "../models/criteria/dataset/DatasetCriteria"; import { Observable } from "rxjs/Observable"; import { DataTableRequest } from "../models/data-table/DataTableRequest"; import { SnackBarNotificationComponent } from "../shared/components/notificaiton/snack-bar-notification.component"; import { DatasetService } from "../services/dataset/dataset.service"; import { DatasetListingModel } from "../models/datasets/DatasetListingModel"; @Component({ selector: 'app-dataset-listing-component', templateUrl: 'dataset-listing.component.html', styleUrls: ['./dataset-listing.component.css'], providers: [DatasetService] }) export class DatasetListingComponent implements OnInit, AfterViewInit { @ViewChild(MatPaginator) _paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; @ViewChild(DatasetCriteriaComponent) criteria: DatasetCriteriaComponent; dataSource: DatasetDataSource | null; displayedColumns: String[] = ['label', 'reference', 'uri', 'status', 'description', 'created', 'actions']; constructor( private datasetService: DatasetService, private router: Router, private languageService: TranslateService, public snackBar: MatSnackBar, ) { } ngOnInit() { } ngAfterViewInit() { setTimeout(() => { this.criteria.setRefreshCallback(() => this.refresh()); this.criteria.setCriteria(this.getDefaultCriteria()); this.criteria.controlModified(); }); } refresh() { this.dataSource = new DatasetDataSource(this.datasetService, this._paginator, this.sort, this.languageService, this.snackBar, this.criteria); } rowClick(rowId: String) { this.router.navigate(['/project/' + rowId]); } getDefaultCriteria(): DatasetCriteria { const defaultCriteria = new DatasetCriteria(); return defaultCriteria; } } export class DatasetDataSource extends DataSource { totalCount = 0; isLoadingResults = false; constructor( private _service: DatasetService, private _paginator: MatPaginator, private _sort: MatSort, private _languageService: TranslateService, private _snackBar: MatSnackBar, private _criteria: ProjectCriteriaComponent ) { super(); } connect(): Observable { const displayDataChanges = [ this._paginator.page //this._sort.matSortChange ]; return Observable.merge(...displayDataChanges) .startWith(null) .switchMap(() => { setTimeout(() => { this.isLoadingResults = true; }); const startIndex = this._paginator.pageIndex * this._paginator.pageSize; const request = new DataTableRequest(startIndex, this._paginator.pageSize); request.criteria = this._criteria.getFormData(); return this._service.getPaged(request); }) .catch((error: any) => { this._snackBar.openFromComponent(SnackBarNotificationComponent, { data: { message: 'GENERAL.SNACK-BAR.FORMS-BAD-REQUEST', language: this._languageService }, duration: 3000, extraClasses: ['snackbar-warning'] }); this._criteria.onCallbackError(error); return Observable.of(null); }) .map(result => { setTimeout(() => { this.isLoadingResults = false; }); return result.data; }) .map(result => { if (!result) { return []; } if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; } return result.data; }); } disconnect() { // No-op } }