[recommendations-and-nl-search | DONE | CHANGED] category-to-item rec: add user id on the API call - /recommend and /update, stack sidebar on mobile view, remove communities search bar when there are less than 5 communities

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit 60774c17c4534270067f8f0d4c96a1fd8c05b831
+Subproject commit c8caa1277aa456aab7502614e5482b373d6858f0

src/app/recommendations/category-to-item/category-to-item.component.html

@@ -4,13 +4,13 @@
   </div>
 </ng-container>
 <ng-container *ngIf="!showLoading && communities?.length">
-  <div class="uk-flex uk-background-default">
+  <div class="uk-flex uk-background-default" [class.uk-flex-column]="isMobile">
     <aside [attr.offset]="offset" class="sidebar uk-background-default uk-visible@m" uk-sticky>
       <div class="uk-padding">
         <div class="uk-text-center">
           <h5>In which community are you interested?</h5>
           <p>Select a community to see recommendations.</p>
-          <div search-input [searchControl]="keywordControl"
+          <div *ngIf="filteredCommunities?.length >= size" search-input [searchControl]="keywordControl"
             [placeholder]="'Search for communities'"
             [searchInputClass]="'flat background'">
           </div>
@@ -32,11 +32,38 @@
         </div>
       </div>
     </aside>
-    <div class="content uk-width-expand uk-container">
+    <div class="uk-hidden@m">
-      <div *ngIf="errorMessage" class="uk-padding uk-position-center uk-text-center">
+      <div class="uk-padding-small">
+        <div class="uk-text-center">
+          <h5>In which community are you interested?</h5>
+          <p>Select a community to see recommendations.</p>
+          <div *ngIf="filteredCommunities?.length >= size" search-input [searchControl]="keywordControl"
+            [placeholder]="'Search for communities'"
+            [searchInputClass]="'flat background'">
+          </div>
+        </div>
+        <div class="uk-margin-top">
+          <div *ngIf="filteredCommunities?.length">
+            <span class="uk-text-bold uk-text-meta uk-text-uppercase">Communities</span>
+            <ul class="uk-list uk-list-divider">
+              <li *ngFor="let community of filteredCommunities;" class="uk-padding-xsmall" [class.uk-active-custom]="activeCommunity == community.communityId">
+                <a class="uk-link-heading uk-text-bold" (click)="selectCommunity(community.communityId); setActiveCommunity(community.communityId); scrollToId('content');">
+                  {{community.title}}
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div *ngIf="filteredCommunities?.length == 0" class="uk-text-center uk-text-bold uk-text-meta">
+            No communities found based on your keyword
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="content" class="content uk-width-expand uk-container">
+      <div *ngIf="errorMessage" class="uk-padding uk-text-center" [class.uk-position-center]="!isMobile">
         <h4 class="uk-text-warning uk-width-1-1 uk-width-2-3@m uk-margin-auto">{{errorMessage}}</h4>
       </div>
-      <div *ngIf="!recommendations && !errorMessage" class="uk-padding uk-position-center uk-text-center">
+      <div *ngIf="!recommendations && !errorMessage" class="uk-padding uk-text-center" [class.uk-position-center]="!isMobile">
         <h3 class="uk-width-1-1 uk-width-2-3@m uk-margin-auto">Select a community from the list on the left and receive recommendations.</h3>
       </div>
       <div *ngIf="recommendations" class="uk-section">
@@ -47,7 +74,7 @@
           </div>
           <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-3@l" uk-height-match=".uk-card" uk-grid>
             <div *ngFor="let result of item.recommendations">
-              <recommendation-card [result]="result" [category]="item" [community]="activeCommunity"></recommendation-card>
+              <recommendation-card [result]="result" [category]="item" [community]="activeCommunity" [user]="user"></recommendation-card>
             </div>
           </div>
         </div>

src/app/recommendations/category-to-item/category-to-item.component.less

@@ -1,7 +1,7 @@
 @import (less) "~src/assets/openaire-theme/less/color.less";
 
 @header-height: var(--header-height);
-@sidebar-width: 464px;
+@sidebar-width: 450px;
 
 .sidebar, .content {
   position: relative;

src/app/recommendations/category-to-item/category-to-item.component.ts

@@ -1,4 +1,4 @@
-import {Component} from "@angular/core";
+import {ChangeDetectorRef, Component} from "@angular/core";
 import {CommunitiesService} from "../../openaireLibrary/connect/communities/communities.service";
 import {EnvProperties} from "../../openaireLibrary/utils/properties/env-properties";
 import {properties} from "../../../environments/environment";
@@ -8,6 +8,10 @@ import {FormBuilder, FormControl} from "@angular/forms";
 import {debounceTime, distinctUntilChanged} from "rxjs/operators";
 import {RecommendationsService} from "../../openaireLibrary/recommendations/recommendations.service";
 import {ActivatedRoute, Router} from "@angular/router";
+import {UserManagementService} from "../../openaireLibrary/services/user-management.service";
+import {User} from "../../openaireLibrary/login/utils/helper.class";
+import {LayoutService} from "../../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
+import {HelperFunctions} from "../../openaireLibrary/utils/HelperFunctions.class";
 
 @Component({
   selector: 'category-to-item',
@@ -24,18 +28,25 @@ export class CategoryToItemComponent {
   offset: number;
 
   activeCommunity: string;
+  size: number = 5; // show search-bar only when communities are more than this number - defaults to 5
   communities: CommunityInfo[];
   filteredCommunities: CommunityInfo[];
   recommendations: any;
+  user: User;
 
   keywordControl: FormControl;
   keyword: string;
 
+  isMobile: boolean;
+
   constructor(private communitiesService: CommunitiesService,
               private recommendationsService: RecommendationsService,
               private router: Router,
               private route: ActivatedRoute,
-              private fb: FormBuilder) {
+              private fb: FormBuilder,
+              private cdr: ChangeDetectorRef,
+              private userManagementService: UserManagementService,
+              private layoutService: LayoutService) {
   }
 
   ngOnInit() {
@@ -43,10 +54,17 @@ export class CategoryToItemComponent {
     if (typeof document !== "undefined") {
       this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
     }
+    this.layoutService.isMobile.subscribe(isMobile => {
+			this.isMobile = isMobile;
+			this.cdr.detectChanges();
+		});
     this.getCommunities();
+    this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
+      this.user = user;
+    }));
     this.subscriptions.push(this.route.params.subscribe(params => {
       if(params && params['community']) {
-        this.subscriptions.push(this.recommendationsService.getRecommendationsForCommunity(this.properties.recommendationsForCommunityAPI, params['community']).subscribe(data => {
+        this.subscriptions.push(this.recommendationsService.getRecommendationsForCommunity(this.properties.recommendationsForCommunityAPI, params['community'], this.user ? this.user.id : null).subscribe(data => {
           this.recommendations = data;
           this.setActiveCommunity(params['community']);
         }, error => {
@@ -105,4 +123,8 @@ export class CategoryToItemComponent {
   setActiveCommunity(id) {
     this.activeCommunity = id;
   }
+
+  scrollToId(value: string) {
+    HelperFunctions.scrollToId(value);
+  }
 }

src/assets/common-assets

@@ -1 +1 @@
-Subproject commit c5ba8700be5b8fcf98522fe167246281545d7985
+Subproject commit ee1a55a529fde844f54761633e59f3be791717e3