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 { ConfirmationComponent } from '../widgets/confirmation/confirmation.component';

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';
import { DatasetsComponent } from '../datasets/dataset.component';
import { StatusToString } from '../pipes/various/status-to-string';
import {MenuItem} from 'primeng/primeng';
import { BreadcrumbService } from '../services/breadcrumb.service';

declare var $ :any;

import '../../assets/custom.js';
declare function simple_notifier(type: string, title: string, message:string): any;

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

export class DmpComponent implements OnInit{

  //whole dmp data model
  tableData : any[] = new Array();
  
  //required by the table
  public filterQuery = "";
  public rowsOnPage = 10;
  public sortBy = "label";
  public sortOrder = "asc";

  // for tableIds
  showIDs : boolean = false;

  public stateConfig : any = {
    "dmps" : {
      "tableVisible" : true,
      "dmpDescriptionVisible" : false,
      "selectedID" : null,
      "selectedLabel" : null
    },
    "datasets" : {
      "tableVisible" : false,
      "selectedID" : null,
      "selectedLabel" : null
    }
  }


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


  dmp : any;

  @Input() projectsDropDown:DropdownField;
  @Input() statusDropDown: DropdownField;
  
  @ViewChild(DatasetsComponent) datasetsComponent:DatasetsComponent;
  

  constructor( 
    private serverService: ServerService,
    private route: ActivatedRoute,
    private breadcrumbService : BreadcrumbService,
    private router: Router){
      this.projectsDropDown = new DropdownField();      
      this.projectsDropDown.options = [];
      this.statusDropDown = new DropdownField();
      this.statusDropDown.options= [{key:'', value:null},{key:'0', value:"Active"},{key:'1', value:"Inactive"}, {key:'2', value:"Submitted"}, {key:'3', value:"Cancel"}]
      //this.projects = [];
      
      this.dmp = {
        id: null,
        label: '',
        previous:'',
        version:'',
        profileData:''
        //profile:{}
     }
  }

  ngOnInit() {

    this.getDmps(); 

    this.serverService.getAllProjects().subscribe(
      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);
        });

      },
      (err: HttpErrorResponse) => {
        simple_notifier("danger",null,"Could not load User's Projects");
      }
    )

    this.showDmps();

  }

  showDMPDetails(dmp) {
    console.log("Showing details for dmp : " + JSON.stringify(dmp));
    // TODO: Add here code to show details of dmp. 
    //1. hide dmp table and show component for detailed dmp 
    //2. also edit the breadcrumb
  }


  showDmps(){
    this.stateConfig.dmps.tableVisible = true;
    this.stateConfig.datasets.tableVisible = false;

    this.breadcrumbService.clearAll();
    this.breadcrumbData.length = 0;
    this.breadcrumbData.push({label:'My Data Management Plans ', command: (onclick)=> { this.showDmps() }});
    this.breadcrumbService.setData(this.breadcrumbData);
  }



  getDmps(muted? : boolean){
    this.serverService.getDmpOfUser().subscribe( 
      response => {
        this.tableData = response;
        if(muted && muted!=true)
          simple_notifier("success",null,"Refreshed DMPs");
      },
      (err: HttpErrorResponse) => {
        simple_notifier("danger",null,"Could not refresh DMPs");
      }      
    ); 
  }

  newDMP(){ 
    console.log(this.dmp, this.dmp.projectsDropDownKey);  

    this.dmp.project = {"id" : this.dmp.project};
    this.dmp["version"] = 1;
    //this.dmp.profile = {};
    
    this.serverService.createDmpForCurrentUser(this.dmp)
    .subscribe(
      response =>{
        simple_notifier("success",null,"DMP created");
        this.getDmps();
      },
      error => {
        simple_notifier("danger",null,"Could not create the DMP");
      }
    );
    $("#newDmpModal").modal("hide");
  }

  updateDMP(){ 

    this.dmp.project = {"id":this.dmp.project};

    this.serverService.updateDmp(this.dmp)
    .subscribe(
      response =>{
        simple_notifier("success",null,"Edited the DMP");
        this.getDmps();
      },
      error =>{
        simple_notifier("danger",null,"Failed to edit the DMP");
      }
    );
    $("#newDmpModal").modal("hide");
    $("#newVersionDmpModal").modal("hide");
    
  }

  cloneDMP(dmp){
    dmp = {"id": dmp.id, "label": dmp.label};
    this.serverService.cloneDmp(dmp).subscribe(
      response => {
        simple_notifier("success",null,"Successfully cloned the DMP");
        this.getDmps();
      },
      error => {
        simple_notifier("danger",null,"Failed to clone the DMP");
      }
    );
    $("#newVersionDmpModal").modal("hide");
  }

  SaveDmp(){ 
    if (this.dmp.id == null)
      this.newDMP();
    else
      this.updateDMP();
  }


  showDatasetsOfDmp(item){ 
    this.stateConfig.dmps.selectedID = item.id;
    this.stateConfig.dmps.selectedLabel = item.label;
    if(this.stateConfig.datasets.tableVisible == false){
      this.stateConfig.datasets.tableVisible = true;
      this.stateConfig.dmps.tableVisible = false;
      
      this.breadcrumbData.push({label:"Datasets of '"+this.stateConfig.dmps.selectedLabel+"'"  /* , command:""*/})
      this.breadcrumbService.breadcrumbDataEmitter.emit(this.breadcrumbData);
    }
    else{
      this.datasetsComponent.getDatasetForDmpMethod(item.id);

    } 
  }



  editDmp(item){
    this.dmp = item;
    this.dmp.project = item.project.id;
    $("#newDmpModal").modal("show");  
  }

  editDmpVersion(item){ 
    this.dmp = item;
    this.dmp.project = item.project.id;
    $("#newVersionDmpModal").modal("show");
  }

  newDmp(item){
    this.dmp.label = "";
    this.dmp.id = null;
    this.dmp.version = "";
  // this.dmp.profile = "";
    this.dmp.profileData = "";
    this.dmp.project = "";

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

  markDMPForDelete(dmp){
    this.dmp = dmp;
  }

  deleteDMP(confirmation){
    if(confirmation==true)
      this.deleteRow(this.dmp);
  }

  deleteRow(dmp){

    this.serverService.deleteDmp(dmp).subscribe( 
      response => { 
        simple_notifier("success",null,"Successfully deleted the DMP");
        this.getDmps();
      },
      (err: HttpErrorResponse) => {
        simple_notifier("danger",null,"Failed to delete the DMP");
      }      
    );

  }

  clickFilters(element){ 
    if(element.textContent == "More filters")
      element.textContent = "Less Filters";
    else
      element.textContent = "More Filters";
    }

  SelectDMPStatus(dmp, event, oldValue){
    console.log(dmp);
    let cannotChangeStatus:boolean;
    if(dmp.status == 2){
      this.serverService.getDatasetForDmp({ "id": dmp.id }).subscribe(
        response => {
          response.forEach(dataset => {
            if(dataset.status !==2 || dataset.status !==3){
              cannotChangeStatus=true;            
            }
            return;
          });
          if(cannotChangeStatus == true){          
            dmp.status = 0;
            $("#messageForChangingStatus").modal("show");
          }
        },
        error => {
          console.log("could not retrieve dataset for dpm: "+dmp.id);
        }
      );
    }
    
  }


}