argos/dmp-frontend/src/app/dmps/dmp.component.ts

import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import {GoogleSignInSuccess} from 'angular-google-signin';
import { Router, ActivatedRoute } from '@angular/router';
import { ServerService } from '../../app/services/server.service';
import { Dmp } from '../entities/model/dmp';
import { Dataset } from '../entities/model/dataset';
import { Project } from '../entities/model/project';
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';
import { ModalComponent } from '../modal/modal.component';
import { HttpErrorResponse } from '@angular/common/http';
import { FormGroup, FormControl }                 from '@angular/forms'; //na dw an xreiazontai
import { NgForm } from '@angular/forms';
import { DatasetsComponent } from '../datasets/dataset.component';

declare var $ :any;

@Component({
  selector: 'dmps',
  templateUrl: 'dmps.html',
  providers:  [ServerService]
})

export class DmpComponent implements OnInit{
  @Input() dmps: Dmp[];
  dmp:any;
  dmpResource :DataTableResource<Dmp>;
  dmpIdforDatasets: string;
  @Input() dmpCount = 0;
  @Input() projectsDropDown:DropdownField;
  @Input() dataSetVisibe:boolean;
  @Input() projects: Project[];  


  @ViewChild(DataTable) dmpsTable;
  @ViewChild(DataTable) datasetsTable;
  @ViewChild(DatasetsComponent) datasetsComponent:DatasetsComponent;
  @ViewChild('isignOutBtn') isignOutBtn;

  constructor( 
    private serverService: ServerService,
    private route: ActivatedRoute,
    private router: Router){
      this.projectsDropDown = new DropdownField();      
      this.projectsDropDown.options = [];
      this.projects = [];
      this.dataSetVisibe = false;
      this.dmp = {
        label: '',
        abbreviation:'',
        reference:'',
        uri:'',
        definition:''
      }
  }

  ngOnInit() {
    //this.projects = this.serverService.getDummyProjects();
    gapi.load('auth2', function() {
      gapi.auth2.init({});
    });
    this.dmps = [];
    this.serverService.getDmpOfUser().subscribe( 
      response => {        
console.log(response);
        response.forEach(resp => {
          let dmp = new Dmp();
          dmp.id = resp.id;
          dmp.label = resp.label;
          dmp.version = resp.version;
          dmp.dataset = resp.dataset;
          dmp.projectLabel  = resp.project.label;
          this.dmps.push(dmp);
          var params = {limit:8,offset:0, sortAsc:false}
          this.afterLoad();   
          this.dmpResource.query(params).then(dmps => this.dmps = dmps);      
        }        
      );
      }
      // (err: HttpErrorResponse) => {
      //   if (err.error instanceof Error) {
      //     // A client-side or network error occurred. Handle it accordingly.
      //     console.log('An error occurred:', err.error.message);
      //   } else {
      //     // The backend returned an unsuccessful response code.
      //     // The response body may contain clues as to what went wrong,
      //     if(err.status == 401){
      //       this.isignOutBtn.nativeElement.click();
      //     }
      //     console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
      //   }
      // }      
    ); 

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

      }
    )
  }

reloadDmps(params) {
    this.dmpResource = new DataTableResource(this.dmps);
    this.dmpResource.query(params).then(projects => this.dmps = projects);
}

afterLoad(){
  this.dmpResource = new DataTableResource(this.dmps);
  this.dmpResource.count().then(count => this.dmpCount = count);
}

filterGrid() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("dmps-grid");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[4];
    if (td) {
      if (td.innerText.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}


SaveNewDmp(){ 
  console.log(this.dmp, this.dmp.projectsDropDownKey);  debugger;
  //this.http.post('http://someurl', JSON.stringify(this.project))

  this.dmp.project = {"id":this.dmp.project};
  this.dmp["version"] = 1;
  
  this.serverService.createDmpForCurrentUser(this.dmp)
  .subscribe(
    response =>{
      console.log("response");
      console.log(response);
      this.dmps = [];
      this.serverService.getDmpOfUser().subscribe( 
        response => {        
          response.forEach(resp => {
            let dmp = new Dmp();
            dmp.id = resp.id;
            dmp.label = resp.label;
            dmp.version = resp.version;
            dmp.dataset = resp.dataset;
            dmp.projectLabel  = resp.project.label;
            this.dmps.push(dmp);
            var params = {limit:8,offset:0, sortAsc:false}
            this.afterLoad();   
            this.dmpResource.query(params).then(dmps => this.dmps = dmps);      
          }        
        );
        });      
    }
  );

  $("#newDmpModal").modal("hide");
}

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

signOut() {
      this.serverService.logOut();
}

selectDmp(rowEvent){debugger;
  this.dmpIdforDatasets = rowEvent.row.item.id;
  if(this.dataSetVisibe == false)
    this.dataSetVisibe = true;
  else 
    this.datasetsComponent.getDatasetForDmpMethod(rowEvent.row.item.id);
}

editRow(item){debugger;
  this.dmp.label = item.label;
  this.dmp.abbreviation = item.abbreviation;
  this.dmp.uri = item.uri;
  this.dmp.id = item.id;
  this.dmp.project = item.project;
  $("#newDmpModal").modal("show");
}


}