MaDgIK
/
faircore4eosc-explore
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[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

This commit is contained in:
Alex Martzios 2024-07-02 15:18:14 +03:00
parent deaa8a33a0
commit 1d3ab8f645
5 changed files with 61 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/openaireLibrary

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

39
src/app/recommendations/category-to-item/category-to-item.component.html
View File

@ -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 *ngIf="errorMessage" class="uk-padding uk-position-center uk-text-center">
<div class="uk-hidden@m">
<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>

2
src/app/recommendations/category-to-item/category-to-item.component.less
View File

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

28
src/app/recommendations/category-to-item/category-to-item.component.ts
View File

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

2
src/assets/common-assets

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