[recommendations-functionality | WIP] resultLanding page: add recommendations tab, 'back' button, recommendations SVG icon as code - fc4eos only
This commit is contained in:
parent
c1a8151184
commit
e80df9f3b0
|
|
@ -2,7 +2,6 @@
|
|||
<schema2jsonld *ngIf="resultLandingInfo && resultLandingInfo.record"
|
||||
[data]=resultLandingInfo.record [URL]="canonicalUrl"
|
||||
[searchActionRoute]="properties.searchLinkToResults"></schema2jsonld>
|
||||
|
||||
<!-- Desktop view -->
|
||||
<div *ngIf="!isMobile" id="tm-main" class="landing uk-section uk-padding-remove tm-middle">
|
||||
<div class="tm-main">
|
||||
|
|
@ -20,6 +19,13 @@
|
|||
<div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid>
|
||||
<!-- center box-->
|
||||
<div id="landing-center-content" class="uk-width-expand uk-padding-remove uk-background-default">
|
||||
<!-- back button for fc4eosc -->
|
||||
<div *ngIf="!showLoading && resultLandingInfo && sessionStorage?.previousPage == 'fc4eosc'" class="uk-container uk-container-xlarge uk-margin-top uk-margin-left">
|
||||
<a class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="goBack();">
|
||||
<icon [name]="'west'" [flex]="true" [ratio]="1"></icon>
|
||||
<span class="uk-margin-small-left">Back</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<ng-template #graph_and_feedback_template>
|
||||
<div class="uk-padding-xsmall">
|
||||
|
|
@ -47,7 +53,6 @@
|
|||
</div>
|
||||
|
||||
<div class="uk-container uk-container-xlarge">
|
||||
|
||||
<div *ngIf="errorMessage.length > 0 || showLoading" class="uk-container uk-flex uk-flex-center uk-height-viewport uk-position-relative">
|
||||
<div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger uk-width-2-3 uk-margin-xlarge-top"
|
||||
role="alert">{{errorMessage}}</div>
|
||||
|
|
@ -56,7 +61,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!showLoading && resultLandingInfo" class="uk-margin-top uk-margin-bottom">
|
||||
<div *ngIf="!showLoading && resultLandingInfo" class="uk-margin-bottom" [class.uk-margin-top]="!(sessionStorage?.previousPage == 'fc4eosc')">
|
||||
<div class="uk-flex uk-flex-middle uk-flex-center">
|
||||
<div class="landing-action-bar uk-box-shadow-small uk-margin-bottom">
|
||||
<div class="uk-grid uk-grid-small uk-flex-between uk-text-xsmall uk-flex-middle uk-grid-divider" uk-grid>
|
||||
|
|
@ -161,6 +166,10 @@
|
|||
[tabTitle]="'Enermaps Tool'" [tabId]="'enermaps'"
|
||||
customClass="portalTab">
|
||||
</my-tab>
|
||||
<my-tab *ngIf="properties.adminToolsPortalType == 'faircore4eosc'"
|
||||
[tabTitle]="'Recommended'" [tabId]="'recommended'"
|
||||
customClass="portalTab">
|
||||
</my-tab>
|
||||
</my-tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -193,6 +202,11 @@
|
|||
<ng-container *ngTemplateOutlet="enermapsTool_content"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="properties.adminToolsPortalType == 'faircore4eosc'">
|
||||
<div id="recommended" class="landing-section">
|
||||
<ng-container *ngTemplateOutlet="recommended_content"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="uk-text-xsmall uk-hidden@m"><ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container></div>
|
||||
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
|
||||
|
|
@ -674,6 +688,8 @@
|
|||
</div>
|
||||
</fs-modal>
|
||||
|
||||
<!-- TODO: Add recommended FsModal -->
|
||||
|
||||
<fs-modal #sdgsFsModal *ngIf="isMobile" classTitle="uk-tile-default uk-border-bottom" (cancelEmitter)="sdgsFsModalCancelled()">
|
||||
<ng-container *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0">
|
||||
<sdg *ngIf="viewAllMobile=='sdg'" [subjects]="resultLandingInfo.sdg" [viewAll]="true" (suggestClicked)="suggestMobileClicked($event)"></sdg>
|
||||
|
|
@ -965,6 +981,13 @@
|
|||
</ul>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #recommended_content>
|
||||
<div class="uk-flex uk-flex-middle uk-margin-medium-bottom">
|
||||
<icon [name]="'recommendations'" [flex]="true" [ratio]="1.5"></icon>
|
||||
<span class="uk-text-bold uk-margin-left">Recommended for you</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #metricsContent>
|
||||
<div id="metrics" class="landing-section">
|
||||
<ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ import {FullScreenModalComponent} from "../../utils/modal/full-screen-modal/full
|
|||
import {SdgFosSuggestComponent} from '../landing-utils/sdg-fos-suggest/sdg-fos-suggest.component';
|
||||
import {LayoutService} from "../../dashboard/sharedComponents/sidebar/layout.service";
|
||||
import {ContextsService} from "../../claims/claim-utils/service/contexts.service";
|
||||
import {RecommendationsService} from '../../../recommendations/recommendations.service';
|
||||
|
||||
declare var ResizeObserver;
|
||||
|
||||
|
|
@ -39,6 +40,7 @@ declare var ResizeObserver;
|
|||
export class ResultLandingComponent {
|
||||
public referrer: string;
|
||||
public prevPath: string;
|
||||
public sessionStorage = sessionStorage;
|
||||
|
||||
@Input() type: string = "publication";
|
||||
|
||||
|
|
@ -182,6 +184,9 @@ export class ResultLandingComponent {
|
|||
|
||||
public rightSidebarOffcanvasClicked: boolean = false;
|
||||
public egiTransferModalOpen = false;
|
||||
|
||||
getRecommendationsForPublicationAPI: string = 'https://darelab.athenarc.gr/api/faircore/item-to-item-recommender/item_to_item/'
|
||||
|
||||
constructor(private _resultLandingService: ResultLandingService,
|
||||
private _vocabulariesService: ISVocabulariesService,
|
||||
private _piwikService: PiwikService,
|
||||
|
|
@ -198,7 +203,8 @@ export class ResultLandingComponent {
|
|||
private indexInfoService: IndexInfoService,
|
||||
private userManagementService: UserManagementService,
|
||||
private layoutService: LayoutService,
|
||||
private _contextService: ContextsService) {
|
||||
private _contextService: ContextsService,
|
||||
private recommendationsService: RecommendationsService) {
|
||||
if(route.snapshot.data && route.snapshot.data['type']) {
|
||||
this.type = route.snapshot.data['type'];
|
||||
}
|
||||
|
|
@ -280,7 +286,6 @@ export class ResultLandingComponent {
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
this.scroll();
|
||||
}));
|
||||
}
|
||||
|
|
@ -965,6 +970,9 @@ export class ResultLandingComponent {
|
|||
if (activeTabId == 'enermaps' && this.properties.enermapsURL) {
|
||||
this.getEnermapsDetails(this.enermapsId);
|
||||
}
|
||||
if (activeTabId == 'recommended' && this.properties.adminToolsPortalType == 'faircore4eosc') {
|
||||
this.getRecommendations();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -982,6 +990,12 @@ export class ResultLandingComponent {
|
|||
}
|
||||
}
|
||||
|
||||
private getRecommendations() {
|
||||
this.subscriptions.push(this.recommendationsService.getRecommendationsForPublication(this.getRecommendationsForPublicationAPI, 'enermaps', this.resultLandingInfo.objIdentifier).subscribe(data => {
|
||||
console.log(data);
|
||||
}));
|
||||
}
|
||||
|
||||
public enrichContexts(contextsWithLink: any) {
|
||||
this.contextsWithLink = contextsWithLink;
|
||||
}
|
||||
|
|
@ -1215,4 +1229,8 @@ export class ResultLandingComponent {
|
|||
return "https://"+(this.properties.environment == "beta" ? "beta." : "")+"search.marketplace.eosc-portal.eu/";
|
||||
}
|
||||
}
|
||||
|
||||
public goBack() {
|
||||
window.history.back();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ import {EntityActionsModule} from "../../utils/entity-actions/entity-actions.mod
|
|||
import {ResultLandingRoutingModule} from "./resultLanding-routing.module";
|
||||
import {OrcidCoreModule} from "../../orcid/orcid-core.module";
|
||||
import {SearchTabModule} from "../../utils/tabs/contents/search-tab.module";
|
||||
import {RecommendationsService} from '../../../recommendations/recommendations.service';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
@ -55,7 +56,7 @@ import {SearchTabModule} from "../../utils/tabs/contents/search-tab.module";
|
|||
ResultLandingComponent
|
||||
],
|
||||
providers: [
|
||||
ResultLandingService
|
||||
ResultLandingService, RecommendationsService
|
||||
],
|
||||
exports: [
|
||||
ResultLandingComponent
|
||||
|
|
|
|||
|
|
@ -161,3 +161,8 @@ export const unknown_access: Icon = {
|
|||
name: 'unknown_access',
|
||||
data: '<svg xmlns="http://www.w3.org/2000/svg" width="373.336" height="490.004" viewBox="0 0 373.336 490.004"><g id="noun-lock-question-mark-250128" transform="translate(-163.328 -34.992)"><path id="Path_119172" data-name="Path 119172" d="M490,198.33H466.668V151.662a116.67,116.67,0,0,0-233.34,0V198.33H210A46.8,46.8,0,0,0,163.328,245v233.33A46.8,46.8,0,0,0,210,525H490a46.8,46.8,0,0,0,46.668-46.668V245A46.8,46.8,0,0,0,490,198.33ZM365.55,469.78H334.441V438.671H365.55ZM397.441,350l-14,14c-10.891,11.668-17.891,20.223-17.891,43.555H334.441v-7.777a61.712,61.712,0,0,1,17.891-43.555l19.445-19.445A30.98,30.98,0,1,0,318.891,315H287.782a62.223,62.223,0,0,1,124.446,0,49.983,49.983,0,0,1-14.785,35Zm24.887-151.67H277.668V151.662c0-39.668,32.668-72.332,72.332-72.332S422.332,112,422.332,151.662Z"/></g></svg>'
|
||||
}
|
||||
|
||||
export const recommendations: Icon = {
|
||||
name: 'recommendations',
|
||||
data: '<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165.67 142.94"> <defs> <style> .cls-1 { fill: #ffd215; } .cls-1, .cls-2, .cls-3 { stroke-width: 0px; } .cls-2 { fill: #e86438; } .cls-3 { fill: #f9f9f9; } </style> </defs> <g id="Layer_1-2" data-name="Layer 1"> <g> <path class="cls-2" d="m94.93.79c.7.35,1.39.71,2.12.99,2.1.83,6.74,3.86,13.45,14.93,9.4,15.49,7.11,25.14,48.51,46.48,0,0,14.98,6.86,0,38.35s-33.27,47.75-85.84,39.11C20.6,132.01,3.31,98.35,1.04,84.77c-1.48-8.86-4.32-35.05,15.75-53.08C35.08,15.26,69.4,3.67,75.33,1.75c.6-.19,1.21-.34,1.83-.45,3.29-.57,14.26-2.29,17.77-.51Z"/> <path class="cls-1" d="m40,35.6c.19-.25,4.86-10.16,4.86-10.16l2.38,11.02,10.63,1.21s-9.43,6.19-9.24,6.19,2.32,11.84,2.32,11.84c0,0-8.76-8-8.83-7.87s-9.43,5.27-9.43,5.27l3.9-10.92-7.43-7.68,11.05,1.14"/> <path class="cls-1" d="m121.27,70.52c.19-.25,4.86-10.16,4.86-10.16l2.38,11.02,10.63,1.21s-9.43,6.19-9.24,6.19,2.32,11.84,2.32,11.84c0,0-8.76-8-8.83-7.87s-9.43,5.27-9.43,5.27l3.9-10.92-7.43-7.68,11.05,1.14"/> <path class="cls-1" d="m107.68,103.67c.19-.25,4.86-10.16,4.86-10.16l2.38,11.02,10.63,1.21s-9.43,6.19-9.24,6.19,2.32,11.84,2.32,11.84c0,0-8.76-8-8.83-7.87s-9.43,5.27-9.43,5.27l3.9-10.92-7.43-7.68,11.05,1.14"/> <path class="cls-3" d="m61.68,100.46l24.48,2.57s-.67,12.1-6.76,13.05c0,0-12.1-.57-12.38-.86s-4.67-2.19-5.33-6.95,0-7.81,0-7.81Z"/> <path class="cls-3" d="m62.7,95.79c-.38-1.02-.64-5.4-2.42-9.21s-15.11-17.4-3.68-35.05,31.81-9.9,31.81-9.9c0,0,18.03,7.24,16.89,22.98s-7.43,19.67-9.21,21.33c-.59.55-7.2,9.65-9.02,12.06-1.52,2.02-24.37-2.22-24.37-2.22Z"/> <path class="cls-2" d="m62.3,65.12c-.11,0-.22,0-.33-.03-1.09-.18-1.83-1.21-1.65-2.3,2.08-12.55,11.28-15.92,18.53-15h0c1.02.09,1.82.95,1.82,1.99,0,1.1-.9,2-2,2-.08,0-.24-.01-.33-.02-2.79-.35-12.05-.56-14.08,11.69-.16.98-1.01,1.67-1.97,1.67Z"/> </g> </g> </svg>'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,12 +51,13 @@ import {TabComponent} from './tab.component';
|
|||
<ng-container *ngFor="let tab of tabs.toArray(); let i=index">
|
||||
<ng-container *ngIf="tab.customClass">
|
||||
<div class="uk-width-small">
|
||||
<ul class="uk-tab uk-height-1-1" [class.uk-flex-right]="tab.tabId == 'statistics'">
|
||||
<ul class="uk-tab uk-height-1-1" [class.uk-flex-right]="tab.tabId == 'statistics' || 'recommended'">
|
||||
<li [ngClass]="tab.customClass" (click)="selectTab(tab)" [class.uk-active]="tab.active" >
|
||||
<a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center featuredTab" [ngClass]="tab.tabIcon ? 'uk-flex-column' : ''">
|
||||
<!--<icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon.svg" [ratio]="tab.tabIcon.ratio?tab.tabIcon.ratio:1" class="uk-margin-small-bottom"
|
||||
[ngClass]="(selected === tab.tabId)?tab.tabIcon.active:null"></icon>-->
|
||||
<span *ngIf="tab.tabId=='statistics'" class="material-icons">bar_chart</span>
|
||||
<icon *ngIf="tab.tabId=='recommended'" [name]="'tips_and_updates'" [flex]="true"></icon>
|
||||
<div>{{tab.title}}</div>
|
||||
<div *ngIf="tab.num" class="number">{{tab.num | number}}</div>
|
||||
</a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue