D-Net

import {Component, ViewChild, ViewChildren, QueryList, Input, ViewEncapsulation} from '@angular/core';

import {Location}                    from '@angular/common';

import {ActivatedRoute, Params}      from '@angular/router';

import {Title, Meta}                 from '@angular/platform-browser';

import {DataTableDirective}          from 'angular-datatables';

import {Observable}                  from 'rxjs/Observable';

import { Subject }                   from 'rxjs/Subject';

import{EnvProperties}                from '../../utils/properties/env-properties';

import {ErrorCodes}                  from '../../utils/properties/errorCodes';

import {ClaimsDatatablePipe}         from '../../utils/pipes/claimsDatatable.pipe';

import {Session}                     from '../../login/utils/helper.class';

import {RouterHelper}                from '../../utils/routerHelper.class';

import {ModalSelect}                 from '../../utils/modal/selectModal.component';

import {ModalLoading}                from '../../utils/modal/loading.component';

import {ClaimsByTokenService}        from './claimsByToken.service';

@Component({

    selector: 'claims-project-manager',

    templateUrl: 'claimsByToken.component.html',

    styles: [`

      #table1_info, #table1_paginate,  #table1_length,  #table1_filter,

      #table2_info, #table2_paginate,  #table2_length,  #table2_filter{

        display: none;

      }

    `],

    encapsulation: ViewEncapsulation.None // this used in order styles to work

})

export class ClaimsByTokenComponent {

  public token: string = "";

  public sub: any;

  public project: any;

  private claims:any = [];

  public pending_claims: any = [];

  public curated_claims: any = [];

  public selectedRight_PendingMode: Set<string>;

  public selectedWrong_PendingMode: Set<string>;

  public selectedRight_CuratedMode: Set<string>;

  public selectedWrong_CuratedMode: Set<string>;

  public editable: Set<number>;

  public contact_person: string[] = ["Konstantina", "Argiro", "Katerina"];

  private errorCodes: ErrorCodes;

  public pending_status: number;

  public curated_status: number;

  // when 'valid' show proper claims, when 'invalid' show no matched entry-wanna retry

  public accessStatus: string;// = "empty";

  public mode: string = "pending";

  public showTables: boolean = true;

  public rowsOnPage = 5;

  public sortOrder = "asc";

  public keyword1:string = "";

  public keyword2:string = "";

  public activePendingPage:any = {page: 1};

  public totalPendingResults:any = {count: 0};

  public activeCuratedPage:any = {page: 1};

  public totalCuratedResults:any = {count: 0};

  dtTrigger: Subject<any>[] = [];

  private triggered: boolean = false;

  dtOptions: DataTables.Settings[] = [];

  @ViewChildren(DataTableDirective)

  dtElements: QueryList<any>;

  //@ViewChild("table1") table1: DataTableDirective;

  //@ViewChild("table2") table2: DataTableDirective;

  @ViewChild (ModalSelect) selectModal : ModalSelect;

  @ViewChild (ModalLoading) loading : ModalLoading ;

  properties:EnvProperties;

  public routerHelper:RouterHelper = new RouterHelper();

  constructor (private route: ActivatedRoute,

               private claimsByTokenService: ClaimsByTokenService,

               private _meta: Meta, private _title: Title) {

      this.errorCodes = new ErrorCodes();

      this.pending_status = this.errorCodes.LOADING;

      this.curated_status = this.errorCodes.LOADING;

  }

