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

import { DataSource } from '@angular/cdk/table';
import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatPaginator, MatSnackBar, MatSort } from '@angular/material';
import { Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Observable } from 'rxjs';
import { environment } from '../../../environments/environment';
import { ProjectCriteria } from '../../models/criteria/project/ProjectCriteria';
import { DataTableRequest } from '../../models/data-table/DataTableRequest';
import { ProjectListingModel } from '../../models/projects/ProjectListingModel';
import { ProjectStateType } from '../../models/projects/ProjectStateType';
import { LanguageResolverService } from '../../services/language-resolver/language-resolver.service';
import { ProjectService } from '../../services/project/project.service';
import { BreadcrumbItem } from '../../shared/components/breadcrumb/definition/breadcrumb-item';
import { IBreadCrumbComponent } from '../../shared/components/breadcrumb/definition/IBreadCrumbComponent';
import { ProjectCriteriaComponent } from '../../shared/components/criteria/projects/projects-criteria.component';
import { JsonSerializer } from '../../utilities/JsonSerializer';

@Component({
	selector: 'app-project-listing-component',
	templateUrl: 'project-listing.component.html',
	styleUrls: ['./project-listing.component.scss'],
	encapsulation: ViewEncapsulation.None
})
export class ProjectListingComponent implements OnInit, IBreadCrumbComponent {

	public breadCrumbs: Observable<BreadcrumbItem[]> = Observable.of([]);

	@ViewChild(MatPaginator) _paginator: MatPaginator;
	@ViewChild(MatSort) sort: MatSort;
	@ViewChild(ProjectCriteriaComponent) criteria: ProjectCriteriaComponent;

	host = environment.Server;
	dataSource: ProjectDataSource | null;
	displayedColumns: String[] = ['avatar', 'name', 'abbreviation', 'start', 'end', 'dmps'];

	constructor(
		public projectService: ProjectService,
		public router: Router,
		public languageService: TranslateService,
		public snackBar: MatSnackBar,
		public languageResolverService: LanguageResolverService
	) {

	}

	ngOnInit() {
		this.breadCrumbs = Observable.of([]);

		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(['/projects/edit/' + rowId]);
	}

	getDefaultCriteria(): ProjectCriteria {
		const defaultCriteria = new ProjectCriteria();
		defaultCriteria.projectStateType = ProjectStateType.OnGoing;
		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;
				let fields: Array<string> = new Array();
				if (this._sort.active) { fields = this._sort.direction === 'asc' ? ['+' + this._sort.active] : ['-' + this._sort.active]; }
				const request = new DataTableRequest<ProjectCriteria>(startIndex, this._paginator.pageSize, { fields: fields });
				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 => {
				result.data = JsonSerializer.fromJSONArray(result.data, ProjectListingModel);
				return result;
			})
			.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.map(item => {
					item.dmps.map(dmp => {
						dmp.url = 'dmps/edit/' + dmp.url;
						dmp.all = 'dmps/project/' + item.id;
						return dmp;
					});
					return item;
				});
			});

	}

	disconnect() {
		// No-op
	}
}