D-Net

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

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

import {Observable}       from 'rxjs/Observable';

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

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

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

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

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

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

import { Meta} from '../../../angular2-meta';

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

//import {DataTable} from "angular2-datatable";

@Component({

    selector: 'claims-project-manager',

    template: `

    <div id="tm-main" class=" uk-section  uk-margin-small-top tm-middle"   >

      <div uk-grid uk-grid>

       <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">

<div class="uk-container">

      <!--div *ngIf="accessStatus=='empty'" class="uk-margin-top uk-width-medium-2-3 uk-container-center">

        <div class="uk-block uk-block-primary uk-block-large uk-contrast uk-text-center">

          <p class="uk-text-large">Please enter your email and then press 'See Claims' button.</p>

          <form class="uk-form">

            <fieldset data-uk-margin>

                <input type="text" placeholder="example@email.com" name="email" [(ngModel)]="email">

                <button (click)="validateJWTandToken()" class=" uk-button uk-button-default">See Claims</button>

            </fieldset>

          </form>

        </div>

      </div-->

      <div *ngIf="accessStatus=='invalid'" class="uk-margin-top uk-width-medium-2-3 uk-container-center">

        <div class="uk-block uk-block-primary uk-block-large uk-contrast uk-text-center">

          <!--p class="uk-text-large">Oops! There is no entry for you! Please retry with another email or for another project.</p-->

          <!--button (click)="accessStatus='empty'" class=" uk-button uk-button-default">Retry</button-->

          <p class="uk-text-large">Oops! Your email does not give you the authority to view claims for the selected project. Please contact the administrators.</p>

        </div>

      </div>

      <div *ngIf="accessStatus=='valid'">

      <div class="uk-article-title custom-article-title">

          Claims Administrator        

          <a [queryParams]="routerHelper.createQueryParam('projectId',project['openaireId'])"

              routerLinkActive="router-link-active"

              routerLink="/search/project" >

                {{project['name']}} ({{project['funderName']}})

          </a>

        </div>

        <h2> Pending Claims</h2>

        <div *ngIf=" pending_claims && pending_claims.length == 0" >

          <div class = "uk-alert uk-alert-primary " >No pending claims found.</div>

        </div>

        <div class="uk-overflow-container custom-dataTable-content">

          <div  class="uk-width-1-1  uk-margin uk-padding uk-panel  uk-background-muted">

            <form class="uk-text-center uk-panel">

              <input type="text" class="uk-input uk-width-1-3" placeholder="Type keywords..." aria-describedby="sizing-addon2"  [(ngModel)]="filterQuery"  name="keyword" />

            </form>

          </div>

          <span *ngIf="pending_claims && pending_claims.length > 0 && totalPendingResults.count > 0">

            {{totalPendingResults.count}} pending claims, page {{activePendingPage.page}} of {{totalPages(totalPendingResults.count)}}

            <paging-no-load class="uk-float-right" [currentPage]="activePendingPage.page" [totalResults]="totalPendingResults.count" [size]="rowsOnPage" (pageChange)="refreshTable(table1, $event, 'pending')"></paging-no-load>

          </span>

          <table #filtered1 *ngIf="pending_claims && pending_claims.length > 0" class="uk-table uk-table-striped"

                  [mfData]="pending_claims | claimsDatatable : [filterQuery, totalPendingResults, activePendingPage]" #mf1="mfDataTable" [mfRowsOnPage]="rowsOnPage" [mfActivePage]="1">

                  <!--[(mfSortBy)]="sortByClaimDate1" (mfSortOrder)="sortOrder"-->

            <thead>

               <tr>

                  <th><mfDefaultSorter [by]="sortByTitle1">Research Result</mfDefaultSorter></th>

                  <th class="uk-text-center"><mfDefaultSorter by="userMail">Claimed By</mfDefaultSorter></th>

                  <th class="uk-text-center"><mfDefaultSorter [by]="sortByClaimDate1">Claimed Date</mfDefaultSorter></th>

                  <th class="uk-text-center">Approve</th>

               </tr>

            </thead>

            <tbody>

                <tr class="uk-table-middle" *ngFor="let claim1 of mf1.data">

                  <td  class="uk-width-2-5" *ngIf="claim1.targetType != 'project'"><claim-entity [entity]="claim1.target" [type]="claim1.targetType" > </claim-entity></td>

                  <td class="uk-width-2-5 uk-text-center" *ngIf="claim1.sourceType != 'project'"><claim-entity [entity]="claim1.source" [type]="claim1.sourceType" > </claim-entity></td>

                  <td class="uk-width-1-5 uk-text-center">{{claim1.userMail}}</td>

                  <td class="uk-width-1-5 uk-text-center">{{claim1.date}}</td>

                  <td class="uk-width-1-5 uk-text-center">

                    <label>

                      Yes <input [id]="claim1.id" type="checkbox" (click)="selectApprove(claim1.id,$event)"  [ngModel]="isSelectedRight(claim1.id)"/>

                    </label>

                    <label>

                      No  <input [id]="claim1.id" type="checkbox" (click)="selectDisapprove(claim1.id,$event)"  [ngModel]="isSelectedWrong(claim1.id)"/>

                    </label>

                  </td>

                </tr>

            </tbody>

          </table>

         </div>

         <div class="uk-text-small uk-text-right">*Note that claims you did not approved or disapproved are considered as right (but not curated)</div>

         <button class="uk-button uk-button-primary uk-float-right" type="submit" (click)="saveChanges()">Save Changes</button>

        <h2> Already Curated Claims</h2>

        <div *ngIf=" curated_claims && curated_claims.length == 0" >

          <div class = "uk-alert uk-alert-primary " >No curated claims found.</div>

        </div>

        <div class="uk-overflow-container custom-dataTable-content">

          <div  class="uk-width-1-1  uk-margin uk-padding uk-panel  uk-background-muted">

            <form class="uk-text-center uk-panel">

              <input type="text" class="uk-input uk-width-1-3" placeholder="Type keywords..." aria-describedby="sizing-addon2"  [(ngModel)]="filterQuery2"  name="keyword" />

            </form>

          </div>

          <span *ngIf="curated_claims && curated_claims.length > 0 && totalCuratedResults.count > 0">

            {{totalCuratedResults.count}} curated claims, page {{activeCuratedPage.page}} of {{totalPages(totalCuratedResults.count)}}

            <paging-no-load class="uk-float-right" [currentPage]="activeCuratedPage.page" [totalResults]="totalCuratedResults.count" [size]="rowsOnPage"  (pageChange)="refreshTable(table2, $event, 'curated')"> </paging-no-load>

          </span>

          <table *ngIf="curated_claims && curated_claims.length > 0" class="uk-table uk-table-striped"

                        [mfData]="curated_claims | claimsDatatable : [filterQuery2, totalCuratedResults, activeCuratedPage]" #mf2="mfDataTable" [mfRowsOnPage]="rowsOnPage" [mfActivePage]="1">

                        <!--[(mfSortBy)]="sortByCurationDate2" [(mfSortOrder)]="sortOrder"-->

            <thead>

              <!--tr>

                <td colspan="6">

                  <form class="uk-text-center uk-panel uk-background-muted">

                    <input type="text" class="uk-input uk-width-1-3" placeholder="Type keywords..." aria-describedby="sizing-addon2"  [(ngModel)]="filterQuery2"  name="keyword" />

                  </form>

                </td>

              </tr-->

              <!--tr>

                <td>

                  Filter curated claims:

                  <input class="uk-input uk-width-1-3" [(ngModel)]="filterQuery2"/>

                </td>

              </tr-->

              <tr>

                <th><mfDefaultSorter [by]="sortByTitle1">Research Result</mfDefaultSorter></th>

                <!--th>Link to</th-->

                <th class="uk-text-center"><mfDefaultSorter by="userMail">Claimed by</mfDefaultSorter></th>

                <th class="uk-text-center"><mfDefaultSorter [by]="sortByClaimDate2">Claimed Date</mfDefaultSorter></th>

                <th class="uk-text-center"><mfDefaultSorter by="curatedBy">Curated by</mfDefaultSorter></th>

                <th class="uk-text-center"><mfDefaultSorter [by]="sortByCurationDate2">Curation Date</mfDefaultSorter></th>

                <th class="uk-text-center">Approved</th>

              </tr>

            </thead>

            <tbody>

                <tr class="uk-table-middle" *ngFor="let claim of mf2.data let i=index">

                  <td class="uk-width-1-6" *ngIf="claim.targetType != 'project'"><claim-entity [entity]="claim.target" [type]="claim.targetType" > </claim-entity></td>

                  <td class="uk-width-1-6" *ngIf="claim.sourceType != 'project'"><claim-entity [entity]="claim.source" [type]="claim.sourceType" > </claim-entity></td>

                  <td class="uk-width-1-6 uk-text-center">{{claim.userMail}}</td>

                  <td class="uk-width-1-6 uk-text-center">{{claim.date}}</td>

                  <td class="uk-width-1-6 uk-text-center">{{claim.curatedBy}}</td>

                  <td class="uk-width-1-6 uk-text-center">{{claim.curationDate}}</td>

                  <td class="uk-width-1-6 uk-text-center">

                   <label>

                      Yes <input [id]="claim.id" type="checkbox" [disabled]="!editable.has(i)" [ngModel]="isRight(claim)"/>

                    </label>

                    <label>

                      No  <input [id]="claim.id" type="checkbox" [disabled]="!editable.has(i)" [ngModel]="isWrong(claim)"/>

                    </label>

                  </td>

                  <!--td><input [id]="claim.id" type="checkbox" [disabled]="!editable.has(i)" (click)="selectDisapprove(claim.id,$event)"  [ngModel]="isWrong(claim)"/></td-->

                  <!--td><button class="uk-button" (click)="editable.add(i)">Edit</button></td-->

                </tr>

            </tbody>

          </table>

        </div>

        <!--modal-select (alertOutput)="curatorSelected($event)"></modal-select-->

        <modal-loading [message]= "'Loading...'"></modal-loading>

      </div>

</div>

</div>

</div>

</div>

    `,

})

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: Set<string>;

  public selectedWrong: Set<string>;

  public editable: Set<string>;

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

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

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

  public rowsOnPage = 5;

  public sortOrder = "asc";

  public filterQuery:string = "";

  public filterQuery2:string = "";

  public activePendingPage:any = {page: 1};

  public totalPendingResults:any = {count: 0};

  public activeCuratedPage:any = {page: 1};

  public totalCuratedResults:any = {count: 0};

  @ViewChild('mf1') table1: any;//DataTable;

  @ViewChild('mf2') table2: any;//DataTable;

  @ViewChild('filtered1') filteredItems1;

  @ViewChild (ModalSelect) selectModal : ModalSelect;

  @ViewChild (ModalLoading) loading : ModalLoading ;

  public routerHelper:RouterHelper = new RouterHelper();

  constructor ( private route: ActivatedRoute, private claimsByTokenService: ClaimsByTokenService, private _meta: Meta) {

  }

  ngOnInit() {

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

        this.token = params['token'];

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

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

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

        //this.openSelect();

        //this.setMessageSelect("Please select your identity:");

        //this.setOptionsSelect(this.contact_person);

        this.validateJWTandToken();

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

      }

    );

  }

