Claims: change the remove button to bin icon

Browse: add search and sort in view more 
Download results link: make it a link 


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@53278 d315682c-612b-4755-9ff5-7f18f6832af3

claims/claim-utils/displayClaims/displayClaims.component.html

@@ -5,6 +5,11 @@
 <div class="uk-grid  helper-grid">
   <helper position="left" styleName=" uk-width-1-5 uk-padding-left"></helper>
   <div class="uk-width-expand">
+    <div *ngIf="claims && claims.length > 0" class="uk-alert uk-alert-primary">
+     <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
+     Newly added links for OpenAIRE research results will be available on the next run of our algorithms.
+     <div class="uk-margin-left">Links to external results (Crossref, Datacite, Orcid) are automatically added in OpenAIRE information space.</div>
+   </div>
     <form class="">
 
 
@@ -66,11 +71,7 @@
      <div *ngIf="userValidMessage.length > 0 " class = "uk-alert uk-alert-danger " >
          User session is not valid. Please login again.
      </div>
-     <div *ngIf="claims && claims.length > 0" class="uk-alert uk-alert-primary">
+
-      <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
-      Newly added links for OpenAIRE research results will be available on the next run of our algorithms.
-      <div class="uk-margin-left">Links to external results (Crossref, Datacite, Orcid) are automatically added in OpenAIRE information space.</div>
-    </div>
 
     <!--  Buttons for selecting and Delete Claims -->
     <div *ngIf="enableDelete">
@@ -82,7 +83,9 @@
       <div *ngIf="deleteMessage.length>0 "   [innerHTML]="deleteMessage">
 
       </div>
-       <button class=" uk-button uk-button-default"  (click)="confirmOpen()"> <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="trash" ratio="1"><polyline fill="none" stroke="#000" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7" width="1" height="9"></rect><rect x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></span> Delete</button>
+
+
+       <!--button *ngIf="claims && claims.length > 0" class=" uk-button uk-button-default"  (click)="confirmOpen()"> <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="trash" ratio="1"><polyline fill="none" stroke="#000" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7" width="1" height="9"></rect><rect x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></span> Delete</button-->
     </div>
     <br>
 
@@ -95,7 +98,14 @@
     <table *ngIf="claims && claims.length > 0" class="uk-table uk-table-small uk-table-striped">
       <thead>
          <tr>
-            <th *ngIf="enableDelete"><input id="checkAll" type="checkbox" (click)="selectAll($event)" [ngModel]="selected.length==claims.length" /></th>
+            <th *ngIf="enableDelete" class="uk-padding-remove-right" title="Select all">
+              <input id="checkAll" type="checkbox" (click)="selectAll($event)" [ngModel]="selected.length==claims.length" />
+            </th>
+            <th class="uk-padding-remove-right uk-padding-remove-left" title="Delete selected">
+              <a [class]=" 'uk-text-danger '+(selected.length > 0?'':'uk-disabled')"  (click)="confirmOpen()"  >
+                <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="trash" ratio="1"><polyline fill="none" stroke="#000" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7" width="1" height="9"></rect><rect x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></span>
+              </a>
+            </th>
             <!--<th>Id</th>
             <!--  <th>Target Type</th> -->
               <th><a (click)="changeOrderby('target')" >Research Result</a> </th>
@@ -109,7 +119,7 @@
       <tbody>
           <tr *ngFor="let claim of claims " >
            <td *ngIf="enableDelete"><input [id]="claim.id" type="checkbox" (click)="select(claim,$event)"  [ngModel]="isSelected(claim.id)"/></td>
-
+           <td></td>
             <td><claim-entity [entity]="claim.target" [type]="claim.targetType" [(properties)]=properties> </claim-entity></td>
              <td><claim-entity [entity]="claim.source" [type]="claim.sourceType" [(properties)]=properties> </claim-entity></td>
             <td *ngIf="showUserEmail">{{claim.userMail}}</td>

claims/claim-utils/entityFormatter/claimEntityFormatter.component.ts

