D-Net

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

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

import {Observable}       from 'rxjs/Observable';

import {ActivatedRoute, Router, 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';

@Component({

    selector: 'claims-project-manager',

    template: `

      <!--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">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">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'">

        <h1 class="page-header">

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

              routerLinkActive="router-link-active"

              routerLink="/search/project" >

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

          </a>

        </h1>

        <h2> Pending Claims</h2>

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

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

        </div>

        <div class="uk-overflow-container">

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

          <thead>

             <tr>

                <th>Research Result</th>

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

                <th class="uk-text-center">Claimed Date</th>

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

             </tr>

          </thead>

          <tbody>

              <tr class="uk-table-middle" *ngFor="let claim of pending_claims ">

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

                <td class="uk-width-1-6 uk-text-center" *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">

                 <label>

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

                  </label>

                  <label>

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

                  </label>

                </td>

              </tr>

          </tbody>

        </table-->

        <table *ngIf="pending_claims && pending_claims.length > 0" class="uk-table uk-table-striped custom-dataTable-content"

                [mfData]="pending_claims" #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="claim1.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-6" *ngIf="claim1.targetType != 'project'"><claim-entity [entity]="claim1.target" [type]="claim1.targetType" > </claim-entity></td>

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

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

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

                <td class="uk-width-1-6 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>

          <tfoot>

            <tr>

              <td>

              </td>

              <td></td>

              <td></td>

              <td>

                <paging-no-load [currentPage]="1" [totalResults]="pending_claims.length" [size]="rowsOnPage"  (pageChange)="refreshTable(mf1, $event)"></paging-no-load>

              </td>

            </tr>

          </tfoot>

        </table>

        </div>

        <h2> Already Curated Claims</h2>

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

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

        </div>

        <div class="uk-overflow-container">

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

          <thead>

             <tr>

                <th>Research Result</th>

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

                <th class="uk-text-center">Claimed Date</th>

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

                <th class="uk-text-center">Curation Date</th>

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

             </tr>

          </thead>

          <tbody>

              <tr class="uk-table-middle" *ngFor="let claim of curated_claims 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>

              </tr>

          </tbody>

        </table-->

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

                      [mfData]="curated_claims" #mf2="mfDataTable" [mfRowsOnPage]="rowsOnPage" [mfActivePage]="1">

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

          <thead>

             <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>

            <tfoot>

              <tr>

                <td>

                  <!--mfBootstrapPaginator></mfBootstrapPaginator-->

                </td>

                <td></td>

                <td></td>

                <td></td>

                <td></td>

                <td>

                  <paging-no-load [currentPage]="1" [totalResults]="curated_claims.length" [size]="rowsOnPage"  (pageChange)="refreshTable(mf2, $event)"> </paging-no-load>

                </td>

              </tr>

            </tfoot>

        </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-success uk-float-right" type="button" (click)="saveChanges()">Save Changes</button>

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

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

      </div>

    `,

})

export class ClaimsByTokenComponent {

  //change true - false to accept: yes - no

  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 'empty' show form to fill email, when 'valid' show proper claims, when 'invalid' show no matched entry-wanna retry

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

  public rowsOnPage = 5;

  public sortOrder = "asc";

  @ViewChild (ModalSelect) selectModal : ModalSelect;

  @ViewChild (ModalLoading) loading : ModalLoading ;

  public routerHelper:RouterHelper = new RouterHelper();

  constructor ( private route: ActivatedRoute, private _router:Router, private claimsByTokenService: ClaimsByTokenService ) {

  }

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

      }

    );

  }

refreshTable(mf:any, $event:any) {

  mf.mfActivePage=$event.value;

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

                }

              }

          },

          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(jwtToken, 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;

    }

  }

}