[Monitor Dashboard | Trunk]: Add develop page

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@60119 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2020-12-11 18:34:50 +00:00
parent 82c9d21e07
commit b821219512
8 changed files with 319 additions and 36 deletions

View File

@ -8,7 +8,7 @@
<navbar *ngIf="properties" [properties]="properties" portal="monitor_dashboard" [header]="menuHeader"
[userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user" [offCanvasFlip]="true"></navbar>
</div>
<dashboard-sidebar *ngIf="stakeholder && isFrontPage" [items]="sideBarItems"
<dashboard-sidebar *ngIf="stakeholder && isFrontPage && hasSidebar" [items]="sideBarItems"
[activeItem]="activeTopic?activeTopic.alias:null" [showHeader]=true
[specialMenuItem]="specialSideBarMenuItem"
[searchParams]="{}"

View File

@ -28,6 +28,7 @@ export class AppComponent implements OnInit, OnDestroy {
hasAdminMenu: boolean = false;
hasMiniMenu: boolean = false;
isFrontPage: boolean = false;
isDashboard: boolean = false;
isViewPublic: boolean = false;
sideBarItems: MenuItem[] = [];
specialSideBarMenuItem: MenuItem = null;
@ -74,9 +75,9 @@ export class AppComponent implements OnInit, OnDestroy {
@HostListener('window:resize', ['$event'])
onResize(event) {
if(this.layoutService.isSmallScreen && event.target.innerWidth > 1219) {
if (this.layoutService.isSmallScreen && event.target.innerWidth > 1219) {
this.layoutService.setSmallScreen(false);
} else if(!this.layoutService.isSmallScreen && event.target.innerWidth < 1219) {
} else if (!this.layoutService.isSmallScreen && event.target.innerWidth < 1219) {
this.layoutService.setSmallScreen(true);
this.layoutService.setOpen(false);
}
@ -109,6 +110,10 @@ export class AppComponent implements OnInit, OnDestroy {
this.isFrontPage = isFrontPage;
this.cdr.detectChanges();
}));
this.subscriptions.push(this.layoutService.isDashboard.subscribe(isDashboard => {
this.isDashboard = isDashboard;
this.cdr.detectChanges();
}));
this.route.queryParams.subscribe(params => {
this.isViewPublic = (params['view'] == 'public');
});
@ -146,7 +151,7 @@ export class AppComponent implements OnInit, OnDestroy {
}, error => {
this.stakeholder = null;
LinksResolver.resetProperties();
if(error.status === 404) {
if (error.status === 404) {
this.navigateToError();
}
this.buildMenu();
@ -210,7 +215,7 @@ export class AppComponent implements OnInit, OnDestroy {
private setSideBar() {
let items: MenuItem[] = [];
if(this.isPublicOrIsMember(this.stakeholder.visibility)) {
if (this.isPublicOrIsMember(this.stakeholder.visibility)) {
this.stakeholder.topics.forEach((topic) => {
if (this.isPublicOrIsMember(topic.visibility)) {
let topicItem: MenuItem = new MenuItem(topic.alias, topic.name, "", (
@ -223,8 +228,8 @@ export class AppComponent implements OnInit, OnDestroy {
if (items.length === 0) {
items.push(new MenuItem('noTopics', 'No topics available yet', "", "", false, [], [], {}));
}
}else{
let topicItem: MenuItem = new MenuItem("private", "Private Data", "","", null, [], [], {});
} else {
let topicItem: MenuItem = new MenuItem("private", "Private Data", "", "", null, [], [], {});
items.push(topicItem);
}
this.sideBarItems = items;
@ -242,7 +247,27 @@ export class AppComponent implements OnInit, OnDestroy {
this.userMenuItems.push(new MenuItem("", "User information", "", "/user-info", false, [], [], {}));
}
if (this.stakeholder) {
if (this.isFrontPage) {
if (!this.isDashboard) {
this.menuHeader = {
route: null,
url: "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu',
title: "Monitor",
logoUrl: 'assets/common-assets/logo-large-monitor.png',
logoSmallUrl: "assets/common-assets/logo-small-monitor.png",
position: 'left',
badge: true,
stickyAnimation: false
};
this.menuItems.push({
rootItem: new MenuItem("dashboard", "Dashboard",
"", "/" + this.stakeholder.alias, false, [], null, {}), items: []
});
this.menuItems.push({
rootItem: new MenuItem("develop", "Develop",
"", "/" + this.stakeholder.alias + "/develop", false, [], null, {}), items: []
});
}
else if (this.isFrontPage) {
this.menuHeader = {
route: "/" + this.stakeholder.alias,
url: null,
@ -253,6 +278,12 @@ export class AppComponent implements OnInit, OnDestroy {
badge: false,
stickyAnimation: false
};
if(this.stakeholder.type === "funder") {
this.menuItems.push({
rootItem: new MenuItem("develop", "Develop",
"", "/" + this.stakeholder.alias + "/develop", false, [], null, {}), items: []
});
}
if (this.isCurator()) {
this.menuItems.push({
rootItem: new MenuItem("manage", "Manage",
@ -260,14 +291,13 @@ export class AppComponent implements OnInit, OnDestroy {
});
}
if(this.isPublicOrIsMember(this.stakeholder.visibility)) {
if (this.isPublicOrIsMember(this.stakeholder.visibility)) {
this.specialSideBarMenuItem = new MenuItem("search", "Search research outcomes", "", this.properties.searchLinkToResults, false, [], null, {});
this.specialSideBarMenuItem.icon = '<span uk-icon="search"></span>';
}else{
this.specialSideBarMenuItem =null;
} else {
this.specialSideBarMenuItem = null;
}
} else {
this.menuHeader = {
route: "/admin/" + this.stakeholder.alias,
@ -304,15 +334,18 @@ export class AppComponent implements OnInit, OnDestroy {
};
this.menuItems.push({
rootItem: new MenuItem("about", "About",
"https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/about/learn-how', "", false, [], null, {}), items: []
"https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/about/learn-how', "", false, [], null, {}),
items: []
});
this.menuItems.push({
rootItem: new MenuItem("browse", "Browse",
"https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/browse', "", false, [], null, {}), items: []
"https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/browse', "", false, [], null, {}),
items: []
});
this.menuItems.push({
rootItem: new MenuItem("contact", "Contact us",
"https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/contact-us', "", false, [], null, {}), items: []
"https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/contact-us', "", false, [], null, {}),
items: []
});
} else {
this.menuHeader = {
@ -345,19 +378,21 @@ export class AppComponent implements OnInit, OnDestroy {
}
}
public isCurator() {
return this.user && (Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user) || Session.isKindOfMonitorManager(this.user));
}
public isManager(stakeholder:Stakeholder) {
public isManager(stakeholder: Stakeholder) {
return this.user && (Session.isPortalAdministrator(this.user) || Session.isCurator(stakeholder.type, this.user) || Session.isManager(stakeholder.type, stakeholder.alias, this.user));
}
private resolvePageInner() {
if(document !== undefined) {
if (document !== undefined) {
let header = document.getElementById('pager_header_content');
let inner = document.getElementById('page_content_inner');
if(header) {
inner.setAttribute('style', '{margin-top:' + header.offsetHeight+ '}');
if (header) {
inner.setAttribute('style', '{margin-top:' + header.offsetHeight + '}');
} else {
inner.setAttribute('style', '{margin-top:' + 0 + '}');
}
@ -366,21 +401,21 @@ export class AppComponent implements OnInit, OnDestroy {
public isPublicOrIsMember(visibility: Visibility): boolean {
if (visibility == "PRIVATE" || (this.isViewPublic && visibility != "PUBLIC")) {
return false;
}
return true;
return false;
}
return true;
}
/* createSearchParameters() {
if (!this.stakeholder) {
return {};
}
if (this.stakeholder.type == "funder") {
return {"relfunder": encodeURIComponent("\"" + this.stakeholder.index_id + "||" + this.stakeholder.index_name + "||" + this.stakeholder.index_shortName + "\"")};
} else if (this.stakeholder.type == "ri") {
return {"community": encodeURIComponent("\"" + this.stakeholder.index_id + "||" + this.stakeholder.index_name + "\"")};
} else if (this.stakeholder.type == "organization") {
return {"cf": true};
}
}*/
/* createSearchParameters() {
if (!this.stakeholder) {
return {};
}
if (this.stakeholder.type == "funder") {
return {"relfunder": encodeURIComponent("\"" + this.stakeholder.index_id + "||" + this.stakeholder.index_name + "||" + this.stakeholder.index_shortName + "\"")};
} else if (this.stakeholder.type == "ri") {
return {"community": encodeURIComponent("\"" + this.stakeholder.index_id + "||" + this.stakeholder.index_name + "\"")};
} else if (this.stakeholder.type == "organization") {
return {"cf": true};
}
}*/
}

View File

@ -0,0 +1,60 @@
.uk-card {
box-shadow: 0 6px 15px #0000001A;
border-radius: 36px;
padding: 65px;
font-family: "Roboto", sans-serif;
font-size: var(--large-font-size);;
}
ul.portal-circle {
list-style: none;
padding-left: 40px;
font-family: "Open Sans", sans-serif;
font-size: var(--font-size);;
}
ul.portal-circle li {
margin: 0 0 20px 0;
position: relative;
}
ul.portal-circle li:before {
content: "";
border: 5px var(--portal-main-color) solid !important;
border-radius: 50px;
line-height: 21px;
margin-left: -20px;
position: absolute;
top: 7px;
}
.documentation {
max-width: 500px;
background: #EEF7E6;
border-radius: 15px;
padding: 30px;
font-family: "Open Sans", sans-serif;
font-size: var(--small-font-size);
}
@media only screen and (max-width: 959px) {
.uk-card {
padding: 30px;
}
ul.portal-circle {
padding-left: 20px;
}
ul.light-blue-triangle li {
margin: 0 0 20px 0;
}
ul.light-blue-circle.large li {
margin: 0 0 20px 0;
}
.documentation {
padding: 10px;
}
}

View File

@ -0,0 +1,158 @@
import {Component, OnDestroy, OnInit} from "@angular/core";
import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder";
import {Subscription} from "rxjs";
import {Meta, Title} from "@angular/platform-browser";
import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
import {properties} from "../../environments/environment";
import {Router} from "@angular/router";
import {StakeholderUtils} from "../utils/indicator-utils";
@Component({
selector: 'develop',
template: `
<div page-content>
<div inner>
<div *ngIf="stakeholder" class="uk-container uk-container-large uk-section-small">
<h2 class="uk-text-center">
Develop
</h2>
<div class="uk-margin-medium-top uk-card uk-card-body uk-card-default">
<h3 class="uk-text-center">Help developers with <span
class="portal-color uk-text-bold">OpenAIRE APIs</span>
</h3>
<div class="uk-margin-large-top uk-margin-medium-bottom">
Not sure where to start? Let us give you some guides and request examples.
</div>
<div class="uk-grid uk-child-width-1-2@l uk-child-width-1-1" uk-grid>
<div>
<p>
<span class="uk-text-bold">For research outcomes </span>
(publications, datasets, software and other research data) you can use the
<a href="http://api.openaire.eu/api.html" target="_blank">Selective Access APIs</a>
by adding the <span class="uk-text-lowercase">{{type}}</span> parameter.
</p>
<p>
Request examples:
</p>
<ul class="portal-circle">
<li>
<span class="uk-text-bold">Access Publications</span><br>
<span class="uk-text-bold">GET</span>
<span class="uk-text-break space">https://api.openaire.eu/search/publications?funder={{stakeholder.index_shortName}}</span>
</li>
<li>
<span class="uk-text-bold">Access Open Access Publications</span><br>
<span class="uk-text-bold">GET</span>
<span class="uk-text-break space">http://api.openaire.eu/search/publications?funder={{stakeholder.index_shortName}}&OA=true</span>
</li>
<li>
<span class="uk-text-bold">Access Datasets</span><br>
<span class="uk-text-bold">GET</span>
<span class="uk-text-break space">https://api.openaire.eu/search/datasets?funder={{stakeholder.index_shortName}}</span>
</li>
<li>
<span class="uk-text-bold">Access Software</span><br>
<span class="uk-text-bold">GET</span>
<span class="uk-text-break space">https://api.openaire.eu/search/software?funder={{stakeholder.index_shortName}}</span>
</li>
<li>
<span class="uk-text-bold">Access Other Research</span><br>
<span class="uk-text-bold">GET</span>
<span class="uk-text-break space">https://api.openaire.eu/search/other?funder={{stakeholder.index_shortName}}</span>
</li>
</ul>
</div>
<div>
<p>
<span class="uk-text-bold">For projects</span> you can use the <a href="http://api.openaire.eu/api.html" target="_blank">Selective Access APIs</a>
and the <a href="http://api.openaire.eu/bulk-projects.html">Bulk Access APIs</a>.
</p>
<p>
Request examples:
</p>
<ul class="portal-circle">
<li>
<span class="uk-text-bold">For the Selective Access</span><br>
<span class="uk-text-break space">https://api.openaire.eu/search/projects?funder={{stakeholder.index_shortName}}</span>
</li>
<li>
<span class="uk-text-bold">For the Bulk Access</span><br>
<span class="uk-text-bold uk-text-nowrap">DSpace endpoint:</span>
<span class="uk-text-break space">https://api.openaire.eu/projects/dspace/{{stakeholder.index_shortName}}/ALL/ ALL</span><br>
<span class="uk-text-bold uk-text-nowrap">ePrints endpoint:</span>
<span class="uk-text-break space">https://api.openaire.eu/projects/eprints/{{stakeholder.index_shortName}}/ALL/ ALL</span>
</li>
</ul>
<div class="uk-flex uk-flex-center uk-width-1-1 uk-margin-medium-top">
<img width="350" src="assets/develop.png">
</div>
</div>
</div>
<div class="uk-margin-large-top uk-flex uk-flex-center uk-padding">
<div class="documentation">
For <span class="uk-text-bold">more information</span> on the full potential of the OpenAIRE APIs please check
the <a href="http://develop.openaire.eu/" target="_blank">OpenAIRE API Documentation</a>.
</div>
</div>
</div>
</div>
</div>
</div>
`,
styleUrls: ['develop.component.css']
})
export class DevelopComponent implements OnInit, OnDestroy {
public stakeholder: Stakeholder;
private subscriptions: any[] = [];
private stakeholderUtils: StakeholderUtils = new StakeholderUtils();
public type: string;
constructor(private stakeholderService: StakeholderService,
private seoService: SEOService,
private _meta: Meta,
private _router: Router,
private _title: Title) {
}
ngOnInit() {
this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
this.stakeholder = stakeholder;
if (this.stakeholder) {
if(stakeholder.type !== "funder") {
this.navigateToError();
}
/* Metadata */
const url = properties.domain + properties.baseLink + this._router.url;
this.seoService.createLinkForCanonicalURL(url, false);
this._meta.updateTag({content: url}, "property='og:url'");
const description = "Develop | " + this.stakeholder.name;
const title = "Develop | " + this.stakeholder.name;
this._meta.updateTag({content: description}, "name='description'");
this._meta.updateTag({content: description}, "property='og:description'");
this._meta.updateTag({content: title}, "property='og:title'");
this._title.setTitle(title);
/* Initializations */
this.stakeholderUtils.types.forEach(type => {
if (type.value === stakeholder.type) {
this.type = type.label;
}
});
}
}));
}
private navigateToError() {
this._router.navigate(['/error'], {queryParams: {'page': this._router.url}});
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscription) {
subscription.unsubscribe();
}
});
}
}

View File

@ -0,0 +1,21 @@
import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {DevelopComponent} from "./develop.component";
import {RouterModule} from "@angular/router";
import {PreviousRouteRecorder} from "../openaireLibrary/utils/piwik/previousRouteRecorder.guard";
import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
@NgModule({
declarations: [DevelopComponent],
imports: [CommonModule, RouterModule.forChild([
{
path: '',
component: DevelopComponent,
canDeactivate: [PreviousRouteRecorder]
},
]), PageContentModule],
exports: [DevelopComponent]
})
export class DevelopModule {
}

View File

@ -13,6 +13,15 @@ import {EnvironmentSpecificResolver} from "../openaireLibrary/utils/properties/e
component: MonitorComponent,
canDeactivate: [PreviousRouteRecorder]
},
{
path: ':stakeholder/develop',
loadChildren: '../develop/develop.module#DevelopModule',
resolve: {envSpecific: EnvironmentSpecificResolver},
data: {
hasSidebar: false,
isDashboard: false
}
},
{
path: ':stakeholder/search',
loadChildren: '../search/search.module#SearchModule',

View File

@ -391,7 +391,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
if (this.index === -1) {
this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories.push(subCategory);
} else {
this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[this.index] = subCategory;
this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[this.index] = HelperFunctions.copy(subCategory);
}
};
if (this.index === -1) {

BIN
src/assets/develop.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 325 KiB