general fixes for all landing page types, create new fos/sdg selection components for user feedback
This commit is contained in:
parent
38a8802d7e
commit
1093027ca1
|
@ -0,0 +1,136 @@
|
||||||
|
<div *ngIf="loading">
|
||||||
|
<loading></loading>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="!loading">
|
||||||
|
<div class="uk-visible@m">
|
||||||
|
<div class="uk-flex uk-flex-right uk-margin-small-bottom">
|
||||||
|
<div search-input [searchControl]="keywordControl" [options]="fosOptions" iconPosition="left" placeholder="Write a key word to filter the content"
|
||||||
|
searchInputClass="border-bottom" class="uk-width-large"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ng-container>
|
||||||
|
<div class="uk-margin-top">
|
||||||
|
<div id="parentContainer" class="uk-grid" uk-grid>
|
||||||
|
<div class="uk-width-1-4@m uk-visible@m">
|
||||||
|
<div class="uk-sticky" uk-sticky="bottom: !#parentContainer; offset: 200;">
|
||||||
|
<ul *ngIf="!keyword" class="uk-tab uk-tab-left">
|
||||||
|
<li *ngFor="let item of fos; index as i" [class.uk-active]="activeSection === item.id"
|
||||||
|
class="uk-margin-small-bottom uk-text-capitalize">
|
||||||
|
<a routerLink="./" [fragment]="item.id">{{item.id}}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul *ngIf="keyword?.length" class="uk-tab uk-tab-left">
|
||||||
|
<li *ngFor="let item of viewResults; index as i"
|
||||||
|
class="uk-margin-small-bottom uk-text-capitalize" [class.uk-active]="activeSection === item.id">
|
||||||
|
<a routerLink="./" [fragment]="item.id">{{item.id}}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="uk-width-1-1 uk-hidden@m">
|
||||||
|
<div class="uk-sticky uk-blur-background" uk-sticky>
|
||||||
|
<div class="uk-flex uk-flex-center uk-margin-small-bottom">
|
||||||
|
<div search-input [searchControl]="keywordControl" [options]="fosOptions" iconPosition="left" placeholder="Write a key word to filter the content"
|
||||||
|
searchInputClass="border-bottom" class="uk-width-large"></div>
|
||||||
|
</div>
|
||||||
|
<div #tabs class="uk-slider uk-position-relative" uk-slider="finite: true">
|
||||||
|
<div class="uk-slider-container">
|
||||||
|
<ul *ngIf="!keyword" class="uk-tab uk-flex-nowrap uk-slider-items">
|
||||||
|
<li *ngFor="let item of fos; index as i" [class.uk-active]="activeSection === item.id && sliderInit"
|
||||||
|
class="uk-text-capitalize">
|
||||||
|
<a routerLink="./" [fragment]="item.id">{{item.id}}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul *ngIf="keyword?.length" class="uk-tab uk-flex-nowrap uk-slider-items">
|
||||||
|
<li *ngFor="let item of viewResults; index as i"
|
||||||
|
class="uk-text-capitalize" [class.uk-active]="activeSection === item.id && sliderInit">
|
||||||
|
<a routerLink="./" [fragment]="item.id">{{item.id}}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<a class="uk-position-center-left uk-blur-background" uk-slider-item="previous"><span uk-icon="chevron-left"></span></a>
|
||||||
|
<a class="uk-position-center-right uk-blur-background" uk-slider-item="next"><span uk-icon="chevron-right"></span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="uk-width-expand@m">
|
||||||
|
<ng-container *ngIf="!keyword">
|
||||||
|
<div [id]="item.id" *ngFor="let item of fos; index as i">
|
||||||
|
<div class="uk-text-capitalize">
|
||||||
|
<h2 class="uk-h4 uk-margin-remove">
|
||||||
|
{{item.id}}
|
||||||
|
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(item.id)}"
|
||||||
|
class="uk-link-text">
|
||||||
|
{{item.id}}
|
||||||
|
</a> -->
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-xlarge-bottom" uk-grid="masonry: false">
|
||||||
|
<div *ngFor="let child of item.children">
|
||||||
|
<div class="uk-text-capitalize">
|
||||||
|
<h3 class="uk-h6 uk-margin-small-bottom">
|
||||||
|
{{child.id}}
|
||||||
|
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(child.id)}"
|
||||||
|
class="uk-link-text">
|
||||||
|
{{child.id}}
|
||||||
|
</a> -->
|
||||||
|
</h3>
|
||||||
|
<div *ngFor="let subChild of child.children" class="uk-margin-xsmall-bottom">
|
||||||
|
<label>
|
||||||
|
<input [checked]="subjects.includes(subChild.id)"
|
||||||
|
type="checkbox" class="uk-checkbox uk-margin-small-right">
|
||||||
|
<span>{{subChild.id}}</span>
|
||||||
|
</label>
|
||||||
|
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subChild.id)}"
|
||||||
|
class="uk-link-text">
|
||||||
|
{{subChild.id}}
|
||||||
|
</a> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container *ngIf="keyword?.length">
|
||||||
|
<div [id]="item.id" *ngFor="let item of viewResults; index as i">
|
||||||
|
<div
|
||||||
|
class="uk-margin-large-bottom uk-padding uk-padding-remove-top uk-padding-remove-horizontal uk-text-capitalize" [class.custom-bottom-border]="i < viewResults.length - 1">
|
||||||
|
<h2 class="uk-h4 uk-margin-remove"
|
||||||
|
[innerHTML]="highlightKeyword(item.id)">
|
||||||
|
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(item.id)}"
|
||||||
|
class="uk-link-text" [innerHTML]="highlightKeyword(item.id)">
|
||||||
|
</a> -->
|
||||||
|
</h2>
|
||||||
|
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-medium-bottom" uk-grid="masonry: false">
|
||||||
|
<div *ngFor="let subItem of item.children">
|
||||||
|
<h3 class="uk-h6 uk-margin-small-bottom"
|
||||||
|
[innerHTML]="highlightKeyword(subItem.id)">
|
||||||
|
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subItem.id)}"
|
||||||
|
class="uk-link-text" [innerHTML]="highlightKeyword(subItem.id)">
|
||||||
|
</a> -->
|
||||||
|
</h3>
|
||||||
|
<div *ngFor="let subSubItem of subItem.children" class="uk-margin-xsmall-bottom">
|
||||||
|
<label>
|
||||||
|
<input [checked]="subjects.includes(subSubItem.id)"
|
||||||
|
type="checkbox" class="uk-checkbox uk-margin-small-right">
|
||||||
|
<span [innerHTML]="highlightKeyword(subSubItem.id)"></span>
|
||||||
|
</label>
|
||||||
|
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subSubItem.id)}"
|
||||||
|
class="uk-link-text" [innerHTML]="highlightKeyword(subSubItem.id)">
|
||||||
|
</a> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ng-container *ngIf="keyword && viewResults?.length == 0">
|
||||||
|
<div class="uk-padding-large uk-text-center">
|
||||||
|
<h2 class="uk-h3">No results were found.</h2>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
|
@ -0,0 +1,183 @@
|
||||||
|
import {HttpClient} from "@angular/common/http";
|
||||||
|
import {ChangeDetectorRef, Component, ElementRef, Input, ViewChild} from "@angular/core";
|
||||||
|
import {FormBuilder, FormControl} from "@angular/forms";
|
||||||
|
import { ActivatedRoute, Router } from "@angular/router";
|
||||||
|
import {Subscription} from "rxjs";
|
||||||
|
import {EnvProperties} from "../../utils/properties/env-properties";
|
||||||
|
import {StringUtils} from "../../utils/string-utils.class";
|
||||||
|
import {debounceTime, distinctUntilChanged} from "rxjs/operators";
|
||||||
|
import Timeout = NodeJS.Timeout;
|
||||||
|
|
||||||
|
declare var UIkit;
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'fos-selection',
|
||||||
|
templateUrl: 'fos-selection.component.html',
|
||||||
|
styleUrls: ['fos-selection.component.less']
|
||||||
|
})
|
||||||
|
export class FosSelectionComponent {
|
||||||
|
@Input() properties: EnvProperties;
|
||||||
|
@Input() subjects: string[];
|
||||||
|
|
||||||
|
public loading: boolean;
|
||||||
|
public fos: any[] = [];
|
||||||
|
public fosOptions: string[] = [];
|
||||||
|
public activeSection: string;
|
||||||
|
|
||||||
|
public keywordControl: FormControl;
|
||||||
|
public keyword: string;
|
||||||
|
|
||||||
|
public viewResults = [];
|
||||||
|
|
||||||
|
public result = [];
|
||||||
|
|
||||||
|
private subscriptions: Subscription[] = [];
|
||||||
|
private observer: IntersectionObserver;
|
||||||
|
private timeout: Timeout;
|
||||||
|
@ViewChild('tabs') tabs: ElementRef;
|
||||||
|
public sliderInit: boolean = false;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private httpClient: HttpClient,
|
||||||
|
private fb: FormBuilder,
|
||||||
|
private cdr: ChangeDetectorRef,
|
||||||
|
private route: ActivatedRoute,
|
||||||
|
private _router: Router
|
||||||
|
) {}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.loading = true;
|
||||||
|
this.httpClient.get(this.properties.domain+'/assets/common-assets/vocabulary/fos.json').subscribe(data => {
|
||||||
|
this.fos = data['fos'];
|
||||||
|
this.convertFosToOptions();
|
||||||
|
if (typeof document !== 'undefined') {
|
||||||
|
setTimeout(()=> {
|
||||||
|
let slider = UIkit.slider(this.tabs.nativeElement);
|
||||||
|
slider.clsActive = 'uk-slider-active';
|
||||||
|
slider.updateActiveClasses();
|
||||||
|
this.sliderInit = true;
|
||||||
|
slider.slides.forEach(item => {
|
||||||
|
item.classList.remove('uk-active');
|
||||||
|
});
|
||||||
|
if (this.route.snapshot.fragment) {
|
||||||
|
this.activeSection = this.route.snapshot.fragment;
|
||||||
|
let i = this.fos.findIndex(item => item.id == this.route.snapshot.fragment);
|
||||||
|
slider.show(i);
|
||||||
|
} else {
|
||||||
|
this.activeSection = this.fos[0].id;
|
||||||
|
}
|
||||||
|
this.cdr.detectChanges();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.subscriptions.push(this.route.fragment.subscribe(fragment => {
|
||||||
|
if(fragment) {
|
||||||
|
this.activeSection = fragment;
|
||||||
|
if(this.tabs) {
|
||||||
|
let slider = UIkit.slider(this.tabs.nativeElement);
|
||||||
|
let i = this.fos.findIndex(item => item.id == fragment);
|
||||||
|
slider.show(i);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.activeSection = this.fos[0].id;
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
this.keywordControl = this.fb.control('');
|
||||||
|
this.subscriptions.push(this.keywordControl.valueChanges.pipe(debounceTime(500), distinctUntilChanged()).subscribe(value => {
|
||||||
|
this.keyword = value;
|
||||||
|
this.findMatches(this.keyword);
|
||||||
|
if (typeof document !== 'undefined') {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.setObserver();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
for (let sub of this.subscriptions) {
|
||||||
|
sub.unsubscribe();
|
||||||
|
}
|
||||||
|
if(this.observer) {
|
||||||
|
this.observer.disconnect();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private setObserver() {
|
||||||
|
if(this.observer) {
|
||||||
|
this.observer.disconnect();
|
||||||
|
}
|
||||||
|
this.observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if(entry.isIntersecting) {
|
||||||
|
if(this.timeout) {
|
||||||
|
clearTimeout(this.timeout);
|
||||||
|
}
|
||||||
|
this.timeout = setTimeout(() => {
|
||||||
|
this._router.navigate(['./'], {fragment: entry.target.id, relativeTo: this.route, state: {disableScroll: true}});
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, {threshold: 0.25, rootMargin: '-100px'});
|
||||||
|
this.fos.forEach(fos => {
|
||||||
|
let element = document.getElementById(fos.id);
|
||||||
|
if(element) {
|
||||||
|
this.observer.observe(element);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
convertFosToOptions() {
|
||||||
|
this.fosOptions = [];
|
||||||
|
this.fos.forEach(fos => {
|
||||||
|
this.fosOptions.push(fos.id);
|
||||||
|
if(fos.children) {
|
||||||
|
fos.children.forEach(child => {
|
||||||
|
this.fosOptions.push(child.id);
|
||||||
|
if(child.children) {
|
||||||
|
child.children.forEach(child2 => {
|
||||||
|
this.fosOptions.push(child2.id);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
findMatches(value: string) {
|
||||||
|
this.viewResults = JSON.parse(JSON.stringify(this.fos));
|
||||||
|
let matchLevel1: boolean = false;
|
||||||
|
let matchLevel2: boolean = false;
|
||||||
|
// 1st level search
|
||||||
|
if(this.viewResults.length) {
|
||||||
|
this.viewResults = this.viewResults.filter(item => {
|
||||||
|
matchLevel1 = !!item.id.includes(value?.toLowerCase());
|
||||||
|
// // 2nd level search
|
||||||
|
if(item.children?.length && !matchLevel1) {
|
||||||
|
item.children = item.children.filter(subItem => {
|
||||||
|
matchLevel2 = !!subItem.id.includes(value?.toLowerCase());
|
||||||
|
// 3rd level search
|
||||||
|
if(subItem.children?.length && !matchLevel2) {
|
||||||
|
subItem.children = subItem.children.filter(subSubItem => subSubItem.id.includes(value?.toLowerCase()));
|
||||||
|
}
|
||||||
|
return subItem.children?.length > 0 || matchLevel2;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return item.children?.length > 0;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
highlightKeyword(name) {
|
||||||
|
if(name.includes(this.keyword.toLowerCase())) {
|
||||||
|
return name.replace(new RegExp(this.keyword, "gi"), (matchedValue) => `<mark class="highlighted">${matchedValue}</mark>`);
|
||||||
|
} else {
|
||||||
|
return name;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public urlEncodeAndQuote(str: string): string {
|
||||||
|
return StringUtils.quote(StringUtils.URIEncode(str));
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,24 @@
|
||||||
|
import {CommonModule} from "@angular/common";
|
||||||
|
import {NgModule} from "@angular/core";
|
||||||
|
import {FormsModule} from "@angular/forms";
|
||||||
|
import {LoadingModule} from "../../utils/loading/loading.module";
|
||||||
|
|
||||||
|
// import {FosSelectionComponent} from './fos-selection.component';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [
|
||||||
|
CommonModule, FormsModule, LoadingModule
|
||||||
|
],
|
||||||
|
declarations: [
|
||||||
|
// FosSelectionComponent
|
||||||
|
],
|
||||||
|
providers: [
|
||||||
|
|
||||||
|
],
|
||||||
|
exports: [
|
||||||
|
// FosSelectionComponent
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class FosSelectionModule {
|
||||||
|
|
||||||
|
}
|
|
@ -75,7 +75,7 @@
|
||||||
<div *ngIf="!showLoading" class="uk-margin-top uk-margin-bottom">
|
<div *ngIf="!showLoading" class="uk-margin-top uk-margin-bottom">
|
||||||
<div class="uk-flex uk-flex-middle uk-flex-center">
|
<div class="uk-flex uk-flex-middle uk-flex-center">
|
||||||
<div class="landing-action-bar uk-box-shadow-small uk-margin-bottom">
|
<div class="landing-action-bar uk-box-shadow-small uk-margin-bottom">
|
||||||
<div class="uk-flex uk-text-xsmall" style="grid-gap: 20px;">
|
<div class="landing-action-bar-grid-gap uk-flex uk-flex-middle uk-text-xsmall">
|
||||||
<!-- Actions -->
|
<!-- Actions -->
|
||||||
<a (click)="openAddThisModal()"
|
<a (click)="openAddThisModal()"
|
||||||
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
|
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
|
||||||
|
@ -183,7 +183,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="dataProviderInfo && hasMetrics">
|
<div *ngIf="dataProviderInfo && hasMetrics">
|
||||||
<div class="landing-metrics-card uk-card uk-card-secondary uk-text-small uk-flex uk-padding-small">
|
<div class="landing-metrics-card uk-width-medium uk-card uk-card-secondary uk-text-small uk-flex uk-padding-small">
|
||||||
<div class="uk-width-expand uk-flex uk-flex-middle">
|
<div class="uk-width-expand uk-flex uk-flex-middle">
|
||||||
<div class="uk-grid uk-grid-small" uk-grid uk-height-match="target: > div > .cell">
|
<div class="uk-grid uk-grid-small" uk-grid uk-height-match="target: > div > .cell">
|
||||||
<div>
|
<div>
|
||||||
|
@ -195,8 +195,10 @@
|
||||||
<div *ngIf="totalViews" class="cell">Views</div>
|
<div *ngIf="totalViews" class="cell">Views</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-text-uppercase uk-text-bolder">
|
<div class="uk-text-uppercase uk-text-bolder">
|
||||||
<div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom">{{totalDownloads | number}}</div>
|
<div *ngIf="totalDownloads" [attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||||
<div *ngIf="totalViews" class="cell">{{totalViews | number}}</div>
|
title="{{totalDownloads | number}}" class="cell uk-margin-xsmall-bottom">{{formatNumber(totalDownloads)}}</div>
|
||||||
|
<div *ngIf="totalViews" [attr.uk-tooltip]="totalViews >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||||
|
title="{{totalViews | number}}" class="cell">{{formatNumber(totalViews)}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -500,8 +502,10 @@
|
||||||
<td class="uk-padding-remove-top">
|
<td class="uk-padding-remove-top">
|
||||||
Downloads
|
Downloads
|
||||||
</td>
|
</td>
|
||||||
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
|
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder"
|
||||||
{{totalDownloads | number}}
|
[attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||||
|
title="{{totalDownloads | number}}">
|
||||||
|
{{formatNumber(totalDownloads)}}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr *ngIf="totalViews">
|
<tr *ngIf="totalViews">
|
||||||
|
@ -511,8 +515,10 @@
|
||||||
<td class="uk-padding-remove-bottom">
|
<td class="uk-padding-remove-bottom">
|
||||||
Views
|
Views
|
||||||
</td>
|
</td>
|
||||||
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder">
|
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder"
|
||||||
{{totalViews | number}}
|
[attr.uk-tooltip]="totalViews >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||||
|
title="{{totalViews | number}}">
|
||||||
|
{{formatNumber(totalViews)}}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
@ -526,11 +532,15 @@
|
||||||
<div class="uk-flex uk-flex-center uk-flex-middle">
|
<div class="uk-flex uk-flex-center uk-flex-middle">
|
||||||
<div class="uk-margin-large-right">
|
<div class="uk-margin-large-right">
|
||||||
<div *ngIf="totalDownloads" class="uk-text-center uk-margin-medium-bottom">
|
<div *ngIf="totalDownloads" class="uk-text-center uk-margin-medium-bottom">
|
||||||
<div class="uk-text-background uk-text-bold number metrics-number">{{formatNumber(totalDownloads)}}</div>
|
<div class="uk-text-background uk-text-bold number metrics-number"
|
||||||
|
[attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||||
|
title="{{totalDownloads | number}}">{{formatNumber(totalDownloads)}}</div>
|
||||||
<div class="uk-text-bold">Downloads</div>
|
<div class="uk-text-bold">Downloads</div>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="totalViews" class="uk-text-center uk-margin-medium-bottom">
|
<div *ngIf="totalViews" class="uk-text-center uk-margin-medium-bottom">
|
||||||
<div class="uk-text-background uk-text-bold number metrics-number">{{formatNumber(totalViews)}}</div>
|
<div class="uk-text-background uk-text-bold number metrics-number"
|
||||||
|
[attr.uk-tooltip]="totalViews >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||||
|
title="{{totalViews | number}}">{{formatNumber(totalViews)}}</div>
|
||||||
<div class="uk-text-bold">Views</div>
|
<div class="uk-text-bold">Views</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -9,14 +9,17 @@ declare var UIkit;
|
||||||
template: `
|
template: `
|
||||||
<ng-container *ngIf="availableOn">
|
<ng-container *ngIf="availableOn">
|
||||||
<div class="uk-flex uk-flex-middle uk-flex-center">
|
<div class="uk-flex uk-flex-middle uk-flex-center">
|
||||||
<a *ngIf="availableOn[0].downloadUrl" [href]="availableOn[0].downloadUrl" target="_blank"
|
<ng-container *ngIf="availableOn[0].downloadUrl">
|
||||||
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder custom-external">
|
<span class="uk-margin-xsmall-right">Source: </span>
|
||||||
<span [class]="'uk-margin-xsmall-right ' + (availableOn[0].accessRightIcon == 'open_access' ? 'open-access' : 'uk-text-meta')"
|
<span [class]="'uk-margin-xsmall-right ' + (availableOn[0].accessRightIcon == 'open_access' ? 'open-access' : 'uk-text-meta')"
|
||||||
uk-tooltip [title]="availableOn[0].accessRight ? availableOn[0].accessRight : 'Not available'">
|
uk-tooltip [title]="availableOn[0].accessRight ? availableOn[0].accessRight : 'Not available'">
|
||||||
<icon [name]="availableOn[0].accessRightIcon" [flex]="true" [ratio]="0.8"></icon>
|
<icon [name]="availableOn[0].accessRightIcon" [flex]="true" [ratio]="0.8"></icon>
|
||||||
</span>
|
</span>
|
||||||
<span>{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
|
<a [href]="availableOn[0].downloadUrl" target="_blank"
|
||||||
</a>
|
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder custom-external">
|
||||||
|
<span>{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
|
||||||
|
</a>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
<a class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
|
<a class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
|
||||||
<icon [flex]="true" [name]="'expand_' + (isOpen?'less':'more')"></icon>
|
<icon [flex]="true" [name]="'expand_' + (isOpen?'less':'more')"></icon>
|
||||||
|
|
|
@ -10,13 +10,13 @@ import {StringUtils} from "../../utils/string-utils.class";
|
||||||
<div class="uk-text-xsmall" style="color: #EEB204">Beta</div>
|
<div class="uk-text-xsmall" style="color: #EEB204">Beta</div>
|
||||||
<div [class]="'uk-flex uk-flex-between uk-flex-middle uk-margin-'+(viewAll?'':'small-')+'bottom'">
|
<div [class]="'uk-flex uk-flex-between uk-flex-middle uk-margin-'+(viewAll?'':'small-')+'bottom'">
|
||||||
<span *ngIf="viewAll" class="clickable uk-h6 uk-flex uk-flex-middle uk-margin-small-right uk-margin-remove-bottom" (click)="viewLessClick()">
|
<span *ngIf="viewAll" class="clickable uk-h6 uk-flex uk-flex-middle uk-margin-small-right uk-margin-remove-bottom" (click)="viewLessClick()">
|
||||||
<icon class="uk-margin-small-right" name="arrow_back" flex="true" ratio="1.2"></icon>
|
<icon class="uk-margin-small-right" name="arrow_back" [flex]="true" [ratio]="1.2"></icon>
|
||||||
<span class="uk-text-nowrap">{{title}}</span>
|
<span class="uk-text-nowrap">{{title}}</span>
|
||||||
</span>
|
</span>
|
||||||
<span *ngIf="!viewAll" class="uk-text-emphasis uk-text-bolder uk-text-nowrap uk-margin-small-right">{{title}}</span>
|
<span *ngIf="!viewAll" class="uk-text-emphasis uk-text-bolder uk-text-nowrap uk-margin-small-right">{{title}}</span>
|
||||||
<!-- <a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;">View less</a> -->
|
<!-- <a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;">View less</a> -->
|
||||||
<a *ngIf="subjects && subjects.length > threshold && !viewAll"
|
<a *ngIf="subjects && subjects.length > threshold && !viewAll"
|
||||||
(click)="viewAllClick();" class="view-more-less-link uk-text-truncate" uk-tooltip="View all & feedback">
|
(click)="viewAllClick();" class="view-more-less-link uk-text-truncate">
|
||||||
<span class="">View all & suggest</span>
|
<span class="">View all & suggest</span>
|
||||||
</a>
|
</a>
|
||||||
<a *ngIf="(subjects && subjects.length <= threshold || viewAll)" class="uk-link uk-text-truncate"
|
<a *ngIf="(subjects && subjects.length <= threshold || viewAll)" class="uk-link uk-text-truncate"
|
||||||
|
@ -65,7 +65,7 @@ export class FosComponent {
|
||||||
// this.viewAll = true;
|
// this.viewAll = true;
|
||||||
// this.lessBtn = true;
|
// this.lessBtn = true;
|
||||||
// } else {
|
// } else {
|
||||||
this.viewAll = true;
|
// this.viewAll = true;
|
||||||
this.viewAllClicked.emit('fos');
|
this.viewAllClicked.emit('fos');
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,23 +16,29 @@ import {FosComponent} from "./fos.component";
|
||||||
import {SdgComponent} from "./sdg.component";
|
import {SdgComponent} from "./sdg.component";
|
||||||
import {IconsModule} from "../../utils/icons/icons.module";
|
import {IconsModule} from "../../utils/icons/icons.module";
|
||||||
import {AlertModalModule} from "../../utils/modal/alertModal.module";
|
import {AlertModalModule} from "../../utils/modal/alertModal.module";
|
||||||
|
import {SdgSelectionComponent} from '../../sdg/sdg-selection/sdg-selection.component';
|
||||||
|
import {FosSelectionComponent} from '../../fos/fos-selection/fos-selection.component';
|
||||||
|
import { SearchInputModule } from '../../sharedComponents/search-input/search-input.module';
|
||||||
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule, FormsModule, RouterModule, PagingModule, ShowPublisherModule, IconsModule, AlertModalModule
|
CommonModule, FormsModule, RouterModule, PagingModule, ShowPublisherModule, IconsModule, AlertModalModule,
|
||||||
|
SearchInputModule
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
ShowIdentifiersComponent,ShowSubjectsComponent,
|
ShowIdentifiersComponent,ShowSubjectsComponent,
|
||||||
FundedByComponent,AvailableOnComponent,TabTableComponent,
|
FundedByComponent,AvailableOnComponent,TabTableComponent,
|
||||||
RelatedToComponent, FosComponent, SdgComponent
|
RelatedToComponent, FosComponent, SdgComponent,
|
||||||
|
SdgSelectionComponent, FosSelectionComponent
|
||||||
],
|
],
|
||||||
providers:[
|
providers:[
|
||||||
],
|
],
|
||||||
exports: [
|
exports: [
|
||||||
ShowIdentifiersComponent, ShowSubjectsComponent,
|
ShowIdentifiersComponent, ShowSubjectsComponent,
|
||||||
FundedByComponent,AvailableOnComponent, TabTableComponent, ShowPublisherComponent,
|
FundedByComponent,AvailableOnComponent, TabTableComponent, ShowPublisherComponent,
|
||||||
RelatedToComponent, FosComponent, SdgComponent
|
RelatedToComponent, FosComponent, SdgComponent,
|
||||||
|
SdgSelectionComponent, FosSelectionComponent
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class ResultLandingUtilsModule { }
|
export class ResultLandingUtilsModule { }
|
||||||
|
|
|
@ -17,7 +17,7 @@ import {StringUtils} from "../../utils/string-utils.class";
|
||||||
<span *ngIf="!viewAll" class="uk-text-emphasis uk-text-bolder uk-text-nowrap uk-margin-small-right" uk-tooltip="Sustainable Development Goals">{{title}}</span>
|
<span *ngIf="!viewAll" class="uk-text-emphasis uk-text-bolder uk-text-nowrap uk-margin-small-right" uk-tooltip="Sustainable Development Goals">{{title}}</span>
|
||||||
<!-- <a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;">View less</a> -->
|
<!-- <a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;">View less</a> -->
|
||||||
<a *ngIf="subjects && subjects.length > threshold && !viewAll"
|
<a *ngIf="subjects && subjects.length > threshold && !viewAll"
|
||||||
(click)="viewAllClick();" class="view-more-less-link uk-text-truncate" uk-tooltip="View all & feedback">
|
(click)="viewAllClick();" class="view-more-less-link uk-text-truncate">
|
||||||
View all & suggest</a>
|
View all & suggest</a>
|
||||||
<a *ngIf="(subjects && subjects.length <= threshold || viewAll)" class="uk-link uk-text-truncate"
|
<a *ngIf="(subjects && subjects.length <= threshold || viewAll)" class="uk-link uk-text-truncate"
|
||||||
(click)="feedbackClick();">Feedback</a>
|
(click)="feedbackClick();">Feedback</a>
|
||||||
|
@ -61,7 +61,7 @@ export class SdgComponent {
|
||||||
@Output() viewAllClicked = new EventEmitter();
|
@Output() viewAllClicked = new EventEmitter();
|
||||||
@Output() feedbackClicked = new EventEmitter();
|
@Output() feedbackClicked = new EventEmitter();
|
||||||
public lessBtn: boolean = false;
|
public lessBtn: boolean = false;
|
||||||
public threshold: number = 4;
|
public threshold: number = 2;
|
||||||
public routerHelper: RouterHelper = new RouterHelper();
|
public routerHelper: RouterHelper = new RouterHelper();
|
||||||
public properties = properties;
|
public properties = properties;
|
||||||
public title: string = "SDGs";
|
public title: string = "SDGs";
|
||||||
|
@ -71,7 +71,7 @@ export class SdgComponent {
|
||||||
// this.viewAll = true;
|
// this.viewAll = true;
|
||||||
// this.lessBtn = true;
|
// this.lessBtn = true;
|
||||||
// } else {
|
// } else {
|
||||||
this.viewAll = true;
|
// this.viewAll = true;
|
||||||
this.viewAllClicked.emit('sdg');
|
this.viewAllClicked.emit('sdg');
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,7 +9,7 @@ import {EnvProperties} from "../../utils/properties/env-properties";
|
||||||
<ng-container *ngIf="journal && (journal['journal'] || journal['issn'] || journal['lissn']
|
<ng-container *ngIf="journal && (journal['journal'] || journal['issn'] || journal['lissn']
|
||||||
|| journal['volume'] || journal['eissn'] || journal['issue'])">
|
|| journal['volume'] || journal['eissn'] || journal['issue'])">
|
||||||
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">•</span>
|
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">•</span>
|
||||||
<span>
|
<span [attr.uk-tooltip]="'cls: uk-active'" [title]="'Journal'">
|
||||||
<span *ngIf="journal['journal']">{{journal['journal']}}</span>
|
<span *ngIf="journal['journal']">{{journal['journal']}}</span>
|
||||||
<span *ngIf="journal['journal'] && (journal['volume'] || journal['issue'])">, </span>
|
<span *ngIf="journal['journal'] && (journal['volume'] || journal['issue'])">, </span>
|
||||||
<ng-container *ngIf="journal['volume']">
|
<ng-container *ngIf="journal['volume']">
|
||||||
|
@ -68,7 +68,7 @@ import {EnvProperties} from "../../utils/properties/env-properties";
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<ng-container *ngIf="publisher">
|
<ng-container *ngIf="publisher">
|
||||||
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">•</span>
|
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">•</span>
|
||||||
<span>{{publisher}}</span>
|
<span [attr.uk-tooltip]="'cls: uk-active'" [title]="'Publisher'">{{publisher}}</span>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
`
|
`
|
||||||
})
|
})
|
||||||
|
|
|
@ -75,7 +75,7 @@
|
||||||
<div *ngIf="!showLoading" class="uk-margin-top uk-margin-bottom">
|
<div *ngIf="!showLoading" class="uk-margin-top uk-margin-bottom">
|
||||||
<div class="uk-flex uk-flex-middle uk-flex-center">
|
<div class="uk-flex uk-flex-middle uk-flex-center">
|
||||||
<div class="landing-action-bar uk-box-shadow-small uk-margin-bottom">
|
<div class="landing-action-bar uk-box-shadow-small uk-margin-bottom">
|
||||||
<div class="uk-flex uk-text-xsmall" style="grid-gap: 20px;">
|
<div class="landing-action-bar-grid-gap uk-flex uk-flex-middle uk-text-xsmall">
|
||||||
<!-- Versions -->
|
<!-- Versions -->
|
||||||
<a *ngIf="organizationInfo?.deletedByInferenceIds" (click)="openDeletedByInference()"
|
<a *ngIf="organizationInfo?.deletedByInferenceIds" (click)="openDeletedByInference()"
|
||||||
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
|
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
|
||||||
|
|
|
@ -113,11 +113,13 @@
|
||||||
<div *ngIf="!showLoading" class="uk-margin-top uk-margin-bottom">
|
<div *ngIf="!showLoading" class="uk-margin-top uk-margin-bottom">
|
||||||
<div class="uk-flex uk-flex-middle uk-flex-center">
|
<div class="uk-flex uk-flex-middle uk-flex-center">
|
||||||
<div class="landing-action-bar uk-box-shadow-small uk-margin-bottom">
|
<div class="landing-action-bar uk-box-shadow-small uk-margin-bottom">
|
||||||
<div class="uk-flex uk-text-xsmall" style="grid-gap: 20px;">
|
<div class="landing-action-bar-grid-gap uk-flex uk-flex-middle uk-text-xsmall">
|
||||||
<!-- Actions -->
|
<!-- Actions -->
|
||||||
<a *ngIf="isRouteAvailable('participate/direct-claim')"
|
<a *ngIf="isRouteAvailable('participate/direct-claim')"
|
||||||
[queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[projectId, 'project','result'])"
|
[queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[projectId, 'project','result'])"
|
||||||
routerLinkActive="router-link-active" routerLink="/participate/direct-claim"
|
routerLinkActive="router-link-active" routerLink="/participate/direct-claim"
|
||||||
|
[title]="'<span class=\'uk-flex uk-flex-middle\'>Link this project to '+openaireEntities.RESULTS+'<span class=\'material-icons uk-margin-small-left\'>east</span></span>'"
|
||||||
|
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
|
||||||
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
|
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
|
||||||
<icon flex="true" ratio="0.7" name="link_to" visuallyHidden="link"></icon>
|
<icon flex="true" ratio="0.7" name="link_to" visuallyHidden="link"></icon>
|
||||||
<span class="uk-margin-xsmall-left">Link to</span>
|
<span class="uk-margin-xsmall-left">Link to</span>
|
||||||
|
@ -332,7 +334,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="projectInfo && hasMetrics">
|
<div *ngIf="projectInfo && hasMetrics">
|
||||||
<div class="landing-metrics-card uk-card uk-card-secondary uk-text-small uk-flex uk-padding-small">
|
<div class="landing-metrics-card uk-width-medium uk-card uk-card-secondary uk-text-small uk-flex uk-padding-small">
|
||||||
<div class="uk-width-expand uk-flex uk-flex-middle">
|
<div class="uk-width-expand uk-flex uk-flex-middle">
|
||||||
<div class="uk-grid uk-grid-small" uk-grid uk-height-match="target: > div > .cell">
|
<div class="uk-grid uk-grid-small" uk-grid uk-height-match="target: > div > .cell">
|
||||||
<div>
|
<div>
|
||||||
|
@ -344,8 +346,10 @@
|
||||||
<div *ngIf="totalViews" class="cell">Views</div>
|
<div *ngIf="totalViews" class="cell">Views</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-text-uppercase uk-text-bolder">
|
<div class="uk-text-uppercase uk-text-bolder">
|
||||||
<div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom">{{totalDownloads | number}}</div>
|
<div *ngIf="totalDownloads" [attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||||
<div *ngIf="totalViews" class="cell">{{totalViews | number}}</div>
|
title="{{totalDownloads | number}}" class="cell uk-margin-xsmall-bottom">{{formatNumber(totalDownloads)}}</div>
|
||||||
|
<div *ngIf="totalViews" [attr.uk-tooltip]="totalViews >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||||
|
title="{{totalViews | number}}" class="cell">{{formatNumber(totalViews)}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -533,8 +537,10 @@
|
||||||
<td class="uk-padding-remove-top">
|
<td class="uk-padding-remove-top">
|
||||||
Downloads
|
Downloads
|
||||||
</td>
|
</td>
|
||||||
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
|
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder"
|
||||||
{{totalDownloads | number}}
|
[attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||||
|
title="{{totalDownloads | number}}">
|
||||||
|
{{formatNumber(totalDownloads)}}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr *ngIf="totalViews">
|
<tr *ngIf="totalViews">
|
||||||
|
@ -544,8 +550,10 @@
|
||||||
<td class="uk-padding-remove-bottom">
|
<td class="uk-padding-remove-bottom">
|
||||||
Views
|
Views
|
||||||
</td>
|
</td>
|
||||||
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder">
|
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder"
|
||||||
{{totalViews | number}}
|
[attr.uk-tooltip]="totalViews >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||||
|
title="{{totalViews | number}}">
|
||||||
|
{{formatNumber(totalViews)}}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
@ -559,11 +567,13 @@
|
||||||
<div class="uk-flex uk-flex-center uk-flex-middle">
|
<div class="uk-flex uk-flex-center uk-flex-middle">
|
||||||
<div class="uk-margin-large-right">
|
<div class="uk-margin-large-right">
|
||||||
<div *ngIf="totalDownloads" class="uk-text-center uk-margin-medium-bottom">
|
<div *ngIf="totalDownloads" class="uk-text-center uk-margin-medium-bottom">
|
||||||
<div class="uk-text-background uk-text-bold number metrics-number">{{formatNumber(totalDownloads)}}</div>
|
<div class="uk-text-background uk-text-bold number metrics-number" [attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||||
|
title="{{totalDownloads | number}}">{{formatNumber(totalDownloads)}}</div>
|
||||||
<div class="uk-text-bold">Downloads</div>
|
<div class="uk-text-bold">Downloads</div>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="totalViews" class="uk-text-center uk-margin-medium-bottom">
|
<div *ngIf="totalViews" class="uk-text-center uk-margin-medium-bottom">
|
||||||
<div class="uk-text-background uk-text-bold number metrics-number">{{formatNumber(totalViews)}}</div>
|
<div class="uk-text-background uk-text-bold number metrics-number" [attr.uk-tooltip]="totalViews >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||||
|
title="{{totalViews | number}}">{{formatNumber(totalViews)}}</div>
|
||||||
<div class="uk-text-bold">Views</div>
|
<div class="uk-text-bold">Views</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -109,7 +109,7 @@
|
||||||
<div *ngIf="!showLoading" class="uk-margin-top uk-margin-bottom">
|
<div *ngIf="!showLoading" class="uk-margin-top uk-margin-bottom">
|
||||||
<div class="uk-flex uk-flex-middle uk-flex-center">
|
<div class="uk-flex uk-flex-middle uk-flex-center">
|
||||||
<div class="landing-action-bar uk-box-shadow-small uk-margin-bottom">
|
<div class="landing-action-bar uk-box-shadow-small uk-margin-bottom">
|
||||||
<div class="uk-flex uk-text-xsmall" style="grid-gap: 20px;">
|
<div class="landing-action-bar-grid-gap uk-flex uk-flex-middle uk-text-xsmall">
|
||||||
<!-- Download from -->
|
<!-- Download from -->
|
||||||
<availableOn *ngIf="resultLandingInfo?.hostedBy_collectedFrom" [availableOn]="resultLandingInfo.hostedBy_collectedFrom" (viewAllClicked)="viewAll=$event"></availableOn>
|
<availableOn *ngIf="resultLandingInfo?.hostedBy_collectedFrom" [availableOn]="resultLandingInfo.hostedBy_collectedFrom" (viewAllClicked)="viewAll=$event"></availableOn>
|
||||||
<!-- Versions -->
|
<!-- Versions -->
|
||||||
|
@ -126,6 +126,8 @@
|
||||||
<a *ngIf="isRouteAvailable('participate/direct-claim')"
|
<a *ngIf="isRouteAvailable('participate/direct-claim')"
|
||||||
[queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'project'])"
|
[queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'project'])"
|
||||||
routerLinkActive="router-link-active" routerLink="/participate/direct-claim"
|
routerLinkActive="router-link-active" routerLink="/participate/direct-claim"
|
||||||
|
[title]="'<span class=\'uk-flex uk-flex-middle\'>Link this '+getTypeName()+' to ...<span class=\'material-icons uk-margin-small-left\'>east</span></span>'"
|
||||||
|
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
|
||||||
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
|
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
|
||||||
<icon [flex]="true" [ratio]="0.7" name="link_to" visuallyHidden="link"></icon>
|
<icon [flex]="true" [ratio]="0.7" name="link_to" visuallyHidden="link"></icon>
|
||||||
<span class="uk-margin-xsmall-left">Link to</span>
|
<span class="uk-margin-xsmall-left">Link to</span>
|
||||||
|
@ -555,8 +557,10 @@
|
||||||
<td class="uk-padding-remove-top">
|
<td class="uk-padding-remove-top">
|
||||||
Downloads
|
Downloads
|
||||||
</td>
|
</td>
|
||||||
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
|
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder"
|
||||||
{{resultLandingInfo.measure.downloads | number}}
|
[attr.uk-tooltip]="resultLandingInfo.measure.downloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||||
|
title="{{resultLandingInfo.measure.downloads | number}}">
|
||||||
|
{{formatNumber(resultLandingInfo.measure.downloads)}}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr *ngIf="resultLandingInfo.measure.views">
|
<tr *ngIf="resultLandingInfo.measure.views">
|
||||||
|
@ -566,8 +570,10 @@
|
||||||
<td class="uk-padding-remove-bottom">
|
<td class="uk-padding-remove-bottom">
|
||||||
Views
|
Views
|
||||||
</td>
|
</td>
|
||||||
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder">
|
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder"
|
||||||
{{resultLandingInfo.measure.views | number}}
|
[attr.uk-tooltip]="resultLandingInfo.measure.views >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||||
|
title="{{resultLandingInfo.measure.views | number}}">
|
||||||
|
{{formatNumber(resultLandingInfo.measure.views)}}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
@ -651,11 +657,15 @@
|
||||||
<div class="uk-flex uk-flex-center uk-flex-middle">
|
<div class="uk-flex uk-flex-center uk-flex-middle">
|
||||||
<div class="uk-margin-large-right">
|
<div class="uk-margin-large-right">
|
||||||
<div *ngIf="resultLandingInfo.measure.downloads" class="uk-text-center uk-margin-medium-bottom">
|
<div *ngIf="resultLandingInfo.measure.downloads" class="uk-text-center uk-margin-medium-bottom">
|
||||||
<div class="uk-text-background uk-text-bold number metrics-number">{{formatNumber(resultLandingInfo.measure.downloads)}}</div>
|
<div class="uk-text-background uk-text-bold number metrics-number"
|
||||||
|
[attr.uk-tooltip]="resultLandingInfo.measure.downloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||||
|
title="{{resultLandingInfo.measure.downloads | number}}">{{formatNumber(resultLandingInfo.measure.downloads)}}</div>
|
||||||
<div class="uk-text-bold">Downloads</div>
|
<div class="uk-text-bold">Downloads</div>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="resultLandingInfo.measure.views" class="uk-text-center uk-margin-medium-bottom">
|
<div *ngIf="resultLandingInfo.measure.views" class="uk-text-center uk-margin-medium-bottom">
|
||||||
<div class="uk-text-background uk-text-bold number metrics-number">{{formatNumber(resultLandingInfo.measure.views)}}</div>
|
<div class="uk-text-background uk-text-bold number metrics-number"
|
||||||
|
[attr.uk-tooltip]="resultLandingInfo.measure.views >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||||
|
title="{{resultLandingInfo.measure.views | number}}">{{formatNumber(resultLandingInfo.measure.views)}}</div>
|
||||||
<div class="uk-text-bold">Views</div>
|
<div class="uk-text-bold">Views</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -745,11 +755,14 @@
|
||||||
<div *ngIf="resultLandingInfo.measure.views" class="cell">Views</div>
|
<div *ngIf="resultLandingInfo.measure.views" class="cell">Views</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-text-uppercase uk-text-bolder">
|
<div class="uk-text-uppercase uk-text-bolder">
|
||||||
<div *ngIf="resultLandingInfo.measure.citations" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.citations | number}}</div>
|
<div *ngIf="resultLandingInfo.measure.citations" [attr.uk-tooltip]="resultLandingInfo.measure.citations >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||||
|
title="{{resultLandingInfo.measure.citations | number}}" class="cell uk-margin-xsmall-bottom">{{formatNumber(resultLandingInfo.measure.citations)}}</div>
|
||||||
<div *ngIf="resultLandingInfo.measure.popularity" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.popularity}}</div>
|
<div *ngIf="resultLandingInfo.measure.popularity" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.popularity}}</div>
|
||||||
<div *ngIf="resultLandingInfo.measure.influence" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.influence}}</div>
|
<div *ngIf="resultLandingInfo.measure.influence" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.influence}}</div>
|
||||||
<div *ngIf="resultLandingInfo.measure.downloads" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.downloads | number}}</div>
|
<div *ngIf="resultLandingInfo.measure.downloads" [attr.uk-tooltip]="resultLandingInfo.measure.downloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||||
<div *ngIf="resultLandingInfo.measure.views" class="cell">{{resultLandingInfo.measure.views | number}}</div>
|
title="{{resultLandingInfo.measure.downloads | number}}" class="cell uk-margin-xsmall-bottom">{{formatNumber(resultLandingInfo.measure.downloads)}}</div>
|
||||||
|
<div *ngIf="resultLandingInfo.measure.views" [attr.uk-tooltip]="resultLandingInfo.measure.views >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||||
|
title="{{resultLandingInfo.measure.views | number}}" class="cell">{{formatNumber(resultLandingInfo.measure.views)}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -778,10 +791,10 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0 && (!viewAll || viewAll=='sdg')">
|
<div *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0 && (!viewAll || viewAll=='sdg')">
|
||||||
<sdg [subjects]="resultLandingInfo.sdg" (viewAllClicked)="viewAll=$event" (feedbackClicked)="feedbackClicked('Sustainable Development Goals (SDGs)')"></sdg>
|
<sdg [subjects]="resultLandingInfo.sdg" (viewAllClicked)="openSelectionModal($event)" (feedbackClicked)="feedbackClicked('Sustainable Development Goals (SDGs)')"></sdg>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="resultLandingInfo.fos && resultLandingInfo.fos.length > 0 && (!viewAll || viewAll=='fos')">
|
<div *ngIf="resultLandingInfo.fos && resultLandingInfo.fos.length > 0 && (!viewAll || viewAll=='fos')">
|
||||||
<fos [subjects]="resultLandingInfo.fos" (viewAllClicked)="viewAll=$event" (feedbackClicked)="feedbackClicked('Fields of Science and Technology (FOS)')"></fos>
|
<fos [subjects]="resultLandingInfo.fos" (viewAllClicked)="openSelectionModal($event)" (feedbackClicked)="feedbackClicked('Fields of Science and Technology (FOS)')"></fos>
|
||||||
</div>
|
</div>
|
||||||
<!-- Funded By -->
|
<!-- Funded By -->
|
||||||
<div *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0 && (!viewAll || viewAll=='fundedBy')">
|
<div *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0 && (!viewAll || viewAll=='fundedBy')">
|
||||||
|
@ -972,6 +985,18 @@
|
||||||
<div [innerHTML]="resultLandingInfo.description"></div>
|
<div [innerHTML]="resultLandingInfo.description"></div>
|
||||||
</modal-alert>
|
</modal-alert>
|
||||||
|
|
||||||
|
<modal-alert *ngIf="resultLandingInfo && resultLandingInfo.sdg?.length > 0"
|
||||||
|
#sdgSelectionModal [large]="true">
|
||||||
|
<sdg-selection [subjects]="resultLandingInfo.sdg" [properties]="properties"></sdg-selection>
|
||||||
|
</modal-alert>
|
||||||
|
|
||||||
|
<modal-alert *ngIf="resultLandingInfo && resultLandingInfo.fos?.length > 0"
|
||||||
|
#fosSelectionModal [large]="true">
|
||||||
|
<div>
|
||||||
|
<fos-selection [subjects]="resultLandingInfo.fos" [properties]="properties"></fos-selection>
|
||||||
|
</div>
|
||||||
|
</modal-alert>
|
||||||
|
|
||||||
<ng-template #organizations_template let-threshold="threshold">
|
<ng-template #organizations_template let-threshold="threshold">
|
||||||
<ul class="uk-list organizations uk-margin-remove-top">
|
<ul class="uk-list organizations uk-margin-remove-top">
|
||||||
<li *ngFor="let organization of resultLandingInfo.organizations.slice(0, threshold)" class="uk-tile uk-tile-default uk-padding-small">
|
<li *ngFor="let organization of resultLandingInfo.organizations.slice(0, threshold)" class="uk-tile uk-tile-default uk-padding-small">
|
||||||
|
|
|
@ -142,6 +142,9 @@ export class ResultLandingComponent {
|
||||||
// public shouldSticky: boolean = true;
|
// public shouldSticky: boolean = true;
|
||||||
|
|
||||||
public viewAll: string = "";
|
public viewAll: string = "";
|
||||||
|
@ViewChild("sdgSelectionModal") sdgSelectionModal;
|
||||||
|
@ViewChild("fosSelectionModal") fosSelectionModal;
|
||||||
|
|
||||||
public noCommunities: boolean = false;
|
public noCommunities: boolean = false;
|
||||||
|
|
||||||
public rightSidebarOffcanvasClicked: boolean = false;
|
public rightSidebarOffcanvasClicked: boolean = false;
|
||||||
|
@ -924,4 +927,24 @@ export class ResultLandingComponent {
|
||||||
let formatted = NumberUtils.roundNumber(+num);
|
let formatted = NumberUtils.roundNumber(+num);
|
||||||
return formatted.number + formatted.size;
|
return formatted.number + formatted.size;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public openSelectionModal(value: string) {
|
||||||
|
if(value == 'sdg') {
|
||||||
|
this.openSdgSelectionModal();
|
||||||
|
} else if(value == 'fos') {
|
||||||
|
this.openFosSelectionModal();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private openSdgSelectionModal() {
|
||||||
|
this.sdgSelectionModal.cancelButton = false;
|
||||||
|
this.sdgSelectionModal.alertTitle = "Please select SDGs that are the most relevant for this publication.";
|
||||||
|
this.sdgSelectionModal.open();
|
||||||
|
}
|
||||||
|
|
||||||
|
private openFosSelectionModal() {
|
||||||
|
this.fosSelectionModal.cancelButton = false;
|
||||||
|
this.fosSelectionModal.alertTitle = "Please select FOS that are the most relevant for this publication.";
|
||||||
|
this.fosSelectionModal.open();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,30 @@
|
||||||
|
<div *ngIf="loading">
|
||||||
|
<loading></loading>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="!loading">
|
||||||
|
<div class="uk-flex uk-flex-around">
|
||||||
|
<div>
|
||||||
|
<div *ngFor="let item of firstColumn; let i = index"
|
||||||
|
class="uk-margin-bottom">
|
||||||
|
<label>
|
||||||
|
<input [checked]="subjects.includes(item.id)"
|
||||||
|
type="checkbox" class="uk-checkbox uk-margin-small-right">
|
||||||
|
<span class="uk-text-uppercase uk-margin-xsmall-right">Goal</span>
|
||||||
|
<span>{{item.id}}</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div *ngFor="let item of secondColumn; let i = index"
|
||||||
|
class="uk-margin-bottom">
|
||||||
|
<label>
|
||||||
|
<input [checked]="subjects.includes(item.id)"
|
||||||
|
type="checkbox" class="uk-checkbox uk-margin-small-right">
|
||||||
|
<span *ngIf="i !== secondColumn.length - 1"
|
||||||
|
class="uk-text-uppercase uk-margin-xsmall-right">Goal</span>
|
||||||
|
<span>{{item.id}}</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,38 @@
|
||||||
|
import {HttpClient} from "@angular/common/http";
|
||||||
|
import {Component, Input} from "@angular/core";
|
||||||
|
import {EnvProperties} from "../../utils/properties/env-properties";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'sdg-selection',
|
||||||
|
templateUrl: 'sdg-selection.component.html',
|
||||||
|
styleUrls: ['sdg-selection.component.less']
|
||||||
|
})
|
||||||
|
export class SdgSelectionComponent {
|
||||||
|
@Input() properties: EnvProperties;
|
||||||
|
@Input() subjects: string[];
|
||||||
|
|
||||||
|
public loading: boolean;
|
||||||
|
public sdgs: any = [];
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private httpClient: HttpClient
|
||||||
|
) {}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.loading = true;
|
||||||
|
this.httpClient.get(this.properties.domain+'/assets/common-assets/vocabulary/sdg.json').subscribe(data => {
|
||||||
|
this.sdgs = data['sdg'];
|
||||||
|
console.log(this.sdgs);
|
||||||
|
this.sdgs.push({code: '18', id: 'No SDGs are relevant for this publication', label: 'No SDG relevant', html: 'No SDG relevant'})
|
||||||
|
});
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
public get firstColumn() {
|
||||||
|
return this.sdgs.slice(0, this.sdgs.length/2);
|
||||||
|
}
|
||||||
|
|
||||||
|
public get secondColumn() {
|
||||||
|
return this.sdgs.slice(this.sdgs.length/2, this.sdgs.length);
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,25 @@
|
||||||
|
import {CommonModule} from "@angular/common";
|
||||||
|
import {NgModule} from "@angular/core";
|
||||||
|
import {FormsModule} from "@angular/forms";
|
||||||
|
import {InputModule} from "../../sharedComponents/input/input.module";
|
||||||
|
import {LoadingModule} from "../../utils/loading/loading.module";
|
||||||
|
|
||||||
|
// import {SdgSelectionComponent} from './sdg-selection.component';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [
|
||||||
|
CommonModule, FormsModule, LoadingModule, InputModule
|
||||||
|
],
|
||||||
|
declarations: [
|
||||||
|
// SdgSelectionComponent
|
||||||
|
],
|
||||||
|
providers: [
|
||||||
|
|
||||||
|
],
|
||||||
|
exports: [
|
||||||
|
// SdgSelectionComponent
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class SdgSelectionModule {
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in New Issue