- update layout  for communities
- clean up code for communities
- update css for select/remove buttons
This commit is contained in:
argirok 2022-05-12 17:59:13 +03:00
parent b3d38ab102
commit f247480aea
7 changed files with 213 additions and 288 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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