argos/dmp-frontend/src/app/projects/project-listing.component.ts

126 lines
4.2 KiB
TypeScript

import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } 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 { ProjectListingModel } from "../models/projects/ProjectListingModel";
import { ProjectService } from "../services/project/project.service";
import { ProjectCriteriaComponent } from "../shared/components/criteria/projects/projects-criteria.component";
import { ProjectCriteria } from "../models/criteria/project/ProjectCriteria";
import { Observable } from "rxjs/Observable";
import { DataTableRequest } from "../models/data-table/DataTableRequest";
import { SnackBarNotificationComponent } from "../shared/components/notificaiton/snack-bar-notification.component";
@Component({
selector: 'app-project-listing-component',
templateUrl: 'project-listing.component.html',
styleUrls: ['./project-listing.component.scss'],
providers: [ProjectService],
encapsulation: ViewEncapsulation.None
})
export class ProjectListingComponent implements OnInit {
@ViewChild(MatPaginator) _paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(ProjectCriteriaComponent) criteria: ProjectCriteriaComponent;
dataSource: ProjectDataSource | null;
displayedColumns: String[] = ['name', 'abbreviation', 'start', 'end'];
constructor(
private projectService: ProjectService,
private router: Router,
private languageService: TranslateService,
public snackBar: MatSnackBar,
) {
}
ngOnInit() {
this.criteria.setCriteria(this.getDefaultCriteria());
this.refresh();
this.criteria.setRefreshCallback(() => this.refresh());
}
refresh() {
this.dataSource = new ProjectDataSource(this.projectService, this._paginator, this.sort, this.languageService, this.snackBar, this.criteria);
}
rowClick(rowId: String) {
this.router.navigate(['/project/' + rowId]);
}
getDefaultCriteria(): ProjectCriteria {
const defaultCriteria = new ProjectCriteria();
return defaultCriteria;
}
}
export class ProjectDataSource extends DataSource<ProjectListingModel> {
totalCount = 0;
isLoadingResults = false;
constructor(
private _service: ProjectService,
private _paginator: MatPaginator,
private _sort: MatSort,
private _languageService: TranslateService,
private _snackBar: MatSnackBar,
private _criteria: ProjectCriteriaComponent
) {
super();
//this._paginator.page.subscribe((pageEvent: PageEvent) => {
// this.store.dispatch(new LoadPhotosRequestAction(pageEvent.pageIndex, pageEvent.pageSize))
//})
}
connect(): Observable<ProjectListingModel[]> {
const displayDataChanges = [
this._paginator.page
//this._sort.matSortChange
];
// If the user changes the sort order, reset back to the first page.
//this._sort.matSortChange.subscribe(() => {
// this._paginator.pageIndex = 0;
//})
return Observable.merge(...displayDataChanges)
.startWith(null)
.switchMap(() => {
setTimeout(() => {
this.isLoadingResults = true;
});
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
const request = new DataTableRequest<ProjectCriteria>(startIndex, this._paginator.pageSize);
request.criteria = this._criteria.criteria;
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.error);
return Observable.of(null);
})
.map(result => {
setTimeout(() => {
this.isLoadingResults = false;
});
return result;
})
.map(result => {
if (!result) { return []; }
if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
return result.data;
});
}
disconnect() {
// No-op
}
}