linking:
- update layout for communities - clean up code for communities - update css for select/remove buttons
This commit is contained in:
parent
b3d38ab102
commit
f247480aea
|
@ -1,5 +1,3 @@
|
|||
<div>
|
||||
<div>
|
||||
<div class="uk-grid uk-margin-top uk-animation-fade">
|
||||
<div class="uk-width-expand">
|
||||
<div class="uk-display-inline-block">
|
||||
|
@ -9,154 +7,142 @@
|
|||
<div input type="text" [(value)]="keyword" placeholder="Entities to link" [hint]="'Search for ' + openaireEntities.COMMUNITIES + '...'"></div>
|
||||
</advanced-search-input>
|
||||
</div>
|
||||
<div class="uk-margin-right uk-padding">
|
||||
<span *ngFor="let community of communities" [title]="(this.results.length>=basketLimit)?'Basket reached the size limit':''">
|
||||
<span [class]="((this.results.length>=basketLimit)?'uk-disabled':'')+' uk-margin-small-bottom uk-margin-small-right '+getCommunityClass(community)"
|
||||
(click)="select(community)" style="cursor:pointer;">
|
||||
<a href="#modal-categories" uk-toggle>
|
||||
|
||||
<div *ngIf="communities" class="uk-margin-right uk-padding uk-grid uk-child-width-1-3 uk-grid-small uk-grid-match"
|
||||
uk-grid >
|
||||
<ng-container *ngFor="let community of filter()">
|
||||
<div class="uk-padding-small uk-link-reset community-card">
|
||||
<div [title]="(this.results.length>=basketLimit)?'Basket reached the size limit':''"
|
||||
class="uk-card uk-card-default uk-card-hover uk-padding-small uk-text-center " >
|
||||
<div class="uk-text-right" >
|
||||
<a
|
||||
[class]="(this.results.length>=basketLimit)?'uk-icon-button uk-disabled disabled':'uk-icon-button enabled'" *ngIf="!isSelected(community.id)"
|
||||
(click)="select(community.id, community.label)">
|
||||
<span class="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>
|
||||
</span>
|
||||
</a>
|
||||
<a *ngIf="isSelected(community.id)" class="uk-icon-button selected "
|
||||
(click)="remove(community)">
|
||||
<span class="uk-icon" >
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="check" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline></svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<img *ngIf="communityLogos && communityLogos[community.id] else
|
||||
elseBlock"
|
||||
[src]="communityLogos[community.id] |logoUrl"
|
||||
class="uk-blend-multiply"
|
||||
[alt]="((community.title)?community.title:(community.shortTitle?community.shortTitle:'')) + ' logo'"
|
||||
loading="lazy" style="max-height:70px">
|
||||
<ng-template #elseBlock>
|
||||
<img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo"
|
||||
class="uk-blend-multiply" style="max-height:70px">
|
||||
</ng-template>
|
||||
|
||||
<div class="uk-margin-small-top">
|
||||
{{community.label}}
|
||||
</a>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="filter().length == 0">
|
||||
<div class="uk-alert uk-alert-primary"
|
||||
role="alert">No Results found
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Categories modal-->
|
||||
<div id="modal-categories" uk-modal="bg-close:false;">
|
||||
<div class="uk-modal-dialog uk-modal-body uk-height-min-medium">
|
||||
<a class="uk-modal-close uk-position-right uk-margin-right uk-margin-top" type="button">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon">
|
||||
<line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line>
|
||||
<line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line>
|
||||
</svg>
|
||||
</a>
|
||||
<modal-alert #modal large="true" >
|
||||
|
||||
<div class="uk-modal-body uk-height-min-medium uk-width-expand">
|
||||
<div class="uk-margin-bottom">
|
||||
|
||||
<input
|
||||
[ngModel]="isSelected(selectedCommunityId)" type="checkbox"
|
||||
(ngModelChange)="isSelected(selectedCommunityId)?removeById(selectedCommunityId):select(selectedCommunityId,
|
||||
selectedCommunityLabel);"
|
||||
>
|
||||
|
||||
<div class="portal-color uk-margin-top">
|
||||
<span class="uk-icon-button icon-button-small portal-icon-button uk-icon">
|
||||
<svg height="20" icon="check" ratio="1" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><polyline fill="none" points="4,10 8,15 17,4" stroke="#000" stroke-width="1.1"></polyline></svg>
|
||||
</span>
|
||||
<span
|
||||
class="uk-text-bold">{{selectedCommunityLabel}}</span> community is now in your Links Basket
|
||||
<span class="uk-margin-small-left">{{selectedCommunityLabel}}</span>
|
||||
</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>
|
||||
<!-- *ngIf="categories[selectedCommunityId] && categories[selectedCommunityId].length > 0 " -->
|
||||
<div class="uk-margin-small-top uk-text-small" *ngIf="categories[selectedCommunityId] &&
|
||||
categories[selectedCommunityId].length > 0 ">
|
||||
Optionally, you can specify additional Community's paths to link your sources.
|
||||
</div>
|
||||
|
||||
<div class="uk-margin-small-top uk-text-small uk-text-meta" *ngIf="categories[selectedCommunityId] &&
|
||||
categories[selectedCommunityId].length > 0 ">
|
||||
Optionally, you can <span class="uk-text-bold">specify additional</span> Community's <span
|
||||
class="uk-text-bold">paths</span> to link your
|
||||
sources.
|
||||
</div>
|
||||
<div *ngIf="categories[selectedCommunityId] && categories[selectedCommunityId].length == 0 "
|
||||
class=" uk-margin-small-top uk-text-small uk-text-muted">
|
||||
No aditional community paths found for this community.
|
||||
class=" uk-text-small uk-text-muted">
|
||||
No additional community paths found for this community.
|
||||
</div>
|
||||
<ul *ngIf="categories[selectedCommunityId] && categories[selectedCommunityId].length > 0 "
|
||||
class=" uk-list uk-margin-top uk-animation-fade uk-overflow-auto uk-height-medium">
|
||||
class=" uk-list uk-margin-small-top uk-margin-left uk-animation-fade uk-overflow-auto uk-height-medium">
|
||||
<li *ngFor="let category of categories[selectedCommunityId]">
|
||||
<span (click)="browseConcepts(category.id)">
|
||||
<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="8 5 13 10 8 15"></polygon></svg></span>
|
||||
<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}} - {{category.id}}</span>
|
||||
<a *ngIf="!isSelected(category.id)"
|
||||
(click)="addNewContext(selectedCommunityLabel,category.label,{'id':category.id, 'label':category.label})"
|
||||
[class]="((this.results.length>=basketLimit)?'uk-disabled':'')+' uk-icon-button icon-button-small'">
|
||||
<span class="uk-icon" [title]="(this.results.length>=basketLimit)?'Basket reached the size limit':''">
|
||||
<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>
|
||||
<div (click)="browseConcepts(category.id)">
|
||||
<input [ngModel]="isSelected(category.id)" type="checkbox"
|
||||
(ngModelChange)="isSelected(category.id)?removeById(category.id):addNewContext(selectedCommunityLabel,category.label,{'id':category.id, 'label':category.label});"
|
||||
>
|
||||
|
||||
<span *ngIf="isSelected(category.id)"
|
||||
class="uk-icon-button icon-button-small portal-icon-button uk-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="check"
|
||||
ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.1"
|
||||
points="4,10 8,15 17,4"></polyline></svg>
|
||||
</span>
|
||||
|
||||
<span class="uk-margin-small-left">{{category.label}} </span>
|
||||
<span *ngIf="!conceptsClassDisplay[category.id]" uk-icon="icon:chevron-down; ratio:0.7"></span>
|
||||
<span *ngIf="conceptsClassDisplay[category.id]" uk-icon="icon:chevron-up; ratio:0.7"></span>
|
||||
</div>
|
||||
|
||||
<div *ngIf="conceptsCategoryLoading[category.id]" class="uk-alert uk-alert-primary"
|
||||
role="alert">Loading category information...
|
||||
</div>
|
||||
<div
|
||||
[class]="(conceptsClassDisplay[category.id] && conceptsClass[category.id] && conceptsClass[category.id].length>5)?'uk-panel-scrollable':''">
|
||||
<div>
|
||||
|
||||
<div
|
||||
*ngIf="conceptsClass[category.id] && conceptsClass[category.id].length == 0 && conceptsClassDisplay[category.id]">No more paths found
|
||||
</div>
|
||||
<ul *ngIf="conceptsClass[category.id] && conceptsClassDisplay[category.id]"
|
||||
class="uk-list uk-animation-fade" id="ul_{{category.id}}">
|
||||
class="uk-list uk-animation-fade uk-margin-left uk-margin-top" id="ul_{{category.id}}">
|
||||
<li *ngFor="let concept1 of conceptsClass[category.id]">
|
||||
<span (click)="displaySubcategory(concept1.id)">
|
||||
<span *ngIf="!conceptsClassDisplay[concept1.id] && concept1.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="8 5 13 10 8 15"></polygon></svg></span>
|
||||
|
||||
<span *ngIf="conceptsClassDisplay[concept1.id] && concept1.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>
|
||||
{{concept1.label}}
|
||||
</span>
|
||||
<a *ngIf="!isSelected(concept1.id)"
|
||||
(click)="addNewContext(selectedCommunityLabel,category.label,concept1)"
|
||||
[class]="((this.results.length>=basketLimit)?'uk-disabled':'')+' 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-icon-button icon-button-small portal-icon-button uk-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="check"
|
||||
ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.1"
|
||||
points="4,10 8,15 17,4"></polyline></svg>
|
||||
</span>
|
||||
<div
|
||||
[class]="(conceptsClassDisplay[concept1.id] && concept1.concepts && concept1.concepts.length>5)?'uk-panel-scrollable':''">
|
||||
<div (click)="displaySubcategory(concept1.id)">
|
||||
<input [ngModel]="isSelected(concept1.id)" type="checkbox"
|
||||
(ngModelChange)="isSelected(concept1.id)?removeById(concept1.id):addNewContext(selectedCommunityLabel,category.label,concept1);">
|
||||
<span class="uk-margin-small-left">{{concept1.label}}</span>
|
||||
<span *ngIf="concept1.concepts && concept1.concepts.length==0">
|
||||
<span *ngIf="!conceptsClassDisplay[concept1.id]" uk-icon="icon:chevron-down; ratio:0.7"></span>
|
||||
<span *ngIf="conceptsClassDisplay[concept1.id]" uk-icon="icon:chevron-up; ratio:0.7"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
*ngIf="concept1.concepts && concept1.concepts.length==0 && conceptsClassDisplay[concept1.id]">No more paths found
|
||||
</div>
|
||||
<ul *ngIf="concept1.concepts && conceptsClassDisplay[concept1.id] " class="uk-animation-fade">
|
||||
<li *ngFor="let concept2 of concept1.concepts"><span
|
||||
(click)="displaySubcategory(concept2.id)">
|
||||
<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="8 5 13 10 8 15"></polygon></svg></span>
|
||||
|
||||
<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]="((this.results.length>=basketLimit)?'uk-disabled':'')+' 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-icon-button icon-button-small portal-icon-button uk-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
|
||||
icon="check" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.1"
|
||||
points="4,10 8,15 17,4"></polyline></svg>
|
||||
<ul *ngIf="concept1.concepts && conceptsClassDisplay[concept1.id] "
|
||||
class="uk-list uk-animation-fade uk-margin-left uk-margin-top">
|
||||
<li *ngFor="let concept2 of concept1.concepts">
|
||||
<div (click)="displaySubcategory(concept2.id)">
|
||||
<input [ngModel]="isSelected(concept2.id)" type="checkbox"
|
||||
(ngModelChange)="isSelected(concept2.id)?removeById(concept2.id):addNewContext(selectedCommunityLabel,category.label,concept2);" >
|
||||
<span *ngIf="concept2.concepts && concept2.concepts.length==0">
|
||||
<span class="uk-margin-small-left">{{concept2.label}}</span><span *ngIf="!conceptsClassDisplay[concept1.id]" uk-icon="icon:chevron-down; ratio:0.7"></span>
|
||||
<span *ngIf="conceptsClassDisplay[concept1.id]" uk-icon="icon:chevron-up; ratio:0.7"></span>
|
||||
</span>
|
||||
</div>
|
||||
<ul *ngIf="concept2.concepts && conceptsClassDisplay[concept2.id] "
|
||||
class="uk-animation-fade">
|
||||
<li *ngFor="let concept3 of concept2.concepts">{{concept3.label}} [title]="(this.results.length>=basketLimit)?'Basket reached the size limit':''"
|
||||
<a *ngIf="!isSelected(concept3.id)"
|
||||
(click)="addNewContext(selectedCommunityLabel,category.label,concept3)"
|
||||
[class]="((this.results.length>=basketLimit)?'uk-disabled':'')+' 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-icon-button icon-button-small portal-icon-button uk-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
|
||||
icon="check" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.1"
|
||||
points="4,10 8,15 17,4"></polyline></svg>
|
||||
</span>
|
||||
class="uk-list uk-animation-fade uk-margin-left uk-margin-top">
|
||||
<li *ngFor="let concept3 of concept2.concepts">
|
||||
<input [ngModel]="isSelected(concept3.id)" type="checkbox"
|
||||
(ngModelChange)="isSelected(concept3.id)?removeById(concept2.id):addNewContext(selectedCommunityLabel,category.label,concept3);">
|
||||
<span class="uk-margin-small-left">{{concept3.label}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
@ -168,22 +154,10 @@
|
|||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<p class="">
|
||||
<button class="uk-button uk-button-default uk-modal-close uk-margin-right uk-margin-top uk-align-right"
|
||||
type="button">Close
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-margin-left">
|
||||
</div>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</modal-alert>
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, Input} from '@angular/core';
|
||||
import {Component, Input, ViewChild} from '@angular/core';
|
||||
import {Router} from '@angular/router';
|
||||
import {ContextsService} from './service/contexts.service';
|
||||
import {ClaimEntity, ShowOptions} from './claimHelper.class';
|
||||
|
@ -7,6 +7,8 @@ import {LoginErrorCodes} from '../../login/utils/guardHelper.class';
|
|||
import {EnvProperties} from '../../utils/properties/env-properties';
|
||||
import {Subscriber} from "rxjs";
|
||||
import {OpenaireEntities} from "../../utils/properties/searchFields";
|
||||
import {CommunityService} from "../../connect/community/community.service";
|
||||
import {CommunitiesService} from "../../connect/communities/communities.service";
|
||||
|
||||
declare var UIkit: any;
|
||||
|
||||
|
@ -23,7 +25,8 @@ export class ClaimContextSearchFormComponent {
|
|||
@Input() public inlineClaim: boolean = false;
|
||||
@Input() basketLimit;
|
||||
@Input() showOptions:ShowOptions;
|
||||
|
||||
@ViewChild('modal') modal;
|
||||
modalClicked = false;
|
||||
public selectedCommunityId: string = "0";
|
||||
public selectedCategoryId: string = "0";
|
||||
public query = '';
|
||||
|
@ -44,9 +47,27 @@ export class ClaimContextSearchFormComponent {
|
|||
entitiesSelectOptions;
|
||||
keyword = "";
|
||||
subscriptions = [];
|
||||
communityLogos = {};
|
||||
ngOnInit() {
|
||||
this.entitiesSelectOptions = this.showOptions.selectOptions;
|
||||
this.getCommunities();
|
||||
//get community logos
|
||||
this.subscriptions.push(this._communitiesService.getCommunities(this.properties, this.properties.communityAPI+"/communities/").subscribe(
|
||||
communitiesResults => {
|
||||
if(communitiesResults!=null) {
|
||||
this.communityLogos = {};
|
||||
for (let community of communitiesResults) {
|
||||
if(community.logoUrl && community.logoUrl.length > 0) {
|
||||
this.communityLogos[community.communityId] = community;
|
||||
}
|
||||
}
|
||||
this.getCommunities();
|
||||
}
|
||||
},
|
||||
error => {
|
||||
this.getCommunities();
|
||||
}
|
||||
));
|
||||
|
||||
}
|
||||
ngOnDestroy() {
|
||||
this.subscriptions.forEach(subscription => {
|
||||
|
@ -55,36 +76,64 @@ export class ClaimContextSearchFormComponent {
|
|||
}
|
||||
});
|
||||
}
|
||||
constructor(private _contextService: ContextsService, private router: Router) {
|
||||
constructor(private _contextService: ContextsService, private router: Router, private _communitiesService: CommunitiesService) {
|
||||
|
||||
}
|
||||
|
||||
getCommunityClass(community) {
|
||||
let addclass = "";
|
||||
if (this.isSelected(community.id)) {
|
||||
addclass += " contextlabelSelected ";
|
||||
} else {
|
||||
addclass += " contextlabelNotSelected ";
|
||||
}
|
||||
if (this.keyword.length > 0) {
|
||||
if (community.label.toLowerCase().indexOf(this.keyword.toLowerCase()) == -1) {
|
||||
addclass += " fadeOut "
|
||||
}
|
||||
}
|
||||
return addclass + 'uk-label';
|
||||
filter() {
|
||||
return this.communities?this.communities.filter(community => this.keyword.length ==0 || community.label.toLowerCase().indexOf(this.keyword.toLowerCase()) != -1):[];
|
||||
}
|
||||
|
||||
select(community) {
|
||||
remove(community: any) {
|
||||
this.selectedCommunityId = community.id;
|
||||
this.selectedCommunityLabel = community.label;
|
||||
this.getCategories();
|
||||
if (this.isSelected(community.id)) {
|
||||
this.removeById(community.id);
|
||||
this.openModal();
|
||||
}
|
||||
removeById(id) {
|
||||
let index: number = -1;
|
||||
for (let _i = 0; _i < this.results.length; _i++) {
|
||||
let item = this.results[_i];
|
||||
if (item.id == id) {
|
||||
index = _i;
|
||||
}
|
||||
}
|
||||
|
||||
if (index > -1) {
|
||||
this.results.splice(index, 1);
|
||||
if (this.results != null) {
|
||||
localStorage.setItem(this.localStoragePrefix, JSON.stringify(this.results));
|
||||
}
|
||||
UIkit.notification(OpenaireEntities.COMMUNITY + ' removed from your basket!', {
|
||||
status: 'warning',
|
||||
timeout: 4000,
|
||||
pos: 'bottom-right'
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
select(communityId, communityLabel) {
|
||||
console.log("SELECT", communityId)
|
||||
this.selectedCommunityId = communityId;
|
||||
this.selectedCommunityLabel = communityLabel;
|
||||
this.getCategories();
|
||||
if (this.isSelected(communityId)) {
|
||||
|
||||
} else {
|
||||
this.addNewContext(community.label, null, {'id': community.id, 'label': community.label});
|
||||
this.addNewContext(communityLabel, null, {'id': communityId, 'label': communityLabel});
|
||||
}
|
||||
this.openModal()
|
||||
}
|
||||
|
||||
public openModal() {
|
||||
this.modalClicked = true;
|
||||
this.modal.cancelButton = false;
|
||||
this.modal.okButton = false;
|
||||
this.modal.alertTitle = this.selectedCommunityLabel;
|
||||
this.modal.open();
|
||||
}
|
||||
|
||||
|
||||
isSelected(id): boolean {
|
||||
for (let _i = 0; _i < this.results.length; _i++) {
|
||||
let item = this.results[_i];
|
||||
|
@ -95,26 +144,24 @@ export class ClaimContextSearchFormComponent {
|
|||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
addNewContext(community, category, concept, notify = true) {
|
||||
// if (this.results.length > 50) {
|
||||
// UIkit.notification({
|
||||
// message: 'Your basket exceeds the number of allowed concepts (50)',
|
||||
// status: 'warning',
|
||||
// timeout: 1500,
|
||||
// pos: 'top-center'
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
getClaimEntity(community, category, concept){
|
||||
const entity: ClaimEntity = new ClaimEntity() ;
|
||||
entity.type = "community";
|
||||
|
||||
entity.context = {community: community, category: category, concept: concept};
|
||||
entity.id = entity.context.concept.id;
|
||||
return entity;
|
||||
}
|
||||
addNewContext(community, category, concept, notify = true) {
|
||||
const entity: ClaimEntity = this.getClaimEntity(community, category, concept) ;
|
||||
this.warningMessage = "";
|
||||
if (!this.isSelected(entity.id)) {
|
||||
this.results.push(entity);
|
||||
localStorage.setItem(this.localStoragePrefix, JSON.stringify(this.results));
|
||||
UIkit.notification(OpenaireEntities.COMMUNITY + ' added in your basket!', {
|
||||
status: 'success',
|
||||
timeout: 4000,
|
||||
pos: 'bottom-right'
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -128,6 +175,7 @@ export class ClaimContextSearchFormComponent {
|
|||
this.subscriptions.push(this._contextService.getPublicCommunitiesByState().subscribe(
|
||||
data => {
|
||||
this.communities = data;
|
||||
console.log(this.communities)
|
||||
if (this.communities.length > 0) {
|
||||
this.communities.sort((n1, n2) => n1.label > n2.label);
|
||||
}
|
||||
|
@ -191,77 +239,7 @@ export class ClaimContextSearchFormComponent {
|
|||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
getConcepts() {
|
||||
this.loading = true;
|
||||
if (this.selectedCategoryId != '0') {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this.saveStateAndRedirectLogin();
|
||||
} else {
|
||||
this.concepts = [];
|
||||
|
||||
this._contextService.getConcepts(this.selectedCategoryId, "", true, this.properties.contextsAPI).subscribe(
|
||||
data => {
|
||||
|
||||
this.concepts = data;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (data[i].hasSubConcept == true) {
|
||||
this.getSubConcepts(data[i].id);
|
||||
}
|
||||
}
|
||||
this.addCommunityInConcepts();
|
||||
if (this.query !== "") {
|
||||
var event = {value: ""};
|
||||
event.value = this.query;
|
||||
// this.filter(event);
|
||||
}
|
||||
this.loading = false;
|
||||
},
|
||||
err => {
|
||||
//console.log(err);
|
||||
this.handleError("Error getting concepts for category with id: " + this.selectedCategoryId, err);
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
}
|
||||
} else {
|
||||
this.concepts = [];
|
||||
this.loading = false;
|
||||
}
|
||||
}*/
|
||||
/*
|
||||
getSubConcepts(conceptId) {
|
||||
this.loading = true;
|
||||
if (this.selectedCategoryId != '0') {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this.saveStateAndRedirectLogin();
|
||||
} else {
|
||||
this._contextService.getSubConcepts(conceptId, "", true, this.properties.contextsAPI).subscribe(
|
||||
data => {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
this.concepts.push(data[i]);
|
||||
}
|
||||
|
||||
if (this.query !== "") {
|
||||
var event = {value: ""};
|
||||
event.value = this.query;
|
||||
// this.filter(event);
|
||||
}
|
||||
this.loading = false;
|
||||
},
|
||||
err => {
|
||||
//console.log(err);
|
||||
this.handleError("Error getting subconcepts for concept with id: " + conceptId, err);
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
}
|
||||
} else {
|
||||
this.concepts = [];
|
||||
this.loading = false;
|
||||
}
|
||||
}*/
|
||||
|
||||
|
||||
displaySubcategory(id) {
|
||||
if (this.conceptsClassDisplay[id] != null) {
|
||||
this.conceptsClassDisplay[id] = !this.conceptsClassDisplay[id];
|
||||
|
@ -325,44 +303,9 @@ export class ClaimContextSearchFormComponent {
|
|||
|
||||
}
|
||||
|
||||
// communityChanged(){
|
||||
// this.warningMessage = "";
|
||||
// this.infoMessage = "";
|
||||
// for(var i = 0; i< this.communities.length; i++){
|
||||
// if(this.communities[i].id==this.selectedCommunityId){
|
||||
// this.selectedCommunityLabel = this.communities[i].label;
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
// this.selectedCategoryId = "0";
|
||||
// this.selectedCategoryLabel="Select Category:";
|
||||
// if(this.selectedCommunityId != "0"){
|
||||
// this.getCategories();
|
||||
// }
|
||||
// }
|
||||
// categoryChanged(){
|
||||
// this.warningMessage = "";
|
||||
// this.infoMessage = "";
|
||||
// for(var i = 0; i< this.categories.length; i++){
|
||||
// if(this.categories[i].id==this.selectedCategoryId){
|
||||
// this.selectedCategoryLabel = this.categories[i].label;
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
// this.getConcepts();
|
||||
// }
|
||||
/* addCommunityInConcepts() {
|
||||
this.concepts.push({"id": this.selectedCommunityId, "label": this.selectedCommunityLabel});
|
||||
// if(this.autocomplete){
|
||||
// this.autocomplete.updateList(this.concepts);
|
||||
// }
|
||||
}*/
|
||||
|
||||
saveStateAndRedirectLogin() {
|
||||
// if(this.projects != null){
|
||||
// localStorage.setItem(this.localStoragePrefix + "projects", JSON.stringify(this.projects));
|
||||
// }
|
||||
// localStorage.setItem(this.localStoragePrefix + "contexts", JSON.stringify(this.selectedList));
|
||||
|
||||
if (this.results != null) {
|
||||
localStorage.setItem(this.localStoragePrefix + "results", JSON.stringify(this.results));
|
||||
}
|
||||
|
|
|
@ -8,14 +8,19 @@ import { ClaimContextSearchFormComponent } from './claimContextSearchForm.compon
|
|||
import {ClaimProjectsSearchFormModule} from "./claimProjectSearchForm.module";
|
||||
import {AdvancedSearchInputModule} from "../../sharedComponents/advanced-search-input/advanced-search-input.module";
|
||||
import {InputModule} from "../../sharedComponents/input/input.module";
|
||||
import {CommunitiesService} from "../../connect/communities/communities.service";
|
||||
import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module";
|
||||
import {IconsModule} from "../../utils/icons/icons.module";
|
||||
import {AlertModalModule} from "../../utils/modal/alertModal.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
SharedModule, RouterModule,
|
||||
StaticAutocompleteModule,
|
||||
HelperModule, ClaimProjectsSearchFormModule, AdvancedSearchInputModule, InputModule
|
||||
HelperModule, ClaimProjectsSearchFormModule, AdvancedSearchInputModule, InputModule, LogoUrlPipeModule, IconsModule, AlertModalModule
|
||||
|
||||
],
|
||||
providers: [CommunitiesService],
|
||||
declarations: [
|
||||
ClaimContextSearchFormComponent
|
||||
], exports: [ClaimContextSearchFormComponent ]
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
</advanced-search-input>
|
||||
</div>
|
||||
<div *ngIf="!showResults">
|
||||
<div class="uk-text-center uk-text-large uk-text-muted uk-margin-large-top">No project results yet... <br>Start
|
||||
<div class="uk-text-center uk-text-large uk-text-muted uk-margin-large-top">No {{openaireEntities.PROJECT.toLowerCase()}} results yet... <br>Start
|
||||
searching for {{openaireEntities.PROJECTS.toLowerCase()}} to add them in the Basket
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -2,17 +2,20 @@
|
|||
<advanced-search-input (searchEmitter)="search(true)">
|
||||
<div input type="select" [(value)]="showOptions.show" placeholder="Type" hint="Select..."
|
||||
[options]="showOptions.selectOptions"></div>
|
||||
<div input type="text" [(value)]="keyword" placeholder="Entities to link" [hint]="'Search for ' + openaireEntities.RESULTS + '...'"></div>
|
||||
<div input type="text" [(value)]="keyword" placeholder="Entities to link" [hint]="'Search for ' + openaireEntities.RESULTS.toLowerCase() + '...'"></div>
|
||||
</advanced-search-input>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!showOptions" class="uk-width-large">
|
||||
<div search-input [(value)]="keyword" [placeholder]="'Search for ' + openaireEntities.RESULTS + '...'" (searchEmitter)="search(true)"></div>
|
||||
<div search-input [(value)]="keyword" [placeholder]="'Search for ' + openaireEntities.RESULTS.toLowerCase() +
|
||||
'...'"
|
||||
(searchEmitter)="search(true)"></div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!showSearchResults">
|
||||
<div class="uk-text-center uk-text-large uk-text-muted uk-margin-large-top">
|
||||
No sources yet...<br>Use the searchbar and find linking sources.
|
||||
No {{showOptions?openaireEntities.RESULTS.toLowerCase() :'sources'}} yet...<br>Use the searchbar to find and link
|
||||
{{showOptions?openaireEntities.RESULTS.toLowerCase() :'sources'}}.
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="showSearchResults" class="uk-margin-top uk-animation">
|
||||
|
|
|
@ -8,7 +8,7 @@ declare var UIkit: any;
|
|||
template: `
|
||||
|
||||
<div *ngIf="results.length > 0 " class="uk-padding">
|
||||
<div *ngFor=" let entity of results " [class]="(isSelected(entity))?'uk-block-muted':''" class=" uk-card uk-card-default uk-padding-small uk-margin-bottom">
|
||||
<div *ngFor=" let entity of results " [class]="(isSelected(entity))?'uk-block-muted':''" class=" uk-card uk-card-default uk-padding-small uk-margin-bottom claim-result-card">
|
||||
<div>
|
||||
<div class="uk-text-small">
|
||||
{{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}
|
||||
|
@ -20,7 +20,7 @@ declare var UIkit: any;
|
|||
<claim-project-metadata [entity]="entity"></claim-project-metadata>
|
||||
</div>
|
||||
<div class="uk-margin-auto-vertical uk-padding-remove-left uk-margin-small-left uk-margin-small-right" [title]="(this.selectedResults.length>=basketLimit)?'Basket reached the size limit':''">
|
||||
<a [class]="(this.selectedResults.length>=basketLimit)?'uk-icon-button uk-disabled':'uk-icon-button '" *ngIf="!isSelected(entity)"
|
||||
<a [class]="(this.selectedResults.length>=basketLimit)?'uk-icon-button uk-disabled disabled':'uk-icon-button enabled'" *ngIf="!isSelected(entity)"
|
||||
(click)="add(entity)">
|
||||
<span class="uk-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus"
|
||||
|
@ -28,7 +28,7 @@ declare var UIkit: any;
|
|||
height="1"></rect></svg>
|
||||
</span>
|
||||
</a>
|
||||
<a *ngIf="isSelected(entity)" class="uk-icon-button uk-button-primary " (click)="remove(entity)">
|
||||
<a *ngIf="isSelected(entity)" class="uk-icon-button selected " (click)="remove(entity)">
|
||||
<span class="uk-icon" >
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="check" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline></svg>
|
||||
</span>
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
<ul *ngIf="results.length > 0 " class="uk-list uk-list-divider">
|
||||
<li *ngFor=" let entity of results " >
|
||||
<li *ngFor=" let entity of results " class="">
|
||||
<!--<div class="uk-text-muted">
|
||||
{{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}
|
||||
</div>-->
|
||||
<div class="uk-grid uk-flex uk-flex-middle">
|
||||
<div class="uk-grid uk-flex uk-flex-middle uk-margin-small-top uk-margin-small-bottom">
|
||||
<div >
|
||||
<span *ngIf="type == 'source'" class="material-icons uk-text-small uk-text-meta">insert_drive_file</span>
|
||||
<span *ngIf="type == 'target'" class="material-icons uk-text-small uk-text-meta">assignment_turned_in</span>
|
||||
|
|
Loading…
Reference in New Issue