@@ -9,23 +9,23 @@ import{EnvProperties} from '../../../utils/properties/env-properties';
   template: `
   <div *ngIf="type == 'publication'" title="Publication">
       <span class="uk-margin-small-right uk-icon" ><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect fill="none" stroke="#000" x="3.5" y="2.5" width="12" height="16"></rect><polyline fill="none" stroke="#000" points="5 0.5 17.5 0.5 17.5 17"></polyline></svg></span>
-      <publication-title [title]="entity.title" [url]="entity.externalUrl" ></publication-title>
+      <publication-title [title]="entity.title" [url]="entity.externalUrl" [id]="entity.openaireId" param="articleId" path="/search/publication"></publication-title>
   </div>
   <div *ngIf="type == 'dataset'" title="Dataset">
       <span class="uk-margin-small-right uk-icon" ><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><ellipse fill="none" stroke="#000" cx="10" cy="4.64" rx="7.5" ry="3.14"></ellipse><path fill="none" stroke="#000" d="M17.5,8.11 C17.5,9.85 14.14,11.25 10,11.25 C5.86,11.25 2.5,9.84 2.5,8.11"></path><path fill="none" stroke="#000" d="M17.5,11.25 C17.5,12.99 14.14,14.39 10,14.39 C5.86,14.39 2.5,12.98 2.5,11.25"></path><path fill="none" stroke="#000" d="M17.49,4.64 L17.5,14.36 C17.5,16.1 14.14,17.5 10,17.5 C5.86,17.5 2.5,16.09 2.5,14.36 L2.5,4.64"></path></svg></span>
-      <publication-title [title]="entity.title" [url]="entity.externalUrl" ></publication-title>
+      <publication-title [title]="entity.title" [url]="entity.externalUrl" [id]="entity.openaireId" param="datasetId" path="/search/dataset"></publication-title>
   </div>
   <div *ngIf="type == 'software'" title="Software">
       <span class="uk-margin-small-right uk-icon" >
         <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"> <circle fill="none" stroke="#000" cx="9.997" cy="10" r="3.31"></circle> <path fill="none" stroke="#000" d="M18.488,12.285 L16.205,16.237 C15.322,15.496 14.185,15.281 13.303,15.791 C12.428,16.289 12.047,17.373 12.246,18.5 L7.735,18.5 C7.938,17.374 7.553,16.299 6.684,15.791 C5.801,15.27 4.655,15.492 3.773,16.237 L1.5,12.285 C2.573,11.871 3.317,10.999 3.317,9.991 C3.305,8.98 2.573,8.121 1.5,7.716 L3.765,3.784 C4.645,4.516 5.794,4.738 6.687,4.232 C7.555,3.722 7.939,2.637 7.735,1.5 L12.263,1.5 C12.072,2.637 12.441,3.71 13.314,4.22 C14.206,4.73 15.343,4.516 16.225,3.794 L18.487,7.714 C17.404,8.117 16.661,8.988 16.67,10.009 C16.672,11.018 17.415,11.88 18.488,12.285 L18.488,12.285 Z"></path></svg>
       </span>
-      <publication-title [title]="entity.title" [url]="entity.externalUrl" ></publication-title>
+      <publication-title [title]="entity.title" [url]="entity.externalUrl" [id]="entity.openaireId" param="softwareId" path="/search/software"></publication-title>
   </div>
   <div *ngIf="type == 'other'" title="Other reserch product">
       <span class="uk-margin-small-right uk-icon" >
         <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <polygon fill="none" stroke="#000" points="2.5,5.7 10,1.3 17.5,5.7 17.5,14.3 10,18.7 2.5,14.3"></polygon> <circle fill="none" stroke="#000" cx="10" cy="10" r="3.5"></circle></svg>
       </span>
-      <publication-title [title]="entity.title" [url]="entity.externalUrl" ></publication-title>
+      <publication-title [title]="entity.title" [url]="entity.externalUrl" [id]="entity.openaireId" param="orpId" path="/search/other" ></publication-title>
   </div>
   <div *ngIf="type == 'project'  " title="Project">
     <span class="uk-margin-small-right uk-icon"  ><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect x="5" y="2" width="10" height="1"></rect><rect x="3" y="4" width="14" height="1"></rect><rect fill="none" stroke="#000" x="1.5" y="6.5" width="17" height="11"></rect></svg></span>

claims/claim-utils/entityFormatter/publicationTitleFormatter.component.ts

@@ -1,4 +1,5 @@
 import {Component, Input} from '@angular/core';
+import {RouterHelper} from '../../../utils/routerHelper.class';
 
 //Usage Example "<publication-title [title]="X" [url]="X" > </publication-title>"
 
@@ -6,16 +7,21 @@ import {Component, Input} from '@angular/core';
   selector: 'publication-title',
   template: `
   <span class="publication-title">
