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

import { Component, OnInit, Input, 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 { 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';

@Component({
  selector: 'projects',
  templateUrl: 'project.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 ProjectsComponent implements OnInit{
  returnUrl: string;
  @Input() projects: Project[];
  projectResource :DataTableResource<Project>;
  datasetResource :DataTableResource<Dataset>;
  @Input() projectCount = 0;
  @Input() datasetDropDown:DropdownField;
  @Input() dataSetVisibe:boolean;
  @Input() datasets: Dataset[];  

  @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.dataSetVisibe= false;
      this.datasets = [];
  }

  ngOnInit() {
    //this.projects = this.serverService.getDummyProjects();
    this.projects = [];
    this.serverService.getAllProjects().subscribe(  //getProjects()
      response => {

        
        response.forEach(resp => {
          let pr = new Project();
          pr.id = resp.id;
          pr.name = resp.label;
          pr.abbreviation = resp.abbreviation;
          pr.definition = resp.definition;
          pr.uri = resp.uri;
          pr.dmp = new Dmp();
        //  pr.dmp.id = resp.dmp; 
          pr.dmp.id = resp.dmp =! null ? resp.dmp.id : null; 
          pr.dataset = new Dataset();
          pr.dmp.dataset = resp.dmp !=null && resp.dmp.dataset != null ? resp.dmp.dataset.id: null;
          this.projects.push(pr);
          var params = {limit:8,offset:0, sortAsc:false}
          this.afterLoad();   
          this.projectResource.query(params).then(projects => this.projects = projects);      
        }        
      );
      },
      (err: HttpErrorResponse) => {debugger;
        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}`);
        }
      }      
    );   
  }

reloadProjects(params) {
    this.projectResource = new DataTableResource(this.projects);
    this.projectResource.query(params).then(projects => this.projects = projects);
}

afterLoad(){
  this.projectResource = new DataTableResource(this.projects);
  this.projectResource.count().then(count => this.projectCount = count);
}

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(dmpId, event){debugger;
  this.dataSetVisibe = true;
  this.serverService.getAllDatasets().subscribe(
    response =>{
      console.log("response");
      console.log(response);        
      //let params = new Param();
      response.forEach((dataset) => { 
        let dt = new Dataset();
        dt.id = dataset.id;
        dt.name = dataset.label;
        dt.uriDataset = dataset.uri;
        this.datasets.push(dt);
        var params = {limit:8,offset:0, sortAsc:false}
        this.afterLoad();   
        this.datasetResource.query(params).then(datasets => this.datasets = datasets);        
      },
      (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,
          console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
        }
      }
    );
    });
      
}

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

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



}