D-Net

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

import {AlertModal} from '../../../utils/modal/alert';

import {ClaimResult} from '../../claim-utils/claimEntities.class';

import {IMyOptions, IMyDateModel} from '../../../utils/my-date-picker/interfaces/index';

import {Dates} from '../../../utils/string-utils.class';

@Component({

    selector: 'claim-selected-results',

    template: `

        <!--div *ngIf="showSearch " class="uk-width-1-2    ">

          <div class="uk-clearfix"><a    (click)="bulkMode = !bulkMode;" class=" uk-animation uk-float-right">

            <span *ngIf="!bulkMode">Switch to Upload mode <i  class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="upload" ratio="1"><polyline fill="none" stroke="#000" points="5 8 9.5 3.5 14 8 "></polyline><rect x="3" y="17" width="13" height="1"></rect><line fill="none" stroke="#000" x1="9.5" y1="15" x2="9.5" y2="4"></line></svg></i></span>

            <span *ngIf="bulkMode">Switch to Search mode <span class="uk-icon">

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg>

</span></span>

          </a></div>

          <claim-result-search-form *ngIf="!bulkMode"  [selectedResults]="results"   > </claim-result-search-form>

          <bulk-claim  *ngIf="bulkMode" [results]="results" > </bulk-claim>

        </div-->

         <div class="uk-placeholder" >

           <div  *ngIf="results.length == 0 " class="uk-text-center">There are no selected research results</div>

           <div *ngIf="results.length > 0 ">

            <h3 > {{title}} ({{results.length}}) </h3>

            <table class="uk-table uk-table-responsive">

              <thead *ngIf="showAccessRights">

                <tr>

                  <th> Research Result</th>

                  <th> Change type and access mode</th>

                </tr>

              </thead>

              <tbody>

                 <tr  *ngFor="let pub of results" >

                     <td   >

                        <div>

                          <span *ngIf="showAccessRights" (click)="removePublication(pub)" aria-hidden="true" class="uk-icon-button"><span class="uk-icon">

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>

</span></span>

                          <a *ngIf="pub.url" target="_blank" href="{{pub.url}}" > <span class="custom-external"></span> {{pub.title}}</a>

                          <span *ngIf="!pub.url" >{{pub.title}}</span>

                          <span *ngIf="!showAccessRights" (click)="removePublication(pub)" aria-hidden="true" class="uk-icon-button"><span class="uk-icon">

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>

</span></span>

                        </div>

                        <span *ngIf="pub.publisher"  >Publisher: {{pub.publisher}}</span>

                        <!--Orcid --><span  *ngIf="pub.result['journal-title'] && pub.result['journal-title'].value " >Journal: {{pub.result['journal-title'].value}}</span>

                        <span *ngIf="pub.date"   >({{pub.date.substring(0,4)}})</span>

                        <div *ngIf="pub.authors && pub.authors.length > 0"  >Authors: <span *ngFor="let author of pub.authors.slice(0,10)  let i = index">{{author}}{{(i < (pub.authors.slice(0,10).length-1))?"; ":""}}{{(i == pub.authors.slice(0,10).length-1 && pub.authors.length > 10)?"...":""}}</span></div>

                        <!-- Crossref -->

                        <!--span *ngIf="pub.result.publisher" class="uk-article-meta">Publisher: {{pub.result.publisher}}</span><span *ngIf="pub.date"  class="uk-article-meta" >({{pub.date.substring(0,4)}})</span>

                        <div *ngIf="pub.result.author && pub.result.author.length > 0" class="uk-article-meta">Authors: <span *ngFor="let author of pub.result.author.slice(0,10)  let i = index">{{author.family}} {{author.given}}{{(i < (pub.result.author.slice(0,10).length-1))?"; ":""}}{{(i == pub.result.author.slice(0,10).length-1 && pub.result.author.length > 10)?"...":""}}</span></div-->

                        <div *ngIf="pub.result.editor && pub.result.editor.length > 0"  >Editors: <span *ngFor="let author of pub.result.editor.slice(0,10)  let i = index">{{author.family}} {{author.given}}{{(i < (pub.result.editor.slice(0,10).length-1))?"; ":""}}{{(i == pub.result.editor.slice(0,10).length-1 && pub.result.editor.length > 10)?"...":""}}</span></div>

                        <!-- Openaire -->

                        <div *ngIf="pub.result.authors && pub.result.authors.length >0 "  >Authors: <span *ngFor="let author of pub.result.authors.slice(0,10) let i = index">{{author.name}}{{(i < (pub.result.authors.slice(0,10).length-1))?"; ":""}}{{(i == pub.result.authors.slice(0,10).length-1 && pub.result.authors.length > 10)?"...":""}}</span></div>

                        <!-- Orcid -->

                        <!--span  *ngIf="pub.result['journal-title'] && pub.result['journal-title'].value " class="uk-article-meta">Journal: {{pub.result['journal-title'].value}}</span>

                        <div *ngIf="pub.result.contributors && pub.result.contributors.length > 0" class="uk-article-meta">Authors: <span *ngFor="let author of pub.result.contributors.slice(0,10) let i = index">{{author}}{{(i < (pub.result.contributors.slice(0,10).length-1))?"; ":""}}{{(i == pub.result.contributors.slice(0,10).length-1 && pub.result.contributors.length > 10)?"...":""}}</span></div-->

                        <!-- Datacite -->

                        <!--span *ngIf="pub.result.attributes['container-title']" class="uk-article-meta">Publisher: {{pub.result.attributes['container-title']}}</span><span *ngIf="pub.date"  class="uk-article-meta" >({{pub.date.substring(0,4)}})</span>

                       <div *ngIf="pub.result.attributes.author && pub.result.attributes.author.length > 0" class="uk-article-meta">Authors: <span *ngFor="let author of pub.result.attributes.author.slice(0,10) let i = index">{{(author.family)?author.family+', '+author.given:author.literal}}{{(i < (pub.result.attributes.author.slice(0,10).length-1))?"; ":""}}{{(i == pub.result.attributes.author.slice(0,10).length-1 && pub.result.attributes.author.length > 10)?"...":""}}</span></div-->

                       <div><span class="uk-label">{{pub.source}}</span>

                        <span *ngIf="pub.accessRights" class=" uk-label label-grey" > {{pub.accessRights}}</span>

                         <span *ngIf="pub.type" class="uk-label label-grey" > {{pub.type}}</span>

                        </div>

                    </td>

                    <td *ngIf="showAccessRights  && pub.source != 'openaire' "   >

                            <select   [(ngModel)]="pub.type" name="{{'select_type_'+pub.id}}"  >

                              <option   [value]="'publication'" (click)="onTypeChanged('publication',pub)" >Publication</option>

                              <option   [value]="'dataset'"   (click)="onTypeChanged('dataset',pub)" >Research Data</option>

                            </select>

                            <select   [(ngModel)]="pub.accessRights" name="{{'select_rights_'+pub.id}}"  >

                              <option *ngFor="let type of accessTypes"  [value]="type"  (click)="accessRightsTypeChanged(type,pub)">{{type}}</option>

                            </select>

                            <my-date-picker *ngIf="pub.accessRights== 'EMBARGO'"  name="{{'date'+pub.id}}" [options]="myDatePickerOptions"

                            [(ngModel)]="nextDate" (dateChanged)="onDateChanged($event,pub)" ></my-date-picker>

                    </td>

                     <td *ngIf="showAccessRights  && pub.source == 'openaire' "  >

                           Currently you cannot change metadata from openaire

                    </td>

                 </tr>

                </tbody>

            </table>

          <div>

            <modal-alert (alertOutput)="confirmClose($event)">

            </modal-alert>

          </div>

  </div>

</div>

          `

})

