Project

General

Profile

« Previous | Next » 

Revision 46561

Added by Argiro Kokogiannaki about 7 years ago

more layout changes for linking - simplify linking - easy switch between bulk and search mode

View differences:

bulkClaim.component.ts
8 8 
@Component({
9 9 
    selector: 'bulk-claim',
10 10 
    template: `
11 
    <form class="uk-form">
12 
        <label for="exampleInputFile">Select a file</label>
13 
        <input id="exampleInputFile"  type="file"  (change)="fileChangeEvent($event)" placeholder="Upload file..." />
14 
        <button class="uk-button uk-button-success" [class.disabled]="!enableUpload" type="button" (click)="upload()">Upload</button>
15 
     </form>
16 
    <div class="uk-panel uk-panel-box uk-margin-top uk-margin-bottom">
17 
     <div class="uk-panel-badge uk-badge"><i class="uk-icon-info"></i></div>
18 
     <div class="uk-text-bold">Upload information:</div>
19 
     Upload a csv file containing a list of DOIs. For each DOI found in the file, metadata will be fetched from CrossRef.
20 
      Available results will be linked with the selected Projects and Contexts.
11 
    <div class="uk-animation uk-margin-top">
12 
      <form class="uk-form uk-panel uk-panel-box uk-panel-box-default ">
13 
          <div for="exampleInputFile">Upload a DOI csv file:</div>
14 
          <label for="exampleInputFile">Select a file</label>
15 
          <input id="exampleInputFile"  type="file"  (change)="fileChangeEvent($event)" placeholder="Upload file..." />
16 
          <button class="uk-button uk-button-success" [class.disabled]="!enableUpload" type="button" (click)="upload()">Upload</button>
17 
          <button class="uk-button uk-button-primary" data-uk-toggle="{target:'#uploadInfo', animation:'uk-animation-fade, uk-animation-fade'}"><i class="uk-icon-info-circle"></i> </button>
18 
          <div *ngIf="showReport" class="uk-alert uk-alert-info" role="alert" >
19 
            <div>Uploaded file contains {{allIds.length}} rows. {{foundIds.length}} results were sucefully  fetched from CrossRef.</div>
20 
            <div *ngIf ="duplicateIds.length > 0"  >{{duplicateIds.length}} duplicate DOIs.</div>
21 
            <div *ngIf = "notFoundIds.length > 0"   >Couldn't be fetched from crossref:
22 
              <ul class="">
23 
                <li *ngFor="let id of notFoundIds">"{{id}}"</li>
24 
               </ul>
25 
            </div>
26 
            <div *ngIf = "noValidIds.length > 0"   >No valid DOIs:
27 
              <ul class="">
28 
                <li *ngFor="let id of noValidIds">"{{id}}"</li>
29 
               </ul>
30 
            </div>
31 
            <div *ngIf = "allIds.length == 0 || foundIds.length == 0"   > Please make sure you are using the right format for the csv file... </div>
21 32 

  		




  22
  
  
    
        <div class="uk-article-meta">


  		




  23
  
  
    
         CSV format:


  		




  24
  
  
    
         <ul class="uk-list">


  		




  25
  
  
    
           <li>The format of CSV file should be "DOI","ACCESS_MODE","DATE".</li>


  		




  26
  
  
    
           <li>The value "DOI" is required </li>


  		




  27
  
  
    
            <li>Access mode column should have values: "OPEN","CLOSED" or "EMBARGO".</li>


  		




  28
  
  
    
            <li>Date column valid format is YYYY-MM-DD and is required when access mode has value EMBARGO.</li>


  		




  29
  
  
    
            <li>In case access mode is not available default value is "OPEN".</li>


  		




  30
  
  
    
          </ul>


  		




  31
  
  
    
        </div>


  		




  32
  
  
    
 </div>


  		




  
  33
  
    
          </div>


  		




  
  34
  
    
          <div *ngIf="errorMessage.length > 0 " class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>


  		




  
  35
  
    
          <modal-loading [message]= "'Please wait...'"></modal-loading>


  		




  
  36
  
    
       </form>


  		




  33
  37
  
    

  		




  34
  
  
    
    <div *ngIf="showReport" class="uk-alert uk-alert-info" role="alert" >


  		




  35
  
  
    
      <span>{{all}} rows found in file.</span>


  		




  36
  
  
    
      <span>{{found}} results fetched from CrossRef.</span>


  		




  37
  
  
    
      <span *ngIf ="duplicate > 0" [title] = "'Duplicate DOIs: '+ duplicateIds.join()">{{duplicate}} DOIs were duplicates.</span>


  		




  38
  
  
    
      <span *ngIf = "notFound > 0" [title] = "'Not found DOIs: '+ notFoundIds.join()" >{{notFound}} DOIs not found in crossref. ({{notFoundIds.join()}}) </span>


  		




  39
  
  
    
      <span *ngIf = "all == 0 || found == 0"   > Please make sure you are using the right format for the csv file... </span>


  		




  40
  38
  
    

  		




  41
  
  
    
    </div>


  		




  42
  
  
    
    <div *ngIf="errorMessage.length > 0 " class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>


  		




  43
  
  
    
    <modal-loading [message]= "'Please wait...'"></modal-loading>


  		




  
  39
  
    
      <div id="uploadInfo" class="uk-hidden uk-panel uk-panel-box uk-margin-top uk-margin-bottom">


  		




  
  40
  
    
       <div class="uk-panel-badge uk-badge"><i class="uk-icon-info-circle"></i></div>


  		




  
  41
  
    
       <div class="uk-text-bold">Upload information:</div>


  		




  
  42
  
    
       Upload a csv file containing a list of DOIs. For each DOI found in the file, metadata will be fetched from CrossRef.


  		




  
  43
  
    
        Available results will be linked with the selected Projects and Contexts.


  		




  
  44
  
    

  		




  
  45
  
    
          <div class="uk-article-meta">


  		




  
  46
  
    
           CSV format:


  		




  
  47
  
    
           <ul class="uk-list">


  		




  
  48
  
    
             <li>The format of CSV file should be "DOI","ACCESS_MODE","DATE".</li>


  		




  
  49
  
    
             <li>The value "DOI" is required </li>


  		




  
  50
  
    
              <li>Access mode column should have values: "OPEN","CLOSED" or "EMBARGO".</li>


  		




  
  51
  
    
              <li>Date column valid format is YYYY-MM-DD and is required when access mode has value EMBARGO.</li>


  		




  
  52
  
    
              <li>In case access mode is not available default value is "OPEN".</li>


  		




  
  53
  
    
            </ul>


  		




  
  54
  
    
          </div>


  		




  
  55
  
    
   </div>


  		




  
  56
  
    

  		




  
  57
  
    

  		




  
  58
  
    
</div>


  		




  44
  59
  
    
    `


  		




  45
  60
  
    

  		




  46
  61
  
    
})


  		




  ......




  53
  68
  
    
  resultsFromSearch:number;


  		




  54
  69
  
    
  @Input() public select:boolean = true ;


  		




  55
  70
  
    
  @Input() public publications;


  		




  56
  
  
    
  all:number = 0;


  		




  
  71
  
    

  		




  57
  72
  
    
  allIds:string[] = [];


  		




  58
  
  
    
  found:number = 0;


  		




  59
  73
  
    
  foundIds:string[] = [];


  		




  60
  
  
    
  duplicate:number = 0;


  		




  61
  74
  
    
  duplicateIds:string[] = [];


  		




  62
  
  
    
  notFound:number = 0;


  		




  63
  75
  
    
  notFoundIds:string[] = [];


  		




  
  76
  
    
  noValidIds:string[] = [];


  		




  64
  77
  
    
  showReport:boolean = false;


  		




  65
  78
  
    
  showInfo :boolean = false;


  		




  66
  79
  
    
  @ViewChild (ModalLoading) loading : ModalLoading ;


  		




  ......




  85
  98
  
    
    this.makeFileRequest("http://localhost:8000/upload", [], this.filesToUpload).then((result) => {


  		




  86
  99
  
    
          var rows = (result as any).split('\n');  // I have used space, you can use any thing.


  		




  87
  100
  
    
          var i = 0;


  		




  88
  
  
    
          this.all = 0;


  		




  89
  
  
    
          this.duplicate = 0;


  		




  90
  101
  
    
          this.duplicateIds = [];


  		




  91
  102
  
    
          this.allIds = [];


  		




  92
  
  
    
          this.found = 0;


  		




  93
  103
  
    
          this.foundIds = [];


  		




  
  104
  
    
          this.noValidIds = [];


  		




  94
  105
  
    
          this.publications.slice(0,this.publications.length);


  		




  95
  
  
    
          this.notFound = 0;


  		




  96
  106
  
    
          this.notFoundIds = [];


  		




  97
  107
  
    

  		




  98
  108
  
    
          for(i=0;i<rows.length;i++){


  		




  99
  109
  
    
            if(rows[i] && rows[i] != null ){


  		




  100
  110
  
    
              var values = rows[i].split(',');


  		




  101
  111
  
    

  		




  102
  
  
    
              this.all++;


  		




  103
  112
  
    
              var id=this.removeDoubleQuotes(values[0]);


  		




  104
  113
  
    
              if(DOI.isValidDOI(id)){


  		




  105
  114
  
    
                var accessMode = (values[1] != undefined) ? this.removeDoubleQuotes(values[1]):"OPEN";


  		




  ......




  107
  116
  
    
                var embargoDate =(values[2] != undefined) ? this.removeDoubleQuotes(values[2]):Dates.getDateToday();


  		




  108
  117
  
    
                embargoDate = (Dates.isValidDate(embargoDate)?embargoDate:Dates.getDateToday());


  		




  109
  118
  
    
                if(this.allIds.indexOf(id)>-1){


  		




  110
  
  
    
                  this.duplicate++;


  		




  111
  119
  
    
                  this.duplicateIds.push(id);


  		




  112
  120
  
    
                }else{


  		




  113
  121
  
    
                  this.allIds.push(id);


  		




  114
  122
  
    
                  this.fetchResult(id,accessMode,embargoDate);


  		




  115
  123
  
    
                }


  		




  
  124
  
    
             }else{


  		




  
  125
  
    
               this.noValidIds.push(id);


  		




  116
  126
  
    
             }


  		




  117
  127
  
    
           }


  		




  118
  128
  
    

  		




  ......




  175
  185
  
    

  		




  176
  186
  
    
            var crossrefResult = data.items[0];


  		




  177
  187
  
    
            if(data.items.length > 0){


  		




  178
  
  
    
               this.found++;


  		




  179
  188
  
    
              this.foundIds.push(id);


  		




  180
  189
  
    
              var result = {id: id, type :'publication', source : 'crossref',


  		




  181
  190
  
    
              title: crossrefResult.title,url: crossrefResult.URL, result: crossrefResult, accessRights: accessMode, embargoEndDate: date, date : crossrefResult.created['date-time']};


  		




  ......




  183
  192
  
    

  		




  184
  193
  
    

  		




  185
  194
  
    
            }else{


  		




  186
  
  
    
               this.notFound++;


  		




  187
  195
  
    
              this.notFoundIds.push(id);


  		




  188
  196
  
    
            }


  		




  189
  197
  
    
            this.endOfFetching();


  		




  190
  198
  
    
           },


  		




  191
  199
  
    
          err => {


  		




  192
  200
  
    
            console.log(err);


  		




  193
  
  
    
            this.notFound++;


  		




  194
  201
  
    
            this.notFoundIds.push(id);


  		




  195
  202
  
    
            this.endOfFetching();


  		




  196
  203
  
    
          }


  		




  ......




  198
  205
  
    
  }


  		




  199
  206
  
    

  		




  200
  207
  
    
  endOfFetching(){


  		




  201
  
  
    
    if(this.all == this.found+this.notFound+ this.duplicate ){


  		




  
  208
  
    
    if(this.allIds.length == this.foundIds.length+this.notFoundIds.length+ this.duplicateIds.length+this.noValidIds.length ){


  		




  202
  209
  
    
      this.showReport = true;


  		




  203
  210
  
    
      this.enableUpload = true;


  		




  204
  211
  
    
    }


  		












Also available in:  Unified diff