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';
import { DropdownField } from '../../app/form/fields/dropdown/field-dropdown';
import { Param } from '../entities/model/param';

declare var $: any;

@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[];
  @Input() datasetProfileDropDown: DropdownField;
  datasetResource: DataTableResource<Dataset>;
  @Input() datasetCount = 0;
  @Input() dmpIdforDatasets: string;
  @Input() dmpLabelforDatasets: string;
  dataset: any;

  //@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) {
    this.dataset = {
      id: null,
      label: '',
      reference: '',
      uri: '',
      properties: '',
      profile: { "id": '' },
      dmp: { "id": '' }
    }

    this.datasetProfileDropDown = new DropdownField();
    this.datasetProfileDropDown.options = [];

  }

  ngOnInit() {    
    //this.projects = this.serverService.getDummyProjects();
    this.datasets = [];
    console.log(this.dmpIdforDatasets);
    this.serverService.getDatasetForDmp({ "id": this.dmpIdforDatasets }).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;
          dt.dmp = this.dmpLabelforDatasets; //to pairnw apo to datatable tou dmp
          dt.profile = resp.profile.label;
          dt.profileId = resp.profile.id;
          this.datasets.push(dt);
          var params = { limit: 8, offset: 0, sortAsc: false }
          this.afterLoad();
          this.datasetResource.query(params).then(datasets => this.datasets = datasets);
        });
      }
    );

    this.serverService.getAllDatsetsProfile().subscribe(
      response => {
        console.log("response");
        console.log(response);
        //let params = new Param();
        response.forEach((datasetprofile) => {
          let params = new Param();
          params.key = datasetprofile.id;
          params.value = datasetprofile.label;
          this.datasetProfileDropDown.options.push(params);
        });

      }
    )
  }

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

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

  selectDataset(item) {
    this.ngZone.run(() => this.router.navigate(['dynamic-form', {id: item.profileId, datasetId:item.id, datasetProperties:item.properties}]));
  }

  SaveNewDataset() {        
    this.dataset.dmp = { "id": this.dmpIdforDatasets }
    this.dataset.profile = { "id": this.dataset.profile }
    this.serverService.createDatasetForDmp(this.dataset).subscribe(
      response => {
        console.log(response);

      }
    )
    $("#newDatasetModal").modal("hide");
    this.CallDatasets();
  }

  SaveEditedDataset(){
    this.dataset.dmp = { "id": this.dmpIdforDatasets }
    this.dataset.profile = { "id": this.dataset.profile }
    this.serverService.updateDatsetsProfile(this.dataset).subscribe(
      response => {
        console.log(response);

      }
    )
    $("#newDatasetModal").modal("hide");
    this.CallDatasets();
  }

  SaveDataset(){debugger;
    if(this.dataset.id ==null)
      this.SaveNewDataset();
    else
    this.SaveEditedDataset();
  }

  CallDatasets(){
    this.serverService.getDatasetForDmp({ "id": this.dmpIdforDatasets }).subscribe(
      response => {
  
        console.log("response");
        console.log(response);
        this.datasets = [];
        response.forEach(resp => {
  
          let dt = new Dataset();
          dt.id = resp.id;
          dt.name = resp.label;
          dt.uriDataset = resp.uri;
          dt.dmp = resp.dmp.label;
          dt.profile = resp.profile.label;
          dt.profileId = resp.profile.id;
          this.datasets.push(dt);
          var params = { limit: 8, offset: 0, sortAsc: false }
          this.afterLoad();
          this.datasetResource.query(params).then(datasets => this.datasets = datasets);
        });
      }
    );
  }
 
  // special params:
  translations = <DataTableTranslations>{
    indexColumn: 'Index column',
    expandColumn: 'Expand column',
    selectColumn: 'Select column',
    paginationLimit: 'Max results',
    paginationRange: 'Result range'
  };

  getDatasetForDmpMethod(dmpid) {
    this.serverService.getDatasetForDmp({ "id": dmpid }).subscribe(
      response => {

        console.log("response");
        console.log(response);
        this.datasets = [];
        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);
        });
      }
    );
  }

  editRow(item) { debugger;
    this.dataset.label = item.name;
    this.dataset.uri = item.uriDataset;
    this.dataset.dmp = item.dmp;
    this.dataset.profile = item.profileId;
    this.dataset.id = item.id;
    $("#newDatasetModal").modal("show");
  }

  newDataset() {
    this.dataset.label = "";
    this.dataset.uri = "";
    this.dataset.dmp =this.dmpIdforDatasets;
    this.dataset.profile = "";
    $("#newDatasetModal").modal("show");
  }

}