export class ClaimSelectedResultsComponent {

  ngOnInit() {

    var myDate = new Date();

    this.nextDate = { date: { year: myDate.getFullYear()+10, month: (myDate.getMonth()+1), day: myDate.getDate() } };

    //2015-05-01

}

 @Input() results: ClaimResult[];

 @Input() title:string = "Research Results";

 @Input() showAccessRights:boolean = false;

 @Input() bulkMode:boolean = false;

 // @Output()resultsChange = new EventEmitter();

 @Input() showSearch:boolean = false;

 nextDate  = {};

 @ViewChild(AlertModal) alertApplyAll;

public commonAccessRights = "OPEN"; // for access rights- changes when user apply a change to every result

public commonEmbargoEndDate; // for access rights: embargoEndDate - changes when user apply a change to every result

public commonType; // for research result type - changes when user apply a change to every result

public typeChanged:boolean = true; //

accessTypes = ["OPEN","CLOSED","EMBARGO","RESTRICTED"];

private myDatePickerOptions: IMyOptions = {

      // other options...

      dateFormat: 'yyyy-mm-dd',

      selectionTxtFontSize: '15px',

      height:'28px',

      width: '100%',

      editableDateField: false,

      showClearDateBtn: false

  };

 removePublication(item:any){

   var index:number =this.results.indexOf(item);

    if (index > -1) {

       this.results.splice(index, 1);

   }

  //  this.resultsChange.emit({

  //    value: this.results

  //  });

 }

   onDateChanged (event:any, item:any) {

       item.embargoEndDate = Dates.getDateFromString(event.formatted);

       if(this.results.length > 1 ){

         this.commonAccessRights = "EMBARGO";

         this.commonEmbargoEndDate = item.embargoEndDate;

           this.confirmOpen(false,"Do you wish to apply the change to every result?");

       }

   }

   onTypeChanged (event:any, item:any) {

       item.type =(event);

       if(this.results.length > 1 ){

         this.commonType = item.type;

            this.confirmOpen(true, "Do you wish to apply the change to every result?");

       }

   }

  //  resultsChanged($event) {

  //    this.results=$event.value;

  //    this.resultsChange.emit({

  //      value: this.results

  //    });

  //  }

   /* The following methods:

      *typeChanged

      *confirmOpen

      *confirmClose

    implement the functionality: change accessRights of a publication - apply to all if asked */

   accessRightsTypeChanged (type:any, item:any) {

       item.accessRights = type;

       if(this.results.length > 1 ){

         this.commonAccessRights = type;

         if(this.commonAccessRights != "EMBARGO"){

           this.commonEmbargoEndDate = item.embargoEndDate;

           this.confirmOpen(false, "Do you wish to apply the change to every result?");

         }

       }

   }

   confirmOpen(type: boolean, message: string){

     this.typeChanged = type;

     this.alertApplyAll.cancelButton = true;

     this.alertApplyAll.okButton = true;

     this.alertApplyAll.alertTitle = "Change metadata";

     this.alertApplyAll.message = "Do you wish to apply the change to every result?";

     this.alertApplyAll.okButtonText = "Yes";

     this.alertApplyAll.cancelButtonText = "No";

     this.alertApplyAll.open();

   }

    confirmClose(data){

      if(this.typeChanged){

        for (var i = 0; i < this.results.length; i++) {

          if(this.results[i].source != 'openaire' ){

            this.results[i].type = this.commonType;

          }

        }

      }else{

        for (var i = 0; i < this.results.length; i++) {

          if(this.results[i].source != 'openaire' ){

            this.results[i].accessRights = this.commonAccessRights;

            if(this.commonAccessRights == "EMBARGO"){

              this.results[i].embargoEndDate = this.commonEmbargoEndDate;

            }

          }

        }

     }

   }

}