  ngOnInit() {

    this.route.data

      .subscribe((data: { envSpecific: EnvProperties }) => {

         this.properties = data.envSpecific;

      });

    this.sub =  this.route.queryParams.subscribe(params => {

        this.mode = "pending";

        this.token = params['token'];

        this.selectedRight_PendingMode = new Set<string>();

        this.selectedWrong_PendingMode = new Set<string>();

        this.selectedRight_CuratedMode = new Set<string>();

        this.selectedWrong_CuratedMode = new Set<string>();

        this.editable = new Set<number>();

        this.validateJWTandToken();

        this.updateTitle("Claims For Project Managers");

      }

    );

    this.dtOptions[0] = {

      //"paging": false,

      //"searching": false,

      //"lengthChange": false,

      "pageLength": this.rowsOnPage,

      "columnDefs": [ {

            "type": "date",

            "targets": 2

        } ],

      "order": [[ 2, 'desc' ]]

      //"pagingType": 'full_numbers',

      /*"language": {

          "search": "",

          "searchPlaceholder": "Search projects..."

      }*/

    };

console.info("configure dtOptions1: ",this.dtOptions[0]);

    this.dtOptions[1] = {

      "pageLength": this.rowsOnPage,

      "columnDefs": [ {

            "type": "date",

            "targets": [2,4]

        } ],

      "order": [[ 4, 'desc' ]]

    };

console.info("configure dtOptions2: ",this.dtOptions[1]);

    this.dtTrigger[0] = new Subject<any>();

    this.dtTrigger[1] = new Subject<any>();

  }

  ngAfterViewInit(): void {

     $.fn['dataTable'].ext.search.push((settings, data, dataIndex) => {

        if(settings.sTableId == 'table1') {

          if (this.filterData(data, this.keyword1)) {

            return true;

          }

          return false;

        } else if(settings.sTableId == 'table2') {

          if (this.filterData(data, this.keyword2)) {

            return true;

          }

          return false;

        }

      });

  }

  ngOnDestroy(): void {

    $.fn['dataTable'].ext.search.pop();

    // Do not forget to unsubscribe the event

    this.dtTrigger[0].unsubscribe();

    this.dtTrigger[1].unsubscribe();

  }

  /*

  Trigger a table draw in order to get the initial filtering

  */

  triggerInitialLoad(){

      this.triggered = true;

      console.info("triggerInitialLoad");

      setTimeout(function(){

        /*var table1 = <any>$('#table1').DataTable();

        table1.page( 0 ).draw( false );

        var table2 = <any>$('#table2').DataTable();

        table2.page( 0 ).draw( false );*/

      }, 500);

      setTimeout(() => {

        this.dtTrigger[0].next();

        this.dtTrigger[1].next();

      });

  }

  rerender(): void {

    console.info("RERENDER");

    this.dtElements.forEach((dtElement: DataTableDirective, index: number) => {

      dtElement.dtInstance.then((dtInstance: any) => {

        // Destroy the table first

        dtInstance.destroy();

        // Call the dtTrigger to rerender again

        this.dtTrigger[index].next();

      });

    });

  }

  filterData(row: any, query: string) {

    let returnValue: boolean = false;

    if(query) {

      for(var i=0; i <3; i++){

        var r= this.filterQuery(row[i], query);

        if(r) {

          returnValue = true;

          break;

        }

      }

      if(!returnValue) {

        return false;

      }

    }

    return true;

  }

  filterQuery(data, query){

    if(data.toLowerCase().indexOf(query.toLowerCase()) > -1){

      return true;

    }else{

      return false;

    }

  }

refreshTable(page:number, whichTable: string) {

  if(whichTable == "pending") {

    var table = $('#table1').DataTable();

    table.page( page - 1  ).draw( false );

    var info = table.page.info();

    console.info("records: "+info.recordsDisplay);

    this.activePendingPage.page = page;//$event.value;

    this.totalPendingResults.count = info.recordsDisplay;

  } else if(whichTable == 'curated') {

    var table = $('#table2').DataTable();

    table.page( page - 1  ).draw( false );

    var info = table.page.info();

    console.info("records: "+info.recordsDisplay);

    this.activeCuratedPage.page = page;//$event.value;

    this.totalCuratedResults.count = info.recordsDisplay;

  }

  //table.mfActivePage=$event.value;

  //table.setPage(table.mfActivePage, this.rowsOnPage);

}

