MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merging explore-redesign branch into develop for Explore July release #7

Merged
konstantina.galouni merged 112 commits from explore-redesign into develop 2023-07-05 11:11:53 +02:00
Conversation 0 Commits 112 Files Changed 119 +1257 -910
66 changed files with 1257 additions and 910 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e1b5f4a46d - Show all commits

2
claims/claim-utils/displayClaims/displayClaims.component.html
View File

@ -86,7 +86,7 @@
</div>
<div class="uk-visible@m">
<div class="claim-divider">
<icon class="uk-position-center uk-background-default" name="link" customClass="uk-text-primary" ratio="2" [flex]="true"></icon>
<icon class="uk-position-center" name="link" customClass="uk-text-primary" ratio="2" [flex]="true"></icon>
</div>
</div>
<div class="uk-width-1-2@m uk-width-1-1 uk-flex uk-flex-column uk-flex-center">

87
connect/community/community.service.ts
View File

@ -5,6 +5,7 @@ import {map} from "rxjs/operators";
import {BehaviorSubject, from, Observable, Subscriber} from "rxjs";
import {properties} from "../../../../environments/environment";
import {StringUtils} from "../../utils/string-utils.class";
import {SelectionCriteria} from "../../utils/entities/contentProvider";
@Injectable({providedIn: 'root'})
export class CommunityService {
@ -72,57 +73,59 @@ export class CommunityService {
return this.http.post(url, community, options);
}
public updateSubjects(subjects: string[], fos: string[], sdg: string[]) {
let communityInfo: CommunityInfo = this.community.value;
communityInfo.subjects = subjects;
communityInfo.fos = fos;
communityInfo.sdg = sdg;
this.community.next(communityInfo);
}
public updateAdvancedCriteria(selectionCriteria: SelectionCriteria) {
let communityInfo: CommunityInfo = this.community.value;
communityInfo.selectionCriteria = selectionCriteria;
this.community.next(communityInfo);
}
public parseCommunity(data: any): CommunityInfo {
const resData = Array.isArray(data) ? data[0] : data;
const community: CommunityInfo = new CommunityInfo();
community['title'] = resData.name;
community['shortTitle'] = resData.shortName;
community['communityId'] = resData.id;
community['queryId'] = resData.queryId;
community['logoUrl'] = resData.logoUrl;
community['description'] = resData.description;
community['date'] = resData.creationDate;
community['zenodoCommunity'] = resData.zenodoCommunity;
community['status'] = 'all';
community.title = resData.name;
community.shortTitle = resData.shortName;
community.communityId = resData.id;
community.queryId = resData.queryId;
community.logoUrl = resData.logoUrl;
community.description = resData.description;
community.date = resData.creationDate;
community.zenodoCommunity = resData.zenodoCommunity;
community.status = 'all';
community.type = resData.type;
if (resData.hasOwnProperty('status')) {
community['status'] = resData.status;
community.status = resData.status;
const status = ['all', 'hidden', 'manager'];
if (status.indexOf(community['status']) === -1) {
community['status'] = 'hidden';
community.status = 'hidden';
}
}
if (resData.type != null) {
community['type'] = resData.type;
}
if (resData.managers != null) {
if (community['managers'] === undefined) {
community['managers'] = new Array<string>();
}
const managers = resData.managers;
const length = Array.isArray(managers) ? managers.length : 1;
for (let i = 0; i < length; i++) {
const manager = Array.isArray(managers) ? managers[i] : managers;
community.managers[i] = manager;
}
}
if (resData.subjects != null) {
if (community['subjects'] === undefined) {
community['subjects'] = new Array<string>();
}
const subjects = resData.subjects;
const length = Array.isArray(subjects) ? subjects.length : 1;
for (let i = 0; i < length; i++) {
const subject = Array.isArray(subjects) ? subjects[i] : subjects;
community.subjects[i] = subject;
}
community.subjects = Array.isArray(resData.subjects)?resData.subjects:[resData.subjects];
} else {
community.subjects = [];
}
if (resData.sdg != null) {
community.sdg = Array.isArray(resData.sdg)?resData.sdg:[resData.sdg];
} else {
community.sdg = [];
}
if (resData.fos != null) {
community.fos = Array.isArray(resData.fos)?resData.fos:[resData.fos];
} else {
community.fos = [];
}
if (resData.advancedConstraint != null) {
community.selectionCriteria = resData.advancedConstraint;
} else {
community.selectionCriteria = new SelectionCriteria();
}
return CommunityInfo.checkIsUpload(community);
}

4
connect/community/communityInfo.ts
View File

@ -1,5 +1,6 @@
import {StringUtils} from "../../utils/string-utils.class";
import {properties} from "../../../../environments/environment";
import {SelectionCriteria} from "../../utils/entities/contentProvider";
export class CommunityInfo {
title: string;
@ -18,6 +19,9 @@ export class CommunityInfo {
isUpload: boolean;
isSubscribed: boolean;
isManager: boolean;
fos: string[] = [];
sdg: string[] = []
selectionCriteria: SelectionCriteria;
public static checkIsUpload(response: CommunityInfo | CommunityInfo[]): any | any[] {
if (Array.isArray(response)) {

6
dashboard/divId/divIds.component.html
View File

@ -1,11 +1,5 @@
<div page-content>
<div header>
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
<div>
<div class="uk-text-background uk-text-bold uk-text-small">Manage Classes</div>
<h1 class="uk-h6 uk-margin-remove">Super Admin</h1>
</div>
</div>
<admin-tabs tab="class"></admin-tabs>
<ul class="uk-subnav uk-subnav-pill uk-margin-medium-top">
<li [class.uk-active]="filterForm.get('type').value === 'all'" class="uk-margin-small-bottom"><a

44
dashboard/divhelpcontent/class-help-content-form.component.html
View File

@ -1,27 +1,27 @@
<div page-content>
<div header>
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
<a routerLink="../" [queryParams]=" { 'pageId': pageId }" class="uk-button uk-button-link uk-margin-medium-right">
<icon name="west" ratio="2" [flex]="true"></icon>
</a>
<div>
<div class="uk-text-background uk-text-bold uk-text-small">
Admin Dashboard - {{pageHelpContent ? 'Update ' : 'Add new '}} class help text
<div class="uk-section-xsmall uk-margin-top uk-container">
<div class="uk-flex-middle uk-grid" uk-grid>
<div class="uk-width-expand">
<a routerLink="../" [queryParams]=" { 'pageId': pageId }" class="uk-flex uk-flex-middle uk-h5 uk-link-reset">
<span class="uk-margin-right">
<icon name="west" ratio="1.7" [flex]="true"></icon>
</span>
<h1 *ngIf="page" class="uk-h5 uk-margin-remove">
{{page.name}} - {{pageHelpContent ? 'Update ' : 'Add new '}} class help text
<span *ngIf="myForm.dirty" class="uk-text-large"> (unsaved changes)</span>
</h1>
</a>
</div>
<div class="uk-width-auto">
<button class="uk-button uk-button-default uk-margin-right"
(click)="resetCustom()" [class.uk-disabled]="!myForm.dirty"
[disabled]="!myForm.dirty || showLoading">Reset
</button>
<button class="uk-button uk-button-primary" [class.uk-disabled]="myForm.invalid || !myForm.dirty || myForm.disabled"
(click)="saveCustom()" [disabled]="myForm.invalid ||!myForm.dirty || myForm.disabled || showLoading">Save
</button>
</div>
<h1 *ngIf="page" class="uk-h6 uk-margin-remove">{{page.name}}<span *ngIf="myForm.dirty" class="uk-text-large"> (unsaved changes)</span></h1>
</div>
</div>
</div>
<div actions>
<div class="uk-section-xsmall uk-container">
<div class="uk-flex uk-flex-center uk-flex-right@m">
<button class="uk-button uk-button-default uk-margin-right"
(click)="resetCustom()" [class.uk-disabled]="!myForm.dirty"
[disabled]="!myForm.dirty || showLoading">Reset
</button>
<button class="uk-button uk-button-primary" [class.uk-disabled]="myForm.invalid || !myForm.dirty || myForm.disabled"
(click)="saveCustom()" [disabled]="myForm.invalid ||!myForm.dirty || myForm.disabled || showLoading">Save
</button>
</div>
</div>
</div>
@ -58,7 +58,7 @@
</div>
</div>
<div [ngClass]="parentClass">
<ckeditor (change)="contentChanged()"
<ckeditor #ckEditor (change)="contentChanged()"
[readonly]="false"
debounce="500"
[formControl]="myForm.get('content')"

102
dashboard/divhelpcontent/class-help-content-form.component.ts
View File

@ -1,4 +1,4 @@
import {Component, OnInit} from '@angular/core';
import {ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
import {Page} from '../../utils/entities/adminTool/page';
@ -9,13 +9,14 @@ import {Subscriber, Subscription, zip} from 'rxjs';
import {DivHelpContent} from '../../utils/entities/adminTool/div-help-content';
import {NotificationHandler} from "../../utils/notification-handler";
import {ClearCacheService} from "../../services/clear-cache.service";
import {CKEditorComponent} from "ng2-ckeditor";
@Component({
selector: 'class-content-form',
templateUrl: './class-help-content-form.component.html',
})
export class ClassContentFormComponent implements OnInit {
myForm: UntypedFormGroup;
portal: string;
parentClass: string;
@ -27,25 +28,27 @@ export class ClassContentFormComponent implements OnInit {
public showLoading: boolean = true;
private subs: Subscription[] = [];
public pageHelpContent: DivHelpContent;
@ViewChild('ckEditor') ckEditor: CKEditorComponent;
constructor(private route: ActivatedRoute, private _router: Router, private _fb: UntypedFormBuilder,
private _helpContentService: HelpContentService, private _clearCacheService: ClearCacheService) {
private cdr: ChangeDetectorRef, private _helpContentService: HelpContentService,
private _clearCacheService: ClearCacheService) {
}
ngOnInit() {
this.portal = (this.route.snapshot.data.portal) ? this.route.snapshot.data.portal : this.route.snapshot.params[this.route.snapshot.data.param];
this.parentClass = this.route.snapshot.data.parentClass;
this.subs.push(this.route.queryParams.subscribe(params => {
this.pageId = params['pageId'];
this.myForm = this.form;
this.pageContentId = params['pageContentId'];
if (!this.pageId) {
this._router.navigate(['../'], {relativeTo: this.route});
}
this.getInfo(this.pageId);
}));
this.pageId = params['pageId'];
this.myForm = this.form;
this.pageContentId = params['pageContentId'];
if (!this.pageId) {
this._router.navigate(['../'], {relativeTo: this.route});
}
this.getInfo(this.pageId);
}));
}
ngOnDestroy() {
this.subs.forEach(value => {
if (value instanceof Subscriber) {
@ -53,7 +56,7 @@ export class ClassContentFormComponent implements OnInit {
}
});
}
getInfo(pageId: string) {
this.showLoading = true;
let obs = zip(this._helpContentService.getPageByPortal(pageId, this.properties.adminToolsAPIURL, this.portal),
@ -66,25 +69,44 @@ export class ClassContentFormComponent implements OnInit {
}
this.setOptions(results[1]);
if (!this.pageContentId) {
this.updateForm(null);
this.updateForm(null);
this.showLoading = false;
this.initCKEditor();
} else {
this.subs.push(this._helpContentService.getDivHelpContent( this.pageContentId, this.properties.adminToolsAPIURL, this.portal).subscribe(pageHelpContent=>{
this.pageHelpContent = pageHelpContent;
if (this.properties.adminToolsPortalType != this.page.portalType) {
this._router.navigate(['../'], {relativeTo: this.route});
}
this.updateForm(this.pageHelpContent);
this.showLoading = false;
},
this.subs.push(this._helpContentService.getDivHelpContent(this.pageContentId, this.properties.adminToolsAPIURL, this.portal).subscribe(pageHelpContent => {
this.pageHelpContent = pageHelpContent;
if (this.properties.adminToolsPortalType != this.page.portalType) {
this._router.navigate(['../'], {relativeTo: this.route});
}
this.updateForm(this.pageHelpContent);
this.showLoading = false;
this.initCKEditor();
},
error => {
this.handleError('System error retrieving content by id '+ this.pageContentId, error)
}));
this.handleError('System error retrieving content by id ' + this.pageContentId, error)
}));
}
}));
}
private initCKEditor() {
this.cdr.detectChanges();
if (this.ckEditor) {
this.ckEditor.instance.on('mode', () => {
let editor = this.ckEditor.instance;
if (editor.mode === 'source') {
let editable = editor.editable();
editable.attachListener(editable, 'input', () => {
this.myForm.get('content').setValue(editor.getData());
this.myForm.get('content').markAsDirty();
this.cdr.detectChanges();
});
}
});
}
}
private updateForm(pageHelpContent: DivHelpContent) {
this.pageHelpContent = pageHelpContent;
this.myForm = this.form;
@ -93,48 +115,48 @@ export class ClassContentFormComponent implements OnInit {
this.myForm.get('divId').disable();
}
this.myForm.markAsPristine();
}
public setOptions(divIds) {
this.classOptions = [];
for(let divid of divIds){
this.classOptions.push({label:divid.name, value:divid._id});
for (let divid of divIds) {
this.classOptions.push({label: divid.name, value: divid._id});
}
}
public get form() {
return this._fb.group({
divId: ['', Validators.required],
content: ['', Validators.required],
isActive: true,
portal: this.portal,
_id : '',
_id: '',
});
}
public reset() {
this.myForm.patchValue({
divId: ['', Validators.required],
content: ['', Validators.required],
isActive: true,
portal: '',
_id : '',
_id: '',
});
this.myForm.markAsPristine();
}
handleError(message: string, error = null) {
if(error) {
if (error) {
console.error('Server responded: ' + error);
}
NotificationHandler.rise(message, 'danger');
this.showLoading = false;
}
public saveCustom() {
if (this.myForm.valid) {
this.showLoading = true;
@ -159,13 +181,13 @@ export class ClassContentFormComponent implements OnInit {
this.updateForm(this.pageHelpContent);
this.showLoading = false;
}
handleUpdateError(message: string, error) {
console.error('Server responded: ' + error);
NotificationHandler.rise(message, 'danger');
this.showLoading = false;
}
changeStatus() {
this.myForm.get('isActive').setValue(!this.myForm.get('isActive').value);
if (this.pageHelpContent && this.myForm.get('isActive').value != this.pageHelpContent.isActive || !this.pageHelpContent && !this.myForm.get('isActive').value) {
@ -174,7 +196,7 @@ export class ClassContentFormComponent implements OnInit {
this.myForm.get('isActive').markAsPristine()
}
}
contentChanged() {
if (this.pageHelpContent && this.myForm.get('content').value != this.pageHelpContent.content || !this.pageHelpContent && this.myForm.get('content').value != '') {
this.myForm.get('content').markAsDirty();

23
dashboard/divhelpcontent/class-help-contents.component.html
View File

@ -1,20 +1,15 @@
<div page-content>
<div header>
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
<a routerLink="../pages" class="uk-button uk-button-link uk-margin-medium-right">
<icon name="west" ratio="2" [flex]="true"></icon>
</a>
<div>
<div class="uk-text-background uk-text-bold uk-text-small">
Admin Dashboard - Manage class help texts
<div class="uk-section-xsmall uk-margin-top">
<div class="uk-flex-middle uk-grid" uk-grid>
<div class="uk-width-expand">
<a routerLink="../pages" class="uk-flex uk-flex-middle uk-h5 uk-link-reset">
<span class="uk-margin-right">
<icon name="west" ratio="1.7" [flex]="true"></icon>
</span>
<h1 *ngIf="page" class="uk-h5 uk-margin-remove">{{page.name}}</h1>
</a>
</div>
<h1 *ngIf="page" class="uk-h6 uk-margin-remove">{{page.name}}</h1>
</div>
</div>
</div>
<div actions>
<div class="uk-section-xsmall">
<div class="uk-flex-right@m uk-flex-center uk-flex-middle uk-grid" uk-grid>
<div search-input [disabled]="showLoading" [expandable]="true" [searchControl]="filterForm" searchInputClass="outer" placeholder="Search helptext" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1">
</div>
<div>

6
dashboard/entity/entities.component.html
View File

@ -1,11 +1,5 @@
<div page-content>
<div header>
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
<div>
<div class="uk-text-background uk-text-bold uk-text-small">Manage Entities</div>
<h1 class="uk-h6 uk-margin-remove">{{name?name:'Super Admin'}}</h1>
</div>
</div>
<admin-tabs tab="entity" [portal]="portal" [type]="type"></admin-tabs>
<ul *ngIf="!isPortalAdministrator" class="uk-subnav uk-subnav-pill uk-margin-medium-top">
<li [class.uk-active]="filterForm.get('status').value === 'all'"><a

44
dashboard/helpTexts/page-help-content-form.component.html
View File

@ -1,27 +1,27 @@
<div page-content>
<div header>
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
<a routerLink="../" [queryParams]=" { 'pageId': pageId }" class="uk-button uk-button-link uk-margin-right">
<icon name="west" ratio="2" [flex]="true"></icon>
</a>
<div>
<div class="uk-text-background uk-text-bold uk-text-small">
Admin Dashboard - {{pageHelpContent ? 'Update ' : 'Add new '}} page help text
<div class="uk-section-xsmall uk-margin-top uk-container">
<div class="uk-flex-middle uk-grid" uk-grid>
<div class="uk-width-expand">
<a routerLink="../" [queryParams]=" { 'pageId': pageId }" class="uk-flex uk-flex-middle uk-h5 uk-link-reset">
<span class="uk-margin-right">
<icon name="west" ratio="1.7" [flex]="true"></icon>
</span>
<h1 *ngIf="page" class="uk-h5 uk-margin-remove">
{{page.name}} - {{pageHelpContent ? 'Update ' : 'Add new '}} page help text
<span *ngIf="myForm.dirty" class="uk-text-large"> (unsaved changes)</span>
</h1>
</a>
</div>
<div class="uk-width-auto">
<button class="uk-button uk-button-default uk-margin-right"
(click)="resetCustom()" [class.uk-disabled]="!myForm.dirty"
[disabled]="!myForm.dirty || showLoading">Reset
</button>
<button class="uk-button uk-button-primary" [class.uk-disabled]="myForm.invalid || !myForm.dirty || myForm.disabled"
(click)="saveCustom()" [disabled]="myForm.invalid ||!myForm.dirty || myForm.disabled || showLoading">Save
</button>
</div>
<h1 *ngIf="page" class="uk-h6 uk-margin-remove">{{page.name}}<span *ngIf="myForm.dirty" class="uk-text-large"> (unsaved changes)</span></h1>
</div>
</div>
</div>
<div actions>
<div class="uk-section-xsmall uk-container">
<div class="uk-flex uk-flex-center uk-flex-right@m">
<button class="uk-button uk-button-default uk-margin-right"
(click)="resetCustom()" [class.uk-disabled]="!myForm.dirty"
[disabled]="!myForm.dirty || showLoading">Reset
</button>
<button class="uk-button uk-button-primary" [class.uk-disabled]="myForm.invalid || !myForm.dirty || myForm.disabled"
(click)="saveCustom()" [disabled]="myForm.invalid || !myForm.dirty || myForm.disabled || showLoading">Save
</button>
</div>
</div>
</div>
@ -62,7 +62,7 @@
</div>
</div>
<div [ngClass]="parentClass">
<ckeditor (change)="contentChanged()"
<ckeditor #ckEditor (change)="contentChanged()"
[readonly]="false"
debounce="500"
[formControl]="myForm.get('content')"

27
dashboard/helpTexts/page-help-content-form.component.ts
View File

@ -1,4 +1,4 @@
import {Component, OnInit} from '@angular/core';
import {ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
import {Page} from '../../utils/entities/adminTool/page';
@ -10,6 +10,7 @@ import {HelperFunctions} from '../../utils/HelperFunctions.class';
import {PageHelpContent} from '../../utils/entities/adminTool/page-help-content';
import {ClearCacheService} from "../../services/clear-cache.service";
import {NotificationHandler} from "../../utils/notification-handler";
import {CKEditorComponent} from "ng2-ckeditor";
@Component({
selector: 'page-content-form',
@ -29,9 +30,11 @@ export class PageContentFormComponent implements OnInit {
public showLoading: boolean = true;
private subs: Subscription[] = [];
public pageHelpContent: PageHelpContent;
@ViewChild('ckEditor') ckEditor: CKEditorComponent;
constructor(private route: ActivatedRoute, private _router: Router, private _fb: UntypedFormBuilder,
private _helpContentService: HelpContentService, private _clearCacheService: ClearCacheService) {
private cdr: ChangeDetectorRef, private _helpContentService: HelpContentService,
private _clearCacheService: ClearCacheService) {
}
ngOnInit() {
@ -80,12 +83,30 @@ export class PageContentFormComponent implements OnInit {
this.updateForm(this.pageHelpContent);
}
this.showLoading = false;
this.initCKEditor();
},
error => this.handleError('System error retrieving page with id: ' + pageId, error)
));
}
private initCKEditor() {
this.cdr.detectChanges();
if(this.ckEditor) {
this.ckEditor.instance.on('mode', () => {
let editor = this.ckEditor.instance;
if (editor.mode === 'source') {
let editable = editor.editable();
editable.attachListener(editable, 'input', () => {
this.myForm.get('content').setValue(editor.getData());
this.myForm.get('content').markAsDirty();
this.cdr.detectChanges();
});
}
});
}
}
private updateForm(pageHelpContent: PageHelpContent) {
this.pageHelpContent = pageHelpContent;
this.myForm = this.form;

23
dashboard/helpTexts/page-help-contents.component.html
View File

@ -1,20 +1,15 @@
<div page-content>
<div header>
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
<a routerLink="../pages" class="uk-button uk-button-link uk-margin-medium-right">
<icon name="west" ratio="2" [flex]="true"></icon>
</a>
<div>
<div class="uk-text-background uk-text-bold uk-text-small">
Admin Dashboard - Manage page help texts
<div class="uk-section-xsmall uk-margin-top">
<div class="uk-flex-middle uk-grid" uk-grid>
<div class="uk-width-expand">
<a routerLink="../pages" class="uk-flex uk-flex-middle uk-h5 uk-link-reset">
<span class="uk-margin-right">
<icon name="west" ratio="1.7" [flex]="true"></icon>
</span>
<h1 *ngIf="page" class="uk-h5 uk-margin-remove">{{page.name}}</h1>
</a>
</div>
<h1 *ngIf="page" class="uk-h6 uk-margin-remove">{{page.name}}</h1>
</div>
</div>
</div>
<div actions>
<div class="uk-section-xsmall">
<div class="uk-flex-right@m uk-flex-center uk-flex-middle uk-grid" uk-grid>
<div search-input [disabled]="showLoading" [expandable]="true" [searchControl]="filterForm" searchInputClass="outer" placeholder="Search helptext" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1">
</div>
<div>

9
dashboard/menu/menu.component.html
View File

@ -1,14 +1,5 @@
<div page-content>
<div header>
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
<ng-container *ngIf="showLogo">
<img [src]="entity | logoUrl" class="uk-margin-right uk-blend-multiply">
</ng-container>
<div>
<div class="uk-text-background uk-text-bold uk-text-small">Admin Dashboard - Manage Menus</div>
<h1 class="uk-h6 uk-margin-remove">{{name ? name : 'Super Admin'}}</h1>
</div>
</div>
<admin-tabs tab="menu" [portal]="portal" [type]="type"></admin-tabs>
</div>
<div actions>

6
dashboard/page/pages.component.html
View File

@ -1,11 +1,5 @@
<div page-content>
<div header>
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
<div>
<div class="uk-text-background uk-text-bold uk-text-small">Manage Pages</div>
<h1 class="uk-h6 uk-margin-remove">{{name ? name : 'Super Admin'}}</h1>
</div>
</div>
<admin-tabs tab="page" [portal]="portal" [type]="type"></admin-tabs>
<ul class="uk-subnav uk-subnav-pill uk-margin-medium-top">
<li [class.uk-active]="filterForm.get('type').value === 'all'"><a

6
dashboard/portal/portals.component.html
View File

@ -1,11 +1,5 @@
<div page-content>
<div header>
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
<div>
<div class="uk-text-background uk-text-bold uk-text-small">Manage Portals</div>
<h1 class="uk-h6 uk-margin-remove">Super Admin</h1>
</div>
</div>
<admin-tabs tab="portal"></admin-tabs>
<ul class="uk-subnav uk-subnav-pill uk-margin-medium-top">
<li [class.uk-active]="filterForm.get('type').value === 'all'" class="uk-margin-small-bottom"><a

4
dashboard/sharedComponents/page-content/page-content.component.ts
View File

@ -122,7 +122,9 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
if (typeof ResizeObserver !== "undefined" && subscription instanceof ResizeObserver) {
subscription.disconnect();
} else if (typeof ResizeObserver !== "undefined" && subscription instanceof IntersectionObserver) {
subscription.disconnect();
}
});

2
dashboard/sharedComponents/sidebar/layout.service.ts
View File

@ -85,7 +85,7 @@ export class LayoutService {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscriber) {
subscription.unsubscribe();
} else if (subscription instanceof ResizeObserver) {
} else if (typeof ResizeObserver !== "undefined" && subscription instanceof ResizeObserver) {
subscription.disconnect();
}
})

18
dashboard/sharedComponents/sidebar/sideBar.component.html
View File

@ -5,10 +5,14 @@
</aside>
<div class="uk-hidden@m">
<div id="sidebar_offcanvas" #sidebar_offcanvas [attr.uk-offcanvas]="'overlay: true'">
<div class="uk-offcanvas-bar uk-padding-remove-horizontal">
<button class="uk-offcanvas-close uk-icon uk-close">
<icon name="close" ratio="1.5" visuallyHidden="close menu"></icon>
</button>
<div class="uk-offcanvas-bar uk-padding-remove">
<nav class="uk-navbar uk-background-default" uk-sticky>
<div class="uk-navbar-right">
<button class="uk-navbar-toggle uk-icon uk-close" (click)="closeOffcanvas()">
<icon name="close" ratio="1.5" visuallyHidden="close menu"></icon>
</button>
</div>
</nav>
<ng-container *ngTemplateOutlet="menu; context: {mobile: true}"></ng-container>
</div>
</div>
@ -25,10 +29,10 @@
</a>
</div>
<div *ngIf="items.length > 0" class="menu_section uk-margin-large-top" [class.mobile]="mobile" style="min-height: 30vh">
<ul #nav class="uk-list uk-nav uk-nav-parent-icon"
<ul #nav class="uk-list uk-nav uk-nav-parent-icon" [class.uk-list-large]="mobile"
[class.uk-nav-default]="!mobile" [class.uk-nav-primary]="mobile" uk-nav="duration: 400">
<ng-template ngFor [ngForOf]="items" let-item>
<li [class.uk-active]="item.isActive"
<li [class.uk-active]="item.isActive" [ngClass]="item.customClass"
[class.uk-parent]="item.items.length > 0">
<a [routerLink]="getItemRoute(item)" [title]="item.title" (click)="item.items.length === 0?closeOffcanvas():null"
[queryParams]="item.route?item.params:null" [queryParamsHandling]="item.route?queryParamsHandling:null" class="uk-flex uk-flex-middle">
@ -38,7 +42,7 @@
<span [class.hide-on-close]="item.icon" class="uk-width-expand@l uk-text-truncate uk-margin-small-left">{{item.title}}</span>
</a>
<ul *ngIf="item.items?.length > 0 && (isBrowser || item.isActive)" class="uk-nav-sub">
<li *ngFor="let subItem of item.items"
<li *ngFor="let subItem of item.items" [ngClass]="subItem.customClass"
[class.uk-active]="subItem.isActive">
<a [routerLink]="subItem.route?subItem.route:null" [title]="subItem.title" (click)="closeOffcanvas()"
[queryParams]="subItem.route?subItem.params:null" [queryParamsHandling]="subItem.route?queryParamsHandling:null">

27
dashboard/sharedComponents/sidebar/sideBar.component.ts
View File

@ -32,6 +32,7 @@ export class SideBarComponent implements OnInit, AfterViewInit, OnDestroy, OnCha
@ViewChild("sidebar_offcanvas") sidebar_offcanvas: ElementRef;
public properties = properties;
private subscriptions: any[] = [];
private init: boolean = false;
constructor(private route: ActivatedRoute, private router: Router,
private sanitizer: DomSanitizer, private layoutService: LayoutService,
@ -48,18 +49,15 @@ export class SideBarComponent implements OnInit, AfterViewInit, OnDestroy, OnCha
}
ngAfterViewInit() {
if(this.nav && typeof UIkit !== "undefined") {
setTimeout(() => {
if(this.items[this.activeIndex]?.items?.length > 0) {
UIkit.nav(this.nav.nativeElement).toggle(this.activeIndex, true);
}
});
}
this.toggle(true);
}
ngOnChanges(changes: SimpleChanges) {
if(changes.activeItem || changes.activeSubItem || changes.items) {
this.setActiveMenuItem();
if(this.init && changes.items) {
this.toggle();
}
}
}
@ -72,6 +70,17 @@ export class SideBarComponent implements OnInit, AfterViewInit, OnDestroy, OnCha
});
}
toggle(init: boolean = false) {
this.init = this.init || init;
if(this.nav && typeof UIkit !== "undefined") {
setTimeout(() => {
if(this.items[this.activeIndex]?.items?.length > 0) {
UIkit.nav(this.nav.nativeElement).toggle(this.activeIndex, true);
}
});
}
}
get isBrowser() {
return this.platformId === 'browser';
}
@ -143,10 +152,6 @@ export class SideBarComponent implements OnInit, AfterViewInit, OnDestroy, OnCha
}
}
isTheActiveUrl(menuItemURL): boolean {
return (menuItemURL == this.router.url.split('?')[0])
}
public get open() {
return this.layoutService.open;
}

6
dashboard/sharedComponents/sidebar/sidebar-mobile-toggle/sidebar-mobile-toggle.component.ts
View File

@ -5,16 +5,16 @@ import {Subscription} from "rxjs";
@Component({
selector: 'sidebar-mobile-toggle',
template: `
<a *ngIf="activeSidebarItem" href="#sidebar_offcanvas" class="sidebar_mobile_toggle uk-link-reset uk-width-2-3 uk-flex uk-flex-middle" uk-toggle>
<a *ngIf="activeSidebarItem" href="#sidebar_offcanvas" class="sidebar_mobile_toggle uk-link-reset uk-width-3-5 uk-flex uk-flex-middle" uk-toggle>
<div *ngIf="activeSidebarItem.icon && (activeSidebarItem.icon.svg || activeSidebarItem.icon.name)" class="uk-width-auto">
<icon class="menu-icon" [customClass]="activeSidebarItem.icon.class" [name]="activeSidebarItem.icon.name" ratio="0.9" [svg]="activeSidebarItem.icon.svg" [flex]="true"></icon>
<icon class="menu-icon" [customClass]="activeSidebarItem.icon.class" [name]="activeSidebarItem.icon.name" ratio="0.8" [svg]="activeSidebarItem.icon.svg" [flex]="true"></icon>
</div>
<span class="uk-width-expand uk-text-truncate uk-margin-small-left uk-text-bolder">
{{activeSidebarItem.name}}
<span *ngIf="activeSidebarItem.subItem">- {{activeSidebarItem.subItem.name}}</span>
</span>
<div class="uk-width-auto uk-margin-small-left">
<icon name="arrow_drop_down" ratio="1.5" [flex]="true"></icon>
<icon name="arrow_right" ratio="1.4" [flex]="true"></icon>
</div>
</a>
`

2
dashboard/users/role-users/role-users.component.html
View File

@ -3,7 +3,7 @@
<ng-content></ng-content>
</div>
<div actions>
<div class="uk-section-xsmall">
<div class="uk-section-xsmall uk-margin-top">
<div class="uk-grid" uk-grid>
<div class="uk-flex uk-flex-left@m uk-flex-center uk-width-expand">
<ul class="uk-subnav uk-subnav-pill">

5
dashboard/users/role-users/role-users.component.ts
View File

@ -1,4 +1,4 @@
import {Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild} from '@angular/core';
import {Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild} from '@angular/core';
import {UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
import {AlertModal} from "../../../utils/modal/alert";
import {UserRegistryService} from "../../../services/user-registry.service";
@ -77,7 +77,6 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
this.updateLists();
this.userManagementService.getUserInfo().subscribe(user => {
this.user = user;
console.log(this.canDelete)
});
}
@ -278,7 +277,7 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
}
public isMe(userId: string) {
return userId.includes(this.user.id) && !this.isCurator;
return userId && userId.includes(this.user.id) && !this.isCurator;
}
public get isManager(): boolean {

2
dashboard/users/subscribers/subscribers.component.html
View File

@ -3,7 +3,7 @@
<ng-content></ng-content>
</div>
<div actions>
<div class="uk-section-xsmall">
<div class="uk-section-xsmall uk-margin-top">
<div class="uk-grid uk-flex-right@m uk-flex-center uk-flex-middle" uk-grid>
<div search-input [searchControl]="filterForm.get('keyword')" placeholder="Search members"
[expandable]="true" [disabled]="loading || !subscriberInvite || subscriberInvite.loading" searchInputClass="outer" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1">

15
error/errorPage.component.ts
View File

@ -7,6 +7,7 @@ import {properties} from "../../../environments/environment";
import {RESPONSE} from '../utils/tokens';
import {Response} from 'express';
import {OpenaireEntities} from "../utils/properties/searchFields";
import {EnvProperties} from "../utils/properties/env-properties";
@Component({
selector: 'error',
@ -23,7 +24,8 @@ import {OpenaireEntities} from "../utils/properties/searchFields";
</h3>
<h6 *ngIf="page_type" class="uk-margin-remove">
Not valid or missing {{page_type_name}} id.
<a *ngIf="page_type" routerLinkActive="router-link-active" [routerLink]="searchPage" [queryParams]="searchPagePrams">Search </a>another {{page_type_name}}?
<a *ngIf="page_type && properties.adminToolsPortalType !== 'eosc'" routerLinkActive="router-link-active" [routerLink]="searchPage" [queryParams]="searchPagePrams">Search </a>another {{page_type_name}}?
<a *ngIf="page_type && properties.adminToolsPortalType == 'eosc'" [href]="searchPage" target="_blank" class="custom-external">Search </a>another {{page_type_name}} in OpenAIRE?
</h6>
<br>
<div *ngIf="page !='-1'">
@ -48,7 +50,9 @@ export class ErrorPageComponent {
public page_type: string;
public searchPage: string;
public searchPagePrams: {};
public searchPagePramsString: string = "";
public page_type_name: string;
public properties: EnvProperties = properties;
constructor (private _location: Location, private _meta: Meta,
private _title: Title, private route: ActivatedRoute,
@ -84,17 +88,21 @@ export class ErrorPageComponent {
if (this.page_type == "publication") {
this.searchPage = properties.searchLinkToResults;
this.searchPagePrams = {type: 'publications'}
this.searchPagePramsString = "&type=publications";
this.page_type_name = OpenaireEntities.PUBLICATION.toLowerCase();
} else if (this.page_type == "software") {
this.searchPage = properties.searchLinkToResults;
this.searchPagePrams = {type: 'software'}
this.searchPagePramsString = "&type=software";
this.page_type_name = OpenaireEntities.SOFTWARE_SINGULAR.toLowerCase();
} else if (this.page_type == "dataset") {
this.searchPagePrams = {type: 'datasets'}
this.searchPagePramsString = "&type=datasets";
this.searchPage = properties.searchLinkToResults;
this.page_type_name = OpenaireEntities.DATASET.toLowerCase();
} else if (this.page_type == "orp") {
this.searchPagePrams = {type: 'orps'}
this.searchPagePramsString = "&type=orps";
this.searchPage = properties.searchLinkToResults;
this.page_type_name = OpenaireEntities.OTHER_SINGULAR.toLowerCase();
} else if (this.page_type == "organization") {
@ -113,6 +121,11 @@ export class ErrorPageComponent {
this.searchPage = properties.searchLinkToResults;
this.page_type_name = OpenaireEntities.RESULT.toLowerCase();
}
if(properties.adminToolsPortalType == 'eosc') {
this.searchPage = "https://explore.openaire.eu"+this.searchPage+this.searchPagePramsString;
}
}
});
}

25
fos/fos-selection/fos-selection.component.html
View File

@ -59,10 +59,6 @@
<div [class.uk-padding-small]="i !== 0" class="uk-text-capitalize uk-padding-remove-horizontal uk-padding-remove-bottom">
<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">
@ -70,21 +66,13 @@
<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 uk-text-truncate">
<label [class.uk-text-bolder]="subjects?.includes(subChild.id)">
<input [ngModel]="fosOptions.get(subChild.id)" (ngModelChange)="fosOptions.set(subChild.id, $event)"
<input [formControl]="getControl(subChild.id).get('checked')"
type="checkbox" class="uk-checkbox uk-margin-small-right">
<span [title]="subChild.id">{{subChild.id}}</span>
</label>
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subChild.id)}"
class="uk-link-text">
{{subChild.id}}
</a> -->
</div>
</div>
</div>
@ -97,27 +85,18 @@
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 uk-text-truncate">
<label [class.uk-text-bolder]="subjects?.includes(subSubItem.id)">
<input [ngModel]="fosOptions.get(subSubItem.id)" (ngModelChange)="fosOptions.set(subSubItem.id, $event)"
<input [formControl]="getControl(subSubItem.id).get('checked')"
type="checkbox" class="uk-checkbox uk-margin-small-right">
<span [innerHTML]="highlightKeyword(subSubItem.id)" [title]="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>

350
fos/fos-selection/fos-selection.component.ts
View File

@ -1,6 +1,5 @@
import {HttpClient} from "@angular/common/http";
import {ChangeDetectorRef, Component, ElementRef, Input, ViewChild} from "@angular/core";
import {FormBuilder, FormControl} from "@angular/forms";
import {FormBuilder, FormControl, UntypedFormArray} from "@angular/forms";
import {ActivatedRoute, Router} from "@angular/router";
import {Subscription} from "rxjs";
import {EnvProperties} from "../../utils/properties/env-properties";
@ -8,121 +7,122 @@ import {properties} from "../../../../environments/environment";
import {StringUtils} from "../../utils/string-utils.class";
import {debounceTime, distinctUntilChanged} from "rxjs/operators";
import {HelperFunctions} from "../../utils/HelperFunctions.class";
import {ISVocabulariesService} from "../../utils/staticAutoComplete/ISVocabularies.service";
import Timeout = NodeJS.Timeout;
declare var UIkit;
@Component({
selector: 'fos-selection',
templateUrl: 'fos-selection.component.html',
styleUrls: ['fos-selection.component.less']
selector: 'fos-selection',
templateUrl: 'fos-selection.component.html',
styleUrls: ['fos-selection.component.less']
})
export class FosSelectionComponent {
public properties: EnvProperties = properties;
@Input() subjects: string[];
public properties: EnvProperties = properties;
@Input() subjects: string[];
@Input() inModal: boolean = false;
@Input() contentHeight: number = 0;
@ViewChild("searchElement") searchElement: ElementRef;
@Input() contentHeight: number = 0;
@ViewChild("searchElement") searchElement: ElementRef;
public loading: boolean;
public fos: any[] = [];
public fosOptions: Map<string, boolean>;
public activeSection: string;
public loading: boolean;
public fos: any[] = [];
// public fosOptions: Map<string, boolean>;
public fosOptions: UntypedFormArray;
public activeSection: string;
public keywordControl: FormControl;
public keyword: string;
public keywordControl: FormControl;
public keyword: string;
public viewResults = [];
public viewResults = [];
public result = [];
public result = [];
private subscriptions: Subscription[] = [];
private observer: IntersectionObserver;
private timeout: Timeout;
@ViewChild('tabs') tabs: ElementRef;
public sliderInit: boolean = false;
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
) {}
constructor(
private vocabulariesService: ISVocabulariesService,
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();
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;
}
ngOnInit() {
this.loading = true;
this.vocabulariesService.getFos(properties).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.setObserver();
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.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() {
ngOnDestroy() {
for (let sub of this.subscriptions) {
sub.unsubscribe();
}
if(this.observer) {
this.observer.disconnect();
}
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(() => {
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(() => {
if(!this.inModal) {
this._router.navigate(['./'], {
fragment: entry.target.id,
@ -132,86 +132,112 @@ export class FosSelectionComponent {
} else {
this.activeSection = entry.target.id;
}
}, 200);
}
});
}, {threshold: 0.1, rootMargin: '-100px'});
this.fos.forEach(fos => {
let element = document.getElementById(fos.id);
if(element) {
this.observer.observe(element);
}
});
}
}, 200);
}
});
}, {threshold: 0.1, rootMargin: '-100px'});
this.fos.forEach(fos => {
let element = document.getElementById(fos.id);
if(element) {
this.observer.observe(element);
}
});
}
convertFosToOptions() {
this.fosOptions = new Map<string, boolean>();
this.fos.forEach(fos => {
this.fosOptions.set(fos.id, false);
if(fos.children) {
fos.children.forEach(child => {
this.fosOptions.set(child.id, false);
convertFosToOptions() {
this.fosOptions = this.fb.array([]);
this.fos.forEach(fos => {
this.fosOptions.push(this.fb.group({
id: this.fb.control(fos.id),
checked: this.fb.control(false)
}));
if(fos.children) {
fos.children.forEach(child => {
this.fosOptions.push(this.fb.group({
id: this.fb.control(fos.id),
checked: this.fb.control(false)
}));
if(child.children) {
child.children.forEach(child2 => {
this.fosOptions.set(child2.id, this.subjects?.includes(child2.id));
});
}
});
}
child.children.forEach(child2 => {
this.fosOptions.push(this.fb.group({
id: this.fb.control(child2.id),
checked: this.fb.control(this.subjects?.includes(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 reset() {
this.fosOptions.controls.forEach(control => {
control.get('checked').setValue(this.subjects?.includes(control.value.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));
}
public scrollToId(value: string) {
HelperFunctions.scrollToId(value);
this.activeSection = value;
}
public getSelectedSubjects() {
let checked = Array.from(this.fosOptions, function (entry) {
return {id: entry[0], checked: entry[1]};
});
return checked.filter(sub => sub.checked == true);
public scrollToId(value: string) {
HelperFunctions.scrollToId(value);
this.activeSection = value;
}
get calculatedHeight(): number {
if(this.contentHeight && this.searchElement) {
return this.contentHeight - this.searchElement.nativeElement.offsetHeight - 100;
}
public getSelectedSubjects() {
if(this.fosOptions) {
return this.fosOptions.value.filter(sub => sub.checked == true);
}
return [];
}
public getControl(id: string) {
if(this.fosOptions?.controls) {
return this.fosOptions.controls.find(control => control.value.id === id);
}
return null;
}
public get hasChanges() {
return !!this.fosOptions && this.fosOptions.dirty;
}
}
get calculatedHeight(): number {
if(this.contentHeight && this.searchElement) {
return this.contentHeight - this.searchElement.nativeElement.offsetHeight - 100;
}
}
}

4
fos/fos-selection/fos-selection.module.ts
View File

@ -1,6 +1,6 @@
import {CommonModule} from "@angular/common";
import {NgModule} from "@angular/core";
import {FormsModule} from "@angular/forms";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {InputModule} from "../../sharedComponents/input/input.module";
import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
import {LoadingModule} from "../../utils/loading/loading.module";
@ -8,7 +8,7 @@ import {FosSelectionComponent} from './fos-selection.component';
@NgModule({
imports: [
CommonModule, FormsModule, LoadingModule, InputModule, SearchInputModule
CommonModule, ReactiveFormsModule, LoadingModule, InputModule, SearchInputModule
],
declarations: [
FosSelectionComponent

5
fos/fos.component.ts
View File

@ -14,6 +14,7 @@ import {SEOService} from "../sharedComponents/SEO/SEO.service";
import {PiwikService} from "../utils/piwik/piwik.service";
import {debounceTime, distinctUntilChanged} from "rxjs/operators";
import Timeout = NodeJS.Timeout;
import {ISVocabulariesService} from "../utils/staticAutoComplete/ISVocabularies.service";
declare var UIkit;
@ -49,7 +50,7 @@ export class FosComponent implements OnInit, OnDestroy {
public sliderInit: boolean = false;
constructor(
private httpClient: HttpClient,
private vocabulariesService: ISVocabulariesService,
private fb: FormBuilder,
private location: Location,
private route: ActivatedRoute,
@ -70,7 +71,7 @@ export class FosComponent implements OnInit, OnDestroy {
this.updateUrl(this.url);
this.updateTitle(this.pageTitle);
this.updateDescription(this.pageDescription);
this.httpClient.get(properties.domain+'/assets/common-assets/vocabulary/fos.json').subscribe(data => {
this.vocabulariesService.getFos(properties).subscribe(data => {
this.fos = data['fos'];
this.convertFosToOptions();
if (typeof document !== 'undefined') {

35
landingPages/dataProvider/dataProvider.component.html
View File

@ -2,6 +2,16 @@
<div class="uk-visible@m landing uk-section uk-padding-remove tm-middle">
<div *ngIf="!isMobile" class="tm-main">
<div class="dataprovider">
<div *ngIf="properties.adminToolsPortalType == 'eosc'" class="eosc-explore-back-search-bar">
<div class="uk-light uk-container uk-container-large uk-padding-small uk-height-1-1">
<div class="uk-flex uk-flex-inline uk-flex-middle uk-height-1-1">
<a href="https://search.marketplace.eosc-portal.eu/" target="_self" class="uk-link-reset uk-flex uk-flex-middle uk-text-light uk-text-small">
<icon name="arrow_back" visuallyHidden="back" flex="true" ratio="0.7" customClass="uk-text-light"></icon>
<span class="uk-margin-small-left">Go to Search</span>
</a>
</div>
</div>
</div>
<div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid>
<!-- left box - actions -->
@ -38,22 +48,19 @@
<div id="landing-center-content" class="uk-width-expand uk-padding-remove uk-background-default">
<ng-template #graph_and_feedback_template>
<div class="uk-container uk-container-xlarge uk-flex uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!dataProviderInfo">
<div class="uk-container uk-container-xlarge uk-flex uk-flex-between uk-flex-wrap uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!dataProviderInfo">
<!-- Last Index Info-->
<div class="uk-width-2-3@m uk-width-1-2">
<icon name="graph" customClass="text-graph"></icon>
<span class="uk-margin-small-left uk-text-baseline">
<span class="uk-text-meta">Powered by </span>
<a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a>
</span>
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta">
. Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
</span>
</div>
<a href="https://graph.openaire.eu" target="_blank" class="uk-width-1-1 uk-width-auto@l">
<img src="assets/common-assets/openaire-badge-1.png" alt="Powered by OpenAIRE graph" style="height: 15px;">
</a>
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta uk-width-1-1 uk-width-auto@l">
Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
</span>
<!--Feedback-->
<div *ngIf="properties.reCaptchaSiteKey" class="uk-width-expand uk-text-right">
<span class="uk-text-meta uk-text-xsmall">See an issue?</span>
<a (click)="showFeedback = true; scroll()" class="uk-text-xsmall"> Report it here</a>
<div *ngIf="properties.reCaptchaSiteKey" class="uk-width-1-1 uk-width-auto@l">
<span class="uk-text-meta uk-text-xsmall">Found an issue? </span>
<a (click)="showFeedback = true; scroll()" class="uk-text-xsmall">Give us feedback</a>
</div>
</div>
</ng-template>

6
landingPages/dataProvider/dataProvider.component.ts
View File

@ -242,7 +242,11 @@ export class DataProviderComponent {
ngAfterViewInit() {
if (typeof document !== 'undefined') {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
if(document.getElementById("main-menu")) {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
} else {
this.offset = 0;
}
// let bottom = document.getElementById('bottom');
// if(bottom) {
// let observer = new IntersectionObserver(entries => {

12
landingPages/dataProvider/relatedDatasourcesTab.component.ts
View File

@ -46,10 +46,14 @@ import {OpenaireEntities} from "../../utils/properties/searchFields";
</a>
</td>
<td *ngIf="fetchResults.results.length > 0" class="uk-text-center">
<a
[queryParams]="routerHelper.createQueryParams(['f0', 'fv0', 'f1', 'fv1', 'f2', 'fv2', 'qf'], ['collectedfromdatasourceid', dataproviderId, 'resulthostingdatasourceid,or', dataproviderId, 'resulthostingdatasourceid', result.id, 'false'])"
routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToAdvancedResults"
(click)="onLinkClick()">
<a *ngIf="properties.adminToolsPortalType !== 'eosc'"
[queryParams]="routerHelper.createQueryParams(['f0', 'fv0', 'f1', 'fv1', 'f2', 'fv2', 'qf'], ['collectedfromdatasourceid', dataproviderId, 'resulthostingdatasourceid,or', dataproviderId, 'resulthostingdatasourceid', result.id, 'false'])"
routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToAdvancedResults"
(click)="onLinkClick()">
{{result.count | number}}
</a>
<a *ngIf="properties.adminToolsPortalType == 'eosc'" class="custom-external" target="_blank"
[href]="'https://explore.openaire.eu'+properties.searchLinkToAdvancedResults+'?f0=collectedfromdatasourceid&fv0='+dataproviderId+'&f1=resulthostingdatasourceid,or&fv1='+dataproviderId+'&f2=resulthostingdatasourceid&fv2='+result.id+'&qf=false'">
{{result.count | number}}
</a>
</td>

16
landingPages/landing-utils/fos.component.ts
View File

@ -17,12 +17,16 @@ import {StringUtils} from "../../utils/string-utils.class";
{{title}}
<span *ngIf="subjects && subjects.length > threshold && !viewAll">({{subjects.length}})</span>
</span>
<a *ngIf="properties.adminToolsPortalType == 'eosc' && subjects && subjects.length > threshold && !viewAll"
(click)="viewAllClick();" class="view-more-less-link uk-link uk-link-text uk-text-truncate">
View all
</a>
<!-- <a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;">View less</a> -->
<a *ngIf="subjects && subjects.length > threshold && !viewAll"
<a *ngIf="properties.adminToolsPortalType != 'eosc' && subjects && subjects.length > threshold && !viewAll"
(click)="viewAllClick();" class="view-more-less-link uk-link uk-link-text uk-text-truncate">
View all & suggest
</a>
<a *ngIf="(subjects && subjects.length <= threshold || viewAll)" class="uk-link uk-link-text uk-text-truncate"
<a *ngIf="properties.adminToolsPortalType != 'eosc' && (subjects && subjects.length <= threshold || viewAll)" class="uk-link uk-link-text uk-text-truncate"
(click)="suggestClick();">Suggest</a>
</div>
<div class="uk-margin-small-top">
@ -42,10 +46,14 @@ import {StringUtils} from "../../utils/string-utils.class";
</div>
<div class="uk-width-expand">
<div *ngFor="let subject of subjects.slice(0, viewAll?subjects.length:threshold); let i=index" class="uk-text-truncate">
<a [routerLink]="properties.searchLinkToResults"
[queryParams]="{'fos': urlEncodeAndQuote(subject)}">
<a *ngIf="properties.adminToolsPortalType != 'eosc'"
[routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subject)}">
{{subject}}
</a>
<a *ngIf="properties.adminToolsPortalType == 'eosc'" class="custom-external" target="_blank"
[href]="'https://explore.openaire.eu'+properties.searchLinkToResults+'?fos='+urlEncodeAndQuote(subject)">
{{subject}}
</a>
</div>
</div>
</div>

15
landingPages/landing-utils/sdg.component.ts
View File

@ -18,11 +18,14 @@ import {StringUtils} from "../../utils/string-utils.class";
{{title}}
<span *ngIf="subjects && subjects.length > threshold && !viewAll">({{subjects.length}})</span>
</span>
<a *ngIf="properties.adminToolsPortalType == 'eosc' && subjects && subjects.length > threshold && !viewAll"
(click)="viewAllClick();" class="view-more-less-link uk-link uk-link-text uk-text-truncate">
View all</a>
<!-- <a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;">View less</a> -->
<a *ngIf="subjects && subjects.length > threshold && !viewAll"
<a *ngIf="properties.adminToolsPortalType != 'eosc' && subjects && subjects.length > threshold && !viewAll"
(click)="viewAllClick();" class="view-more-less-link uk-link uk-link-text uk-text-truncate">
View all & suggest</a>
<a *ngIf="(subjects && subjects.length <= threshold || viewAll)" class="uk-link uk-link-text uk-text-truncate"
<a *ngIf="properties.adminToolsPortalType != 'eosc' && (subjects && subjects.length <= threshold || viewAll)" class="uk-link uk-link-text uk-text-truncate"
(click)="suggestClick();">Suggest</a>
</div>
<div class="uk-margin-small-bottom uk-flex">
@ -30,10 +33,14 @@ import {StringUtils} from "../../utils/string-utils.class";
loading="lazy" alt="sdg_colors" style="width:27px; height:27px">
<div class="uk-margin-small-left">
<div *ngFor="let subject of subjects.slice(0, viewAll?subjects.length:threshold); let i=index" class="uk-text-truncate">
<a [routerLink]=" properties.searchLinkToResults"
[queryParams]="{'sdg': urlEncodeAndQuote(subject)}">
<a *ngIf="properties.adminToolsPortalType != 'eosc'"
[routerLink]=" properties.searchLinkToResults" [queryParams]="{'sdg': urlEncodeAndQuote(subject)}">
{{subject}}
</a>
<a *ngIf="properties.adminToolsPortalType == 'eosc'" class="custom-external" target="_blank"
[href]="'https://explore.openaire.eu'+properties.searchLinkToResults+'?sdg='+urlEncodeAndQuote(subject)">
{{subject}}
</a>
</div>
</div>
</div>

35
landingPages/organization/organization.component.html
View File

@ -2,6 +2,16 @@
<div id="tm-main" class="uk-visible@m landing uk-section uk-padding-remove tm-middle">
<div *ngIf="!isMobile" class="tm-main">
<div class="organization">
<div *ngIf="properties.adminToolsPortalType == 'eosc'" class="eosc-explore-back-search-bar">
<div class="uk-light uk-container uk-container-large uk-padding-small uk-height-1-1">
<div class="uk-flex uk-flex-inline uk-flex-middle uk-height-1-1">
<a href="https://search.marketplace.eosc-portal.eu/" target="_self" class="uk-link-reset uk-flex uk-flex-middle uk-text-light uk-text-small">
<icon name="arrow_back" visuallyHidden="back" flex="true" ratio="0.7" customClass="uk-text-light"></icon>
<span class="uk-margin-small-left">Go to Search</span>
</a>
</div>
</div>
</div>
<div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid>
<!-- left column -->
<!-- <div id="landing-left-sidebar" *ngIf="organizationInfo" class="uk-visible@s uk-padding-remove-horizontal">
@ -37,22 +47,19 @@
<!-- Graph and feedback -->
<ng-template #graph_and_feedback_template>
<div class="uk-container uk-container-xlarge uk-flex uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!organizationInfo">
<div class="uk-container uk-container-xlarge uk-flex uk-flex-between uk-flex-wrap uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!organizationInfo">
<!-- Last Index Info-->
<div class="uk-width-2-3@m uk-width-1-2">
<icon name="graph" customClass="text-graph"></icon>
<span class="uk-margin-small-left uk-text-baseline">
<span class="uk-text-meta">Powered by </span>
<a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a>
</span>
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta">
. Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
</span>
</div>
<a href="https://graph.openaire.eu" target="_blank" class="uk-width-1-1 uk-width-auto@l">
<img src="assets/common-assets/openaire-badge-1.png" alt="Powered by OpenAIRE graph" style="height: 15px;">
</a>
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta uk-width-1-1 uk-width-auto@l">
Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
</span>
<!--Feedback-->
<div *ngIf="properties.reCaptchaSiteKey" class="uk-width-expand uk-text-right">
<span class="uk-text-meta uk-text-xsmall">See an issue?</span>
<a (click)="showFeedback = true; scroll()" class="uk-text-xsmall"> Report it here</a>
<div *ngIf="properties.reCaptchaSiteKey" class="uk-width-1-1 uk-width-auto@l">
<span class="uk-text-meta uk-text-xsmall">Found an issue? </span>
<a (click)="showFeedback = true; scroll()" class="uk-text-xsmall">Give us feedback</a>
</div>
</div>
</ng-template>

6
landingPages/organization/organization.component.ts
View File

@ -204,7 +204,11 @@ export class OrganizationComponent {
ngAfterViewInit() {
if (typeof document !== 'undefined') {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
if(document.getElementById("main-menu")) {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
} else {
this.offset = 0;
}
// let bottom = document.getElementById('bottom');
// if(bottom) {
// let observer = new IntersectionObserver(entries => {

35
landingPages/project/project.component.html
View File

@ -2,6 +2,16 @@
<div class=" uk-visible@m landing uk-section uk-padding-remove tm-middle">
<div *ngIf="!isMobile" class="tm-main">
<div class="project">
<div *ngIf="properties.adminToolsPortalType == 'eosc'" class="eosc-explore-back-search-bar">
<div class="uk-light uk-container uk-container-large uk-padding-small uk-height-1-1">
<div class="uk-flex uk-flex-inline uk-flex-middle uk-height-1-1">
<a href="https://search.marketplace.eosc-portal.eu/" target="_self" class="uk-link-reset uk-flex uk-flex-middle uk-text-light uk-text-small">
<icon name="arrow_back" visuallyHidden="back" flex="true" ratio="0.7" customClass="uk-text-light"></icon>
<span class="uk-margin-small-left">Go to Search</span>
</a>
</div>
</div>
</div>
<div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid>
<!-- left box - actions -->
@ -75,22 +85,19 @@
<div id="landing-center-content" class="uk-width-expand uk-padding-remove uk-background-default">
<ng-template #graph_and_feedback_template>
<div class="uk-container uk-container-xlarge uk-flex uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!projectInfo">
<div class="uk-container uk-container-xlarge uk-flex uk-flex-between uk-flex-wrap uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!projectInfo">
<!-- Last Index Info-->
<div class="uk-width-2-3@m uk-width-1-2">
<icon name="graph" customClass="text-graph"></icon>
<span class="uk-margin-small-left uk-text-baseline">
<span class="uk-text-meta">Powered by </span>
<a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a>
</span>
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta">
. Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
</span>
</div>
<a href="https://graph.openaire.eu" target="_blank" class="uk-width-1-1 uk-width-auto@l">
<img src="assets/common-assets/openaire-badge-1.png" alt="Powered by OpenAIRE graph" style="height: 15px;">
</a>
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta uk-width-1-1 uk-width-auto@l">
Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
</span>
<!--Feedback-->
<div *ngIf="properties.reCaptchaSiteKey" class="uk-width-expand uk-text-right">
<span class="uk-text-meta uk-text-xsmall">See an issue?</span>
<a (click)="showFeedback = true; scroll()" class="uk-text-xsmall"> Report it here</a>
<div *ngIf="properties.reCaptchaSiteKey" class="uk-width-1-1 uk-width-auto@l">
<span class="uk-text-meta uk-text-xsmall">Found an issue? </span>
<a (click)="showFeedback = true; scroll()" class="uk-text-xsmall">Give us feedback</a>
</div>
</div>
</ng-template>

6
landingPages/project/project.component.ts
View File

@ -260,7 +260,11 @@ export class ProjectComponent {
ngAfterViewInit() {
if (typeof document !== 'undefined') {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
if(document.getElementById("main-menu")) {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
} else {
this.offset = 0;
}
// let bottom = document.getElementById('bottom');
// if(bottom) {
// let observer = new IntersectionObserver(entries => {

33
landingPages/result/resultLanding.component.html
View File

@ -2,6 +2,16 @@
<div id="tm-main" class="uk-visible@m landing uk-section uk-padding-remove tm-middle">
<div *ngIf="!isMobile" class="tm-main">
<div class="publication">
<div *ngIf="properties.adminToolsPortalType == 'eosc'" class="eosc-explore-back-search-bar">
<div class="uk-light uk-container uk-container-large uk-padding-small uk-height-1-1">
<div class="uk-flex uk-flex-inline uk-flex-middle uk-height-1-1">
<a href="https://search.marketplace.eosc-portal.eu/" target="_self" class="uk-link-reset uk-flex uk-flex-middle uk-text-light uk-text-small">
<icon name="arrow_back" visuallyHidden="back" flex="true" ratio="0.7" customClass="uk-text-light"></icon>
<span class="uk-margin-small-left">Go to Search</span>
</a>
</div>
</div>
</div>
<div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid>
<!-- left box/sidebar - actions -->
@ -71,21 +81,18 @@
<div id="landing-center-content" class="uk-width-expand uk-padding-remove uk-background-default">
<ng-template #graph_and_feedback_template>
<div class="uk-container uk-container-xlarge uk-flex uk-margin-small-bottom uk-margin-small-top" [class.uk-invisible]="!resultLandingInfo">
<div class="uk-container uk-container-xlarge uk-flex uk-flex-between uk-flex-wrap uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!resultLandingInfo">
<!-- Last Index Info-->
<div class="uk-width-2-3@m uk-width-1-2">
<icon name="graph" customClass="text-graph"></icon>
<span class="uk-margin-small-left uk-text-baseline">
<span class="uk-text-meta">Powered by </span>
<a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a>
</span>
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta">
. Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
</span>
</div>
<a href="https://graph.openaire.eu" target="_blank" class="uk-width-1-1 uk-width-auto@l">
<img src="assets/common-assets/openaire-badge-1.png" alt="Powered by OpenAIRE graph" style="height: 15px;">
</a>
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta uk-width-1-1 uk-width-auto@l">
Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
</span>
<!--Feedback-->
<div *ngIf="properties.reCaptchaSiteKey" class="uk-width-expand uk-text-right">
<span class="uk-text-meta uk-text-xsmall">See an issue? </span>
<div *ngIf="properties.reCaptchaSiteKey" class="uk-width-1-1 uk-width-auto@l">
<span class="uk-text-meta uk-text-xsmall">Found an issue? </span>
<a (click)="feedbackClicked()" class="uk-text-xsmall">Give us feedback</a>
</div>
</div>

7
landingPages/result/resultLanding.component.ts
View File

@ -261,7 +261,12 @@ export class ResultLandingComponent {
ngAfterViewInit() {
if (typeof document !== 'undefined') {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
// if(properties.adminToolsPortalType !== 'eosc') {
if(document.getElementById("main-menu")) {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
} else {
this.offset = 0;
}
// let bottom = document.getElementById('bottom');
// if(bottom) {
// let observer = new IntersectionObserver(entries => {

2
login/user.component.ts
View File

@ -43,7 +43,7 @@ export class UserComponent {
this.loginUrl = this.properties.loginUrl;
if (typeof document !== 'undefined') {
this.server = false;
this.userManagementsService.updateUserInfo(() => {
this.userManagementsService.updateUserInfo( () => {
this.user = this.userManagementsService.user;
this.loggedIn = !!this.user;
this.errorMessage = "";

114
login/userMini.component.ts
View File

@ -1,10 +1,16 @@
import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Session, User} from './utils/helper.class';
import {RouterHelper} from '../utils/routerHelper.class';
import {Subscriber} from "rxjs";
import {MenuItem} from "../sharedComponents/menu";
import {UserManagementService} from "../services/user-management.service";
import {
NotificationConfiguration,
NotificationsSidebarComponent
} from "../notifications/notifications-sidebar/notifications-sidebar.component";
declare var UIkit;
@Component({
selector: 'user-mini',
@ -25,6 +31,7 @@ import {UserManagementService} from "../services/user-management.service";
<ul class="uk-nav uk-navbar-dropdown-nav">
<ng-container *ngFor="let item of userMenuItems ">
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization"
[ngClass]="item.customClass"
[class.uk-active]="isTheActiveSubMenu(item)">
<a *ngIf="item.route" [routerLink]="item.route"
[queryParams]="item.params">{{item.title}}</a>
@ -41,42 +48,67 @@ import {UserManagementService} from "../services/user-management.service";
<icon name="login" ratio="1.5" [flex]="true"></icon>
</a>
<a *ngIf="loggedIn && mobileView" href="#account" class="login uk-icon" uk-toggle>
<svg height="30" width="30">
<circle cx="15" cy="15" r="15" stroke-width="2"></circle>
<text x="50%" y="50%" text-anchor="middle" dy=".35em" font-size="14">
{{firstLetters ? firstLetters : 'AN'}}
</text>
</svg>
<span class="uk-position-relative">
<svg height="30" width="30">
<circle cx="15" cy="15" r="15" stroke-width="2"></circle>
<text x="50%" y="50%" text-anchor="middle" dy=".35em" font-size="14">
{{firstLetters ? firstLetters : 'AN'}}
</text>
</svg>
<span *ngIf="notificationsSidebar?.unreadCount > 0" class="uk-text-secondary notification">
<icon name="circle" ratio="0.8"></icon>
</span>
</span>
</a>
<div *ngIf="loggedIn" id="account" class="uk-offcanvas" uk-offcanvas="flip: true; overlay: true">
<div class="uk-offcanvas-bar uk-padding-remove-horizontal">
<button class="uk-offcanvas-close uk-icon uk-close">
<icon name="close" ratio="1.5" visuallyHidden="close menu"></icon>
</button>
<div class="uk-padding uk-flex uk-flex-middle">
<div class="login">
<svg height="60" width="60" style="max-width: 60px; height: 60px;">
<circle cx="30" cy="30" r="20" stroke-width="2"></circle>
<text x="50%" y="50%" text-anchor="middle" dy=".4em" font-size="16">
{{firstLetters ? firstLetters : 'AN'}}
</text>
</svg>
<div *ngIf="loggedIn" #account id="account" class="uk-offcanvas" uk-offcanvas="flip: true; overlay: true;">
<div class="uk-offcanvas-bar uk-padding-remove">
<nav class="uk-navbar uk-background-default" uk-sticky>
<div class="uk-navbar-right">
<button class="uk-navbar-toggle uk-icon uk-close" (click)="closeCanvas(account)">
<icon name="close" ratio="1.5" visuallyHidden="close account"></icon>
</button>
</div>
<h5 class="uk-margin-small-left uk-margin-remove-bottom uk-margin-remove-top uk-text-truncate">
{{user.fullname}}
</h5>
</div>
<ul class="uk-nav uk-nav-primary uk-list uk-margin-top uk-nav-parent-icon" uk-nav>
<ng-container *ngFor="let item of userMenuItems ">
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
<a *ngIf="item.route" [routerLink]="item.route" (click)="closeCanvas()">{{item.title}}</a>
<a *ngIf="!item.route && item.url" (click)="closeCanvas()" [href]="item.url" [class.custom-external]="item.target != '_self'"
[target]="item.target">{{item.title}}</a>
</li>
</ng-container>
<li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
<li><a (click)="logOut()">Log out</a></li>
</ul>
</nav>
<ng-container *ngIf="!showNotifications">
<div class="uk-padding uk-padding-remove-top uk-flex uk-flex-middle">
<div class="login">
<svg height="60" width="60" style="max-width: 60px; height: 60px;">
<circle cx="30" cy="30" r="20" stroke-width="2"></circle>
<text x="50%" y="50%" text-anchor="middle" dy=".4em" font-size="16">
{{firstLetters ? firstLetters : 'AN'}}
</text>
</svg>
</div>
<h5 class="uk-margin-small-left uk-margin-remove-bottom uk-margin-remove-top uk-text-truncate">
{{user.fullname}}
</h5>
</div>
<ul class="uk-nav uk-nav-primary uk-list uk-margin-top uk-nav-parent-icon" uk-nav>
<ng-container *ngFor="let item of userMenuItems ">
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization" [ngClass]="item.customClass">
<a *ngIf="item.route" [routerLink]="item.route" (click)="closeCanvas(account)">{{item.title}}</a>
<a *ngIf="!item.route && item.url" (click)="closeCanvas(account)" [href]="item.url" [class.custom-external]="item.target != '_self'"
[target]="item.target">{{item.title}}</a>
</li>
</ng-container>
<ng-container *ngIf="notificationConfiguration">
<li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
<li *ngIf="notificationConfiguration">
<a (click)="toggleNotifications()">
<div class="uk-flex uk-flex-middle uk-width-1-1">
<span class="uk-width-expand">Notifications</span>
<icon *ngIf="notificationsSidebar?.unreadCount > 0" class="uk-margin-small-left uk-text-secondary uk-margin-right" name="circle" [flex]="true" ratio="0.8"></icon>
</div>
</a>
</li>
</ng-container>
<li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
<li><a (click)="logOut()">Log out</a></li>
</ul>
</ng-container>
<notification-sidebar [class.uk-hidden]="!showNotifications" #notificationsSidebar *ngIf="notificationConfiguration" [mobile]="true"
(showNotificationsEmitter)="showNotifications = $event"
[configuration]="notificationConfiguration" [user]="user"></notification-sidebar>
</div>
</div>
</li>
@ -95,7 +127,9 @@ export class UserMiniComponent implements OnInit, OnChanges {
@Input() logInUrl;
@Input() logOutUrl;
@Input() cookieDomain;
@Output() closeCanvasEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
@Input() notificationConfiguration: NotificationConfiguration;
@ViewChild('notificationsSidebar') notificationsSidebar: NotificationsSidebarComponent;
public showNotifications = false;
private subscriptions = [];
constructor(private router: Router, private route: ActivatedRoute, private userManagementService: UserManagementService) {
@ -122,8 +156,8 @@ export class UserMiniComponent implements OnInit, OnChanges {
});
}
closeCanvas() {
this.closeCanvasEmitter.emit(true);
closeCanvas(canvas) {
UIkit.offcanvas(canvas).hide();
}
initUser() {
@ -166,4 +200,8 @@ export class UserMiniComponent implements OnInit, OnChanges {
this.firstLetters += matches.join('');
}
}
toggleNotifications() {
this.showNotifications = !this.showNotifications;
}
}

3
login/userMiniModule.module.ts
View File

@ -7,10 +7,11 @@ import {UserMiniComponent} from "./userMini.component";
import {IconsModule} from "../utils/icons/icons.module";
import {IconsService} from "../utils/icons/icons.service";
import {login} from "../utils/icons/icons";
import {NotificationsSidebarModule} from "../notifications/notifications-sidebar/notifications-sidebar.module";
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule, IconsModule
CommonModule, FormsModule, RouterModule, IconsModule, NotificationsSidebarModule
],
declarations: [
UserMiniComponent

5
monitor/services/stakeholder.service.ts
View File

@ -58,7 +58,10 @@ export class StakeholderService {
}
async getStakeholderAsync() {
await this.promise;
if(this.promise) {
await this.promise;
this.promise = null;
}
this.clearSubscriptions();
return this.stakeholderSubject.getValue();
}

6
notifications/notifications-sidebar/notification-sidebar.component.less
View File

@ -5,7 +5,7 @@
}
#notifications .notification-list {
padding: @global-medium-gutter 0 @global-medium-gutter @global-medium-gutter;
padding: 0 @global-medium-gutter;
}
#notifications .notification-list:not(:last-child) {
@ -17,7 +17,7 @@
#notifications .notification-list ul {
overflow: auto;
padding: 20px @global-medium-gutter 20px 0;
height: calc(100% - 104px);
height: calc(100% - 150px);
}
#notifications .notification-list ul > li:nth-child(n+2){
@ -29,6 +29,6 @@
}
#notifications .notification {
padding: @global-medium-gutter @global-medium-gutter;
padding: 0 @global-medium-gutter @global-medium-gutter @global-medium-gutter;
overflow: auto;
}

155
notifications/notifications-sidebar/notifications-sidebar.component.ts
View File

@ -1,4 +1,14 @@
import {Component, Input, OnDestroy, OnInit, ViewEncapsulation} from "@angular/core";
import {
Component,
ElementRef,
EventEmitter,
Input,
OnDestroy,
OnInit,
Output,
ViewChild,
ViewEncapsulation
} from "@angular/core";
import {Notification} from "../notifications";
import {NotificationService} from "../notification.service";
import {Subscription} from "rxjs";
@ -8,71 +18,92 @@ import {Option} from "../../sharedComponents/input/input.component";
declare var UIkit;
export class NotificationConfiguration {
availableGroups: Option[] = [];
entities: string[] = [];
service: string;
}
@Component({
selector: 'notification-sidebar',
template: `
<div id="notifications-switcher" uk-toggle="" href="#notifications" class="uk-offcanvas-switcher uk-flex uk-flex-middle uk-flex-center">
<div *ngIf="!mobile" id="notifications-switcher" uk-toggle="" href="#notifications" class="uk-offcanvas-switcher uk-flex uk-flex-middle uk-flex-center">
<icon name="mail" ratio="1.5" customClass="uk-text-background" flex="true" visuallyHidden="Notifications"></icon>
<span [class.uk-hidden]="unreadCount === 0" class="uk-offcanvas-count uk-flex uk-flex-middle uk-flex-center">
{{unreadCount}}
</span>
</div>
<div id="notifications" class="uk-offcanvas" uk-offcanvas="flip: true; overlay: true;">
<div class="uk-offcanvas-bar uk-padding-remove">
<button class="uk-offcanvas-close uk-close uk-icon" type="button">
<icon name="close" ratio="1.5" visuallyHidden="close"></icon>
</button>
<ng-template [ngIf]="!notification">
<div class="notification-list uk-position-relative">
<h4>Notifications</h4>
<div class="uk-flex uk-flex-right@m uk-flex-center uk-padding uk-padding-remove-vertical">
<button [disabled]="unreadCount === 0" (click)="readAll()" class="uk-button uk-button-link">Mark As Read ({{unreadCount}})</button>
</div>
<h6 *ngIf="notifications.length == 0" class="uk-position-center uk-margin-remove">No notifications</h6>
<ul *ngIf="notifications.length > 0" class="uk-list">
<li *ngFor="let notification of notifications; let i=index" class="clickable" (click)="select(notification)">
<div class="uk-grid uk-grid-small" uk-grid>
<notification-user [name]="notification.name" [surname]="notification.surname" [outline]="true"
colorClass="uk-text-secondary"></notification-user>
<div class="uk-width-expand">
<div class="uk-width-1-1 uk-flex uk-flex-middle">
<div class="uk-width-expand multi-line-ellipsis lines-2">
<p class="uk-margin-remove" [class.uk-text-light-grey]="notification.read">
{{notification.preview}}
</p>
</div>
<div class="uk-margin-left uk-flex uk-flex-center uk-text-secondary">
<icon *ngIf="!notification.read" name="circle" ratio="0.6" visuallyHidden="unread"></icon>
</div>
</div>
<span class="uk-text-secondary uk-text-small">{{getDate(notification.date)}}</span>
</div>
</div>
</li>
</ul>
</div>
<div *ngIf="availableGroups.length > 0" [availableGroups]="availableGroups" [entities]="entities" [service]="service" notify-form class="notify"></div>
</ng-template>
<div *ngIf="notification" class="notification">
<div class="uk-flex uk-flex-middle uk-margin-medium-bottom">
<span class="uk-text-secondary clickable" (click)="back($event)">
<icon ratio="1.5" name="west" visuallyHidden="back"></icon>
<ng-template #main>
<ng-container *ngIf="!notification">
<div class="notification-list uk-position-relative">
<h4 class="uk-flex uk-flex-middle clickable uk-margin-remove-top uk-margin-medium-bottom" (click)="showNotificationsEmitter.emit(false)">
<span *ngIf="mobile" class="uk-margin-right">
<icon ratio="1.5" name="west" visuallyHidden="back" [flex]="true"></icon>
</span>
<h4 *ngIf="notification.title" class="uk-text-bold uk-margin-left">{{notification.title}}</h4>
<div class="uk-text-bold">Notifications</div>
</h4>
<div class="uk-flex uk-flex-right@m uk-flex-center uk-padding uk-padding-remove-vertical">
<button [disabled]="unreadCount === 0" (click)="readAll()" class="uk-button uk-button-link">Mark As Read ({{unreadCount}})</button>
</div>
<div class="uk-flex uk-flex-middle uk-margin-medium-bottom">
<notification-user [name]="notification.name" [surname]="notification.surname" colorClass="uk-text-secondary" [outline]="true"></notification-user>
<div class="uk-margin-left">
{{notification.name + ' ' + notification.surname}}<br>
<span style="opacity: 0.8;" class="uk-text-small uk-margin-small-top">
<h6 *ngIf="notifications.length == 0" class="uk-position-center uk-margin-remove">No notifications</h6>
<ul *ngIf="notifications.length > 0" class="uk-list">
<li *ngFor="let notification of notifications; let i=index" class="clickable" (click)="select(notification)">
<div class="uk-grid uk-grid-small" uk-grid>
<notification-user [name]="notification.name" [surname]="notification.surname" [outline]="true"
colorClass="uk-text-secondary"></notification-user>
<div class="uk-width-expand">
<div class="uk-width-1-1 uk-flex uk-flex-middle">
<div class="uk-width-expand multi-line-ellipsis lines-2">
<p class="uk-margin-remove" [class.uk-text-light-grey]="notification.read">
{{notification.preview}}
</p>
</div>
<div class="uk-margin-left uk-flex uk-flex-center uk-text-secondary">
<icon *ngIf="!notification.read" name="circle" ratio="0.6" visuallyHidden="unread"></icon>
</div>
</div>
<span class="uk-text-secondary uk-text-small">{{getDate(notification.date)}}</span>
</div>
</div>
</li>
</ul>
</div>
<div *ngIf="configuration.availableGroups.length > 0" [availableGroups]="configuration.availableGroups" [entities]="configuration.entities" [service]="configuration.service" notify-form class="notify"></div>
</ng-container>
<div *ngIf="notification" class="notification">
<h4 class="uk-flex uk-flex-middle clickable uk-margin-remove-top uk-margin-medium-bottom" (click)="back($event)">
<span class="uk-margin-right">
<icon ratio="1.5" name="west" visuallyHidden="back" [flex]="true"></icon>
</span>
<div *ngIf="notification.title" class="uk-text-bold">{{notification.title}}</div>
</h4>
<div class="uk-flex uk-flex-middle uk-margin-medium-bottom">
<notification-user [name]="notification.name" [surname]="notification.surname" colorClass="uk-text-secondary" [outline]="true"></notification-user>
<div class="uk-margin-left">
{{notification.name + ' ' + notification.surname}}<br>
<span style="opacity: 0.8;" class="uk-text-small uk-margin-small-top">
{{notification.date | date:'medium'}} ({{getDate(notification.date)}})
</span>
</div>
</div>
<div [innerHTML]="notification.message | safeHtml">
</div>
</div>
<div [innerHTML]="notification.message | safeHtml">
</div>
</div>
</ng-template>
<div *ngIf="!mobile" #canvas id="notifications" class="uk-offcanvas" uk-offcanvas="flip: true; overlay: true;">
<div class="uk-offcanvas-bar uk-padding-remove">
<nav class="uk-navbar uk-background-default" uk-sticky>
<div class="uk-navbar-right">
<button class="uk-navbar-toggle uk-icon uk-close" (click)="closeCanvas(canvas)">
<icon name="close" ratio="1.5" visuallyHidden="close account"></icon>
</button>
</div>
</nav>
<ng-container *ngTemplateOutlet="main"></ng-container>
</div>
</div>
<div *ngIf="mobile" id="notifications">
<ng-container *ngTemplateOutlet="main"></ng-container>
</div>
`,
styleUrls: ['notification-sidebar.component.less'],
@ -81,21 +112,21 @@ declare var UIkit;
export class NotificationsSidebarComponent implements OnInit, OnDestroy {
@Input()
public user: User;
@Input()
public mobile: boolean = false;
@Input()
public configuration: NotificationConfiguration;
@Output()
public showNotificationsEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
public notifications: Notification[] = [];
@Input()
public availableGroups: Option[] = [];
@Input()
public entities: string[] = [];
@Input()
public service: string;
public notification: Notification;
private subscriptions: any[] = [];
constructor(private notificationService: NotificationService) {
}
ngOnInit() {
this.subscriptions.push(this.notificationService.getNotifications(this.service).subscribe(notifications => {
this.subscriptions.push(this.notificationService.getNotifications(this.configuration.service).subscribe(notifications => {
this.notifications = notifications;
}, error => {
this.notifications = [];
@ -141,8 +172,12 @@ export class NotificationsSidebarComponent implements OnInit, OnDestroy {
this.notification = null;
}
closeCanvas(canvas) {
UIkit.offcanvas(canvas).hide();
}
readAll() {
this.notificationService.markAllAsRead(this.service).subscribe(() => {
this.notificationService.markAllAsRead(this.configuration.service).subscribe(() => {
this.notifications.forEach(notification => {
notification.read = true;
});

76
role-verification/role-verification.component.ts
View File

@ -1,4 +1,4 @@
import {AfterViewInit, Component, Input, OnDestroy, OnInit, ViewChild} from "@angular/core";
import {AfterViewInit, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild} from "@angular/core";
import {User} from "../login/utils/helper.class";
import {ActivatedRoute, Router} from "@angular/router";
import {UserManagementService} from "../services/user-management.service";
@ -35,7 +35,7 @@ import {ClearCacheService} from "../services/clear-cache.service";
</div>
</modal-alert>
<modal-alert #memberModal [overflowBody]="false" *ngIf="service == 'monitor'" (cancelOutput)="cancel()"
(alertOutput)="verifyMember()" [okDisabled]="code.invalid || loading">
(alertOutput)="verifyMember()" [okDisabled]="(code.invalid || loading) && !isMember">
<div *ngIf="!isMember">
<div>
You have been invited to join <span class="uk-text-bold">{{name}}</span> Monitor Dashboard as a member.
@ -108,7 +108,8 @@ export class RoleVerificationComponent implements OnInit, OnDestroy, AfterViewIn
private emailService: EmailService,
private userManagementService: UserManagementService,
private userRegistryService: UserRegistryService,
private clearCacheService: ClearCacheService) {
private clearCacheService: ClearCacheService,
private cdr: ChangeDetectorRef) {
}
ngOnInit() {
@ -122,33 +123,42 @@ export class RoleVerificationComponent implements OnInit, OnDestroy, AfterViewIn
this.paramsSubscription.unsubscribe();
}
this.paramsSubscription = this.route.queryParams.subscribe(params => {
if (params && params['verify']) {
if (this.user) {
this.subscriptions.push(this.userRegistryService.getInvitation(params['verify']).subscribe(verification => {
this.verification = verification;
if (this.user.email === this.verification.email.toLowerCase() && this.id === this.verification.entity && this.type === this.verification.type) {
if (this.verification.verificationType === 'manager') {
this.openManagerModal();
} else if (this.verification.verificationType === 'member' && this.service === "monitor") {
this.openMemberModal();
if (params) {
this.isMember = !!params['isMember'];
this.cdr.detectChanges();
if(params['verify'] && !this.isMember) {
if (this.user) {
this.subscriptions.push(this.userRegistryService.getInvitation(params['verify']).subscribe(verification => {
this.verification = verification;
if (this.user.email === this.verification.email.toLowerCase() && this.id === this.verification.entity && this.type === this.verification.type) {
if (this.verification.verificationType === 'manager') {
this.openManagerModal();
} else if (this.verification.verificationType === 'member' && this.service === "monitor") {
this.openMemberModal();
} else {
this.openErrorModal();
}
} else {
this.openErrorModal();
}
} else {
}, error => {
this.openErrorModal();
}
}, error => {
this.openErrorModal();
}));
} else {
this.router.navigate(['user-info'], {
queryParams: {
'errorCode': LoginErrorCodes.NOT_LOGIN,
'redirectUrl': this.router.url
},
relativeTo: this.route
});
}));
} else {
this.router.navigate(['user-info'], {
queryParams: {
'errorCode': LoginErrorCodes.NOT_LOGIN,
'redirectUrl': this.router.url
},
relativeTo: this.route
});
}
} else if(this.isMember) {
this.openMemberModal();
}
} else {
this.isMember = false;
this.cdr.detectChanges();
}
});
}));
@ -177,12 +187,18 @@ export class RoleVerificationComponent implements OnInit, OnDestroy, AfterViewIn
public openMemberModal() {
this.error = null;
this.isMember = false;
if(this.isMember) {
this.memberModal.cancelButton = false;
this.memberModal.okButtonText = 'Close';
} else {
this.memberModal.cancelButton = true;
this.memberModal.okButtonText = 'Accept';
}
this.memberModal.okButtonLeft = false;
this.memberModal.okButtonText = 'Accept';
this.memberModal.stayOpen = true;
this.memberModal.cancelButtonText = 'Cancel';
this.memberModal.alertTitle = 'Member Invitation';
this.cdr.detectChanges();
this.memberModal.open();
}
@ -239,9 +255,7 @@ export class RoleVerificationComponent implements OnInit, OnDestroy, AfterViewIn
this.loading = false;
this.error = null;
this.userManagementService.updateUserInfo(() => {
this.memberModal.cancelButton = false;
this.memberModal.okButtonText = 'Close';
this.isMember = true;
this.router.navigate([], {queryParams: {'verify': null, 'isMember': true}});
});
}, error => {
this.loading = false;
@ -257,6 +271,6 @@ export class RoleVerificationComponent implements OnInit, OnDestroy, AfterViewIn
}
cancel() {
this.router.navigate([this.router.url.split('?')[0]]);
this.router.navigate([], {queryParams: {'verify': null, 'isMember': null}});
}
}

20
sdg/sdg-selection/sdg-selection.component.html
View File

@ -4,25 +4,25 @@
<div *ngIf="!loading">
<div class="uk-flex uk-flex-around">
<div>
<div *ngFor="let item of firstColumn; let i = index"
<div *ngFor="let control of firstColumn; let i = index"
class="uk-margin-bottom">
<label [class.uk-text-bolder]="subjects?.includes(item.id)">
<input [(ngModel)]="item.checked"
<label [class.uk-text-bolder]="subjects?.includes(control.value.id)">
<input [formControl]="control.get('checked')"
type="checkbox" class="uk-checkbox uk-margin-small-right">
<span class="uk-text-uppercase uk-margin-xsmall-right">Goal</span>
<span>{{item.id}}</span>
<span *ngIf="isFeedback" class="uk-text-uppercase uk-margin-xsmall-right">Goal</span>
<span>{{control.value.id}}</span>
</label>
</div>
</div>
<div>
<div *ngFor="let item of secondColumn; let i = index"
<div *ngFor="let control of secondColumn; let i = index"
class="uk-margin-bottom">
<label [class.uk-text-bolder]="subjects?.includes(item.id)">
<input [(ngModel)]="item.checked"
<label [class.uk-text-bolder]="subjects?.includes(control.value.id)">
<input [formControl]="control.get('checked')"
type="checkbox" class="uk-checkbox uk-margin-small-right">
<span *ngIf="i !== secondColumn.length - 1"
<span *ngIf="i !== secondColumn.length - 1 && isFeedback"
class="uk-text-uppercase uk-margin-xsmall-right">Goal</span>
<span>{{item.id}}</span>
<span>{{control.value.id}}</span>
</label>
</div>
</div>

54
sdg/sdg-selection/sdg-selection.component.ts
View File

@ -1,8 +1,10 @@
import {HttpClient} from "@angular/common/http";
import {Component, Input} from "@angular/core";
import {UntypedFormArray, UntypedFormBuilder} from "@angular/forms";
import {properties} from "../../../../environments/environment";
import {EnvProperties} from "../../utils/properties/env-properties";
import {StringUtils} from "../../utils/string-utils.class";
import {ISVocabulariesService} from "../../utils/staticAutoComplete/ISVocabularies.service";
@Component({
selector: 'sdg-selection',
@ -13,38 +15,70 @@ export class SdgSelectionComponent {
public properties: EnvProperties = properties;
@Input() subjects: string[];
@Input() entityType: string;
@Input() isFeedback: boolean = true;
public loading: boolean;
public sdgs: any = [];
public sdgs: UntypedFormArray;
constructor(
private httpClient: HttpClient
private vocabulariesService: ISVocabulariesService,
private fb: UntypedFormBuilder
) {}
ngOnInit() {
this.loading = true;
this.httpClient.get(this.properties.domain+'/assets/common-assets/vocabulary/sdg.json').subscribe(data => {
this.sdgs = this.fb.array([]);
this.vocabulariesService.getSDGs(properties).subscribe(data => {
data['sdg'].forEach(element => {
this.sdgs.push({code: element.code, id: element.id, label: element.label, html: element.html, checked: this.subjects?.includes(element.id)});
// this.sdgs.push({code: element.code, id: element.id, label: element.label, html: element.html, checked: this.subjects?.includes(element.id)});
this.sdgs.push(this.fb.group({
code: this.fb.control(element.code),
id: this.fb.control(element.id),
label: this.fb.control(element.label),
html: this.fb.control(element.html),
checked: this.fb.control(this.subjects?.includes(element.id))
}));
});
this.sdgs.push({code: '18', id: 'No SDGs are relevant for this ' + this.getEntityName(this.entityType), label: 'Not relevant', html: 'Not relevant', checked: false});
this.loading = false;
if(this.isFeedback) {
// // this.sdgs.push({code: '18', id: 'No SDGs are relevant for this ' + this.getEntityName(this.entityType), label: 'Not relevant', html: 'Not relevant', checked: false});
this.sdgs.push(this.fb.group({
code: this.fb.control('18'),
id: this.fb.control('No SDGs are relevant for this ' + this.getEntityName(this.entityType)),
label: this.fb.control('Not relevant'),
html: this.fb.control('Not relevant'),
checked: this.fb.control(false)
}));
}
this.loading = false;
});
}
public reset() {
this.sdgs.controls.forEach(control => {
control.get('checked').setValue(this.subjects?.includes(control.value.id));
});
}
public get firstColumn() {
return this.sdgs.slice(0, this.sdgs.length/2);
return this.sdgs.controls.slice(0, Math.ceil(this.sdgs.length/2));
}
public get secondColumn() {
return this.sdgs.slice(this.sdgs.length/2, this.sdgs.length);
return this.sdgs.controls.slice(Math.ceil(this.sdgs.length/2), this.sdgs.length);
}
public getSelectedSubjects() {
return this.sdgs.filter(sub => sub.checked == true);
if(this.sdgs) {
return this.sdgs.value.filter(sub => sub.checked == true);
}
return [];
}
public get hasChanges() {
return !!this.sdgs && this.sdgs.dirty;
}
private getEntityName (entityType:string) {
return StringUtils.getEntityName(entityType, false);
}
}
}

4
sdg/sdg-selection/sdg-selection.module.ts
View File

@ -1,13 +1,13 @@
import {CommonModule} from "@angular/common";
import {NgModule} from "@angular/core";
import {FormsModule} from "@angular/forms";
import {ReactiveFormsModule} 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
CommonModule, ReactiveFormsModule, LoadingModule, InputModule
],
declarations: [
SdgSelectionComponent

5
sdg/sdg.component.ts
View File

@ -11,6 +11,7 @@ import {Router} from '@angular/router';
import {Meta, Title} from "@angular/platform-browser";
import {SEOService} from "../sharedComponents/SEO/SEO.service";
import {PiwikService} from "../utils/piwik/piwik.service";
import {ISVocabulariesService} from "../utils/staticAutoComplete/ISVocabularies.service";
@Component({
selector: 'sdg',
@ -36,7 +37,7 @@ export class SdgComponent implements OnInit, OnDestroy {
subscriptions: Subscription[] = [];
constructor(
private httpClient: HttpClient, private refineFieldResultsService: RefineFieldResultsService,
private vocabulariesService: ISVocabulariesService, private refineFieldResultsService: RefineFieldResultsService,
private _router: Router,
private _meta: Meta,
private _title: Title,
@ -54,7 +55,7 @@ export class SdgComponent implements OnInit, OnDestroy {
this.updateUrl(this.url);
this.updateTitle(this.pageTitle);
this.updateDescription(this.pageDescription);
this.httpClient.get(properties.domain+'/assets/common-assets/vocabulary/sdg.json').subscribe(data => {
this.vocabulariesService.getSDGs(properties).subscribe(data => {
this.sdgs = data['sdg'];
});
let refineParams = null;

14
searchPages/searchUtils/newSearchPage.component.html
View File

@ -328,16 +328,12 @@
[isDisabled]="disabled" [isMobile]="mobile">
</search-paging>
</div>
<div *ngIf="showIndexInfo && searchUtils.status !== errorCodes.LOADING" class="uk-margin-large-top uk-grid uk-child-width-1-2 uk-text-small">
<div *ngIf="showIndexInfo && searchUtils.status !== errorCodes.LOADING" class="uk-margin-large-top uk-flex uk-flex-between uk-flex-wrap uk-text-small">
<!-- Last Index Info-->
<div>
<icon name="graph" customClass="text-graph"></icon>
<span class="uk-margin-small-left uk-text-baseline">
<span class="uk-text-meta">Powered by </span>
<a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a>
</span>
</div>
<div class="uk-text-right">
<a href="https://graph.openaire.eu" target="_blank" class="uk-width-1-1 uk-width-auto@m">
<img src="assets/common-assets/openaire-badge-1.png" alt="Powered by OpenAIRE graph" style="height: 17px;">
</a>
<div class="uk-width-1-1 uk-width-auto@m">
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta">
<a *ngIf="properties.showLastIndexInformationLink" class="uk-link" [href]="properties.lastIndexInformationLink" target="_blank">Last update</a>
<span *ngIf="!(properties.showLastIndexInformationLink)">Last update</span>

82
searchPages/searchUtils/portal-search-result.component.html
View File

@ -2,12 +2,12 @@
uk-height-match="target: .uk-card-default; row: false">
<errorMessages [status]="[status]" [type]="'results'"></errorMessages>
<li *ngFor="let result of results">
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-flex uk-flex-column uk-flex-center"
<div class="uk-card uk-card-default uk-position-relative uk-flex uk-flex-column uk-flex-center"
[ngClass]="result.type" [class.uk-disabled]="!hasPermission(result)">
<div *ngIf="type === 'community' && result.isSubscribed" [class.uk-position-top-left]="!isMobile" [class.uk-position-top-right]="isMobile" class="uk-text-background uk-text-center uk-padding-small uk-text-uppercase uk-text-bold">
<span>Member</span>
</div>
<div [ngClass]="isMobile?'uk-flex uk-flex-middle uk-margin-bottom':'uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-column uk-flex-middle'">
<div [ngClass]="isMobile?'uk-flex uk-flex-middle uk-margin-left uk-margin-small-top':'uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-column uk-flex-middle'">
<div *ngIf="type === 'community' && result.status === 'manager'">
<icon [name]="visibilityIcon.get('RESTRICTED')" [ratio]="isMobile?0.8:1.2" [flex]="true"></icon>
<span class="uk-text-small uk-text-capitalize" [class.uk-text-xsmall]="isMobile" [class.uk-margin-xsmall-left]="isMobile">restricted</span>
@ -21,51 +21,53 @@
<span class="uk-text-small uk-text-capitalize" [class.uk-text-xsmall]="isMobile" [class.uk-margin-xsmall-left]="isMobile">{{result.visibility.toLowerCase()}}</span>
</ng-container>
</div>
<div class="uk-grid uk-flex uk-flex-middle uk-margin-medium-right" uk-grid>
<div class="uk-width-expand">
<h5 [class.uk-h5]="!isMobile" [class.uk-h6]="isMobile">
<div *ngIf="type === 'community'" [title]="result.shortTitle" class="uk-margin-bottom">
<a *ngIf="directLink && hasPermission(result)" [href]="getCommunityPageUrl(result)" class="uk-link-heading uk-text-truncate uk-display-inline-block" target="_blank">{{(result.title) ? result.title : result.shortTitle}}</a>
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" class="uk-link-heading uk-text-truncate uk-display-inline-block">{{(result.title) ? result.title : result.shortTitle}}</a>
<div *ngIf="!hasPermission(result)" class="uk-text-truncate uk-display-inline-block">{{(result.title) ? result.title : result.shortTitle}}</div>
<div class="uk-card-body">
<div class="uk-grid uk-flex uk-flex-middle uk-margin-medium-right" uk-grid>
<div class="uk-width-expand">
<h5 [class.uk-h5]="!isMobile" [class.uk-h6]="isMobile">
<div *ngIf="type === 'community'" [title]="result.shortTitle" class="uk-margin-bottom">
<a *ngIf="directLink && hasPermission(result)" [href]="getCommunityPageUrl(result)" class="uk-link-heading uk-text-truncate uk-display-inline-block" target="_blank">{{(result.title) ? result.title : result.shortTitle}}</a>
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" class="uk-link-heading uk-text-truncate uk-display-inline-block">{{(result.title) ? result.title : result.shortTitle}}</a>
<div *ngIf="!hasPermission(result)" class="uk-text-truncate uk-display-inline-block">{{(result.title) ? result.title : result.shortTitle}}</div>
</div>
<div *ngIf="type === 'stakeholder'" [title]="result.index_shortName" class="uk-margin-bottom">
<a *ngIf="directLink && hasPermission(result)" [href]="getStakeholderPageUrl(result)" class="uk-link-heading uk-text-truncate uk-display-inline-block" target="_blank">{{(result.name) ? result.name : result.index_shortName}}</a>
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" class="uk-link-heading uk-text-truncate uk-display-inline-block">{{(result.name) ? result.name : result.index_shortName}}</a>
<div *ngIf="!hasPermission(result)" class="uk-text-truncate uk-display-inline-block">{{(result.name) ? result.name : result.index_shortName}}</div>
</div>
</h5>
<div class="uk-text-small">
<div *ngIf="result.date || result.creationDate" class="uk-flex uk-flex-middle uk-margin-small-bottom">
<span class="uk-text-meta">Creation Date: </span>
<span class="uk-margin-small-left" *ngIf="result.date">{{result.date | date:'dd-MM-yyyy'}}</span>
<span class="uk-margin-small-left"
*ngIf="result.creationDate">{{result.creationDate | date:'dd-MM-yyyy'}}</span>
</div>
<div *ngIf="showType && result.type" class="uk-flex uk-flex-middle">
<span class="uk-text-meta">Type:</span>
<span class="uk-margin-small-left uk-text-capitalize">{{mapType(result.type)}}</span>
</div>
</div>
<div *ngIf="type === 'stakeholder'" [title]="result.index_shortName" class="uk-margin-bottom">
<a *ngIf="directLink && hasPermission(result)" [href]="getStakeholderPageUrl(result)" class="uk-link-heading uk-text-truncate uk-display-inline-block" target="_blank">{{(result.name) ? result.name : result.index_shortName}}</a>
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" class="uk-link-heading uk-text-truncate uk-display-inline-block">{{(result.name) ? result.name : result.index_shortName}}</a>
<div *ngIf="!hasPermission(result)" class="uk-text-truncate uk-display-inline-block">{{(result.name) ? result.name : result.index_shortName}}</div>
</div>
</h5>
<div class="uk-text-small">
<div *ngIf="result.date || result.creationDate" class="uk-flex uk-flex-middle uk-margin-small-bottom">
<span class="uk-text-meta">Creation Date: </span>
<span class="uk-margin-small-left" *ngIf="result.date">{{result.date | date:'dd-MM-yyyy'}}</span>
<span class="uk-margin-small-left"
*ngIf="result.creationDate">{{result.creationDate | date:'dd-MM-yyyy'}}</span>
</div>
<div *ngIf="showType && result.type" class="uk-flex uk-flex-middle">
<span class="uk-text-meta">Type:</span>
<span class="uk-margin-small-left uk-text-capitalize">{{mapType(result.type)}}</span>
<div *ngIf="result.description && !isMobile" class="uk-margin-top uk-text-small multi-line-ellipsis lines-3">
<p class="uk-text-meta" [innerHTML]="result.description"></p>
</div>
</div>
<div *ngIf="result.description && !isMobile" class="uk-margin-top uk-text-small multi-line-ellipsis lines-3">
<p class="uk-text-meta" [innerHTML]="result.description"></p>
<div class="uk-width-1-5@m uk-width-1-3 uk-flex-first@m">
<a *ngIf="directLink && hasPermission(result)" [href]="(type === 'community')?getCommunityPageUrl(result):getStakeholderPageUrl(result)" target="_blank">
<ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container>
</a>
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)">
<ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container>
</a>
<div *ngIf="!hasPermission(result)">
<ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container>
</div>
</div>
</div>
<div class="uk-width-1-5@m uk-width-1-3 uk-flex-first@m">
<a *ngIf="directLink && hasPermission(result)" [href]="(type === 'community')?getCommunityPageUrl(result):getStakeholderPageUrl(result)" target="_blank">
<ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container>
</a>
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)">
<ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container>
</a>
<div *ngIf="!hasPermission(result)">
<ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container>
</div>
<div *ngIf="result.isManager" class="uk-flex uk-flex-right uk-margin-top">
<manage [communityId]="result.communityId" [alias]="result.alias"></manage>
</div>
</div>
<div *ngIf="result.isManager" class="uk-flex uk-flex-right uk-margin-top">
<manage [communityId]="result.communityId" [alias]="result.alias"></manage>
</div>
</div>
</li>
</ul>

171
sharedComponents/input/input.component.ts
View File

@ -10,15 +10,18 @@ import {
OnDestroy,
OnInit,
Output,
QueryList,
SimpleChanges,
ViewChild
ViewChild,
ViewChildren
} from "@angular/core";
import {AbstractControl, UntypedFormArray, UntypedFormControl, ValidatorFn} from "@angular/forms";
import {HelperFunctions} from "../../utils/HelperFunctions.class";
import {Subscription} from "rxjs";
import {BehaviorSubject, Subscription} from "rxjs";
import {EnvProperties} from "../../utils/properties/env-properties";
import {properties} from "../../../../environments/environment";
import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
import {element} from "protractor";
export type InputType = 'text' | 'URL' | 'logoURL' | 'autocomplete' | 'autocomplete_soft' | 'textarea' | 'select' | 'chips';
@ -63,7 +66,8 @@ declare var UIkit;
[attr.uk-tooltip]="(tooltip && !focused && type !== 'chips' && type !== 'textarea' && (formControl.value || hint || placeholderInfo?.label))?('title: ' + (formControl.value ?getTooltip(formControl.value):(hint?hint:placeholderInfo?.label)) + '; delay: 500; pos: bottom-left'):null">
<ng-template [ngIf]="type === 'text' || type === 'URL' || type === 'logoURL'">
<input #input class="input" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
[type]="password?'password':'text'" [formControl]="formAsControl" [class.uk-text-truncate]="!focused">
[type]="password?'password':'text'" [formControl]="formAsControl"
[class.uk-text-truncate]="!focused">
</ng-template>
<ng-template [ngIf]="type === 'textarea'">
<textarea #textArea class="input" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
@ -77,7 +81,8 @@ declare var UIkit;
class="input uk-width-expand uk-text-truncate">{{getLabel(formControl.value)}}</div>
</ng-container>
<ng-container *ngIf="!placeholderInfo?.static">
<div *ngIf="!getLabel(formControl.value)" class="input uk-width-expand uk-text-truncate">{{noValueSelected}}</div>
<div *ngIf="!getLabel(formControl.value)"
class="input uk-width-expand uk-text-truncate">{{noValueSelected}}</div>
<div *ngIf="getLabel(formControl.value)"
class="input uk-width-expand uk-text-truncate">{{getLabel(formControl.value)}}</div>
</ng-container>
@ -85,10 +90,16 @@ declare var UIkit;
<ng-template [ngIf]="type === 'autocomplete'">
<input *ngIf="focused" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
#searchInput class="input" [formControl]="searchControl" [class.uk-text-truncate]="!focused">
<div *ngIf="!focused && !selectable" class="input uk-text-truncate">{{getLabel(formAsControl.value)}}</div>
<ng-container *ngIf="!focused && selectable" >
<ng-container *ngIf="!focused && !selectable">
<div *ngIf="!getLabel(formControl.value)"
class="input placeholder uk-text-truncate">{{placeholderInfo?.static ? placeholderInfo.label : getLabel(formAsControl.value)}}</div>
<div *ngIf="getLabel(formControl.value)"
class="input uk-text-truncate">{{getLabel(formAsControl.value)}}</div>
</ng-container>
<ng-container *ngIf="!focused && selectable">
<div *ngIf="!getLabel(formControl.value)" class="input uk-text-truncate">{{noValueSelected}}</div>
<div *ngIf="getLabel(formControl.value)" class="input uk-text-truncate">{{getLabel(formControl.value)}}</div>
<div *ngIf="getLabel(formControl.value)"
class="input uk-text-truncate">{{getLabel(formControl.value)}}</div>
</ng-container>
</ng-template>
<ng-template [ngIf]="type === 'autocomplete_soft'">
@ -96,43 +107,49 @@ declare var UIkit;
[formControl]="formAsControl" [class.uk-text-truncate]="!focused">
</ng-template>
<ng-template [ngIf]="type === 'chips'">
<div class="uk-grid uk-grid-small uk-grid-row-collapse uk-width-expand" uk-grid>
<div *ngFor="let chip of formAsArray.controls; let i=index" [class.uk-hidden]="!focused && i > 0"
<div class="uk-grid uk-grid-small uk-grid-row-collapse uk-overflow-auto uk-width-expand"
[class.uk-flex-nowrap]="noWrap" [class.uk-overflow-auto]="noWrap" uk-grid>
<div *ngFor="let chip of formAsArray.controls; let i=index" #chip
[class.uk-hidden]="!focused && i > visibleChips - 1"
class="chip">
<div class="uk-label uk-label-small uk-flex uk-flex-middle"
[attr.uk-tooltip]="(tooltip)?('title: ' + getLabel(chip.value) + '; delay: 500; pos: bottom-left'):null">
<span class="uk-text-truncate uk-width-expand">{{getLabel(chip.value)}}</span>
<icon *ngIf="focused" (click)="remove(i, $event)" class="uk-link-text uk-margin-small-left clickable" [flex]="true"
<icon *ngIf="focused" (click)="remove(i, $event)"
class="uk-link-text uk-margin-small-left clickable" [flex]="true"
name="close" ratio="0.7"></icon>
</div>
</div>
<div *ngIf="searchControl && (focused || formAsArray.length === 0)"
class="uk-width-small uk-flex uk-flex-column uk-flex-center">
<div *ngIf="searchControl && (focused || formAsArray.length === 0)" #chip
class="uk-width-expand search-input uk-flex uk-flex-column uk-flex-center">
<input #searchInput class="input" [class.search]="searchControl.value"
[attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
[formControl]="searchControl" [class.uk-text-truncate]="!focused">
</div>
<div *ngIf="!focused && formAsArray.length > 1"
<div *ngIf="!focused && formAsArray.length > visibleChips"
class="uk-width-expand uk-flex uk-flex-column uk-flex-center more">
+ {{(formAsArray.length - 1)}} more
+ {{(formAsArray.length - visibleChips)}} more
</div>
</div>
</ng-template>
<div *ngIf="(formControl.disabled && disabledIcon) || icon || (selectable && selectArrow) || type === 'autocomplete' || searchable"
<div
*ngIf="(formControl.disabled && disabledIcon) || icon || (selectable && selectArrow) || type === 'autocomplete' || searchable"
class="uk-margin-small-left icon">
<icon *ngIf="formControl.disabled && disabledIcon" [name]="disabledIcon" [flex]="true"></icon>
<ng-template [ngIf]="formControl.enabled">
<icon *ngIf="!searchControl?.value && icon" [name]="icon" [flex]="true"></icon>
<icon *ngIf="!icon && selectable && selectArrow" [name]="selectArrow" [flex]="true"></icon>
<button *ngIf="!!searchControl?.value && type === 'autocomplete'" class="uk-close uk-icon"
<button *ngIf="!!searchControl?.value && type === 'autocomplete'" class="uk-close uk-icon"
(click)="resetSearch($event)">
<icon [flex]="true" name="close"></icon>
</button>
<button *ngIf="!!formControl?.value && searchable" class="uk-close uk-icon" (click)="resetValue($event)">
<button *ngIf="!searchControl?.value && !!formControl?.value && (searchable || !selectable)"
class="uk-close uk-icon" (click)="resetValue($event)">
<icon [flex]="true" name="close"></icon>
</button>
</ng-template>
</div>
<ng-content select="[action]"></ng-content>
</div>
<div class="tools">
<ng-content select="[tools]"></ng-content>
@ -142,10 +159,12 @@ declare var UIkit;
<div class="options uk-dropdown" *ngIf="filteredOptions && filteredOptions.length > 0 && opened" #optionBox
uk-dropdown="pos: bottom-justify; mode: none; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id">
<ul class="uk-nav uk-dropdown-nav">
<li *ngFor="let option of filteredOptions; let i=index" [class.uk-hidden]="option.hidden" [class.uk-active]="(formControl.value === option.value) || selectedIndex === i">
<li *ngFor="let option of filteredOptions; let i=index" [class.uk-hidden]="option.hidden"
[class.uk-active]="(formControl.value === option.value) || selectedIndex === i">
<a (click)="selectOption(option, $event)"
[class]="option.disabled ? 'uk-disabled uk-text-muted' : ''">
<span [attr.uk-tooltip]="(tooltip)?('title: ' + (option.tooltip ? option.tooltip : option.label) + '; delay: 500; pos:bottom-left'):null">{{option.label}}</span>
<span
[attr.uk-tooltip]="(tooltip)?('title: ' + (option.tooltip ? option.tooltip : option.label) + '; delay: 500; pos:bottom-left'):null">{{option.label}}</span>
</a>
</li>
</ul>
@ -155,10 +174,10 @@ declare var UIkit;
<span *ngIf="formControl.errors.error">{{formControl.errors.error}}</span>
<span *ngIf="type === 'URL' || type === 'logoURL'">Please provide a valid URL (e.g. https://example.com)</span>
</span>
<span class="uk-text-danger uk-text-small">
<span class="uk-text-small uk-text-danger">
<ng-content select="[error]"></ng-content>
</span>
<span *ngIf="formControl?.valid" class="uk-text-warning uk-text-small">
<span *ngIf="formControl?.valid" class="uk-text-small uk-text-warning uk-margin-xsmall-top">
<ng-content select="[warning]"></ng-content>
<span *ngIf="!secure">
<span class="uk-text-bold">Note:</span> Prefer urls like "<span class="uk-text-bold">https://</span>example.com/my-secure-image.png"
@ -166,34 +185,13 @@ declare var UIkit;
<span class="uk-text-bold">Browsers may not load non secure content.</span>
</span>
</span>
<span class="uk-text-small">
<i class="uk-text-small uk-text-meta uk-margin-xsmall-top">
<ng-content select="[note]"></ng-content>
</span>
</i>
`
})
export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChanges {
private static INPUT_COUNTER: number = 0;
/** Deprecated options*/
/** @deprecated */
@Input('label') label: string;
/** @deprecated */
@Input() extraLeft: boolean = true;
/** @deprecated */
@Input() gridSmall: boolean = false;
/** @deprecated */
@Input() hideControl: boolean = false;
/** @deprecated */
@Input() flex: 'middle' | 'top' | 'bottom' = 'middle';
/** @deprecated */
@Input() iconLeft: boolean = false;
/** @deprecated */
@Input() removable: boolean = true;
/** @deprecated */
@Input() smallChip: boolean = false;
/** @deprecated */
@Input() panelWidth: number = 300;
/** @deprecated */
@Input() panelClass: string = null;
/** Basic information */
@Input('formInput') formControl: AbstractControl;
@Input('type') type: InputType = 'text';
@ -219,13 +217,19 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
/** Chips && Autocomplete*/
public filteredOptions: Option[] = [];
public searchControl: UntypedFormControl;
public activeElement: BehaviorSubject<ElementRef> = new BehaviorSubject<ElementRef>(null);
/** Use modifier's class(es) to change view of your Input */
@Input() inputClass: string = 'inner';
@Input() inputClass: string = 'flat';
/** Icon on the input */
@Input() icon: string = null;
/** Chip options */
@Input() addExtraChips: boolean = false;
@Input() showOptionsOnEmpty: boolean = true;
@Input() visibleChips: number = 1;
@Input() separators: string[] = [];
@Input() noWrap: boolean = false;
@Input() visibleRows: number = -1;
@Input() extendEnter: () => void = null;
@Output() focusEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
/** LogoUrl information */
public secure: boolean = true;
@ -243,13 +247,14 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
@ViewChild('inputBox') inputBox: ElementRef;
@ViewChild('optionBox') optionBox: ElementRef;
@ViewChild('searchInput') searchInput: ElementRef;
@ViewChildren('chip') chips: QueryList<ElementRef>;
@Input()
set placeholder(placeholder: string | Placeholder) {
if (typeof placeholder === 'string') {
this.placeholderInfo = {label: placeholder, static: false};
} else {
if (placeholder.static && (this.type === 'autocomplete' || this.type === 'chips' || this.hint)) {
if (placeholder.static && (this.type === 'autocomplete' || this.hint)) {
placeholder.static = false;
console.debug('Static placeholder is not available in this type of input and if hint is available.');
}
@ -310,6 +315,34 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
}
}
@HostListener('window:keydown.arrowLeft', ['$event'])
arrowLeft(event: KeyboardEvent) {
if(this.focused) {
event.preventDefault();
if(this.activeElement.getValue()) {
let index = this.chips.toArray().indexOf(this.activeElement.getValue());
if(index > 0) {
this.activeElement.next(this.chips.get(index - 1));
return;
}
}
}
}
@HostListener('window:keydown.arrowRight', ['$event'])
arrowRight(event: KeyboardEvent) {
if(this.focused) {
event.preventDefault();
if(this.activeElement.getValue()) {
let index = this.chips.toArray().indexOf(this.activeElement.getValue());
if(index < this.chips.length - 1) {
this.activeElement.next(this.chips.get(index + 1));
return;
}
}
}
}
@HostListener('window:keydown.enter', ['$event'])
enter(event: KeyboardEvent) {
if (this.opened && this.optionBox) {
@ -322,6 +355,17 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
} else {
this.focus(false, event);
}
if(this.extendEnter) {
this.extendEnter();
}
}
@HostListener('keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
if (this.separators.includes(event.key) || this.separators.includes(event.key.toLowerCase())) {
event.preventDefault();
this.add(event, true);
}
}
click(event: ClickEvent) {
@ -338,13 +382,17 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
this.formAsArray.push(new UntypedFormControl(value, this.validators));
});
} else {
this.formControl = new UntypedFormControl(this.value);
this.formControl.setValidators(this.validators);
this.formControl = new UntypedFormControl(this.value, this.validators);
}
if (this.disabled) {
this.formControl.disable();
}
}
this.activeElement.subscribe(element => {
if(element) {
element.nativeElement.scrollIntoView({behavior: 'smooth'});
}
})
}
ngAfterViewInit() {
@ -356,6 +404,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
if (changes.value) {
this.formControl.setValue(this.value);
}
if(changes.validators) {
this.updateValidators();
}
if (changes.formControl || changes.validators || changes.options) {
this.reset();
}
@ -456,6 +507,18 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
});
}
updateValidators() {
if(this.formAsArray) {
this.formAsArray.controls.forEach(control => {
control.setValidators(this.validators);
control.updateValueAndValidity();
})
} else {
this.formControl.setValidators(this.validators);
this.formControl.updateValueAndValidity();
}
}
remove(index: number, event) {
if (this.focused) {
this.formAsArray.removeAt(index);
@ -484,15 +547,18 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
return options;
}
add(event) {
if (this.addExtraChips && this.searchControl.value && this.searchControl.valid) {
add(event, addChips = false) {
if (addChips && this.searchControl.value && this.searchControl.valid) {
if (event && event.stopPropagation) {
event.stopPropagation();
}
this.formAsArray.push(new UntypedFormControl(this.searchControl.value, this.validators));
this.formAsArray.markAsDirty();
this.searchControl.setValue('');
this.activeElement.next(this.chips.last);
} else if(!this.focused) {
this.searchControl.setValue('');
}
this.searchControl.setValue('');
}
getLabel(value: any): string {
@ -518,6 +584,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
this.textArea.nativeElement.focus();
} else if (this.searchInput) {
this.searchInput.nativeElement.focus();
this.activeElement.next(this.chips.last);
}
if (this.selectArrow) {
this.open(!this.opened);
@ -534,7 +601,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
this.searchInput.nativeElement.blur();
}
if (this.searchControl) {
this.add(event);
this.add(event, this.addExtraChips);
}
}
this.focusEmitter.emit(this.focused);

237
sharedComponents/navigationBar.component.html
View File

@ -12,137 +12,144 @@
</div>
<div *ngIf="!onlyTop || userMenu" class="uk-navbar-right" [class.uk-light]='activeHeader.darkBg'>
<ng-container *ngIf="userMenu">
<user-mini [user]="user" mobileView=true (closeCanvasEmitter)="closeCanvas(canvas)"
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl
<user-mini [user]="user" mobileView=true
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [notificationConfiguration]="notificationConfiguration"
[logOutUrl]=properties.logoutUrl [cookieDomain]=properties.cookieDomain></user-mini>
</ng-container>
</div>
</nav>
<div #canvas id="tm-mobile" [attr.uk-offcanvas]="'overlay: true'"
<div #canvas id="tm-mobile" [attr.uk-offcanvas]="'mode: none; overlay: true'"
class="uk-offcanvas">
<div class="uk-offcanvas-bar uk-padding-remove-horizontal">
<button class="uk-offcanvas-close uk-icon uk-close">
<icon name="close" ratio="1.5" visuallyHidden="close menu"></icon>
</button>
<div class="uk-offcanvas-bar uk-padding-remove">
<nav class="uk-navbar uk-background-default" uk-sticky>
<div class="uk-navbar-left">
<button class="uk-navbar-toggle uk-icon uk-close" (click)="closeCanvas(canvas)">
<icon name="close" ratio="1.5" visuallyHidden="close menu" style="margin-left: -0.5em"></icon>
</button>
</div>
<div class="uk-navbar-center">
<ng-container *ngTemplateOutlet="header_template; context: {mobile: true}"></ng-container>
</div>
</nav>
<ul class="uk-nav uk-nav-primary uk-list uk-list-large uk-margin-large-top uk-nav-parent-icon" uk-nav>
<ng-container *ngIf="!onlyTop">
<li *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
<a routerLink="/" (click)="closeCanvas(canvas)">Home</a>
</li>
<ng-container *ngFor="let menu of menuItems">
<li [class.uk-active]="isTheActiveMenu(menu)" [class.uk-parent]="menu.items.length > 0" [ngClass]="menu.customClass"
*ngIf="isAtleastOneEnabled(menu.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.routeRequired, showPage)">
<!--a routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a-->
<a *ngIf="menu.route && (isEnabled([menu.route], showPage) || !menu.routeRequired)"
routerLink="{{menu.route}}" (click)="menu.items.length === 0?closeCanvas(canvas):null"
[queryParams]="menu.params"
[fragment]="menu.fragment">{{menu.title}}</a>
<a *ngIf="!menu.route && menu.url"
href="{{menu.url}}" (click)="menu.items.length === 0?closeCanvas(canvas):null" [class.custom-external]="menu.target != '_self'"
target="{{menu.target}}">{{menu.title}}</a>
<a *ngIf="(!menu.route && !menu.url) ||
<ng-container *ngIf="!onlyTop">
<li *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
<a routerLink="/" (click)="closeCanvas(canvas)">Home</a>
</li>
<ng-container *ngFor="let menu of menuItems">
<li [class.uk-active]="isTheActiveMenu(menu)" [class.uk-parent]="menu.items.length > 0" [ngClass]="menu.customClass"
*ngIf="isAtleastOneEnabled(menu.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.routeRequired, showPage)">
<!--a routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a-->
<a *ngIf="menu.route && (isEnabled([menu.route], showPage) || !menu.routeRequired)"
routerLink="{{menu.route}}" (click)="menu.items.length === 0?closeCanvas(canvas):null"
[queryParams]="menu.params"
[fragment]="menu.fragment">{{menu.title}}</a>
<a *ngIf="!menu.route && menu.url"
href="{{menu.url}}" (click)="menu.items.length === 0?closeCanvas(canvas):null" [class.custom-external]="menu.target != '_self'"
target="{{menu.target}}">{{menu.title}}</a>
<a *ngIf="(!menu.route && !menu.url) ||
(menu.route && menu.routeRequired && !isEnabled([menu.route], showPage)
&& isAtleastOneEnabled(menu.routeRequired, showPage))"
(click)="menu.items.length === 0?closeCanvas(canvas):null">{{menu.title}}</a>
<ul *ngIf="menu.items.length > 0" class="uk-nav-sub">
<ng-container *ngFor="let submenu of menu.items">
<li [class.uk-active]="isTheActiveMenu(submenu)" [ngClass]="submenu.customClass"
*ngIf="isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 || submenu.url.length > 0)"
[class.uk-parent]="submenu.items && submenu.items.length > 0">
<a *ngIf="submenu.route.length > 0" (click)="closeCanvas(canvas)"
routerLink="{{submenu.route}}" [queryParams]=submenu.params
[fragment]="submenu.fragment">{{submenu.title}}</a>
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0"
href="{{submenu.url}}" (click)="closeCanvas(canvas)" [class.custom-external]="submenu.target != '_self'"
target="{{submenu.target}}">{{submenu.title}}</a>
<ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub">
<ng-container *ngFor="let subsubmenu of submenu.items">
<li [class.uk-active]="isTheActiveMenu(subsubmenu)" [ngClass]="subsubmenu.customClass">
<a *ngIf="subsubmenu.route.length > 0"
routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params"
[fragment]="subsubmenu.fragment" (click)="closeCanvas(canvas)">{{subsubmenu.title}}</a>
<a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0"
href="{{subsubmenu.url}}" (click)="closeCanvas(canvas)" [class.custom-external]="subsubmenu.target != '_self'"
target="{{subsubmenu.target}}">{{subsubmenu.title}}</a>
</li>
</ng-container>
</ul>
</li>
<li *ngIf="submenu.route.length == 0 && submenu.url.length == 0 && isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage)"
class="uk-nav-header">{{submenu.title}}</li>
</ng-container>
</ul>
<ul *ngIf="menu.route === '/' && isFeaturedMenuEnabled && featuredMenuItems?.length > 0" class="uk-nav-sub">
<li [class.uk-active]="isTheActiveMenu(item)" *ngFor="let item of featuredMenuItems" [ngClass]="item.customClass">
<a *ngIf="item.type == 'internal' && item.route && isEnabled([item.route], showPage)"
routerLink="{{item.route}}"
[queryParams]="item.params"
[fragment]="item.fragment"
(click)="closeCanvas(canvas)">
{{item.title}}
</a>
<a *ngIf="item.type == 'external' && item.url"
href="{{item.url}}" class="custom-external"
target="_blank"
(click)="closeCanvas(canvas)">
{{item.title}}
</a>
</li>
</ul>
</li>
</ng-container>
<ng-container *ngIf="isMenuEnabled && additionalMenuItems?.length > 0">
<ng-container *ngFor="let menu of additionalMenuItems">
<li [class.uk-active]="isTheActiveMenu(menu)" [class.uk-parent]="menu.items.length > 0" [ngClass]="menu.customClass">
<a *ngIf="menu.type == 'internal' && menu.route && isEnabled([menu.route], showPage)"
routerLink="{{menu.route}}"
[queryParams]="menu.params"
[fragment]="menu.fragment"
(click)="menu.items.length === 0?closeCanvas(canvas):null">
{{menu.title}}
</a>
<a *ngIf="menu.type == 'external' && menu.url"
href="{{menu.url}}"
target="_blank" class="custom-external"
(click)="menu.items.length === 0?closeCanvas(canvas):null">
{{menu.title}}
</a>
<a *ngIf="menu.type == 'noAction'">
{{menu.title}}
</a>
<ul class="uk-nav-sub">
<ng-container *ngIf="menu.items?.length">
<ng-container *ngFor="let submenu of menu.items">
<li [class.uk-active]="isTheActiveMenu(submenu)" [ngClass]="submenu.customClass">
<a *ngIf="submenu.type == 'internal' && submenu.route && isEnabled([submenu.route], showPage)"
routerLink="{{submenu.route}}"
[queryParams]="submenu.params"
[fragment]="submenu.fragment"
(click)="menu.items.length === 0?closeCanvas(canvas):null">
{{submenu.title}}
</a>
<a *ngIf="submenu.type == 'external' && submenu.url"
href="{{submenu.url}}"
target="_blank" class="custom-external"
(click)="menu.items.length === 0?closeCanvas(canvas):null">
{{submenu.title}}
</a>
</li>
</ng-container>
(click)="menu.items.length === 0?closeCanvas(canvas):null">{{menu.title}}</a>
<ul *ngIf="menu.items.length > 0" class="uk-nav-sub">
<ng-container *ngFor="let submenu of menu.items">
<li [class.uk-active]="isTheActiveMenu(submenu)" [ngClass]="submenu.customClass"
*ngIf="isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 || submenu.url.length > 0)"
[class.uk-parent]="submenu.items && submenu.items.length > 0">
<a *ngIf="submenu.route.length > 0" (click)="closeCanvas(canvas)"
routerLink="{{submenu.route}}" [queryParams]=submenu.params
[fragment]="submenu.fragment">{{submenu.title}}</a>
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0"
href="{{submenu.url}}" (click)="closeCanvas(canvas)" [class.custom-external]="submenu.target != '_self'"
target="{{submenu.target}}">{{submenu.title}}</a>
<ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub">
<ng-container *ngFor="let subsubmenu of submenu.items">
<li [class.uk-active]="isTheActiveMenu(subsubmenu)" [ngClass]="subsubmenu.customClass">
<a *ngIf="subsubmenu.route.length > 0"
routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params"
[fragment]="subsubmenu.fragment" (click)="closeCanvas(canvas)">{{subsubmenu.title}}</a>
<a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0"
href="{{subsubmenu.url}}" (click)="closeCanvas(canvas)" [class.custom-external]="subsubmenu.target != '_self'"
target="{{subsubmenu.target}}">{{subsubmenu.title}}</a>
</li>
</ng-container>
</ul>
</li>
<li *ngIf="submenu.route.length == 0 && submenu.url.length == 0 && isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage)"
class="uk-nav-header">{{submenu.title}}</li>
</ng-container>
</ul>
<ul *ngIf="menu.route === '/' && isFeaturedMenuEnabled && featuredMenuItems?.length > 0" class="uk-nav-sub">
<li [class.uk-active]="isTheActiveMenu(item)" *ngFor="let item of featuredMenuItems" [ngClass]="item.customClass">
<a *ngIf="item.type == 'internal' && item.route && isEnabled([item.route], showPage)"
routerLink="{{item.route}}"
[queryParams]="item.params"
[fragment]="item.fragment"
(click)="closeCanvas(canvas)">
{{item.title}}
</a>
<a *ngIf="item.type == 'external' && item.url"
href="{{item.url}}" class="custom-external"
target="_blank"
(click)="closeCanvas(canvas)">
{{item.title}}
</a>
</li>
</ul>
</li>
</ng-container>
<ng-container *ngIf="isMenuEnabled && additionalMenuItems?.length > 0">
<ng-container *ngFor="let menu of additionalMenuItems">
<li [class.uk-active]="isTheActiveMenu(menu)" [class.uk-parent]="menu.items.length > 0" [ngClass]="menu.customClass">
<a *ngIf="menu.type == 'internal' && menu.route && isEnabled([menu.route], showPage)"
routerLink="{{menu.route}}"
[queryParams]="menu.params"
[fragment]="menu.fragment"
(click)="menu.items.length === 0?closeCanvas(canvas):null">
{{menu.title}}
</a>
<a *ngIf="menu.type == 'external' && menu.url"
href="{{menu.url}}"
target="_blank" class="custom-external"
(click)="menu.items.length === 0?closeCanvas(canvas):null">
{{menu.title}}
</a>
<a *ngIf="menu.type == 'noAction'">
{{menu.title}}
</a>
<ul class="uk-nav-sub">
<ng-container *ngIf="menu.items?.length">
<ng-container *ngFor="let submenu of menu.items">
<li [class.uk-active]="isTheActiveMenu(submenu)" [ngClass]="submenu.customClass">
<a *ngIf="submenu.type == 'internal' && submenu.route && isEnabled([submenu.route], showPage)"
routerLink="{{submenu.route}}"
[queryParams]="submenu.params"
[fragment]="submenu.fragment"
(click)="menu.items.length === 0?closeCanvas(canvas):null">
{{submenu.title}}
</a>
<a *ngIf="submenu.type == 'external' && submenu.url"
href="{{submenu.url}}"
target="_blank" class="custom-external"
(click)="menu.items.length === 0?closeCanvas(canvas):null">
{{submenu.title}}
</a>
</li>
</ng-container>
</ng-container>
</ul>
</li>
</ng-container>
</ng-container>
<ng-content select="[extra-s]"></ng-content>
</ng-container>
<ng-content select="[extra-s]"></ng-content>
</ng-container>
</ul>
</ul>
</div>
</div>
</div>
<div id="main-menu" class="uk-visible@m">
<div *ngIf="activeHeader" [class.uk-light]='activeHeader.darkBg'>
<div class="uk-navbar-container" uk-sticky="media@m">
<div class="uk-navbar-container" uk-sticky>
<div *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && activeHeader.badge">
<img class="uk-position-top-left"
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
@ -310,7 +317,7 @@
</div>
<ng-template #header_template let-mobile="mobile">
<a *ngIf="!activeHeader.url" [routerLink]="activeHeader.route" [class.uk-padding-remove]="!isHeaderLeft"
class="uk-logo uk-navbar-item uk-flex uk-flex-middle uk-animation-scale-up">
class="uk-logo uk-navbar-item uk-flex uk-flex-middle">
<img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)"
[src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl"
[alt]="activeHeader.title">
@ -322,7 +329,7 @@
</ng-container>
</a>
<a *ngIf="activeHeader.url" [href]="activeHeader.url" [class.uk-padding-remove]="!isHeaderLeft"
class="uk-logo uk-navbar-item uk-flex uk-flex-middle uk-animation-scale-up">
class="uk-logo uk-navbar-item uk-flex uk-flex-middle">
<img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)"
[src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl"
[alt]="activeHeader.title">

2
sharedComponents/navigationBar.component.ts
View File

@ -8,6 +8,7 @@ import {Subscription} from 'rxjs';
import {HelpContentService} from '../services/help-content.service';
import {properties} from "../../../environments/environment";
import {LayoutService} from "../dashboard/sharedComponents/sidebar/layout.service";
import {NotificationConfiguration} from "../notifications/notifications-sidebar/notifications-sidebar.component";
declare var UIkit;
@ -48,6 +49,7 @@ export class NavigationBarComponent implements OnInit, OnDestroy, OnChanges {
@Input() searchRoute: string = '/search/find';
@Input() searchPlaceHolder: string = 'Search for research results';
@Input() showLogo: boolean = true;
@Input() notificationConfiguration: NotificationConfiguration;
replaceHeader: boolean = false;
public activeHeader: Header;
keyword: string = '';

18
sharedComponents/schema2jsonld/service/open-aire-jsonld-converter.service.ts
View File

@ -112,14 +112,16 @@ export class OpenAireJsonldConverterService {
doc.license = this.getLicense(result);
doc.keyword = this.getKeyword(result);
doc.isPartOf = [];
let fosSubjects = this.getKeyword(result,"FOS");
let sdgSubjects = this.getKeyword(result,"SDG");
for(let fos of fosSubjects?fosSubjects:[]){
doc.isPartOf.push(URL.split('/search/')[0]+ searchActionRoute + "?fos=" + encodeURIComponent('"'+fos+'"'));
}
for(let sdg of sdgSubjects?sdgSubjects:[] ){
doc.isPartOf.push(URL.split('/search/')[0]+ searchActionRoute + "?sdg=" + encodeURIComponent('"'+sdg+'"'));
}
if(properties.adminToolsPortalType !== 'eosc') {
let fosSubjects = this.getKeyword(result, "FOS");
let sdgSubjects = this.getKeyword(result, "SDG");
for (let fos of fosSubjects ? fosSubjects : []) {
doc.isPartOf.push(URL.split('/search/')[0] + searchActionRoute + "?fos=" + encodeURIComponent('"' + fos + '"'));
}
for (let sdg of sdgSubjects ? sdgSubjects : []) {
doc.isPartOf.push(URL.split('/search/')[0] + searchActionRoute + "?sdg=" + encodeURIComponent('"' + sdg + '"'));
}
}
return doc;
}

4
sharedComponents/slider-utils/slider-arrow.component.ts
View File

@ -3,7 +3,7 @@ import {Component, Input} from "@angular/core";
@Component({
selector: 'slider-arrow',
template: `
<div *ngIf="type" class="uk-slider-arrow" [ngClass]="positionClasses" [attr.uk-slider-item]="type">
<div *ngIf="type" class="uk-slider-arrow uk-visible@m" [ngClass]="positionClasses" [attr.uk-slider-item]="type">
<button class="uk-icon-button uk-icon-button-small uk-box-no-shadow uk-box-no-shadow-hover uk-border">
<icon [name]="icon" [flex]="true" visuallyHidden="download"></icon>
</button>
@ -22,4 +22,4 @@ export class SliderArrowComponent {
get icon() {
return (this.type == 'previous')?'chevron_left':'chevron_right'
}
}
}

5
sharedComponents/subscriber-invite/subscriber-invite.component.ts
View File

@ -18,8 +18,9 @@ import {NotificationHandler} from "../../utils/notification-handler";
<div *ngIf="body" class="uk-grid uk-child-width-1-1" uk-grid [formGroup]="inviteForm">
<div input [formInput]="inviteForm.get('name')" placeholder="From"></div>
<div input [formInput]="inviteForm.get('recipients')" type="chips"
placeholder="Recipients" hint="Add a recipient"
[addExtraChips]="true" [validators]="validators">
placeholder="Recipients" hint="Add a recipient" [visibleChips]="3"
[addExtraChips]="true" [validators]="validators" [separators]="[',']">
<div note>Separate emails with commas</div>
</div>
<div>
<label class="uk-text-meta">Message *</label>

13
sharedComponents/tabs/slider-tabs.component.ts
View File

@ -27,21 +27,21 @@ declare var UIkit;
[attr.uk-switcher]="type === 'static'?('connect:' + connect):null"
[ngClass]="'uk-flex-' + flexPosition + ' ' + tabsClass">
<ng-container *ngIf="type === 'static'">
<li *ngFor="let tab of leftTabs" style="max-width: 50%" class="uk-text-capitalize uk-text-truncate uk-display-block">
<li *ngFor="let tab of leftTabs" [ngStyle]="" [style.max-width]="(position === 'horizontal')?'50%':null" class="uk-text-capitalize uk-text-truncate uk-display-block">
<a>{{tab.title}}</a>
</li>
<li *ngFor="let tab of rightTabs; let i=index;" style="max-width: 50%" [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
<li *ngFor="let tab of rightTabs; let i=index;" [style.max-width]="(position === 'horizontal')?'50%':null" [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
class="uk-text-capitalize uk-text-truncate uk-display-block">
<a [ngClass]="tab.customClass">{{tab.title}}</a>
</li>
</ng-container>
<ng-container *ngIf="type === 'dynamic'">
<li *ngFor="let tab of leftTabs; let i=index;" [class.uk-active]="tab.active" style="max-width: 50%">
<li *ngFor="let tab of leftTabs; let i=index;" [class.uk-active]="tab.active" [style.max-width]="(position === 'horizontal')?'50%':null">
<a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass"
(click)="showActive(i)"
class="uk-text-capitalize uk-text-truncate uk-display-block">{{tab.title}}</a>
</li>
<li *ngFor="let tab of rightTabs; let i=index;" style="max-width: 50%" [class.uk-active]="tab.active"
<li *ngFor="let tab of rightTabs; let i=index;" [style.max-width]="(position === 'horizontal')?'50%':null" [class.uk-active]="tab.active"
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''">
<a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass"
(click)="showActive(i)"
@ -49,10 +49,10 @@ declare var UIkit;
</li>
</ng-container>
<ng-container *ngIf="type === 'scrollable'">
<li *ngFor="let tab of leftTabs" style="max-width: 50%" class="uk-text-capitalize uk-text-truncate uk-display-block" [class.uk-active]="tab.active">
<li *ngFor="let tab of leftTabs" [style.max-width]="(position === 'horizontal')?'50%':null" class="uk-text-capitalize uk-text-truncate uk-display-block" [class.uk-active]="tab.active">
<a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge" [ngClass]="tab.customClass">{{tab.title}}</a>
</li>
<li *ngFor="let tab of rightTabs; let i=index;" style="max-width: 50%" class="uk-text-capitalize uk-text-truncate uk-display-block"
<li *ngFor="let tab of rightTabs; let i=index;" [style.max-width]="(position === 'horizontal')?'50%':null" class="uk-text-capitalize uk-text-truncate uk-display-block"
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
[class.uk-active]="tab.active">
<a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge" [ngClass]="tab.customClass">{{tab.title}}</a>
@ -206,6 +206,7 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
public showActive(index) {
this.activeIndex = index;
this.activeEmitter.emit(this.tabs.get(this.activeIndex).id);
if(this.slider) {
this.slider.show(this.activeIndex);
}

7
utils/authors/showAuthors.component.ts
View File

@ -60,12 +60,17 @@ import {properties} from "../../../../environments/environment";
{{author.fullName}} in OpenAIRE
</div>
<div class="uk-text-center uk-margin-top uk-margin-large-left uk-margin-large-right">
<a class="uk-button uk-button-primary uk-text-bold uk-padding-remove-top uk-padding-remove-bottom"
<a *ngIf="properties.adminToolsPortalType !== 'eosc'" class="uk-button uk-button-primary uk-text-bold uk-padding-remove-top uk-padding-remove-bottom"
(click)="onClick()"
[queryParams]="routerHelper.createQueryParams(['orcid','oc'],[(author['orcid'] ? author['orcid'] : author['orcid_pending']),'and'])"
routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToAdvancedResults">
<span class="space">Search</span>
</a>
<a *ngIf="properties.adminToolsPortalType == 'eosc'" class="uk-button uk-button-primary uk-text-bold uk-padding-remove-top uk-padding-remove-bottom uk-light"
[href]="'https://explore.openaire.eu'+properties.searchLinkToAdvancedResults+'?orcid='+(author['orcid'] ? author['orcid'] : author['orcid_pending'])+'&oc=and'"
target="_blank">
<span class="space custom-external">Search in OpenAIRE</span>
</a>
</div>
</div>
</div>

8
utils/full-page-slider/full-page-slider.module.ts
View File

@ -4,16 +4,10 @@ import {FullPageSliderComponent} from "./full-page-slider.component";
import {SlideComponent} from "./slide.component";
import {BottomModule} from '../../sharedComponents/bottom.module';
import {IconsModule} from '../icons/icons.module';
import {IconsService} from '../icons/icons.service';
import {arrow_down, arrow_up} from '../icons/icons';
@NgModule({
imports: [CommonModule, BottomModule, IconsModule],
declarations: [FullPageSliderComponent, SlideComponent],
exports: [FullPageSliderComponent, SlideComponent],
})
export class FullPageSliderModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([arrow_up, arrow_down]);
}
}
export class FullPageSliderModule {}

29
utils/modal/alert.ts
View File

@ -1,4 +1,14 @@
import {Component, ElementRef, EventEmitter, Input, Output, ViewChild, ViewEncapsulation} from '@angular/core';
import {
AfterViewInit,
Component,
ElementRef,
EventEmitter,
Input, OnDestroy,
OnInit,
Output,
ViewChild,
ViewEncapsulation
} from '@angular/core';
declare var UIkit: any;
@ -54,7 +64,7 @@ declare var UIkit: any;
/**
* API to an open alert window.
*/
export class AlertModal {
export class AlertModal implements OnInit, AfterViewInit, OnDestroy {
private static MODAL_COUNTER: number = 0;
id: string = "modal";
@ -154,6 +164,7 @@ export class AlertModal {
@Output() public cancelOutput: EventEmitter<any> = new EventEmitter();
@ViewChild('element') element: ElementRef;
private subscriptions: any[] = [];
constructor() {
}
@ -163,6 +174,14 @@ export class AlertModal {
this.id = 'modal-' + AlertModal.MODAL_COUNTER;
}
ngAfterViewInit() {
if(this.element && typeof document !== "undefined") {
this.subscriptions.push(UIkit.util.on(document, 'hide', '#' + this.id, () => {
this.cancelOutput.emit(true);
}));
}
}
ngOnDestroy() {
if(typeof document !== "undefined") {
const element = document.getElementById("modal-container");
@ -173,6 +192,11 @@ export class AlertModal {
}
}
}
this.subscriptions.forEach(subscription => {
if(subscription instanceof Function) {
subscription();
}
});
}
/**
@ -204,7 +228,6 @@ export class AlertModal {
*/
cancel() {
UIkit.modal(this.element.nativeElement).hide();
this.cancelOutput.emit(true);
}
previous() {

10
utils/number-utils.class.ts
View File

@ -1,5 +1,5 @@
export enum Level {
NONE,
ALL,
K,
M,
B
@ -14,7 +14,8 @@ export interface NumberSize {
export class NumberUtils {
public static roundNumber(num: number, level: Level = Level.NONE, decimal = 0): any {
public static roundNumber(num: number | string, level: Level = Level.ALL, decimal = 0): any {
num = Number.parseFloat(num.toString());
let roundNum: NumberSize;
let initialNum = num;
let variance = Math.pow(10, decimal);
@ -30,11 +31,6 @@ export class NumberUtils {
num = num / 1000;
num = Math.round(num * variance) / variance;
roundNum = {number: num, size: "K", count: initialNum};
} else if (num >= 100) {
num = num / 100;
num = Math.round(num * variance) / variance;
num = num * 100;
roundNum = {number: num, size: "", count: initialNum};
} else {
roundNum = {number: num, size: "", count: initialNum};
}

21
utils/pipes/number-round.pipe.ts
View File

@ -5,19 +5,24 @@ import {DecimalPipe} from "@angular/common";
@Pipe({name: 'numberRound'})
export class NumberRoundPipe implements PipeTransform {
decimalPipe: DecimalPipe = new DecimalPipe("en");
constructor() {}
transform(value: number, ...args: any[]): any {
let level = Level.NONE;
constructor() {
}
/**
* Args: Level: 0 (default): ALL, 1: K, 2: M, 3:B
* Decimal: how many decimals should be shown (e.g 1 -> 62.1)
* */
transform(value: number | string, ...args: any[]): any {
let level = Level.ALL;
let decimal = 0;
if(args[0]) {
if (args[0]) {
level = args[0];
}
if(args[1]) {
if (args[1]) {
decimal = args[1];
}
let size: NumberSize = NumberUtils.roundNumber(value, level, decimal);
return this.decimalPipe.transform(size.number) + (size.size?'<span class="number-size">' + size.size + '</span>':'');
return this.decimalPipe.transform(size.number) + (size.size ? '<span class="number-size">' + size.size + '</span>' : '');
}
}

20
utils/staticAutoComplete/ISVocabularies.service.ts
View File

@ -107,21 +107,28 @@ export class ISVocabulariesService {
getLocalVocabularyFromService(vocabularyName: string, properties: EnvProperties): Observable<AutoCompleteValue[]> {
if(vocabularyName == "sdg"){
let url = properties.domain+"/assets/common-assets/vocabulary/sdg.json";
return this.http.get((properties.useLongCache) ? (properties.cacheUrl + encodeURIComponent(url)) : url)
//.map(res => <any> res.json())
return this.getSDGs(properties)
.pipe(map(res => res['sdg']))
.pipe(map(res => this.parseSDGs(res)))
.pipe(catchError(this.handleError));
}else if( vocabularyName == "fos"){
let url = properties.domain+"/assets/common-assets/vocabulary/fos.json";
return this.http.get((properties.useLongCache) ? (properties.cacheUrl + encodeURIComponent(url)) : url)
//.map(res => <any> res.json())
return this.getFos(properties)
.pipe(map(res => res['fos']))
.pipe(map(res => this.parseFOS(res)))
.pipe(catchError(this.handleError));
}
}
getFos(properties: EnvProperties): Observable<any> {
let url = "/assets/common-assets/vocabulary/fos.json";
return this.http.get((properties.useLongCache) ? (properties.cacheUrl + encodeURIComponent(url)) : url)
}
getSDGs(properties: EnvProperties): Observable<any> {
let url = "/assets/common-assets/vocabulary/sdg.json";
return this.http.get((properties.useLongCache) ? (properties.cacheUrl + encodeURIComponent(url)) : url)
}
parseSDGs(data: any): AutoCompleteValue[] {
var array: AutoCompleteValue[] = []
@ -160,6 +167,7 @@ export class ISVocabulariesService {
}
return array;
}
parse(data: any, vocabularyName: string): AutoCompleteValue[] {
var array: AutoCompleteValue[] = []
for (var i = 0; i < data.length; i++) {

6
utils/string-utils.class.ts
View File

@ -261,9 +261,9 @@ export class Identifier {
export class StringUtils {
public static urlRegex = 'https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.' +
'[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.' +
'[a-zA-Z0-9]+\.[^\s]{2,}';
public static urlRegex = 'https?:\\/\\/(?:www(2?)\\.|(?!www(2?)))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\\.[^\\s]{2,}|www(2?)\\.' +
'[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\\.[^\\s]{2,}|https?:\\/\\/(?:www(2?)\\.|(?!www(2?)))[a-zA-Z0-9]+\\.[^\\s]{2,}|www(2?)\\.' +
'[a-zA-Z0-9]+\\.[^\\s]{2,}';
public static routeRegex = '^[a-zA-Z0-9\/][a-zA-Z0-9\/-]*$';

16
utils/tabs/contents/search-tab.component.ts
View File

@ -7,7 +7,7 @@ import {StringUtils} from "../../string-utils.class";
@Component({
selector: 'search-tab',
template: `
<a *ngIf="fetch.searchUtils.status == errorCodes.LOADING" class="uk-invisible"
<a *ngIf="properties.adminToolsPortalType !== 'eosc' && fetch.searchUtils.status == errorCodes.LOADING" class="uk-invisible"
[queryParams]="params" [routerLink]="searchLinkToAdvancedPage"></a>
<ng-container> <!-- *ngIf="fetch.searchUtils.status != errorCodes.LOADING" -->
@ -19,10 +19,14 @@ import {StringUtils} from "../../string-utils.class";
<span *ngIf="customTitle">{{customTitle}}</span>
</div>
<div *ngIf="searchLinkToAdvancedPage">
<a class="el-content uk-button uk-button-text" [queryParams]="params" [routerLink]="searchLinkToAdvancedPage">
<a *ngIf="properties.adminToolsPortalType !== 'eosc'" class="el-content uk-button uk-button-text" [queryParams]="params" [routerLink]="searchLinkToAdvancedPage">
View all
<span *ngIf="fetch.searchUtils.totalResults <= searchNumber">in search page</span>
</a>
<a *ngIf="properties.adminToolsPortalType == 'eosc'" class="el-content uk-button uk-button-text custom-external"
[href]="'https://explore.openaire.eu'+searchLinkToAdvancedPage+paramsForExternalUrl" target="_blank">
View all in OpenAIRE
</a>
</div>
</div>
@ -73,4 +77,12 @@ export class SearchTabComponent {
get results() {
return this.currentPage ? this.fetch.results.slice((this.currentPage - 1) * this.searchNumber, this.currentPage * this.searchNumber) : this.fetch.results;
}
get paramsForExternalUrl() {
let parameters: string = "";
Object.keys(this.params).forEach(paramKey => {
parameters += (parameters ? "&" : "?") + paramKey+"="+this.params[paramKey];
})
return parameters;
}
}