argos/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.ts

import {of as observableOf,  Observable } from 'rxjs';
import { Component, OnInit, ViewChild } from "@angular/core";
import { MatPaginator } from "@angular/material/paginator";
import { MatSort } from "@angular/material/sort";
import { Router, ActivatedRoute } from "@angular/router";
import { takeUntil } from "rxjs/operators";
import { BaseComponent } from "../../core/common/base/base.component";
import { DataTableRequest } from "../../core/model/data-table/data-table-request";
import { DmpListingModel } from "../../core/model/dmp/dmp-listing";
import { ExploreDmpCriteriaModel } from "../../core/query/explore-dmp/explore-dmp-criteria";
import { DmpService } from "../../core/services/dmp/dmp.service";
import { IBreadCrumbComponent } from "../misc/breadcrumb/definition/IBreadCrumbComponent";
import { BreadcrumbItem } from "../misc/breadcrumb/definition/breadcrumb-item";
import { TranslateService } from "@ngx-translate/core";

@Component({
	selector: 'app-explore-dmp-listing-component',
	templateUrl: 'explore-dmp-listing.component.html',
	styleUrls: ['./explore-dmp-listing.component.scss'],
})
export class ExploreDmpListingComponent extends BaseComponent implements OnInit, IBreadCrumbComponent {

	@ViewChild(MatPaginator, { static: true }) _paginator: MatPaginator;
	@ViewChild(MatSort, { static: false }) sort: MatSort;

	exploreDmpCriteriaModel: ExploreDmpCriteriaModel;
	titlePrefix: string;
	totalCount: number;
	listingItems: DmpListingModel[] = [];
	breadCrumbs: Observable<BreadcrumbItem[]>;

	constructor(
		private dmpService: DmpService,
		private router: Router,
		private route: ActivatedRoute,
		private language: TranslateService,
	) {
		super();
	}

	ngOnInit() {
		this.refresh();

		const breadCrumbs = [];
		breadCrumbs.push({
			parentComponentName: null,
			label: this.language.instant('NAV-BAR.PUBLIC-DMPS'),
			url: "/explore-plans"
		})
		this.breadCrumbs = observableOf(breadCrumbs);
	}

	refresh() {
		if (this._paginator.pageSize === undefined) this._paginator.pageSize = 10;
		const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
		let fields: Array<string> = new Array();
		if (this.sort && this.sort.active) { fields = this.sort.direction === 'asc' ? ['+' + this.sort.active] : ['-' + this.sort.active]; }
		const request = new DataTableRequest<ExploreDmpCriteriaModel>(startIndex, this._paginator.pageSize, { fields: fields });
		request.criteria = this.exploreDmpCriteriaModel || this.getDefaultCriteria();
		this.dmpService.getPublicPaged(request, "listing").pipe(takeUntil(this._destroyed)).subscribe(result => {
			if (!result) { return []; }
			if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
			this.listingItems = result.data;
		});
	}

	rowClicked(dmp: DmpListingModel) {
		this.router.navigate(['overview', dmp.id], { relativeTo: this.route });
	}

	getDefaultCriteria(): ExploreDmpCriteriaModel {
		const defaultCriteria = new ExploreDmpCriteriaModel();
		return defaultCriteria;
	}

	onCriteriaChange(event: ExploreDmpCriteriaModel) {
		this.exploreDmpCriteriaModel = event;
		this._paginator.pageIndex = 0;
		this.refresh();
	}

	pageThisEvent(event) {
		this.refresh();
	}

	// @ViewChild(MatPaginator) _paginator: MatPaginator;
	// @ViewChild(MatSort) sort: MatSort;
	// criteria: ExploreDmpCriteriaModel = new ExploreDmpCriteriaModel();

	// dataSource: DmpDataSource | null;
	// displayedColumns: String[] = ['name', 'grant', 'organisations', 'created'];
	// pageEvent: PageEvent;
	// titlePrefix: String;
	// dmpId: string;

	// constructor(
	// 	public dmpService: DmpService,
	// 	private router: Router,
	// 	private languageService: TranslateService,
	// 	public snackBar: MatSnackBar,
	// 	public route: ActivatedRoute
	// ) {
	// 	super();
	// }

	// ngOnInit() {
	// 	this.refresh();
	// }

	// rowClick(rowId: String) {
	// 	this.router.navigate(['/plans/publicEdit/' + rowId]);
	// }

	// refresh() {
	// 	this.dataSource = new DmpDataSource(this.dmpService, this._paginator, this.sort, this.languageService, this.snackBar, this.criteria);
	// }

	// getDefaultCriteria(dmpId: String): DmpCriteria {
	// 	const defaultCriteria = new DmpCriteria();
	// 	return defaultCriteria;
	// }

	// onCriteriaChange(event: ExploreDmpCriteriaModel) {
	// 	//console.log(event)
	// 	this.criteria = event;
	// 	this.refresh();
	// }
}

// export class DmpDataSource extends DataSource<DmpListingModel> {

// 	totalCount = 0;

// 	constructor(
// 		private _service: DmpService,
// 		private _paginator: MatPaginator,
// 		private _sort: MatSort,
// 		private _languageService: TranslateService,
// 		private _snackBar: MatSnackBar,
// 		private _criteria: ExploreDmpCriteriaModel,
// 	) {
// 		super();
// 	}

// 	connect(): Observable<DmpListingModel[]> {
// 		const displayDataChanges = [
// 			this._paginator.page
// 		];

// 		return Observable.merge(...displayDataChanges)
// 			.startWith(null)
// 			.switchMap(() => {
// 				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<ExploreDmpCriteriaModel>(startIndex, this._paginator.pageSize, { fields: fields });
// 				request.criteria = this._criteria;
// 				//if (this.dmpId) request.criteria.allVersions = true;
// 				return this._service.getPublicPaged(request);
// 			})
// 			.map(result => {
// 				if (!result) { return []; }
// 				if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
// 				return result.data;
// 			});
// 	}

// 	disconnect(): void {
// 		// No-op
// 	}
// }