  validateJWTandToken() {

    if(this.token) {

      this.pending_status = this.errorCodes.LOADING;

      this.curated_status = this.errorCodes.LOADING;

      this.showTables = false;

      this.pending_claims = [];

      this.curated_claims = [];

      this.activePendingPage.page = 1;

      this.totalPendingResults.count = 0;

      this.activeCuratedPage.page = 1;

      this.totalCuratedResults.count = 0;

      this.claimsByTokenService.getClaims(this.token,  this.properties.claimsAPIURL).subscribe(

          data => {

            //this.closeLoading();

            this.accessStatus = "valid";

              //console.info(data);

              this.claims = data.data;

              for(let claim of this.claims) {

                if(claim.targetType == "project") {

                  this.project = claim.target;

                } else {

                  this.project = claim.source;

                }

                if(claim.curatedBy) {

                  this.curated_claims.push(claim);

                } else {

                  this.pending_claims.push(claim);

                }

              }

              this.totalPendingResults.count = this.pending_claims.length;

              this.totalCuratedResults.count = this.curated_claims.length;

              this.updateTitle("Claims For Project Managers - "+this.project.name);

              this.showTables = true;

              if(!this.triggered) {

                console.info("initial load");

                this.triggerInitialLoad();

              } else {

                console.info("rerender");

                var table1 = $('#table1').DataTable();

                table1.clear();

                var table2 = $('#table2').DataTable();

                table2.clear();

                this.rerender();

              }

              this.pending_status = this.errorCodes.DONE;

              this.curated_status = this.errorCodes.DONE;

          },

          err => {

            if(err.status == '404') {

              this.pending_status = this.errorCodes.NOT_FOUND;

              this.curated_status = this.errorCodes.NOT_FOUND;

            } else if(err.status == '500') {

              this.pending_status = this.errorCodes.ERROR;

              this.curated_status = this.errorCodes.ERROR;

            } else {

              this.pending_status = this.errorCodes.NOT_AVAILABLE;

              this.curated_status = this.errorCodes.NOT_AVAILABLE;

            }

            this.showTables = true;

            if(!this.triggered) {

              this.triggerInitialLoad();

            } else {

              var table1 = $('#table1').DataTable();

              table1.clear();

              var table2 = $('#table2').DataTable();

              table2.clear();

              this.rerender();

            }

            this.accessStatus = "invalid";

            console.log(err);

          }

        );

      } else {

        this.accessStatus = "invalid";

      }

  }

  selectApprove(id:string, event, mode: string) {

    var value = event.currentTarget.checked;

    if(value){

      if(mode == "pending") {

        this.selectedRight_PendingMode.add(id);

        this.selectedWrong_PendingMode.delete(id);

      } else {

        this.selectedRight_CuratedMode.add(id);

        this.selectedWrong_CuratedMode.delete(id);

      }

    }else{

      if(mode == "pending") {

        this.selectedRight_PendingMode.delete(id);

      }

      // } else {

      //   this.selectedRight_CuratedMode.delete(id);

      //   this.selectedWrong_CuratedMode.add(id);

      // }

    }

  }

  selectDisapprove(id:string, event, mode: string) {

    var value = event.currentTarget.checked;

    if(value){

      if(mode == "pending") {

        this.selectedWrong_PendingMode.add(id);

        this.selectedRight_PendingMode.delete(id);

      } else {

        this.selectedWrong_CuratedMode.add(id);

        this.selectedRight_CuratedMode.delete(id);

      }

    }else{

      if(mode == "pending") {

        this.selectedWrong_PendingMode.delete(id);

      }

      // } else {

      //   this.selectedWrong_CuratedMode.delete(id);

      //   this.selectedRight_CuratedMode.add(id);

      // }

    }

  }

  isSelected(id:string, set:Set<string>) {

    return set.has(id);

  }

/*

  isSelectedWrong(id:string) {

    return this.selectedWrong.has(id);

  }

*/

  isRight_CuratedMode(claim: any) {

    if(this.isSelected(claim.id, this.selectedRight_CuratedMode)) {

      return true;

    } else if(claim.approved == true && !this.isSelected(claim.id, this.selectedWrong_CuratedMode)) {

      return true;

    }

    return false;

  }

