argos/dmp-frontend/src/app/users/components/users.component.ts

import { DataSource } from '@angular/cdk/table';
import { AfterViewInit, Component, OnInit, ViewChild } 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/Rx';
import { UserCriteria } from '../../models/criteria/users/UserCriteria';
import { DataTableRequest } from '../../models/data-table/DataTableRequest';
import { UserListingModel } from '../../models/users/UserListingModel';
import { UserReferenceService } from '../../services/user-reference/user-reference-data.service';
import { UsersCriteriaComponent } from '../../shared/components/criteria/users/users-criteria.component';
import { SnackBarNotificationComponent } from '../../shared/components/notificaiton/snack-bar-notification.component';


export class UsersDataSource extends DataSource<UserListingModel> {

	totalCount = 0;
	isLoadingResults = false;

	constructor(
		private _service: UserReferenceService,
		private _paginator: MatPaginator,
		private _sort: MatSort,
		private _languageService: TranslateService,
		private _snackBar: MatSnackBar,
		private _criteria: UsersCriteriaComponent
	) {
		super();

		//this._paginator.page.pipe(takeUntil(this._destroyed)).subscribe((pageEvent: PageEvent) => {
		//    this.store.dispatch(new LoadPhotosRequestAction(pageEvent.pageIndex, pageEvent.pageSize))
		//})
	}

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

		// If the user changes the sort order, reset back to the first page.
		//this._sort.matSortChange.pipe(takeUntil(this._destroyed)).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<UserCriteria>(startIndex, this._paginator.pageSize, { fields: fields });
				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,
				});
				this._criteria.onCallbackError(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; }
				//result.data.forEach((element: any) => {
				//	const roles: String[] = [];
				//	element.roles.forEach((role: any) => {
				//		this._languageService.get(this._utilities.convertFromPrincipalAppRole(role)).pipe(takeUntil(this._destroyed)).subscribe(
				//			value => roles.push(value)
				//		);
				//	});
				//	element.roles = roles;
				//});
				return result.data;
			});
	}

	disconnect() {
		// No-op
	}
}

@Component({
	selector: 'app-users-component',
	templateUrl: './users.component.html',
	styleUrls: ['./users.component.scss']
})
export class UsersComponent implements OnInit, AfterViewInit {

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

	dataSource: UsersDataSource | null;
	displayedColumns: String[] = ['name', 'email', 'lastloggedin', 'roles'];

	constructor(private userService: UserReferenceService, private router: Router, private languageService: TranslateService, public snackBar: MatSnackBar) {

	}

	ngOnInit() {
		//this.refresh(); //called on ngAfterViewInit with default criteria
	}

	ngAfterViewInit() {
		setTimeout(() => {
			this.criteria.setRefreshCallback(() => this.refresh());
			this.criteria.setCriteria(this.getDefaultCriteria());
			this.criteria.controlModified();
		});
	}

	refresh() {
		this.dataSource = new UsersDataSource(this.userService, this._paginator, this.sort, this.languageService, this.snackBar, this.criteria);
	}

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