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

import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ViewEncapsulation } 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 { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';

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],
  encapsulation: ViewEncapsulation.None
})

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;


  dmp: any;

  @Input() projectsDropDown: DropdownField;
  @Input() statusDropDown: DropdownField;

  @ViewChild(DatasetsComponent) datasetsComponent: DatasetsComponent;

  filteredResearchers: any[];
  filteredOrganizations: any[];

  constructor(
    private serverService: ServerService,
    private route: ActivatedRoute,
    private router: Router,
    private spinnerService: Ng4LoadingSpinnerService
  ) {
    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" }]
    //this.projects = [];

  }


  clearDmp() {

    this.dmp = {
      id: null,
      label: '',
      previous: '',
      version: '',
      organizations: [],
      researchers: []
    }

  }

  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.clearDmp();


  }


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

        this.tableData.forEach(dmp => {
          if (dmp.previous != null)
            this.serverService.getDmp(dmp.previous).subscribe(previous => { dmp.previous = previous; });
        });

      },
      (err: HttpErrorResponse) => {
        simple_notifier("danger", null, "Could not refresh DMPs");
      }
    );
  }

  newDMP() {

    this.dmp.project = { "id": this.dmp.project };
    this.dmp["version"] = 1;

    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.dmp.creator = { "id": this.dmp.creator };
    if (this.dmp.previous != null)
      this.dmp.previous = this.dmp.previous.id;

    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();
  }


  editDmp(item) {
    this.spinnerService.show();
    this.serverService.getDmp(item.id).subscribe(result => {
      this.dmp = result;
      this.dmp.project = result.project.id
      $("#newDmpModal").modal("show");
    },
      error => simple_notifier("danger", null, "Failed to Open DMP"),
      () => this.spinnerService.hide()
    )

  }

  cloneDmp(item) {
    this.dmp = Object.assign({}, item);
    this.dmp.project = item.project.id;
    $("#newVersionDmpModal").modal("show");
  }

  newDmpForm(item) {

    this.clearDmp();

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

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

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

  deleteRow(dmp) {

    this.dmp = { "id": this.dmp.id }; //only id is needed to delete


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

  }

  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);
        }
      );
    }

  }

  showDatasetsOfDmp(item) {
    this.router.navigate(['/dataset'], { queryParams: { "dmpid": item.id, "label": item.label } });
  }

  viewDetailedDMP(dmp) {
    let random = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
    this.router.navigate(['/dmps/dmp'], { queryParams: { "dmpid": dmp.id, "label": dmp.label, random: random } });
  }

  viewDetailedProject(dmp) {
    let random = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
    this.router.navigate(['/dmps/project'], { queryParams: { "projectid": dmp.project.id, "label": dmp.project.label, random: random } });
  }

  searchResearchers(event) {
    let query = event.query;
    this.serverService.searchDMPResearchers(query).subscribe(researchers => {
      this.filteredResearchers = researchers;
    });
  }

  searchOrganizations(event) {
    let query = event.query;
    this.serverService.searchDMPOrganizations(query).subscribe(organizations => {
      this.filteredOrganizations = organizations;
    });
  }

}