MaDgIK
/
monitor-dashboard
13
0
Fork 0
Code Issues Pull Requests Projects Releases 21 Wiki Activity

[umbrella | WIP] create banner for umbrella and child stakeholders, create browse-stakeholders component, add new monitor-routes for loading the correct content

This commit is contained in:
Alex Martzios 2024-05-30 10:43:05 +03:00
parent fe05d257fa
commit 83effcbfbd
11 changed files with 357 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/app/app.component.html
View File

@ -6,6 +6,78 @@
<ng-container *ngIf="!isHidden">
<navbar *ngIf="hasHeader" portal="monitor_dashboard" [header]="menuHeader" [userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user"
[notificationConfiguration]="isMobile && user && notificationGroupsInitialized?notificationConfiguration:null"></navbar>
<div *ngIf="isChildStakeholder" class="uk-banner uk-padding uk-padding-remove-horizontal uk-light">
<div class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-vertical">
<div class="uk-grid uk-grid-large uk-flex-middle uk-margin-medium-bottom" uk-grid>
<div class="uk-width-expand">
<div class="uk-grid uk-grid-small uk-flex-middle" uk-grid>
<div class="uk-card uk-card-default uk-padding-small">
<!-- TODO: custom smaller height for child logo?? -->
<img *ngIf="stakeholder.logoUrl; else elseBlock" [src]="stakeholder | logoUrl" [alt]="stakeholder.name + ' logo'" class="uk-height-max-xsmall" style="max-width: 180px;">
<ng-template #elseBlock>
<img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall" style="max-width: 180px;">
</ng-template>
</div>
<div class="uk-width-expand uk-margin-small-left">
<h1 class="uk-h5 uk-margin-remove uk-text-truncate">{{stakeholder.name}}</h1>
<div class="uk-text-small uk-margin-small-top">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
</div>
</div>
<div *ngIf="stakeholder.otherParents?.length" class="uk-width-auto">
<div class="uk-text-small uk-margin-small-bottom">
Other related publishers
</div>
<div class="uk-flex uk-flex-middle">
<a *ngFor="let item of stakeholder.otherParents" [routerLink]="item.alias" class="uk-link-reset uk-margin-small-right">
<button class="uk-icon-button uk-button-default">
<img *ngIf="item.logoUrl; else elseBlock" [src]="item | logoUrl" [alt]="item.name + ' logo'" style="max-width: 35px;">
<ng-template #elseBlock>
<img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" style="max-width: 35px;">
</ng-template>
</button>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="uk-banner-footer uk-padding-remove">
<ul class="uk-banner-tab uk-flex-center">
<li [class.uk-active]="isDashboard">
<a [routerLink]="">
Dashboard
</a>
</li>
<li [class.uk-active]="!isDashboard">
<!-- TODO: link to search results -->
<a>
Browse results
</a>
</li>
</ul>
</div>
</div>
<div *ngIf="isUmbrella" class="uk-banner uk-padding-remove">
<ul class="uk-banner-tab uk-flex-center">
<li [class.uk-active]="isDashboard">
<a [routerLink]="stakeholder.alias">
Dashboard
</a>
</li>
<li *ngFor="let item of stakeholder.umbrella.children | keyvalue" [class.uk-active]="!isDashboard">
<a [routerLink]="stakeholder.alias + '/browse/' + item.key">
Browse {{stakeholderUtils.entities[item.key+'s']}}
</a>
</li>
</ul>
</div>
<div>
<div class="sidebar_main_swipe uk-flex uk-background-default" [class.sidebar_main_active]="open && (hasSidebar || hasAdminMenu || hasInternalSidebar)"
[class.sidebar_mini]="!open && (hasSidebar || hasAdminMenu || hasInternalSidebar)" [class.sidebar_hover]="hover">

118
src/app/app.component.ts
View File

@ -19,6 +19,7 @@ import {
NotificationConfiguration
} from "./openaireLibrary/notifications/notifications-sidebar/notifications-sidebar.component";
import {SidebarBaseComponent} from "./openaireLibrary/dashboard/sharedComponents/sidebar/sidebar-base.component";
import {Breadcrumb} from './openaireLibrary/utils/breadcrumbs/breadcrumbs.component';
@Component({
@ -33,6 +34,10 @@ export class AppComponent extends SidebarBaseComponent implements OnInit {
hasHeader: boolean = false;
hasAdminMenu: boolean = false;
hasInternalSidebar: boolean = false;
isUmbrella: boolean = false;
isChildStakeholder: boolean = false;
breadcrumbs: Breadcrumb[] = [];
isDashboard: boolean;
isFrontPage: boolean = false;
isMobile: boolean = false;
view: Visibility;
@ -71,7 +76,10 @@ export class AppComponent extends SidebarBaseComponent implements OnInit {
private configurationService: ConfigurationService,
private resourcesService: ResourcesService) {
super();
this.initRouterParams(_route);
// TODO: fix this statement
this.initRouterParams(_route, event => {
this.isDashboard = !event.url.includes('browse');
});
}
ngOnInit() {
@ -126,25 +134,48 @@ export class AppComponent extends SidebarBaseComponent implements OnInit {
if (this.paramsResolved) {
this.loading = true;
if (params && params['stakeholder']) {
if (!this.stakeholder || this.stakeholder.alias !== params['stakeholder'] || this.updateStakeholder) {
this.subscriptions.push(this.stakeholderService.getStakeholder(params['stakeholder'], this.updateStakeholder).subscribe(stakeholder => {
if (stakeholder) {
this.stakeholder = stakeholder;
this.updateStakeholder = false;
LinksResolver.setProperties(this.stakeholder.alias);
this.setProperties(this.stakeholder.alias, this.stakeholder.type);
this.buildMenu();
this.setActives(params);
this.setSideBar();
this.loading = false;
} else {
this.stakeholder = null;
LinksResolver.resetProperties();
this.navigateToError();
this.buildMenu();
this.loading = false;
let callback = (stakeholder) => {
if (stakeholder) {
console.log(stakeholder);
this.stakeholder = stakeholder;
if (this.stakeholder.umbrella) {
this.isUmbrella = true;
this.isChildStakeholder = false;
}
}));
if (this.stakeholder.parent) {
this.isChildStakeholder = true;
this.isUmbrella = false;
var prefix = this.stakeholder.parent.alias + '/browse/' + this.stakeholder.type;
this.breadcrumbs = [
{name: this.stakeholder.parent.name, route: this.stakeholder.parent.alias},
{name: this.stakeholder.type, route: prefix},
{name: this.stakeholder.name}
];
}
this.updateStakeholder = false;
LinksResolver.setProperties(this.stakeholder.alias);
this.setProperties(this.stakeholder.alias, this.stakeholder.type);
this.buildMenu();
this.setActives(params);
// TODO: add parameters for setSidebar (maybe) and check with monitor.component
this.setSideBar(prefix);
this.loading = false;
} else {
this.stakeholder = null;
LinksResolver.resetProperties();
this.navigateToError();
this.buildMenu();
this.loading = false;
}
};
// TODO: fix the next 2 if statements
if (params['child']) {
console.log('case for child stakeholder');
this.subscriptions.push(this.stakeholderService.getChildStakeholder(params['stakeholder'], params['type'], params['child'], this.updateStakeholder).subscribe(callback));
}
if (!this.stakeholder || this.stakeholder.alias !== params['stakeholder'] || this.updateStakeholder) {
console.log('case for parent stakeholder');
this.subscriptions.push(this.stakeholderService.getStakeholder(params['stakeholder'], this.updateStakeholder).subscribe(callback));
} else {
this.buildMenu();
this.setActives(params);
@ -260,18 +291,18 @@ export class AppComponent extends SidebarBaseComponent implements OnInit {
return "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu';
}
private setSideBar() {
private setSideBar(prefix?: string) {
let items: MenuItem[] = [];
if (this.hasPermission(this.view?this.view:this.stakeholder.visibility)) {
this.stakeholder.topics.forEach((topic: Topic) => {
if (this.hasPermission(topic.visibility)) {
let topicItem: MenuItem = new MenuItem(topic.alias, topic.name, "", '/' + this.stakeholder.alias + '/' + topic.alias,
let topicItem: MenuItem = new MenuItem(topic.alias, topic.name, "", (prefix ? prefix : '') + '/' + this.stakeholder.alias + '/' + topic.alias,
null, [], [], {}, {svg: topic.icon}, null, null, (
'/' + this.stakeholder.alias + '/' + topic.alias));
(prefix ? prefix : '') + '/' + this.stakeholder.alias + '/' + topic.alias));
topicItem.items = topic.categories.filter(category => this.hasPermission(category.visibility)).map(category => {
return new MenuItem(category.alias, category.name, "", ('/' + this.stakeholder.alias + '/' + topic.alias + '/' + category.alias),
return new MenuItem(category.alias, category.name, "", ((prefix ? prefix : '') + '/' + this.stakeholder.alias + '/' + topic.alias + '/' + category.alias),
null, [], [], {}, {svg: topic.icon}, null, null,
('/' + this.stakeholder.alias + '/' + topic.alias + '/' + category.alias));
((prefix ? prefix : '') + '/' + this.stakeholder.alias + '/' + topic.alias + '/' + category.alias));
});
items.push(topicItem);
}
@ -339,18 +370,33 @@ export class AppComponent extends SidebarBaseComponent implements OnInit {
);
}
if (!this.hasAdminMenu && this.isFrontPage) {
this.menuHeader = {
route: './' + this.stakeholder.alias,
url: null,
title: this.stakeholder.name,
logoUrl: StringUtils.getLogoUrl(this.stakeholder),
logoSmallUrl: StringUtils.getLogoUrl(this.stakeholder),
logoInfo: '<div class="uk-margin-left uk-width-medium"><div class="uk-margin-remove uk-text-background uk-text-bold uk-text-small">Monitor Dashboard</div>' +
'<div class="uk-h6 uk-text-truncate uk-margin-remove">' + this.stakeholder.name + '</div></div>',
position: 'left',
badge: true,
menuPosition: "center"
};
if (this.isChildStakeholder) {
this.menuHeader = {
route: './' + this.stakeholder.parent.alias,
url: null,
title: this.stakeholder.parent.name,
logoUrl: StringUtils.getLogoUrl(this.stakeholder.parent),
logoSmallUrl: StringUtils.getLogoUrl(this.stakeholder.parent),
logoInfo: '<div class="uk-margin-left uk-width-medium"><div class="uk-margin-remove uk-text-background uk-text-bold uk-text-small">Monitor Dashboard</div>' +
'<div class="uk-h6 uk-text-truncate uk-margin-remove">' + this.stakeholder.parent.name + '</div></div>',
position: 'left',
badge: true,
menuPosition: "center"
};
} else {
this.menuHeader = {
route: './' + this.stakeholder.alias,
url: null,
title: this.stakeholder.name,
logoUrl: StringUtils.getLogoUrl(this.stakeholder),
logoSmallUrl: StringUtils.getLogoUrl(this.stakeholder),
logoInfo: '<div class="uk-margin-left uk-width-medium"><div class="uk-margin-remove uk-text-background uk-text-bold uk-text-small">Monitor Dashboard</div>' +
'<div class="uk-h6 uk-text-truncate uk-margin-remove">' + this.stakeholder.name + '</div></div>',
position: 'left',
badge: true,
menuPosition: "center"
};
}
} else {
this.menuHeader = {
route: './' + this.stakeholder.alias,

6
src/app/app.module.ts
View File

@ -32,6 +32,8 @@ import {AdminDashboardGuard} from "./openaireLibrary/monitor-admin/utils/adminDa
import {CacheIndicatorsModule} from "./openaireLibrary/monitor-admin/utils/cache-indicators/cache-indicators.module";
import {CustomRouteReuseStrategy} from "./openaireLibrary/shared/custom-route-reuse-strategy";
import {RouteReuseStrategy} from "@angular/router";
import {LogoUrlPipeModule} from './openaireLibrary/utils/pipes/logoUrlPipe.module';
import {BreadcrumbsModule} from './openaireLibrary/utils/breadcrumbs/breadcrumbs.module';
@NgModule({
@ -47,7 +49,9 @@ import {RouteReuseStrategy} from "@angular/router";
CookieLawModule,
BrowserModule,
AppRoutingModule,
SideBarModule, Schema2jsonldModule, RoleVerificationModule, LoadingModule, NotificationsSidebarModule, IconsModule, CacheIndicatorsModule
SideBarModule, Schema2jsonldModule, RoleVerificationModule, LoadingModule, NotificationsSidebarModule, IconsModule, CacheIndicatorsModule,
LogoUrlPipeModule,
BreadcrumbsModule
],
declarations: [AppComponent, OpenaireErrorPageComponent],
exports: [AppComponent],

115
src/app/browse-stakeholders/browse-stakeholders.component.html Normal file
View File

@ -0,0 +1,115 @@
<ng-container *ngIf="showLoading">
<div class="uk-container uk-container-large uk-section">
<loading></loading>
</div>
</ng-container>
<div *ngIf="!showLoading" class="uk-container uk-container-large uk-section">
<div class="uk-flex uk-flex-middle uk-flex-between">
<div class="uk-visible@m uk-width-small">
</div>
<div search-input *ngIf="keywordControl" [searchControl]="keywordControl" [searchInputClass]="'flat'" [iconPosition]="'left'"
placeholder="Search for {{typeAsLabel.toLowerCase()}}s" [disabled]="stakeholders.length === 0" class="uk-width-xlarge@l uk-width-large@m uk-width-1-1">
</div>
<div *ngIf="!isMobile">
<div [class.uk-disabled]="stakeholders.length === 0" class="uk-flex uk-flex-middle uk-flex-right uk-width-small">
<button (click)="gridView = true" [class.uk-button-primary]="gridView" [disabled]="stakeholders.length === 0"
class="uk-icon-button uk-button-default uk-border-rounded uk-icon-button-small">
<icon name="apps" [flex]="true" type="round" [ratio]="1.2"></icon>
</button>
<button (click)="gridView = false" [class.uk-button-primary]="!gridView" [disabled]="stakeholders.length === 0"
class="uk-icon-button uk-button-default uk-border-rounded uk-icon-button-small uk-margin-small-left">
<icon name="view_list" [flex]="true" type="round" [ratio]="1.2"></icon>
</button>
</div>
</div>
</div>
<div class="uk-flex uk-flex-middle uk-flex-between uk-margin-large-top">
<div class="uk-flex uk-flex-middle">
<div *ngIf="sortOptions?.length > 0" class="uk-width-small uk-margin-medium-right">
<div input
type="select" placeholder="Sort by" inputClass="border-bottom"
[options]="sortOptions" [(value)]="sortBy" (valueChange)="sortByChanged()">
</div>
</div>
<div class="uk-width-xsmall">
<div input
type="select" placeholder="Results per page" inputClass="border-bottom"
[options]="pageOptions" [(value)]="pageSize" (valueChange)="sizeChanged($event)">
</div>
</div>
</div>
<div>
<paging-no-load *ngIf="filteredStakeholders.length > pageSize"
(pageChange)="updateCurrentPage($event)"
[currentPage]="currentPage" [size]="pageSize"
[totalResults]="filteredStakeholders.length">
</paging-no-load>
</div>
</div>
<div class="uk-margin-large-top" id="target">
<div *ngIf="!filteredStakeholders || filteredStakeholders?.length == 0" class="uk-flex uk-flex-center">
<div class="uk-alert uk-alert-primary uk-text-center uk-width-2-3@m uk-width-1-1">
No {{entities.stakeholders}} available
</div>
</div>
<!-- STAKEHOLDERS -->
<!-- Grid view -->
<ng-container *ngIf="gridView || isMobile; else elseBlock">
<div class="uk-grid" class="uk-child-width-1-4@l uk-child-width-1-3@m uk-child-width-1-1"
uk-grid uk-height-match="target: .top-info;">
<div *ngFor="let item of filteredStakeholders.slice((currentPage-1)*pageSize, currentPage*pageSize)">
<a routerLink="./{{item.alias}}" class="uk-link-reset">
<div class="uk-card uk-card-default uk-card-hover">
<div class="uk-padding-small top-info">
<!-- logo -->
<div class="uk-flex uk-flex-center uk-flex-middle uk-height-xsmall">
<img *ngIf="item.logoUrl; else elseBlock" [src]="item | logoUrl" [alt]="item.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply" style="max-width: 180px;">
<ng-template #elseBlock>
<img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply" style="max-width: 180px;">
</ng-template>
</div>
<!-- name -->
<div class="uk-text-center uk-text-bold uk-margin-top multi-line-ellipsis lines-2">
<div [title]="item.name">
{{item.name}}
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</ng-container>
<!-- List view -->
<ng-template #elseBlock>
<div>
<table class="uk-table uk-table-striped uk-table-middle uk-table-responsive uk-table-hover">
<thead>
<tr>
<th>Logo</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of filteredStakeholders.slice((currentPage-1)*pageSize, currentPage*pageSize)"
class="clickable" routerLink="./{{item.alias}}">
<td>
<div class="uk-flex uk-flex-middle uk-height-xsmall uk-margin-left">
<img *ngIf="item.logoUrl; else elseBlock" [src]="item | logoUrl" [alt]="item.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply" style="max-width: 140px;">
<ng-template #elseBlock>
<img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply" style="max-width: 140px;">
</ng-template>
</div>
</td>
<td>
<div class="uk-text-truncate uk-text-capitalize uk-text-italic uk-text-small uk-text-bold" [title]="item.name">
{{item.name}}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</ng-template>
</div>
</div>

35
src/app/browse-stakeholders/browse-stakeholders.component.ts Normal file
View File

@ -0,0 +1,35 @@
import {ChangeDetectorRef, Component} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
import {FormBuilder} from "@angular/forms";
import {BrowseStakeholderBaseComponent} from "../openaireLibrary/monitor/browse-stakeholder/browse-stakeholder-base.component";
import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder";
import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
@Component({
selector: 'browse-stakeholder',
templateUrl: 'browse-stakeholders.component.html'
})
export class BrowseStakeholdersComponent extends BrowseStakeholderBaseComponent<Stakeholder> {
constructor(protected _route: ActivatedRoute,
protected _router: Router,
protected layoutService: LayoutService,
protected cdr: ChangeDetectorRef,
protected fb: FormBuilder,
private stakeholderService: StakeholderService) {
super();
}
ngOnInit() {
// TODO: fix metadata
this.setMetadata();
this.stakeholderType = this._route.snapshot.params.type;
super.ngOnInit();
this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(data => {
// TODO: fix navigateToError() cases depending on the this._route.snapshot.params['type']
this.stakeholders = data.umbrella.children[this._route.snapshot.params['type']];
this.filteredStakeholders = data.umbrella.children[this._route.snapshot.params['type']];
this.showLoading = false;
}));
}
}

26
src/app/browse-stakeholders/browse-stakeholders.module.ts Normal file
View File

@ -0,0 +1,26 @@
import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {BrowseStakeholdersComponent} from "./browse-stakeholders.component";
import {RouterModule, Routes} from "@angular/router";
import {PreviousRouteRecorder} from "../openaireLibrary/utils/piwik/previousRouteRecorder.guard";
import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
import {SearchInputModule} from "../openaireLibrary/sharedComponents/search-input/search-input.module";
import {InputModule} from "../openaireLibrary/sharedComponents/input/input.module";
import {PagingModule} from "../openaireLibrary/utils/paging.module";
import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module";
import {MonitorComponent} from "../monitor/monitor.component";
import {Monitor} from "../monitor/monitor";
let routes: Routes = new Monitor(':child').routes;
routes.splice(0, 0, {path: '', component: BrowseStakeholdersComponent, canDeactivate: [PreviousRouteRecorder], data: {hasSidebar: false}});
@NgModule({
imports: [
CommonModule, LoadingModule, SearchInputModule, InputModule, PagingModule, IconsModule, LogoUrlPipeModule,
RouterModule.forChild(routes)
],
declarations: [BrowseStakeholdersComponent],
exports: [BrowseStakeholdersComponent]
})
export class BrowseStakeholdersModule {}

6
src/app/monitor/monitor-routing.module.ts
View File

@ -1,20 +1,18 @@
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
import {MonitorComponent} from "./monitor.component";
import {OpenaireErrorPageComponent} from "../error/errorPage.component";
import {Monitor} from "./monitor";
let routes: Routes = new Monitor(':stakeholder').routes;
routes.splice(0, 0, {path: '', redirectTo: '/admin', pathMatch: 'full'});
/*routes.splice(2, 0, {
routes.splice(2, 0, {
path: ':stakeholder/browse/:type',
loadChildren: () => import('../browse-stakeholders/browse-stakeholders.module').then(m => m.BrowseStakeholdersModule),
canDeactivate: [PreviousRouteRecorder],
data: {
activeMenuItem: "dashboard"
}
});*/
});
@NgModule({
imports: [

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit a1c8b2d9fe0b4f227235e5867c83b5f523154f5b
Subproject commit 91f1dc07809631fff958f4dc3356135362cf1caf

16
src/assets/monitor-dashboard-custom.less
View File

@ -59,6 +59,22 @@
@dashboard-primary-background: @monitor-color;
@dashboard-menu-section-sublist-border: fade(@monitor-color, 30%);
/* Umbrella Banner */
@banner-background: url('banner.jpg') no-repeat center center / cover;
@banner-tab-item-color: @default-color;
@banner-tab-item-hover-color: @banner-tab-item-color;
@banner-tab-item-active-color: @global-inverse-color;
@banner-tab-item-hover-decoration: underline;
@banner-tab-item-active-indicator: @monitor-dashboard-background;
/* Breadcrumbs inside banner */
.uk-banner .uk-breadcrumb span {
text-decoration: none;
background-color: @monitor-color;
padding: 5px;
border-radius: @global-border-radius;
}
& #filters_icon .start {
stop-color: @monitor-light-color;
}

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit fdbb44cd21351f99af6c8341b5e43dec2b1d9eea
Subproject commit 99e7fe14bc804271116cc8ee54f2547e4f04034f

3
src/environments/environment.ts
View File

@ -19,7 +19,8 @@ let props: EnvProperties = {
adminToolsCommunity: "monitor",
useHelpTexts: true,
baseLink: "/",
domain: "http://mpagasas.di.uoa.gr:4600"
domain: "http://mpagasas.di.uoa.gr:4600",
monitorServiceAPIURL: "http://mpagasas.di.uoa.gr:8888/"
};
export let properties: EnvProperties = {