change forms layout (context, projects)
   apply layout changes in direct linking page
   add localstorage prefix for saving the user selected list
   when removing a selection- also update localstorage lists
   add helpers as a tooltip in projects, context and result forms
   smaller table in display claims components
   


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@52820 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2018-07-25 13:56:02 +00:00
parent 78881a5fa7
commit 19a26a399b
18 changed files with 395 additions and 230 deletions

View File

@ -13,38 +13,78 @@ import{EnvProperties} from '../../utils/properties/env-properties';
// moduleId: module.id,
selector: 'claim-contexts-search-form',
template: `
<div [class]="((inlineClaim)?'':' uk-card uk-card-default uk-padding uk-padding-medium ')+ 'uk-animation' " >
<!--div class="uk-text-lead">Select community:</div>
<div clas="uk-margin-left">
<div *ngIf="selectedCommunityId" >
<div class="uk-text-bold">My community:</div>
<div class="uk-margin-left">
<span>
{{selectedCommunityLabel}}
</span>
<a *ngIf="!isSelected(selectedCommunityId)" (click)="addNewContext(selectedCommunityLabel,null,{'id':selectedCommunityId, 'label':selectedCommunityLabel})" class="uk-icon-button icon-button-small uk-icon">
<span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="0.8"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg>
</span> </a>
<span *ngIf="isSelected(selectedCommunityId)" class="uk-label uk-label-success uk-margin-small-top">Added</span>
</div>
</div>
<hr *ngIf="selectedCommunityId">
<div *ngIf="selectedCommunityId" class="uk-text-bold">Other communities:</div>
<div class="uk-child-width-1-3@m uk-margin-left uk-grid-match uk-grid">
<ng-container *ngFor="let community of communities">
<div *ngIf="community.id != selectedCommunityId">
<div>
<span>
{{community.label}}
</span>
<a *ngIf="!isSelected(community.id)" (click)="addNewContext(community.label,null,{'id':community.id, 'label':community.label})" class="uk-icon-button icon-button-small uk-icon">
<span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="0.8"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg>
</span> </a>
<span *ngIf="isSelected(community.id)" class="uk-label uk-label-success uk-margin-small-top">Added</span>
</div>
</div>
</ng-container >
</div>
</div-->
<div class=" uk-animation uk-card uk-card-default uk-padding uk-padding-medium " >
<div class="uk-grid">
<div class="uk-grid uk-margin-top uk-animation-fade">
<div class="uk-width-expand">
<!--div class="uk-text-lead">More options:</div-->
<div class="uk-text-large">Select a community <helper div="link-context-form" tooltip=true></helper> </div>
<select [(ngModel)]="selectedCommunityId" (ngModelChange)="communityChanged()" class="uk-margin-large-bottom uk-select uk-width-medium " name="select_funder" >
<option value="0" >Select community</option>
<option *ngFor="let community of communities" [value]="community.id" >{{community.label}}</option>
</select>
<div class="uk-text-large">and then</div>
<div class=" uk-margin-left uk-margin-left">
<div class=" uk-text-bold">search for community concepts</div>
<table class="uk-margin-remove uk-width-1-1 uk-table uk-table-responsive" ><tr>
<tr>
<td *ngIf="selectedCommunityId != '0' && categories.length > 0" class="uk-width-medium">
<select [(ngModel)]="selectedCategoryId" (ngModelChange)="categoryChanged()" class="uk-select uk-width-medium " name="select_funder" >
<option value="0" >Select category</option>
<option *ngFor="let category of categories" [value]="category.id" >{{category.label}}</option>
</select>
</td><td >
<static-autocomplete [(properties)]=properties [(list)] = concepts [allowDuplicates]=true [showSelected]=false [placeHolderMessage] = "'Concept name'" title = "Concepts" [multipleSelections]=true (addItem) = "select($event)" > </static-autocomplete>
</td></tr>
<table class="uk-width-1-1 uk-table uk-table-responsive" ><tr>
<tr>
<td >
<select [(ngModel)]="selectedCommunityId" (ngModelChange)="communityChanged()" class="uk-select uk-width-medium " name="select_funder" >
<option value="0" >Select community</option>
<option *ngFor="let community of communities" [value]="community.id" >{{community.label}}</option>
</select>
</td>
<td *ngIf="selectedCommunityId != '0' && categories.length > 0">
<select [(ngModel)]="selectedCategoryId" (ngModelChange)="categoryChanged()" class="uk-select uk-width-small " name="select_funder" >
<option value="0" >Select category</option>
<option *ngFor="let category of categories" [value]="category.id" >{{category.label}}</option>
</select>
</td><td >
<static-autocomplete [(properties)]=properties [(list)] = concepts [allowDuplicates]=true [showSelected]=false [placeHolderMessage] = "'Concept name'" title = "Concepts" [multipleSelections]=true (addItem) = "select($event)" > </static-autocomplete>
</td></tr>
</table>
</table>
</div>
<div *ngIf="loading" class="uk-alert uk-alert-primary" role="alert">Loading communities information...</div>
<div *ngIf="error" class="uk-alert uk-alert-warning" role="alert">An error occured while loading communities...</div>
<div class="uk-text-large ">or</div>
<div class=" uk-text-bold uk-margin-bottom uk-margin-left">browse through community categories:
<button uk-toggle="target: #browse; animation: uk-animation-fade" class="uk-button uk-button-default"> Browse </button>
</div>
<div class="uk-margin-left">
<div>Or <a uk-toggle="target: #browse; animation: uk-animation-fade"> Browse </a> through categories </div>
<div id="browse" class="uk-card uk-card-default uk-card-body uk-margin-small" hidden>
<a uk-toggle="target: #browse; animation: uk-animation-fade" class="uk-float-right"><span class="uk-icon">
<div id="browse" class=" uk-margin-small">
<!--a uk-toggle="target: #browse; animation: uk-animation-fade" class="uk-float-right"><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></a>
</span></a-->
<div *ngIf="selectedCommunityId =='0'" class="uk-alert uk-alert-warning" >Please select community first...</div>
<div *ngIf="selectedCommunityId !='0'" class="uk-panel uk-panel-scrollable">
<ul class="uk-list ">
@ -55,8 +95,10 @@ import{EnvProperties} from '../../utils/properties/env-properties';
<span *ngIf="conceptsClassDisplay[selectedCommunityId]" class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"> <polygon points="5 7 15 7 10 12"></polygon></svg></span>{{selectedCommunityLabel}}
</span>
<a *ngIf="!isSelected(selectedCommunityId)" (click)="addNewContext(selectedCommunityLabel,null,{'id':selectedCommunityId, 'label':selectedCommunityLabel})" class="uk-button-default uk-align-right" class="uk-icon-button uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="1"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg> </a>
<a *ngIf="!isSelected(selectedCommunityId)" (click)="addNewContext(selectedCommunityLabel,null,{'id':selectedCommunityId, 'label':selectedCommunityLabel})" class="uk-icon-button icon-button-small uk-icon">
<span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="0.8"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg>
</span> </a>
<span *ngIf="isSelected(selectedCommunityId)" class="uk-label uk-label-success uk-margin-small-top">Added</span>
<ul *ngIf="conceptsClassDisplay[selectedCommunityId]" class="uk-animation-fade" >
<li *ngFor="let category of categories" >
@ -65,8 +107,10 @@ import{EnvProperties} from '../../utils/properties/env-properties';
<span *ngIf="conceptsClassDisplay[category.id]" class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"> <polygon points="5 7 15 7 10 12"></polygon></svg></span>
{{category.label}}</span><a *ngIf="!isSelected(category.id)" (click)="addNewContext(selectedCommunityLabel,category.label,{'id':category.id, 'label':category.label})" class="uk-button-default uk-align-right" class="uk-icon-button" >
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="1"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg></a>
{{category.label}}</span><a *ngIf="!isSelected(category.id)" (click)="addNewContext(selectedCommunityLabel,category.label,{'id':category.id, 'label':category.label})" class="uk-icon-button icon-button-small" >
<span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="0.8"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg>
</span></a>
<span *ngIf="isSelected(category.id)" class="uk-label uk-label-success uk-margin-small-top">Added</span>
<div *ngIf="conceptsCategoryLoading[category.id]" class="uk-alert uk-alert-primary" role="alert">Loading category information...</div>
@ -79,7 +123,9 @@ import{EnvProperties} from '../../utils/properties/env-properties';
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"> <polygon points="5 7 15 7 10 12"></polygon></svg></span>
{{concept1.label}}
</span>
<a *ngIf="!isSelected(concept1.id)" (click)="addNewContext(selectedCommunityLabel,category.label,concept1)" class="uk-button-default uk-align-right" class="uk-icon-button"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="1"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg></a>
<a *ngIf="!isSelected(concept1.id)" (click)="addNewContext(selectedCommunityLabel,category.label,concept1)" class="uk-icon-button icon-button-small"><span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="0.8"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg>
</span></a>
<span *ngIf="isSelected(concept1.id)" class="uk-label uk-label-success uk-margin-small-top">Added</span>
<ul *ngIf="concept1.concepts && conceptsClassDisplay[concept1.id] " class="uk-animation-fade" >
<li *ngFor="let concept2 of concept1.concepts"><span (click)="displaySubcategory(concept2.id)" >
@ -88,11 +134,15 @@ import{EnvProperties} from '../../utils/properties/env-properties';
<span *ngIf="conceptsClassDisplay[concept2.id] && concept2.concepts" class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"> <polygon points="5 7 15 7 10 12"></polygon></svg></span>
{{concept2.label}}</span>
<a *ngIf="!isSelected(concept2.id)" (click)="addNewContext(selectedCommunityLabel,category.label,concept2)" class="uk-button-default uk-align-right" class="uk-icon-button"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="1"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg></a>
<a *ngIf="!isSelected(concept2.id)" (click)="addNewContext(selectedCommunityLabel,category.label,concept2)" class="uk-icon-button icon-button-small"><span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="0.8"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg>
</span></a>
<span *ngIf="isSelected(concept2.id)" class="uk-label uk-label-success uk-margin-small-top">Added</span>
<ul *ngIf="concept2.concepts && conceptsClassDisplay[concept2.id] " class="uk-animation-fade" >
<li *ngFor="let concept3 of concept2.concepts">{{concept3.label}}
<a *ngIf="!isSelected(concept3.id)" (click)="addNewContext(selectedCommunityLabel,category.label,concept3)" class="uk-button-default uk-align-right" class="uk-icon-button"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="1"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg></a>
<a *ngIf="!isSelected(concept3.id)" (click)="addNewContext(selectedCommunityLabel,category.label,concept3)" class="uk-icon-button icon-button-small"><span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="0.8"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg>
</span></a>
<span *ngIf="isSelected(concept3.id)" class="uk-label uk-label-success uk-margin-small-top">Added</span>
</li>
</ul>
@ -109,8 +159,16 @@ import{EnvProperties} from '../../utils/properties/env-properties';
<div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" role="alert">{{warningMessage}}</div>
<div *ngIf="infoMessage.length > 0" class="uk-alert uk-alert-primary" role="alert">{{infoMessage}}</div>
</div>
<helper div="link-context-form" styleName="uk-width-medium"></helper>
</div>
<!--a *ngIf="simpleView" class="uk-float-right " (click)="simpleView=!simpleView">More options <span class="uk-icon">
<svg height="20" icon="chevron-right" ratio="1" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><polyline fill="none" points="7 4 13 10 7 16" stroke="#000" stroke-width="1.03"></polyline></svg>
</span>
</a>
<a *ngIf="!simpleView" class="uk-float-right " (click)="simpleView=!simpleView">Less options <span class="uk-icon">
<svg height="20" icon="chevron-right" ratio="1" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><polyline fill="none" points="7 4 13 10 7 16" stroke="#000" stroke-width="1.03"></polyline></svg>
</span>
</a-->
</div>
@ -127,6 +185,7 @@ public showComponent:boolean = true ; // for claimed started from landing pages
@Input() public inlineEntity;
@Input() public properties:EnvProperties;
@Input() communityId:string= null;
@Input() public inlineClaim:boolean=false;
public selectedCommunityId:string = "0";
public selectedCategoryId:string ="0";
@ -149,6 +208,8 @@ public warningMessage = "";
public infoMessage = "";
public loading:boolean = false;
public error:boolean = false;
public simpleView:boolean = true;
@Input() localStoragePrefix:string = "";
ngOnInit() {
this.getCommunities();
@ -184,7 +245,7 @@ isSelected(id):boolean{
timeout : 1000,
pos : 'top-center'
});
localStorage.setItem(this.localStoragePrefix + "contexts", JSON.stringify(this.selectedList));
}else{
UIkit.notification({
message : 'The concept is already on your list.',
@ -206,7 +267,7 @@ getCommunities () {
this.communities = data;
if(this.communities.length > 0){
this.communities.sort((n1,n2)=> n1.label > n2.label);
}
}
this.loading = false;
if(this.communityId != null){
//preselect community
@ -394,7 +455,9 @@ getCommunities () {
}
this.selectedCategoryId = "0";
this.selectedCategoryLabel="Select Category:";
if(this.selectedCommunityId != "0"){
this.getCategories();
}
}
categoryChanged(){
this.warningMessage = "";
@ -408,19 +471,21 @@ getCommunities () {
this.getConcepts();
}
addCommunityInConcepts(){
this.concepts.push({"id":this.selectedCommunityId, "label":this.selectedCommunityLabel});
this.autocomplete.updateList(this.concepts);
this.concepts.push({"id":this.selectedCommunityId, "label":this.selectedCommunityLabel});
if(this.autocomplete){
this.autocomplete.updateList(this.concepts);
}
}
saveStateAndRedirectLogin(){
if(this.projects != null){
localStorage.setItem("projects", JSON.stringify(this.projects));
localStorage.setItem(this.localStoragePrefix + "projects", JSON.stringify(this.projects));
}
localStorage.setItem("contexts", JSON.stringify(this.selectedList));
localStorage.setItem(this.localStoragePrefix + "contexts", JSON.stringify(this.selectedList));
if(this.results != null){
localStorage.setItem("results", JSON.stringify(this.results));
localStorage.setItem(this.localStoragePrefix + "results", JSON.stringify(this.results));
}
if(this.inlineEntity != null){
localStorage.setItem("inlineEntity", JSON.stringify(this.inlineEntity));
localStorage.setItem(this.localStoragePrefix + "inlineEntity", JSON.stringify(this.inlineEntity));
}
this.router.navigate(['/user-info'], { queryParams: { "errorCode": ErrorCodes.NOT_VALID, "redirectUrl": this.router.url } });

View File

@ -16,7 +16,8 @@ import{EnvProperties} from '../../utils/properties/env-properties';
<a href="#" class="uk-notification-close uk-close uk-icon" data-uk-close=""></a>
<div>A new project is selected.</div>
</div></div-->
<form class=" uk-animation uk-card uk-card-default uk-padding uk-padding-medium " >
<form [class]="((inlineClaim)?'':' uk-card uk-card-default uk-padding uk-padding-medium ')+ 'uk-animation' " >
<div class="uk-text-lead">Search for projects <helper div="link-project-form" tooltip=true></helper></div>
<div class="uk-grid">
<div class="uk-grid uk-width-expand">
<div class="uk-width-auto@m uk-first-column">
@ -30,7 +31,7 @@ import{EnvProperties} from '../../utils/properties/env-properties';
<entities-autocomplete [(properties)]=properties entityType="project" [funderId]="selectedFunderId" [allowDuplicates]=true [showSelected]=false [placeHolderMessage] = "'Project name or ID'" title = "Projects" [multipleSelections]=true (addItem) = "select($event)" ></entities-autocomplete>
</div>
</div>
<helper div="link-project-form" styleName="uk-width-medium"></helper>
</div>
</form>
@ -53,6 +54,8 @@ export class ClaimProjectsSearchFormComponent {
selectedFunderName:string ="Select funder:";
@Output() projectSelected = new EventEmitter();
@Input() public properties:EnvProperties;
@Input() public inlineClaim:boolean=false;
@Input() localStoragePrefix:string = "";
public projects:string[];
public warningMessage = "";
@ -133,6 +136,9 @@ select(item){
if (!found) {
this.selectedProjects.push(project);
if(this.selectedProjects != null){
localStorage.setItem(this.localStoragePrefix + "projects", JSON.stringify(this.selectedProjects));
}
this.projectSelected.emit({
value: true
});

View File

@ -2,6 +2,7 @@
<form class=" uk-padding uk-padding-medium uk-padding-remove-left uk-margin-left uk-margin-small-top" >
<div class="uk-grid">
<div class="uk-width-expand">
<div class="uk-text-lead">Search for research results <helper div="link-result-form" styleName="" tooltip=true></helper> :</div>
<select [(ngModel)]="searchSource" name="select_source" (ngModelChange)="searchSourceChanged(searchSource)" class="uk-select uk-width-1-4">
<option value="openaire">in OpenAIRE </option>
<option value="crossref">in Crossref </option>
@ -9,12 +10,32 @@
<option value="orcid">in ORCID </option>
<option value="all">Search all</option>
</select>
<!--div class="uk-grid">
<div class="uk-width-1-4">
<div>
<label><input class="uk-radio" type="radio" name="searchsource" value="openaire" [checked]="searchSource === 'openaire'" (change)="searchSource='openaire'; searchSourceChanged(searchSource)" > in OpenAIRE</label>
</div>
<div>
<label><input class="uk-radio" type="radio" name="searchsource" value="crossref" [checked]="searchSource === 'crossref'" (change)="searchSource='crossref'; searchSourceChanged(searchSource)" > in Crossref</label>
</div>
<div>
<label><input class="uk-radio" type="radio" name="searchsource" value="datacite" [checked]="searchSource === 'datacite'" (change)="searchSource='datacite'; searchSourceChanged(searchSource)" > in Datacite</label>
</div>
<div>
<label><input class="uk-radio" type="radio" name="searchsource" value="orcid" [checked]="searchSource === 'orcid'" (change)="searchSource='orcid'; searchSourceChanged(searchSource)" > in ORCID</label>
</div>
<div>
<label><input class="uk-radio" type="radio" name="searchsource" value="all" [checked]="searchSource === 'all'" (change)="searchSource='all'; searchSourceChanged(searchSource)" > Search all</label>
</div>
</div-->
<input class=" uk-input uk-width-1-2 form-control" [(ngModel)]="keyword" name="keyword" placeholder="Title, doi, author, orcid..."/>
<span class="input-group-btn">
<button (click)="search(false)" type="submit" class=" uk-button uk-button-danger">Search</button>
</span>
<!--/div-->
</div>
<helper div="link-result-form" styleName="uk-width-medium"></helper>
<!--helper div="link-result-form" styleName="uk-width-medium"></helper-->
</div>
</form>
<div *ngIf="showSearchResults" class="uk-margin-top uk-animation">
@ -40,7 +61,7 @@
</div>
<div >
<claim-results [(results)]=crossrefResults [(selectedResults)]=selectedResults > </claim-results>
<claim-results [localStoragePrefix]=localStoragePrefix [(results)]=crossrefResults [(selectedResults)]=selectedResults> </claim-results>
</div>
</div>
</div>
@ -56,7 +77,7 @@
</div>
</div>
<div >
<claim-results [(results)]=openairePubs [(selectedResults)]=selectedResults > </claim-results>
<claim-results [localStoragePrefix]=localStoragePrefix [localStoragePrefix]=localStoragePrefix [(results)]=openairePubs [(selectedResults)]=selectedResults > </claim-results>
</div>
</div>
</div>
@ -89,7 +110,7 @@
</div>
</div>
<div >
<claim-results *ngIf="orcidResultsNum >0 && orcidResultsToShow.length > 0 " [(results)]=orcidResultsToShow [(selectedResults)]=selectedResults > </claim-results>
<claim-results [localStoragePrefix]=localStoragePrefix [localStoragePrefix]=localStoragePrefix *ngIf="orcidResultsNum >0 && orcidResultsToShow.length > 0 " [(results)]=orcidResultsToShow [(selectedResults)]=selectedResults > </claim-results>
<div *ngIf="orcidResultsNum == 0" class = "uk-alert uk-alert-primary " > No results found </div>
</div>
</div>
@ -107,7 +128,7 @@
</div>
</div>
<div >
<claim-results *ngIf="dataciteResults.length > 0 " [(results)]=dataciteResults [(selectedResults)]=selectedResults > </claim-results>
<claim-results [localStoragePrefix]=localStoragePrefix *ngIf="dataciteResults.length > 0 " [(results)]=dataciteResults [(selectedResults)]=selectedResults > </claim-results>
</div>
</div>
</div>
@ -123,7 +144,7 @@
</div>
</div>
<div >
<claim-results [(results)]=openaireData [(selectedResults)]=selectedResults > </claim-results>
<claim-results [localStoragePrefix]=localStoragePrefix [(results)]=openaireData [(selectedResults)]=selectedResults > </claim-results>
</div>
</div>
</div>
@ -139,7 +160,7 @@
</div>
</div>
<div>
<claim-results [(results)]=openaireSoftware [(selectedResults)]=selectedResults > </claim-results>
<claim-results [localStoragePrefix]=localStoragePrefix [(results)]=openaireSoftware [(selectedResults)]=selectedResults > </claim-results>
</div>
</div>
</div>

View File

@ -48,7 +48,7 @@ export class ClaimResultSearchFormComponent {
@Input() public keyword:string = '';
@Input() public selectedResults:ClaimResult[];
@Input() public properties:EnvProperties;
@Input() localStoragePrefix:string = "";
// @Output() datasetsChange = new EventEmitter();
// @Output() publicationsChange = new EventEmitter();
@ -146,7 +146,7 @@ export class ClaimResultSearchFormComponent {
this.reloadDatacite = false;
}
if((this.searchSource == "all" || this.searchSource == "orcid")&& this.reloadOrcid){
this.orcidResultsToShow=[];
this.orcidResultsToShow=[];
this.searchOrcid(this.keyword);
this.reloadOrcid = false;
}

View File

@ -15,8 +15,12 @@ declare var UIkit:any;
<a *ngIf="result.url" target="_blank" [href]="result.url" >{{result.title?result.title:'[No title available]'}}</a>
<span *ngIf="!result.url" >{{result.title?result.title:'[No title available]'}}</span>
<a class="uk-button-default uk-align-right" *ngIf="!isSelected(result.id)"
(click)="add(result)" class="uk-icon-button"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="1"><rect x="9" y="1" width="1" height="17"></rect>
<rect x="1" y="9" width="17" height="1"></rect></svg></a>
(click)="add(result)" class="uk-icon-button icon-button-small">
<span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="0.8"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg>
</span>
</a>
<span *ngIf="isSelected(result.id)" class="uk-label uk-label-success">Added</span>
</div>
<span *ngIf="result.publisher!=null" class="uk-article-meta">Publisher: {{result.publisher}}</span>
@ -30,6 +34,7 @@ declare var UIkit:any;
export class ClaimResultsComponent {
@Input() results;
@Input() selectedResults;
@Input() localStoragePrefix:string = "";
private isSelected(id:string){
var found:boolean = false;
@ -54,7 +59,9 @@ export class ClaimResultsComponent {
timeout : 1000,
pos : 'top-center'
});
if(this.results != null){
localStorage.setItem(this.localStoragePrefix + "results", JSON.stringify(this.selectedResults));
}
}else{
UIkit.notification({
message : 'The research result is already on your list.',

View File

@ -85,7 +85,7 @@
</div>
<div class="">
<table *ngIf="claims && claims.length > 0" class="uk-table uk-table-striped">
<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>

View File

@ -14,117 +14,78 @@
<div class="uk-width-expand">
<div *ngIf="validInput != null && !validInput" class="uk-alert uk-alert-warning" role="alert">No valid arguments provided in order to start linking openAIRE entities. </div>
<div *ngIf="validInput != null && validInput">
<!--div class="uk-clearfix">
<a class="uk-float-right" uk-toggle="target: #linkingInfo; animation: uk-animation-fade"><span class="uk-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" icon="info" ratio="1"><path d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg>
</span> More Information </a>
</div>
<div id="linkingInfo" class="uk-card uk-card-default uk-card-body uk-margin-small" hidden>
<a uk-toggle="target: #linkingInfo; animation: uk-animation-fade" class="uk-float-right"><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></a>
<div class="uk-text-bold"><span class="uk-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" icon="info" ratio="1"><path d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg>
</span> Linking Functionality:</div>
<p>Through linking functioanilty you are able to create links from {{type}} to {{(linkTo =='context')?"communities/ concepts":((linkTo =='project')?"projects":"research results")}}. You have to select at least one {{(linkTo =='context')?"community/ concept":((linkTo =='project')?"project":"research result")}} in order to be able to proceed.</p>
<p *ngIf="linkTo=='project'"><span class="uk-text-bold">Projects:</span> Search & add projects using keyword search. Limit the search space by specifying project Funder. </p>
<p *ngIf="linkTo=='context'"><span class="uk-text-bold">Communities:</span> Search & add communities/ concepts by selecting community, category and using keyword search for . Or browse through the categories and add communities. </p>
<p *ngIf="linkTo=='result'"><span class="uk-text-bold">Research Results:</span> You can search for reasearch results (publication and/ or research data) to link, in openaire, crossref, Orcid, and/ or Datacite. Use search mode, to search and add results through keyword search. Use upload mode, to upload a list of DOIs of results. </p>
<p *ngIf="show=='claim' && linkTo=='result'"><span class="uk-text-bold">Review Metadata of research results:</span> The selected research results that came from 3rd party repositories (Datacite, Crossreff, Orcid), need review and change of metadata (such as access mode, and type) before they are included in openaire information space.
Please have in mind that ignoring this step, the research results will get the default values, that may be wrong.
</p>
</div-->
<ul uk-accordion *ngIf=" ! (linkTo =='result' && show=='claim') ">
<ul uk-accordion *ngIf=" ! (linkTo =='result' && show=='claim') " uk-accordion class="uk-padding-small uk-margin-remove-bottom basket-accordion">
<li>
<h3 class=" uk-text-right uk-margin-remove-vertical uk-width-small uk-margin-auto-left uk-accordion-title basket-title ">
<h3 class=" uk-text-right uk-margin-remove-vertical uk-width-small uk-margin-auto-left uk-accordion-title basket-title uk-text-danger" uk-tooltip="title:Click to see your selections">
<span class="uk-icon"><svg xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" height="28px" id="my-box" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="28px" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px"><g> <path d="M480,320v128H32V320h78.859l64.016,96h162.25l64-96H480 M384,32H128L0,288v192h512V288L384,32L384,32z M35.781,288l112-224 h216.438l112,224H384l-64,96H192l-64.016-96H35.781L35.781,288z" fill="#b5b5b5"></path></g> </svg> </span>
<span *ngIf="(projects.length + contexts.length + results.length)> 0" class="uk-badge basket-badge ">{{(projects.length + contexts.length + results.length) | number}}</span>
<span class="uk-badge basket-badge ">{{(projects.length + contexts.length + results.length) | number}}</span>
</h3>
<div class="uk-accordion-content dropbasket uk-padding-small uk-margin uk-grid-match uk-child-width-1-1 uk-child-width-1-1@m uk-grid uk-grid-stack">
<div class="uk-accordion-content uk-margin-left uk-margin-right uk-background-muted uk-margin-remove-top dropbasket uk-padding-small uk-margin uk-grid-match uk-child-width-1-1 uk-child-width-1-1@m uk-grid uk-grid-stack">
<claim-selected-projects *ngIf=" linkTo == 'project' " title="link Projects" [projects]="projects" [show]="show" [linkType]=linkType
(showChange)="showChange($event)" > </claim-selected-projects>
(showChange)="showChange($event)" [localStoragePrefix]=localStoragePrefix > </claim-selected-projects>
<claim-selected-contexts *ngIf=" linkTo == 'context' " title="link Communities" [contexts]="contexts" [projects]="projects" [results]="results" [inlineEntity] = "inlineResult" [show]="show" [linkType]=linkType
(showChange)="showChange($event)" > </claim-selected-contexts>
<claim-selected-results *ngIf=" linkTo == 'result' " title= "Selected Research Results" [results]="results" [bulkMode]="bulkMode" showSearch=false showAccessRights=false>
</claim-selected-results>
(showChange)="showChange($event)" [localStoragePrefix]=localStoragePrefix > </claim-selected-contexts>
<claim-selected-results *ngIf=" linkTo == 'result' " title= "Selected Research Results" [results]="results" [bulkMode]="bulkMode" showSearch=false
showAccessRights=false [localStoragePrefix]=localStoragePrefix></claim-selected-results>
</div>
</li>
</ul>
<!--div *ngIf=" ! (linkTo =='result' && show=='claim') " >
<div class="uk-clearfix">
<a class="uk-float-right" uk-toggle="target: #selected; animation: uk-animation-fade">
<span class="uk-icon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="my-box" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g> <path d="M480,320v128H32V320h78.859l64.016,96h162.25l64-96H480 M384,32H128L0,288v192h512V288L384,32L384,32z M35.781,288l112-224 h216.438l112,224H384l-64,96H192l-64.016-96H35.781L35.781,288z" fill="#b5b5b5"/></g>
</svg>
</span>
</a>
</div>
<div id="selected" class="uk-card uk-card-default uk-card-body uk-margin-small" hidden>
<claim-selected-projects *ngIf=" linkTo == 'project' " title="link Projects" [projects]="projects" [show]="show" [linkType]=linkType
(showChange)="showChange($event)" > </claim-selected-projects>
<claim-selected-contexts *ngIf=" linkTo == 'context' " title="link Communities" [contexts]="contexts" [projects]="projects" [results]="results" [inlineEntity] = "inlineResult" [show]="show" [linkType]=linkType
(showChange)="showChange($event)" > </claim-selected-contexts>
<claim-selected-results *ngIf=" linkTo == 'result' " title= "Selected Research Results" [results]="results" [bulkMode]="bulkMode" showSearch=false showAccessRights=false>
</claim-selected-results>
</div>
</div-->
<div class="uk-text-large">
Link {{(type=="project")?'Project':' Research result'}}:
<div class="uk-card uk-card-default uk-padding-small">
<div class="">
Link your {{type}}
</div>
<div class="uk-clearfix">
<!--start-over [results]="results" [contexts]="contexts" [projects]="projects" [linkTo]="linkTo" [type]="type" ></start-over-->
</div>
<!-- inline result -->
<div *ngIf="displayedResult != null && (type =='publication' || type =='dataset' || type=='software' )" class=" uk-margin-top uk-card uk-card-default uk-padding uk-padding-large uk-padding-remove-left uk-margin-left uk-grid uk-grid-stack" uk-grid="">
<div class="uk-width-1-1" >
<div>
<div *ngIf="displayedResult != null && (type =='publication' || type =='dataset' || type=='software' )" class="uk-margin-top uk-margin-left uk-margin-right uk-background-muted uk-first-column uk-padding-small " >
<div>
<a *ngIf="displayedResult.url" target="_blank" href="{{displayedResult.url}}" > <span class="custom-external"></span> {{displayedResult.title}}</a>
<span *ngIf="!displayedResult.url" >{{displayedResult.title}}</span>
</div>
<div *ngIf="displayedResult.result.authors && displayedResult.result.authors.length >0 " class="uk-article-meta">Authors: <span *ngFor="let author of displayedResult.result.authors.slice(0,10) let i = index">{{author}}{{(i < (displayedResult.result.authors.slice(0,10).length-1))?"; ":""}}{{(i == displayedResult.result.authors.slice(0,10).length-1 && displayedResult.result.authors.length > 10)?"...":""}}</span></div>
</div>
</div>
<!-- inline project -->
<div *ngIf=" type == 'project' && projects.length > 0 " class="uk-margin-top uk-card uk-card-default uk-padding uk-padding-large uk-padding-remove-left uk-margin-left uk-grid uk-grid-stack" uk-grid="">
<div *ngIf=" type == 'project' && projects.length > 0 " class="uk-margin-top uk-margin-left uk-margin-right uk-background-muted uk-first-column uk-padding-small" uk-grid="">
{{projects[0].funderName}} | {{projects[0].projectName}} {{(projects[0].projectAcronym)?'('+projects[0].projectAcronym+')':''}}
</div>
<!-- search for entity -->
<div class="uk-margin-top ">
to one or more {{(linkTo =='project')?'projects':''}} {{(linkTo =='context')?'communities':''}} {{(linkTo =='result')?((type !='project'?' other':'')+' research results'):''}}
</div>
<div class = "uk-margin-top uk-margin-left uk-margin-right uk-margin-bottom">
<div class = "uk-margin-top">
<claim-projects-search-form *ngIf=" linkTo =='project' " [(selectedProjects)]="projects" [(properties)] = properties inlineClaim=false [localStoragePrefix]=localStoragePrefix> </claim-projects-search-form>
<claim-projects-search-form *ngIf=" linkTo =='project' " [(selectedProjects)]="projects" [(properties)] = properties > </claim-projects-search-form>
<claim-contexts-search-form *ngIf=" linkTo =='context' " [communityId]=communityId [(selectedList)]="contexts" [projects]="projects" [results]="results" [inlineEntity]="inlineResult" [(properties)]=properties inlineClaim=false [localStoragePrefix]=localStoragePrefix> </claim-contexts-search-form>
<claim-contexts-search-form *ngIf=" linkTo =='context' " [(selectedList)]="contexts" [projects]="projects" [results]="results" [inlineEntity]="inlineResult" [(properties)]=properties> </claim-contexts-search-form>
<claim-result-search-form *ngIf=" linkTo =='result' && show!='claim' " [selectedResults]="results" [(properties)]=properties > </claim-result-search-form>
<claim-result-search-form *ngIf=" linkTo =='result' && show!='claim' " [selectedResults]="results" [(properties)]=properties [localStoragePrefix]=localStoragePrefix > </claim-result-search-form>
</div>
<div *ngIf=" show == 'claim' " class="uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l ">
<claim-selected-results *ngIf=" linkTo =='result' " title= "Selected Research Results" [results]="results" [bulkMode]=false showSearch = false showAccessRights = true>
</claim-selected-results>
<div class="uk-width-1-1 uk-margin-small-top">
<claim-insert class="uk-float-right" [contexts]="contexts" [results]="results" [projects]="projects" [inlineEntity] = inlineResult [show] = "show"
[(properties)]=properties></claim-insert>
</div>
</div>
<div *ngIf=" show == 'claim' " class="uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l ">
<claim-selected-results *ngIf=" linkTo =='result' " title= "Selected Research Results" [results]="results" [bulkMode]=false showSearch = false showAccessRights = true
[localStoragePrefix]=localStoragePrefix></claim-selected-results>
<div class="uk-width-1-1 uk-margin-small-top">
<claim-insert class="uk-float-right" [contexts]="contexts" [results]="results" [projects]="projects" [inlineEntity] = inlineResult [show] = "show"
[(properties)]=properties [localStoragePrefix]=localStoragePrefix ></claim-insert>
</div>
<ul *ngIf="linkTo == 'result'" class="uk-pagination">
</div>
<ul *ngIf="linkTo == 'result'" class=" uk-pagination uk-flex-center uk-margin-auto uk-text-center">
<li *ngIf="show == 'claim'" (click)="show='result';"><a><span class="uk-margin-small-right" uk-pagination-previous></span> Previous</a></li>
<li *ngIf="show != 'claim'"(click)="show='claim';" class="uk-margin-auto-left">
<a>Next <span class="uk-margin-small-left" uk-pagination-next></span></a></li>
</ul>
<li *ngIf="show != 'claim'"(click)="show='claim';" >
<a>Next <span uk-pagination-next></span></a>
</li>
</ul>
</div>
</div>
<helper position="right" styleName=" uk-width-1-5"></helper>

View File

@ -36,6 +36,8 @@ export class DirectLinkingComponent {
show:string="claim"; //{claim,result}
validInput:boolean = null;//'true;
properties:EnvProperties;
@Input() communityId:string= null;
localStoragePrefix:string = "";
constructor (private _router: Router, private route: ActivatedRoute, private entitySearch:EntitiesSearchService,
private publicationsSearch:SearchPublicationsService, private datasetsSearch:SearchDatasetsService,
@ -52,23 +54,6 @@ export class DirectLinkingComponent {
this.properties = data.envSpecific;
});
if(localStorage.getItem("projects")){
this.projects = JSON.parse(localStorage.getItem("projects"));
}
if(localStorage.getItem("contexts")){
this.contexts = JSON.parse(localStorage.getItem("contexts"));
}
if(localStorage.getItem("results")){
this.results = JSON.parse(localStorage.getItem("results"));
}
if(localStorage.getItem("inlineEntity")){
this.inlineResult = JSON.parse(localStorage.getItem("inlineEntity"));
}
localStorage.removeItem("projects");
localStorage.removeItem("contexts");
localStorage.removeItem("results");
localStorage.removeItem("inlineEntity");
this.sub = this.route.queryParams.subscribe(params => {
this.id = params['id'];
@ -83,6 +68,17 @@ export class DirectLinkingComponent {
if((this.type == "publication" || this.type == "dataset" || this.type == "software") && ((this.linkTo == "publication" || this.linkTo == "dataset" || this.linkTo == "software") || this.linkTo == "result" )){
isInlineResult = true;
}
this.localStoragePrefix = this.type.substr(0,3)+"_"+this.linkTo.substr(0,3)+"_";
console.log("\n\n"+this.localStoragePrefix+"\n\n");
if(localStorage.getItem(this.localStoragePrefix + "projects")){
this.projects = JSON.parse(localStorage.getItem(this.localStoragePrefix + "projects"));
}
if(localStorage.getItem(this.localStoragePrefix + "contexts")){
this.contexts = JSON.parse(localStorage.getItem(this.localStoragePrefix + "contexts"));
}
if(localStorage.getItem(this.localStoragePrefix + "results")){
this.results = JSON.parse(localStorage.getItem(this.localStoragePrefix + "results"));
}
if(this.type == "project"){
this.linkType = "project";
this.getProjectById(this.id);

View File

@ -13,15 +13,20 @@ import{EnvProperties} from '../../../utils/properties/env-properties';
selector: 'bulk-claim',
template: `
<div class="uk-animation " style=" ">
<form class=" uk-padding ">
<form class=" uk-padding uk-padding-medium uk-padding-remove-left uk-margin-left uk-margin-small-top ">
<div class="uk-grid">
<div class="uk-width-expand">
<h3 for="exampleInputFile">Upload a DOI csv file:</h3>
<label for="exampleInputFile">Select a file</label>
<input id="exampleInputFile" class="uk-width-small" type="file" (change)="fileChangeEvent($event)" placeholder="Upload file..." />
<button class="uk-button uk-button-small" [class.disabled]="!enableUpload" type="button" (click)="upload()">Upload</button>
<div class="uk-text-lead">Upload a DOI csv file <helper div="link-result-bulk" tooltip=true ></helper>:</div>
<!--h3 for="exampleInputFile">Or upload a DOI csv file:</h3-->
<label for="exampleInputFile">Select a file: </label>
<div class="js-upload" uk-form-custom>
<input id="exampleInputFile" class="uk-width-medium" type="file" (change)="fileChangeEvent($event)"/>
<button class="uk-button uk-button-default" type="button" tabindex="-1" [class.disabled]="!enableUpload" ><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"> <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></span> Select</button>
<!--button class="uk-button uk-button-small" [class.disabled]="!enableUpload" type="button" (click)="upload()">Upload</button-->
</div>
<div *ngIf="showReport" uk-alert class="uk-alert uk-alert-primary" role="alert" >
<a class="uk-alert-close" uk-close></a>
<div>Uploaded file contains {{allIds.length}} {{((allIds.length==1)?'DOI':'DOIs')}}.
@ -44,7 +49,7 @@ import{EnvProperties} from '../../../utils/properties/env-properties';
<div *ngIf="errorMessage.length > 0 " class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
<modal-loading [message]= "'Uploading, reading your documet and fetching results. Please give us a moment..'"></modal-loading>
</div>
<helper div="link-result-bulk" ></helper>
<!--helper div="link-result-bulk" ></helper-->
</div>
</form>
@ -79,6 +84,8 @@ export class BulkClaimComponent {
errorMessage = "";
infoMEssage = "";
enableUpload:boolean = true;
@Input() localStoragePrefix:string="";
constructor(private _searchCrossrefService: SearchCrossrefService, private _searchDataciteService: SearchDataciteService) {
this.filesToUpload = [];
}
@ -170,6 +177,7 @@ export class BulkClaimComponent {
fileChangeEvent(fileInput: any){
this.filesToUpload = <Array<File>> fileInput.target.files;
this.upload();
}
makeFileRequest(url: string, params: Array<string>, files: Array<File>) {
@ -245,7 +253,9 @@ export class BulkClaimComponent {
this.showReport = true;
this.enableUpload = true;
this.loading.close();
if(this.results != null){
localStorage.setItem(this.localStoragePrefix + "results", JSON.stringify(this.results));
}
}
}

View File

@ -13,19 +13,23 @@ import{EnvProperties} from '../../../utils/properties/env-properties';
@Component({
selector: 'claim-insert',
template: `
<div *ngIf="errorMessage.length > 0">
<div class="uk-alert uk-alert-danger" role="alert" [innerHTML]="errorMessage"></div>
<div *ngIf="insertedClaims.length>0">{{insertedClaims.length | number}} claims created, follow <a routerLinkActive="router-link-active" routerLink="/myclaims">the link</a> to manage your claims</div>
</div>
<div *ngIf="warningMessage.length > 0">
<div class="uk-alert uk-alert-warning" role="alert">{{warningMessage}}</div>
</div>
<div class="uk-width-1-1">
<modal-loading [message]= "'Please wait...'"></modal-loading>
<modal-alert (alertOutput)="confirmClose($event)">
</modal-alert>
<button *ngIf="!claiming && showButton" (click)="validateInsertions()" class="uk-button uk-button-danger" >Finish</button>
<div class="uk-clearfix">
<div *ngIf="errorMessage.length > 0">
<div class="uk-alert uk-alert-danger uk-margin-top" role="alert" [innerHTML]="errorMessage"></div>
<div *ngIf="insertedClaims.length>0">{{insertedClaims.length | number}} claims created, follow <a routerLinkActive="router-link-active" routerLink="/myclaims">the link</a> to manage your claims</div>
</div>
<div *ngIf="warningMessage.length > 0">
<div class="uk-alert uk-alert-warning uk-margin-top" role="alert">{{warningMessage}}</div>
</div>
<div>
<button *ngIf="!claiming && showButton" (click)="validateInsertions()" class="uk-button uk-button-danger uk-float-right" >Finish</button>
</div>
`
})
export class ClaimInsertComponent {
@ -46,7 +50,7 @@ export class ClaimInsertComponent {
@Input() inlineEntity = null; // the entity from the landing page
@Input() public properties:EnvProperties;
@Output() showChange = new EventEmitter();
@Input() localStoragePrefix:string="";
@ViewChild (ModalLoading) loading : ModalLoading ;
@ViewChild(AlertModal) alert;
@ -80,11 +84,11 @@ private insertActions(){
this.errorInRecords=[];
if(!Session.isLoggedIn()){
this.showButton = false;
localStorage.setItem("projects", JSON.stringify(this.projects));
localStorage.setItem("contexts", JSON.stringify(this.contexts));
localStorage.setItem("results", JSON.stringify(this.results));
localStorage.setItem(this.localStoragePrefix + "projects", JSON.stringify(this.projects));
localStorage.setItem(this.localStoragePrefix + "contexts", JSON.stringify(this.contexts));
localStorage.setItem(this.localStoragePrefix + "results", JSON.stringify(this.results));
if(this.inlineEntity != null){
localStorage.setItem("inlineEntity", JSON.stringify(this.inlineEntity));
localStorage.setItem(this.localStoragePrefix + "inlineEntity", JSON.stringify(this.inlineEntity));
}
this._router.navigate(['/user-info'], { queryParams: { "errorCode": ErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
@ -186,14 +190,14 @@ private isertBulkClaims(claims){
this.errorInClaims = err.errorInClaims;
}
if(this.projects != null){
localStorage.setItem("projects", JSON.stringify(this.projects));
localStorage.setItem(this.localStoragePrefix + "projects", JSON.stringify(this.projects));
}
localStorage.setItem("contexts", JSON.stringify(this.contexts));
localStorage.setItem(this.localStoragePrefix + "contexts", JSON.stringify(this.contexts));
if(this.results != null){
localStorage.setItem("results", JSON.stringify(this.results));
localStorage.setItem(this.localStoragePrefix + "results", JSON.stringify(this.results));
}
if(this.inlineEntity != null){
localStorage.setItem("inlineEntity", JSON.stringify(this.inlineEntity));
localStorage.setItem(this.localStoragePrefix + "inlineEntity", JSON.stringify(this.inlineEntity));
}
this.afterclaimsInsertion();
}
@ -256,8 +260,10 @@ private afterclaimsInsertion(){
this.claiming = false;
if(this.errorInClaims.length == 0 && this.insertedClaims.length > 0 && this.errorInRecords.length == 0){
this._router.navigate( ['/myclaims'],{ queryParams: this.params } );
localStorage.removeItem(this.localStoragePrefix + "projects");
localStorage.removeItem(this.localStoragePrefix + "contexts");
localStorage.removeItem(this.localStoragePrefix + "results");
this._router.navigate( ['/myclaims'],{ queryParams: this.params } );
this.showChange.emit({
value: this.show
});

View File

@ -6,36 +6,97 @@
<div class="uk-article-title custom-article-title">
Link your research results
</div>
<div class="uk-width-1-1">
<helper position="top"></helper>
<!--div *ngIf="step==0">
<div class="uk-child-width-1-3@m uk-grid-small uk-grid-match uk-margin-top" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 style="color: #4687E6 !important" class="uk-card-title uk-text-center">1 Select communities and projects</h3>
<p>Select a community or search for community concepts to link</p>
<p>Search for OpenAIRE projects to link</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 style="color: #4687E6 !important" class="uk-card-title uk-text-center">2 Select research results</h3>
<p>
Search for publications, research data & software
</p>
<div>Search in
<ul>
<li>Openaire</li>
<li>Crossref</li>
<li>Datacite</li>
<li>Orcid</li>
</ul>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 style="color: #4687E6 !important" class="uk-card-title uk-text-center">3 Review metadata</h3>
<p>Confirm your selections</p>
<p>Review results metadata if needed</p>
</div>
</div>
</div>
<ul class=" uk-pagination uk-flex-center uk-margin-auto uk-float-right">
<li (click)="step=1;" >
<a>Start <span uk-pagination-next></span></a>
</li>
</ul>
</div-->
<div >
<div class="uk-width-1-1">
<helper position="top"></helper>
</div>
<div class="uk-grid helper-grid">
<helper position="left" styleName=" uk-width-1-5 uk-padding-left"></helper>
<div class="uk-width-expand">
<ul uk-accordion class="uk-padding-small uk-margin-remove-bottom basket-accordion">
<li>
<h3 class=" uk-text-right uk-margin-remove-vertical uk-width-small uk-margin-auto-left uk-accordion-title basket-title uk-text-danger" uk-tooltip="title:Click to see your selections">
<span class="uk-icon"><svg xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" height="28px" id="my-box" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="28px" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px"><g> <path d="M480,320v128H32V320h78.859l64.016,96h162.25l64-96H480 M384,32H128L0,288v192h512V288L384,32L384,32z M35.781,288l112-224 h216.438l112,224H384l-64,96H192l-64.016-96H35.781L35.781,288z" fill="#b5b5b5"></path></g> </svg> </span>
<span class="uk-badge basket-badge ">{{(projects.length + contexts.length + results.length) | number}}</span>
</h3>
<div class="uk-accordion-content uk-background-muted uk-margin-remove-top uk-margin-left uk-margin-right dropbasket uk-padding-small uk-margin uk-grid-match uk-child-width-1-1 uk-child-width-1-1@m uk-grid uk-grid-stack">
<claim-selected-projects title="link Projects" [projects]="projects" [show]="show" [linkType]=linkType
(showChange)="showChange($event)" [localStoragePrefix]=localStoragePrefix > </claim-selected-projects>
<claim-selected-contexts title="link Communities" [contexts]="contexts" [projects]="projects" [results]="results" [inlineEntity] = "inlineResult" [show]="show" [linkType]=linkType
(showChange)="showChange($event)" [localStoragePrefix]=localStoragePrefix> </claim-selected-contexts>
<claim-selected-results *ngIf="step!=3" title= "Selected Research Results" [results]="results" [bulkMode]="bulkMode" showSearch=false showAccessRights=false [localStoragePrefix]=localStoragePrefix>
</claim-selected-results>
</div>
</li>
</ul>
<!--start-over [results]="results" [contexts]="contexts" [projects]="projects" ></start-over-->
<!-- add here pagination to be visible when results list is long -->
<ul class="uk-subnav uk-margin-remove-bottom uk-subnav-pill linkingSteps" uk-margin="">
<li [class]="(step==1)?'uk-active':' '" ><a (click)="step=1;"> 1 Select Projects <span >or Communities </span></a></li>
<li [class]="(step==2)?'uk-active':' '" ><a (click)="step=2;">2 Select Research Results </a></li>
<li [class]="(step==3)?'uk-active':' '" (click)="step=3;"><a [class]="(results.length == 0)?'uk-disabled':''" (click)="show='claim';" >3 Review metadata</a></li>
</ul>
<!--start-over [results]="results" [contexts]="contexts" [projects]="projects" ></start-over-->
<!-- add here pagination to be visible when results list is long -->
<ul *ngIf="step ==2" class=" uk-pagination uk-flex-center uk-margin-auto uk-text-center">
<li *ngIf="step !=1 " (click)="step=step-1;" class="uk-margin-left"><a><span class="uk-margin-small-right" uk-pagination-previous></span> Previous</a></li>
<li *ngIf="step !=3 " (click)="step=step + 1;" >
<a>Next <span uk-pagination-next></span></a>
</li>
<li *ngIf=" step == 3 " (click)="next()" >
<claim-insert [contexts]="contexts" [results]="results" [projects]="projects" [show] = "show"
(showChange)="showChange($event)" [(properties)] = properties></claim-insert>
<ul class=" uk-pagination uk-flex-center uk-margin-auto uk-text-center">
<li *ngIf="step !=1 " (click)="step=step-1;" ><a><span class=" " uk-pagination-previous></span> Previous</a></li>
<li *ngIf="step !=3 " (click)="step=step + 1;" >
<a>Next <span uk-pagination-next></span></a>
</li>
<!--li *ngIf=" step == 3 " (click)="next()" >
<claim-insert [contexts]="contexts" [results]="results" [projects]="projects" [show] = "show"
(showChange)="showChange($event)" [(properties)] = properties></claim-insert>
</li>
</ul>
</li-->
</ul>
<div class="uk-section uk-section-default uk-padding-remove-top">
<div style="border: 1px solid #eee;" class="uk-container uk-margin-top">
<ul uk-accordion class="uk-background-muted uk-padding-small uk-margin-remove-bottom basket-accordion">
<!--ul uk-accordion class="uk-background-muted uk-padding-small uk-margin-remove-bottom basket-accordion">
<li>
<h3 class=" uk-text-right uk-margin-remove-vertical uk-width-small uk-margin-auto-left uk-accordion-title basket-title uk-text-danger">
@ -52,7 +113,7 @@
</claim-selected-results>
</div>
</li>
</ul>
</ul-->
<div *ngIf="step==1">
@ -67,11 +128,11 @@
<ul id="tabs" class="uk-switcher uk-width-1-1">
<li>
<claim-projects-search-form [(selectedProjects)]="projects" [(properties)] = properties> </claim-projects-search-form>
<claim-projects-search-form [(selectedProjects)]="projects" [(properties)] = properties [localStoragePrefix]=localStoragePrefix> </claim-projects-search-form>
</li>
<li>
<claim-contexts-search-form [communityId]=communityId [(selectedList)]="contexts" [projects]="projects" [results]="results" [inlineEntity]="inlineResult" [(properties)]=properties> </claim-contexts-search-form>
<claim-contexts-search-form [communityId]=communityId [(selectedList)]="contexts" [projects]="projects" [results]="results" [inlineEntity]="inlineResult" [(properties)]=properties [localStoragePrefix]=localStoragePrefix> </claim-contexts-search-form>
</li>
</ul>
@ -82,7 +143,7 @@
<div class="uk-width-1-1 uk-card uk-card-default uk-padding ">
<div class=" uk-padding-small uk-padding-remove-bottom ">
<span *ngIf="bulkMode" class=" uk-animation uk-float-right">
<!--span *ngIf="bulkMode" class=" uk-animation uk-float-right">
<span title= "Bulk mode"> Upload DOIs in bulk 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>
<a title= "Switch to Search mode" (click)="bulkMode = !bulkMode;"> Search online for research results <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>
@ -93,16 +154,18 @@
<span title= "Search mode"> Search online for research results <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>
</span>
</span-->
</div>
<claim-result-search-form *ngIf="!bulkMode" [selectedResults]="results" [(properties)]=properties > </claim-result-search-form>
<bulk-claim *ngIf="bulkMode" [results]="results" [(properties)] = properties> </bulk-claim>
<claim-result-search-form [selectedResults]="results" [(properties)]=properties [localStoragePrefix]=localStoragePrefix> </claim-result-search-form>
<div class="uk-text-lead">Or </div>
<bulk-claim [results]="results" [(properties)] = properties [localStoragePrefix]=localStoragePrefix> </bulk-claim>
</div>
</div>
<div *ngIf="step==3" class="uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l">
<div class=" uk-grid uk-margin-small-top">
<div class="uk-width-expand uk-margin-left">
<claim-selected-results title= "Selected Research Results" [results]="results" [bulkMode]="bulkMode" showSearch = false showAccessRights = true>
<claim-selected-results title= "Selected Research Results" [results]="results" [bulkMode]="bulkMode" showSearch = false showAccessRights = true [localStoragePrefix]=localStoragePrefix>
</claim-selected-results>
</div>
<helper div="link-metadata" styleName="uk-width-medium"></helper>
@ -113,21 +176,23 @@
</div>
</div>
<ul class=" uk-pagination uk-flex-center uk-margin-auto uk-text-center">
<li *ngIf="step !=1 " (click)="step=step-1;" class="uk-margin-left"><a><span class="uk-margin-small-right" uk-pagination-previous></span> Previous</a></li>
<li *ngIf="step !=1 " (click)="step=step-1;" ><a><span class="uk-margin-small-right" uk-pagination-previous></span> Previous</a></li>
<li *ngIf="step !=3 " (click)="step=step + 1;" >
<a>Next <span uk-pagination-next></span></a>
</li>
<li *ngIf=" step == 3 " (click)="next()" >
<claim-insert [contexts]="contexts" [results]="results" [projects]="projects" [show] = "show"
(showChange)="showChange($event)" [(properties)] = properties></claim-insert>
<!--claim-insert [contexts]="contexts" [results]="results" [projects]="projects" [show] = "show"
(showChange)="showChange($event)" [(properties)] = properties></claim-insert-->
</li>
</ul>
<claim-insert *ngIf=" step == 3 " [contexts]="contexts" [results]="results" [projects]="projects" [show] = "show"
(showChange)="showChange($event)" [(properties)] = properties [localStoragePrefix]=localStoragePrefix></claim-insert>
</div>
<helper position="right" styleName=" uk-width-1-5"></helper>
</div>
<helper position="bottom"></helper>
</div>
</div>

View File

@ -1,7 +1,6 @@
import {Component, Input} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Title, Meta} from '@angular/platform-browser';
import {Observable} from 'rxjs/Observable';
import {EnvProperties} from '../../utils/properties/env-properties';
@ -42,14 +41,16 @@ export class LinkingGenericComponent {
inlineResult:ClaimResult =null;
sub:any =null;
properties:EnvProperties;
localStoragePrefix:string = "linking_";
constructor (private _router: Router, private route: ActivatedRoute, private entitySearch:EntitiesSearchService,
private publicationsSearch:SearchPublicationsService, private datasetsSearch:SearchDatasetsService,
private _meta: Meta, private _title: Title) {
private _meta: Meta, private _title: Title ) {
var title = "OpenAIRE | Linking";
this._meta.updateTag({content:title},"property='og:title'");
this._title.setTitle(title);
}
ngOnInit() {
this.route.data
@ -58,20 +59,17 @@ export class LinkingGenericComponent {
});
if( typeof localStorage !== 'undefined') {
if(localStorage.getItem("projects")){
this.projects = JSON.parse(localStorage.getItem("projects"));
if(localStorage.getItem(this.localStoragePrefix + "projects")){
this.projects = JSON.parse(localStorage.getItem(this.localStoragePrefix + "projects"));
}
if(localStorage.getItem("contexts")){
this.contexts = JSON.parse(localStorage.getItem("contexts"));
if(localStorage.getItem(this.localStoragePrefix + "contexts")){
this.contexts = JSON.parse(localStorage.getItem(this.localStoragePrefix + "contexts"));
}
if(localStorage.getItem("results")){
this.results = JSON.parse(localStorage.getItem("results"));
if(localStorage.getItem(this.localStoragePrefix + "results")){
this.results = JSON.parse(localStorage.getItem(this.localStoragePrefix + "results"));
}
localStorage.removeItem("projects");
localStorage.removeItem("contexts");
localStorage.removeItem("results");
}
}

View File

@ -16,9 +16,11 @@ import {ClaimContext} from '../../claim-utils/claimEntities.class';
<ul class="uk-list uk-list-divider">
<li class="list-group-item" *ngFor="let context of contexts" >
<span *ngIf="context.community != context.concept.label">{{context.community }} > {{context.category}} ></span><span> {{context.concept.label}} </span>
<span (click)="removeContext(context)" 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>
<span (click)="removeContext(context)" aria-hidden="true" class="uk-icon-button icon-button-small ">
<span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><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>
</li>
</ul>
@ -57,7 +59,7 @@ export class ClaimSelectedContextsComponent {
@Input() hideType;
@Input() bulkMode:boolean = false;
@Output() showChange = new EventEmitter();
@Input() localStoragePrefix:string = "";
showsearch:boolean = false;
todayDate = '';
@ -77,6 +79,9 @@ export class ClaimSelectedContextsComponent {
var index:number =this.contexts.indexOf(item);
if (index > -1) {
this.contexts.splice(index, 1);
if(this.contexts != null){
localStorage.setItem(this.localStoragePrefix + "contexts", JSON.stringify(this.contexts));
}
}
}

View File

@ -14,9 +14,11 @@ import {RouterHelper} from '../../../utils/routerHelper.class';
<ul class="uk-list uk-list-divider">
<li class="list-group-item" *ngFor="let project of projects">
<a [queryParams]="routerHelper.createQueryParam('projectId',project.projectId)" routerLinkActive="router-link-active" routerLink="/search/project" >{{project.funderName}} | {{project.projectName}} {{(project.projectAcronym)?'('+project.projectAcronym+')':''}} <!--[{{project.startDate}} - {{project.endDate}}]--></a>
<span (click)="removeProject(project)" 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>
<span (click)="removeProject(project)" aria-hidden="true" class="uk-icon-button icon-button-small ">
<span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><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>
</li>
</ul>
</div>
@ -53,7 +55,7 @@ ngOnInit() {
@Output() projectsChange = new EventEmitter();
@Output() showChange = new EventEmitter();
showsearch:boolean = false;
@Input() localStoragePrefix:string = "";
todayDate = '';
nextDate = '';
public routerHelper:RouterHelper = new RouterHelper();
@ -62,6 +64,9 @@ removeProject(item:any){
var index:number =this.projects.indexOf(item);
if (index > -1) {
this.projects.splice(index, 1);
if(this.projects != null){
localStorage.setItem(this.localStoragePrefix + "projects", JSON.stringify(this.projects));
}
}
this.projectsChange.emit({
value: this.projects

View File

@ -30,9 +30,11 @@ import {Dates} from '../../../utils/string-utils.class';
</span></span>
<a *ngIf="pub.url" target="_blank" href="{{pub.url}}" > <span class="custom-external"></span> {{pub.title?pub.title:'[No title available]'}}</a>
<span *ngIf="!pub.url" >{{pub.title?pub.title:'[No title available]'}}</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>
<span *ngIf="!showAccessRights" (click)="removePublication(pub)" aria-hidden="true" class="uk-icon-button icon-button-small ">
<span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><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>
@ -102,6 +104,7 @@ export class ClaimSelectedResultsComponent {
@Input() showSearch:boolean = false;
nextDate = {};
@ViewChild(AlertModal) alertApplyAll;
@Input() localStoragePrefix:string = "";
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
@ -123,6 +126,9 @@ private myDatePickerOptions: IMyOptions = {
var index:number =this.results.indexOf(item);
if (index > -1) {
this.results.splice(index, 1);
if(this.results != null){
localStorage.setItem(this.localStoragePrefix + "results", JSON.stringify(this.results));
}
}
// this.resultsChange.emit({
// value: this.results

View File

@ -11,7 +11,7 @@ import {Title, Meta} from '@angular/platform-browser';
<div class="uk-container uk-margin-top">
<div class="uk-article-title custom-article-title">
My Claims
My links
</div>
<div>
<div class="uk-text-right"><a routerLink="/participate/claim">Claim more links?</a></div>

View File

@ -473,10 +473,10 @@
</li>
</ul-->
</div>
<metrics [pageViews]="pageViews" shortView=true
<!--metrics [pageViews]="pageViews" shortView=true
[id]="projectId" [entityType]="'projects'" [entity]="'Project'"
(metricsResults)="metricsResults($event)" [(properties)] = properties>
</metrics>
</metrics-->
</div>
</div>
</div>

View File

@ -9,10 +9,16 @@ import {SafeHtmlPipe} from '../pipes/safeHTML.pipe';
@Component({
selector: 'helper',
template: `
<div *ngIf=" texts && texts.length > 0" [ngClass]=styleName>
<div *ngIf=" texts && texts.length > 0 && !tooltip" [ngClass]=styleName>
<div *ngFor="let text of texts " [innerHTML]="text.content | safeHtml">
</div>
</div>
<span *ngIf=" texts && texts.length > 0 && tooltip" >
<span uk-tooltip="pos:right; delay:10; "
title="{{buildTooltip()}}">
<span class="uk-icon">&nbsp;<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="info" ratio="1"><path d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg></span>
</span>
</span>
`
})
export class HelperComponent {
@ -22,6 +28,7 @@ export class HelperComponent {
@Input() before: boolean;
@Input() div: string;
@Input() styleName:string = '';
@Input() tooltip:boolean = false;
sub:any;
properties:EnvProperties;
communityId = null;
@ -63,5 +70,12 @@ export class HelperComponent {
}
}
buildTooltip():string{
var text:string="<div class='uk-padding-small uk-width-xxlarge'>";
for(var i=0; i< this.texts.length; i++){
text+=this.texts[i].content;
}
text+="</div>";
return text;
}
}