argos/dmp-frontend/src/app/datasets/dataset.component.ts

import { Component, OnInit, Input, ViewChild, NgZone ,Output ,EventEmitter} from '@angular/core';
import {GoogleSignInSuccess} from 'angular-google-signin';
import { Router, ActivatedRoute } from '@angular/router';
import { ServerService } from '../../app/services/server.service';
import { Project } from '../entities/model/project';
import { Dataset } from '../entities/model/dataset';
import { Dmp } from '../entities/model/dmp';
import { DataTable, DataTableTranslations, DataTableResource } from 'angular-4-data-table-bootstrap-4';

@Component({
  selector: 'datasets-table',
  templateUrl: 'dataset.html',
//   template: `
//   <h1 class="title">Projects</h1>
  
//     <ul class="list-group col-md-4">
//       <li *ngFor="let project of projects"
//         class="list-group-item">
//         <a [routerLink]="['/dynamic-form', project.id]" >
//           {{ project.name }}
//         </a>
//       </li>
//     </ul>

//   <router-outlet></router-outlet>
// `,
  providers:  [ServerService]
})

export class DatasetsComponent implements OnInit{

  returnUrl: string;
  @Input() datasets: Dataset[];
  datasetResource :DataTableResource<Dataset>;
  @Input() datasetCount = 0;

  @ViewChild(DataTable) projectsTable;

  dataSetValue:boolean
  @Input()
  get dataSetVisibe(){
    return this.dataSetValue;
  }
  @Output()
  public dataSetValueChange = new EventEmitter();
  
  set dataSetVisibe(value:any){
    this.dataSetValue = value 
    this.dataSetValueChange.emit(this.dataSetValue)
  }

  constructor( 
    private serverService: ServerService,
    private route: ActivatedRoute,
    private router: Router,
    private ngZone: NgZone){

  }

  ngOnInit() {
    //this.projects = this.serverService.getDummyProjects();
    this.datasets = [];
    this.serverService.getAllDataSet().subscribe( 
      response => {

        console.log("response");
        console.log(response);
        response.forEach(resp => {

          let dt = new Dataset();
          dt.id = resp.id;
          dt.name = resp.label;
          dt.uriDataset = resp.uri;
          this.datasets.push(dt);
          var params = {limit:8,offset:0, sortAsc:false}
          this.afterLoad();   
          this.datasetResource.query(params).then(datasets => this.datasets = datasets);           
        });
      }      
    );    
  }

  reloadDatasets(params) {
    this.datasetResource = new DataTableResource(this.datasets);
    this.datasetResource.query(params).then(projects => this.datasets = projects);
}

afterLoad(){
  this.datasetResource = new DataTableResource(this.datasets);
  this.datasetResource.count().then(count => this.datasetCount = count);
}

rowClick(rowEvent){
  this.ngZone.run(() => this.router.navigateByUrl('dynamic-form', rowEvent.row.item.id));
}

  // special params:
  translations = <DataTableTranslations>{
    indexColumn: 'Index column',
    expandColumn: 'Expand column',
    selectColumn: 'Select column',
    paginationLimit: 'Max results',
    paginationRange: 'Result range'
};



}