argos/dmp-frontend/src/app/projects/projects.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 { Project } from '../entities/model/project';
import { Dmp } from '../entities/model/dmp';
import { Dataset } from '../entities/model/dataset';
//import { DataTable, DataTableTranslations, DataTableResource } from 'angular-4-data-table-bootstrap-4';
import {DataTable} from 'angular2-datatable';
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';

declare var $ :any;

@Component({
  selector: 'projects',
  templateUrl: 'project.html',
  styleUrls: ['./project.css'],
  providers:  [ServerService]
})

export class ProjectsComponent 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";

  //visibility rules for containers
  tableVisible: boolean = true;
  editorVisible: boolean = false;


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

  returnUrl: string;
  @Input() projects: Project[];
  @Input() projectCount = 0;
  @Input() datasetDropDown:DropdownField;
  //@Input() dataSetVisibe:boolean;
  @Input() datasets: Dataset[];  
  project: any;
  modalEditedRow: ModalComponent;
  public item:any;
  public show:boolean = false;
  public dataSetVisibe:boolean = false;
  @ViewChild(DataTable) projectsTable;
  @ViewChild(DataTable) datasetsTable;
  @ViewChild('isignOutBtn') isignOutBtn;

  constructor( 
    private serverService: ServerService,
    private route: ActivatedRoute,
    private router: Router){
      this.datasetDropDown = new DropdownField();
      this.datasetDropDown.options = [];
      this.datasets = [];
      this.project = {
        label: '',
        abbreviation:'',
        reference:'',
        uri:'',
        definition:'',
        endDate:'',
        startDate:''
      }
  }

  ngOnInit() {

    this.projects = [];
    this.getProjects();
     
  }

getProjects(){
  this.serverService.getProjectOfUer().subscribe(  
  response => {
    this.tableData = response;
    
    response.forEach(resp => {
      let pr = new Project();
      pr.id = resp.id;
      pr.label = resp.label;
      pr.abbreviation = resp.abbreviation;
      pr.definition = resp.definition;
      pr.uri = resp.uri;
      this.projects.push(pr);    
    }        
  );
  }
  // (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}`);
  //   }
  // }      
);
}
 

getDMPs(){
  this.serverService.listDmpsLabelID().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.datasetDropDown.options.push(params);
      });
      
    }
  )
}

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

// editRow(item){
//   this.show = true;  
//   this.item = item;
// }

SaveNewProject(){
  console.log(this.project);  
  //this.http.post('http://someurl', JSON.stringify(this.project))
  this.serverService.createProject(this.project)
  .subscribe(
    response =>{
      console.log("response");
      console.log(response);      
    }
  );
  $("#newEditProjectModal").modal("hide");
}

newProject(item){
  this.project.label = "";
  this.project.id = null;
  this.project.abbreviation = "";
  this.project.reference = "";
  this.project.uri = "";
  this.project.definition = "";
  $("#newEditProjectModal").modal("show");

}

editRow(item, event){ 
  if (event.toElement.id == "editDMP"){
    this.project.label = item.label;
    this.project.abbreviation = item.abbreviation;
    this.project.reference = item.reference;
    this.project.uri = item.uri;
    this.project.definition = item.definition;
    this.project.id = item.id;
    $("#newEditProjectModal").modal("show");
  }


    
  }



}