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
This commit is contained in:
argiro.kokogiannaki 2018-09-26 13:56:21 +00:00
parent e775921012
commit 8fbb704aa3
6 changed files with 80 additions and 21 deletions

View File

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

View File

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

View File

@ -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>
<span *ngIf="id" ><a [queryParams]="routerHelper.createQueryParam(param,id)" routerLinkActive="router-link-active" [routerLink]="path" > {{title}}</a></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() url: string[];
@Input() title: string;
@Input() url: string;
@Input() id: string;
@Input() param: string;
@Input() path: string;
public routerHelper:RouterHelper = new RouterHelper();
constructor () {}
ngOnInit() {

View File

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

View File

@ -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;
}
}
}

View File

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