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

import { Component, ViewChild, OnInit, AfterViewInit } 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.css'],
  providers: [ProjectService]
})
export class FormsComponent implements OnInit, AfterViewInit {

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

  dataSource: FormsDataSource | null;
  displayedColumns: String[] = ['type', 'projectName', 'submissionTime', 'description', 'status'];

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

  }

  ngOnInit() {

  }

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

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

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

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

  // canShowOwner(): boolean {
  //   const principal: Principal = this.authentication.current();
  //   if (principal) {
  //     const principalRoles = principal.appRoles;
  //     for (let i = 0; i < principalRoles.length; i++) {
  //       if (principalRoles[i] === Principal.AppRole.Admin || principalRoles[i] === Principal.AppRole.BudgetManager) {
  //         return true;
  //       }
  //     }
  //   }
  //   return false;
  // }
}

export class FormsDataSource 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(startIndex, this._paginator.pageSize);
        request.projectCriteria = 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,
          extraClasses: ['snackbar-warning']
        });
        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; }
        return result.data;
      });
  }

  disconnect() {
    // No-op
  }
}
// export class ProjectListingComponent implements OnInit{

// // Start ALTERNATIVE
//   //whole dmp data model
//   tableData : any[] = new Array();

//   //organisation editor data model
//   editingOrganisation: any = {};
//   organisationEditorForm : any;

//   //required by the table
//   public filterQuery = "";
//   public rowsOnPage = 10;
//   public sortBy = "label";
//   public sortOrder = "asc";


//   // for tableIds
//   showIDs : boolean = false;

//   statusDropDown: DropdownField;

//   project: any;

//   whoami: any;
//   onlyMyProjects : boolean = false;

//   options: DatepickerOptions = {
//     minYear: 1900,
//     maxYear: 2050,
//     displayFormat: 'MMM D[,] YYYY',
//     barTitleFormat: 'MMMM YYYY',
//     firstCalendarDay: 0 // 0 - Sunday, 1 - Monday
//   };

//   //breadcrumbHome: MenuItem = {icon: 'fa fa-home'};
//   breadcrumbData: MenuItem[] = new Array<MenuItem>();

//   constructor( 
//     private serverService: ServerService,
//     private route: ActivatedRoute,
//     private router: Router) {
//       this.statusDropDown = new DropdownField();
//       this.statusDropDown.options= [{key:'0', value:"Active"},{key:'1', value:"Inactive"}]
//       this.project = this.getEmptyProject();
//   }

//   ngAfterViewInit() {

//   }

// getEmptyProject(){
//   return {
//     label: '',
//     abbreviation:'',
//     reference:'',
//     uri:'',
//     description:'',
//     enddate:'',
//     startdate:''
//   }
// }


//   ngOnInit() {

//     this.getProjects();

//     this.serverService.whoami().subscribe(
//       response => {
//         this.whoami = response;
//         console.log(this.whoami)
//       },
//       err => {
//         simple_notifier("danger",null,"Could not retrieve user config");
//       }
//     );

//   }


// getProjects(muted? : boolean){
//   //this.serverService.getProjectsOfUser().subscribe(  
//   this.serverService.getAllProjects().subscribe(
//   response => {
//     this.tableData = response;
//     if(muted && muted!=true)
//       simple_notifier("success",null,"Updated projects table");
//   },
//   err => {
//     simple_notifier("danger",null,"Could not retrieve projects");
//   }
// );
// }



// showDatasets(){ //dmpId, event
//   //this.dataSetVisibe = true;

// }


// SaveProject(){

//   let action : Observable<any>;

//   if(this.project.id == null) //means it's a new one
//     action = this.serverService.createProject(this.project);
//   else
//     action = this.serverService.updateProject(this.project);
//   action.subscribe(
//     response =>{
//       this.getProjects();
//       simple_notifier("success",null, (this.project.id == null) ? "Created" : "Updated" +" projects table");    
//     },
//     error => {
//       simple_notifier("danger",null, "Could not "+ (this.project.id == null) ? "create" : "update" + " projects table");  
//     }
//   );

//   $("#newEditProjectModal").modal("hide");
// }

//   newProject(){
//     this.project = this.getEmptyProject();
//     $("#newEditProjectModal").modal("show");

//   }

//   editRow(item, event){ 
//     this.project = Object.assign({}, item);   //this will have id - that defines whether it's an update or not
//     this.project.creationUser = {"id":this.project.creationUser.id};
//     $("#newEditProjectModal").modal("show");

//     return false;
//   }


//   /*
//   markProjectForDelete(project){
//     this.project = project;
//   }

//   deleteProject(confirmation){
//     if(confirmation==true)
//       this.deleteRow(this.project);
//   }
//   */

// }