From f247480aeabf31e8eaec713d0f9ae4699881f86b Mon Sep 17 00:00:00 2001
From: argirok <argirokokogiannaki@gmail.com>
Date: Thu, 12 May 2022 17:59:13 +0300
Subject: [PATCH] linking: - update layout  for communities - clean up code for
 communities - update css for select/remove buttons

---
 .../claimContextSearchForm.component.html     | 250 ++++++++----------
 .../claimContextSearchForm.component.ts       | 223 ++++++----------
 .../claimContextSearchForm.module.ts          |   7 +-
 .../claimProjectSearchForm.component.html     |   2 +-
 .../claimResultSearchForm.component.html      |   9 +-
 claims/claim-utils/claimResults.component.ts  |   6 +-
 .../selected/selectedResults.component.html   |   4 +-
 7 files changed, 213 insertions(+), 288 deletions(-)

diff --git a/claims/claim-utils/claimContextSearchForm.component.html b/claims/claim-utils/claimContextSearchForm.component.html
index 892164dc..02e289b5 100644
--- a/claims/claim-utils/claimContextSearchForm.component.html
+++ b/claims/claim-utils/claimContextSearchForm.component.html
@@ -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>
+    
diff --git a/claims/claim-utils/claimContextSearchForm.component.ts b/claims/claim-utils/claimContextSearchForm.component.ts
index 620879e8..f6088264 100644
--- a/claims/claim-utils/claimContextSearchForm.component.ts
+++ b/claims/claim-utils/claimContextSearchForm.component.ts
@@ -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));
     }
diff --git a/claims/claim-utils/claimContextSearchForm.module.ts b/claims/claim-utils/claimContextSearchForm.module.ts
index 2b32cd17..1f1276ec 100644
--- a/claims/claim-utils/claimContextSearchForm.module.ts
+++ b/claims/claim-utils/claimContextSearchForm.module.ts
@@ -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 ]
diff --git a/claims/claim-utils/claimProjectSearchForm.component.html b/claims/claim-utils/claimProjectSearchForm.component.html
index 8cce8ca6..2bcb9e4d 100644
--- a/claims/claim-utils/claimProjectSearchForm.component.html
+++ b/claims/claim-utils/claimProjectSearchForm.component.html
@@ -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>
diff --git a/claims/claim-utils/claimResultSearchForm.component.html b/claims/claim-utils/claimResultSearchForm.component.html
index de94aae9..e0901037 100644
--- a/claims/claim-utils/claimResultSearchForm.component.html
+++ b/claims/claim-utils/claimResultSearchForm.component.html
@@ -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">
diff --git a/claims/claim-utils/claimResults.component.ts b/claims/claim-utils/claimResults.component.ts
index 71170a35..eaec6530 100644
--- a/claims/claim-utils/claimResults.component.ts
+++ b/claims/claim-utils/claimResults.component.ts
@@ -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>
diff --git a/claims/linking/selected/selectedResults.component.html b/claims/linking/selected/selectedResults.component.html
index fcf29218..68ac7dbe 100644
--- a/claims/linking/selected/selectedResults.component.html
+++ b/claims/linking/selected/selectedResults.component.html
@@ -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>