refreshTable(table:any, $event:any, whichTable: string) {

  if(whichTable == "pending") {

    this.activePendingPage.page = $event.value;

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

    this.activeCuratedPage.page = $event.value;

  }

  table.mfActivePage=$event.value;

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

}

public sortByClaimDate1 = (claim: any) => {

  return new Date(claim.date);

}

public sortByCurationDate1 = (claim: any) => {

  return new Date(claim.curationDate);

}

public sortByTitle1 = (claim: any) => {

  if(claim.targetType != 'project') {

    return claim.target.title;

  } else {

    return claim.source.title;

  }

}

public sortByClaimDate2 = (claim: any) => {

  return new Date(claim.date);

}

public sortByCurationDate2 = (claim: any) => {

  console.info(new Date(claim.curationDate));

  return new Date(claim.curationDate);

}

public sortByTitle2= (claim: any) => {

  if(claim.targetType != 'project') {

    return claim.target.title;

  } else {

    return claim.source.title;

  }

}

  validateJWTandToken() {

    var jwtToken=Session.getUserJwt();

    if(this.token) {

      this.claimsByTokenService.getClaims(this.token, jwtToken).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);

          },

          err => {

              this.accessStatus = "invalid";

              console.log(err);

          }

        );

      } else {

        this.accessStatus = "invalid";

      }

  }

  selectApprove(id:string, event) {

    var value = event.currentTarget.checked;

    if(value){

      this.selectedRight.add(id);

      this.selectedWrong.delete(id);

      console.info(this.selectedRight);

    }else{

      this.selectedRight.delete(id);

      console.info(this.selectedRight);

    }

  }

  selectDisapprove(id:string,event) {

    var value = event.currentTarget.checked;

    if(value){

      this.selectedWrong.add(id);

      this.selectedRight.delete(id);

    }else{

      this.selectedWrong.delete(id);

    }

  }

  isSelectedRight(id:string) {

    return this.selectedRight.has(id);

  }

  isSelectedWrong(id:string) {

    return this.selectedWrong.has(id);

  }

  isRight(claim: any) {

    //claim.approved = true;

    if(this.isSelectedRight(claim.id)) {

      return true;

    } else if(claim.approved == true && !this.isSelectedWrong(claim.id)) {

      return true;

    }

    return false;

  }

  isWrong(claim: any) {

    if(this.isSelectedWrong(claim.id)) {

      return true;

    } else if(claim.approved == false && !this.isSelectedRight(claim.id)) {

      return true;

    }

    return false;

  }

  saveChanges() {

    console.info("Changes Saved!");

    var jwtToken=Session.getUserJwt();

    this.claimsByTokenService.updateClaimsCuration(this.selectedRight, this.selectedWrong).subscribe(

        data => {

            console.info(data);

        },

        err => {

            console.log(err);

        }

      );

  }

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

  }

}