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

import { DataTableRequest } from '../../models/data-table/DataTableRequest';
import { ProjectListingModel } from '../../models/projects/ProjectListingModel';
import { ProjectCriteria } from '../../models/criteria/project/ProjectCriteria';
import { ProjectService } from '../../services/project/project.service';
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 { Observable } from "rxjs/Observable";
import { ProjectCriteriaComponent } from '../../shared/components/criteria/projects/projects-criteria.component';
import { HostConfiguration } from '../../app.constants';
import { LanguageService } from '../../services/language/language.service';
import { LanguageResolverService } from '../../services/language-resolver/language-resolver.service';
import { BreadcrumbItem } from '../../shared/components/breadcrumb/definition/breadcrumb-item';
import { IBreadCrumbComponent } from '../../shared/components/breadcrumb/definition/IBreadCrumbComponent';
import { ProjectStateType } from '../../models/projects/ProjectStateType';
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 = HostConfiguration.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
  }
}