-    <span *ngIf="url" ><a target="_blank" href="{{url}}" ><span class="custom-external custom-icon" ></span> {{title}}</a></span>
+
-    <span *ngIf="!url" >{{title}}</span>
+     <span *ngIf="id" ><a  [queryParams]="routerHelper.createQueryParam(param,id)"  routerLinkActive="router-link-active" [routerLink]="path" >  {{title}}</a></span>
-  </span>
+     <!--span *ngIf="url" class="uk-margin-small-left" ><a target="_blank" href="{{url}}" >
+     (<span class="custom-external custom-icon" ></span>link)</a></span-->
+   </span>
   `
 })
 
 export class PublicationTitleFormatter {
-  @Input() title: string[];
+  @Input() title: string;
-  @Input() url: string[];
+  @Input() url: string;
-
+  @Input() id: string;
+  @Input() param: string;
+  @Input() path: string;
+  public routerHelper:RouterHelper = new RouterHelper();
   constructor () {}
 
   ngOnInit() {

searchPages/searchUtils/browseStatistic.component.html

@@ -42,11 +42,22 @@
           <button class="uk-modal-close-default" type="button" uk-close></button>
 
           <h4 class="tm-article-subtitle">{{filter.title}}</h4>
+          <div class="uk-grid uk-margin-left uk-margin-right">
+            <input   class="uk-input   uk-margin-small-bottom uk-width-1-2  " name="filter-keyword"  placeholder="Search for {{filter.title}}" type="text" [(ngModel)]="keyword">
+            <select   [(ngModel)]="sortBy"      class="uk-select  uk-margin-small-bottom uk-width-1-2 uk-padding-remove"  name="select_order"  (ngModelChange)="sortByChanged = true;" >
+              <option  value="num"  >Sort by results number</option>
+              <option  value="name"  >Sort by name</option>
+            </select>
+          </div>
+
           <ul *ngIf="filter.values.length > 0" class="uk-list uk-list-line   browseFilters">
-            <li *ngFor= "let value of filter.values"><!--a [href]="baseUrl+'?'+filter.filterId+'='+value.id">{{_formatName(value)}} ({{value.number}})</a-->
+            <ng-container *ngFor = "let value of getValues(filter,sortBy)">
+            <li *ngIf="filterKeywords(value.name)" ><!--*ngFor= "let value of filter.values"--><!--a [href]="baseUrl+'?'+filter.filterId+'='+value.id">{{_formatName(value)}} ({{value.number}})</a-->
+
             <a class = "uk-modal-close filterItem" [queryParams]="routerHelper.createQueryParam(filter.filterId,quote(value.id))" routerLinkActive="router-link-active" [routerLink]=baseUrl>
               <span class="filterName"><div title = "{{value.name}}">{{_formatName(value)}} </div></span> <span class="filterNumber" > ({{value.number | number}})</span></a>
             </li>
+          </ng-container>
           </ul>
         </div>
       </div>

searchPages/searchUtils/browseStatistic.component.ts

@@ -24,6 +24,8 @@ export class BrowseStatisticComponent {
   private _maxCharacters = 30;
   public viewAll = false;
   public routerHelper:RouterHelper = new RouterHelper();
+  keyword = "";
+  sortBy = "num";
   constructor () {
 
   }
@@ -40,5 +42,35 @@ export class BrowseStatisticComponent {
   private _formatName(value){
     return value.name+" ";//(((value.name+" ("+value.number+")").length >this._maxCharacters)?(value.name.substring(0,(this._maxCharacters - (" ("+value.number+")").length - ('...').length))+"..."):value.name)
   }
+  filterKeywords(value){
+    if(this.keyword.length > 0){
+      if(value.toLowerCase().indexOf(this.keyword.toLowerCase()) ==-1){
+        return false;
+      }
+    }
+    return true;
+  }
 
+  getValues(filter, sortBy:string = "num"):any{
+
+    if(sortBy == "name"){
+      var array = filter.values.slice();
+      array.sort((n1,n2)=> {
+        if (n1.name > n2.name) {
+            return 1;
+        }
+
+        if (n1.name < n2.name) {
+            return -1;
+        }
+
+        return 0;
+      });
+      return array;
+    }else{
+      return filter.values;
+    }
+
+
+  }
 }

searchPages/searchUtils/searchDownload.component.ts

@@ -10,12 +10,12 @@ import{EnvProperties} from '../../utils/properties/env-properties';
 @Component({
     selector: 'search-download',
     template: `
-        <span class="uk-margin-large-right" *ngIf="totalResults > 0 && totalResults <= csvLimit">
+        <a class="uk-margin-large-right" *ngIf="totalResults > 0 && totalResults <= csvLimit">
             <span class="clickable" (click)="downloadfile(downloadURLAPI+'?type='+type+'&format=csv'+csvParams,type+'-report-'+totalResults)">
                 <span aria-hidden="true" class="glyphicon glyphicon-download"></span>
                 <span  class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="download" ratio="1"><polyline fill="none" stroke="#000" points="14,10 9.5,14.5 5,10"></polyline><rect x="3" y="17" width="13" height="1"></rect><line fill="none" stroke="#000" x1="9.5" y1="13.91" x2="9.5" y2="3"></line></svg></span> (CSV)
             </span>
-        </span>
+        </a>
         <span class="uk-margin-large-right cursor-not-allowed" *ngIf="totalResults > csvLimit"
                     [attr.uk-tooltip]="'pos:right'"
                     [title]="'Download up to '+csvLimit+' results'">