  isWrong_CuratedMode(claim: any) {

    if(this.isSelected(claim.id, this.selectedWrong_CuratedMode)) {

      return true;

    } else if(claim.approved == false && !this.isSelected(claim.id, this.selectedRight_CuratedMode)) {

      return true;

    }

    return false;

  }

  cancelEditOfCuration(claim: any) {

    console.info("cancelEditOfCuration - approved:"+claim.approved);

    if(claim.approved) {

      //this.selectedRight_CuratedMode.add(claim.id);

      this.selectedWrong_CuratedMode.delete(claim.id);

    } else {

      this.selectedRight_CuratedMode.delete(claim.id);

      //this.selectedWrong_CuratedMode.add(claim.id);

    }

  }

  saveEdited(claim: any, editable_index: number) {

    this.curated_status = this.errorCodes.LOADING;

    let approved: boolean = this.isRight_CuratedMode(claim);

    if(approved == claim.approved) {

      this.selectedRight_CuratedMode.delete(claim.id);

      this.selectedWrong_CuratedMode.delete(claim.id);

      this.editable.delete(editable_index);

      this.curated_status = this.errorCodes.DONE;

    } else {

      let claimCurationInfo: {"id": string, "approved": boolean} = {"id": claim.id, "approved": approved};

      this.claimsByTokenService.updateClaimCuration(claimCurationInfo, this.properties.claimsAPIURL).subscribe(

          data => {

            console.info(data);

            this.selectedRight_CuratedMode.delete(claim.id);

            this.selectedWrong_CuratedMode.delete(claim.id);

            this.editable.delete(editable_index);

            this.validateJWTandToken();

          },

          err => {

            console.log(err);

            this.curated_status = this.errorCodes.NOT_SAVED;

          }

        );

    }

  }

  saveChanges() {

    this.pending_status = this.errorCodes.LOADING;

    //this.openLoading();

    console.info("Changes Saved!, right-wrong", this.selectedRight_PendingMode, this.selectedWrong_PendingMode);

    this.claimsByTokenService.updateClaimsCuration(this.selectedRight_PendingMode, this.selectedWrong_PendingMode, this.properties.claimsAPIURL).subscribe(

        data => {

          //this.closeLoading();

          console.info(data);

          this.mode = "curated";

          this.clearCheckboxes();

          this.validateJWTandToken();

        },

        err => {

          //this.closeLoading();

          console.log(err);

          this.pending_status = this.errorCodes.NOT_SAVED;

        }

      );

  }

  clearCheckboxes() {

    this.pending_status = this.errorCodes.LOADING;

    this.selectedRight_PendingMode.clear();

    this.selectedWrong_PendingMode.clear();

    this.pending_status = this.errorCodes.DONE;

  }

  public openLoading(){

    if(this.loading){

      this.loading.open();

    }

  }

  public closeLoading(){

    if(this.loading){

      this.loading.close();

    }

  }

  curatorSelected(selected: string) {

    console.info("selected curator: "+selected);

  }

  public openSelect(){

    if(this.selectModal){

      this.selectModal.open();

    }

  }

  public setMessageSelect(message: string){

    if(this.selectModal){

      this.selectModal.message = message;

    }

  }

  public setOptionsSelect(options: string[]){

    if(this.selectModal){

      this.selectModal.options = options;

    }

  }

  totalPages(totalResults: number): number {

      let totalPages:any = totalResults/(this.rowsOnPage);

      if(!(Number.isInteger(totalPages))) {

          totalPages = (parseInt(totalPages, 10) + 1);

      }

      return totalPages;

  }

  updateTitle(title:string){

    var _prefix ="OpenAIRE | ";

    var _title = _prefix + ((title.length> 50 ) ?title.substring(0,50):title);

    this._meta.updateTag({content:_title},"property='og:title'");

    this._title.setTitle(_title);

  }

}