Change header info style. Fix menu in admin routes. Add replaceHeader for dashboard and stakeholder admin.

This commit is contained in:
Konstantinos Triantafyllou 2022-08-04 15:33:49 +03:00
parent bcbbefc277
commit f9dc782008
14 changed files with 277 additions and 268 deletions

View File

@ -6,7 +6,6 @@ import {RouterModule} from "@angular/router";
{
path: '',
loadChildren: () => import('../general/general.module').then(m => m.GeneralModule),
data: {hasAdminMenu: true},
pathMatch: 'full'
},
{
@ -17,7 +16,6 @@ import {RouterModule} from "@angular/router";
{
path: 'users/:user_type',
loadChildren: () => import('../users/users.module').then(m => m.UsersModule),
data: {hasAdminMenu: true},
pathMatch: 'full'
},
{
@ -34,7 +32,6 @@ import {RouterModule} from "@angular/router";
path: 'admin-tools',
loadChildren: () => import('../admin-tools/admin-tools-routing.module').then(m => m.AdminToolsRoutingModule),
data: {
hasAdminMenu: true,
param: 'stakeholder',
parentClass: 'monitor'
}

View File

@ -25,32 +25,30 @@ const routes: Routes = [
path: 'admin',
loadChildren: () => import('./manageStakeholders/manageStakeholders.module').then(m => m.ManageStakeholdersModule),
canActivateChild: [LoginGuard],
data: {hasAdminMenu: true}
data: {hasAdminMenu: true, hasSidebar: false}
},
{
path: 'admin/user-info',
loadChildren: () => import('./login/libUser.module').then(m => m.LibUserModule),
data: {hasAdminMenu: true}
data: {hasAdminMenu: true, hasSidebar: false}
},
{
path: 'admin/admin-tools',
loadChildren: () => import('./admin-tools/portal-admin-tools-routing.module').then(m => m.PortalAdminToolsRoutingModule),
canActivateChild: [AdminLoginGuard],
data: {hasAdminMenu: true}
data: {hasAdminMenu: true, hasSidebar: false}
},
{
path: 'admin/monitor/admin-tools',
loadChildren: () => import('./admin-tools/admin-tools-routing.module').then(m => m.AdminToolsRoutingModule),
canActivateChild: [AdminLoginGuard],
data: {hasAdminMenu: true, portal: 'monitor', monitorCurator: true, parentClass: 'monitor'}
data: {hasAdminMenu: true, hasSidebar: false, portal: 'monitor', monitorCurator: true, parentClass: 'monitor'}
},
{
path: 'admin/:stakeholder',
loadChildren: () => import('./admin-stakeholder/admin-stakeholder-routing.module').then(m => m.AdminStakeholderRoutingModule),
canActivateChild: [AdminDashboardGuard],
data: {
activeMenuItem: "manage"
}
data: {hasAdminMenu: true, hasSidebar: false, activeMenuItem: "manage"}
},
{
path: 'theme',

View File

@ -3,9 +3,9 @@
</div>
<div *ngIf="!loading" [class.monitor]="isFrontPage">
<div id="container" class="sidebar_main_swipe uk-background-default" [class.sidebar_main_active]="open && (hasSidebar || hasAdminMenu)"
[class.sidebar_mini]="!open && hasSidebar && (!hasAdminMenu || hasAdminMenu)">
[class.sidebar_mini]="!open && (hasSidebar || hasAdminMenu)">
<div id="modal-container"></div>
<navbar *ngIf="hasHeader" portal="monitor_dashboard" [header]="menuHeader" [dark]="isFrontPage"
<navbar *ngIf="hasHeader" portal="monitor_dashboard" [header]="menuHeader"
[userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user" [offCanvasFlip]="true"></navbar>
<div>
<dashboard-sidebar *ngIf="stakeholder && isFrontPage && hasSidebar" queryParamsHandling="merge" [items]="sideBarItems" [activeItem]="activeTopic?activeTopic.alias:null"></dashboard-sidebar>

View File

@ -17,6 +17,7 @@ import {StakeholderUtils} from "./utils/indicator-utils";
import {SmoothScroll} from "./openaireLibrary/utils/smooth-scroll";
import {ConnectHelper} from "./openaireLibrary/connect/connectHelper";
import {ResourcesService} from "./openaireLibrary/monitor/services/resources.service";
import {StringUtils} from "./openaireLibrary/utils/string-utils.class";
@Component({
@ -245,7 +246,7 @@ export class AppComponent implements OnInit, OnDestroy {
this.adminMenuItems.push(new MenuItem("indicators", "Indicators", "", "/admin/" + this.stakeholder.alias + '/indicators', false, [], [], {}, {name: 'bar_chart'}));
if (this.stakeholder.defaultId) {
this.adminMenuItems.push(new MenuItem("users", "Users", "", "/admin/" + this.stakeholder.alias + "/users", false, [], [], {}, {name: 'group'}, null, null, "/admin/" + this.stakeholder.alias + "/users"));
if (Session.isPortalAdministrator(this.user)) {
if (this.isCurator()) {
this.adminMenuItems.push(new MenuItem("admin-tools", "Pages & Entities", "", "/admin/" + this.stakeholder.alias + "/admin-tools/pages", false, [], [], {}, {name: 'description'}, null, null, "/admin/" + this.stakeholder.alias + "/admin-tools"));
}
}
@ -261,15 +262,15 @@ export class AppComponent implements OnInit, OnDestroy {
this.menuItems = [];
this.userMenuItems = [];
if (this.user) {
if (this.isCurator()) {
if (this.isKindOfMonitorManager()) {
this.userMenuItems.push(new MenuItem("", "Manage profiles",
"", "/admin", false, [], [], {}));
}
if (Session.isPortalAdministrator(this.user)) {
this.userMenuItems.push(new MenuItem("adminOptions", "Super Admin options", "", "/admin/admin-tools/portals", false, [], [], {}));
}
if (Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user)) {
this.userMenuItems.push(new MenuItem("monitorOptions", "Monitor portal options", "", "/admin/monitor/admin-tools/pages", false, [], [], {}));
if (this.isCurator()) {
this.userMenuItems.push(new MenuItem("monitorOptions", "Monitor options", "", "/admin/monitor/admin-tools/pages", false, [], [], {}));
}
}
if (this.stakeholder) {
@ -286,7 +287,7 @@ export class AppComponent implements OnInit, OnDestroy {
null, null, null, null),
items: []
});
if(this.properties.environment !== 'production') {
if (this.properties.environment !== 'production') {
this.resourcesService.setResourcesDeprecated(this.menuItems, "/" + this.stakeholder.alias);
} else {
this.menuItems.push({
@ -319,10 +320,23 @@ export class AppComponent implements OnInit, OnDestroy {
url: "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu',
title: "Monitor",
logoUrl: 'assets/common-assets/logo-services/monitor/small-inverted.svg',
logoSmallUrl: "assets/common-assets/logo-services/monitor/small-inverted.svg",
logoSmallUrl: "assets/common-assets/logo-services/monitor/small.svg",
position: 'center',
badge: true,
darkBg: true,
menuPosition: "center",
replaceHeader: {
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">Dashboard</div>' +
'<div class="uk-h6 uk-text-truncate uk-margin-remove">' + this.stakeholder.name + '</div></div>',
position: 'center',
badge: true,
menuPosition: "center"
}
};
} else {
this.menuHeader = {
@ -333,11 +347,20 @@ export class AppComponent implements OnInit, OnDestroy {
logoSmallUrl: "assets/common-assets/logo-services/monitor/small.svg",
position: 'center',
badge: true,
menuPosition: "center",
replaceHeader: {
route: './' + this.stakeholder.alias,
url: null,
title: this.stakeholder.name,
logoUrl: StringUtils.getLogoUrl(this.stakeholder),
logoSmallUrl: StringUtils.getLogoUrl(this.stakeholder),
position: 'center',
badge: true,
menuPosition: "center"
}
};
}
} else {
if (this.isFrontPage || !this.hasAdminMenu) {
this.userMenuItems.push(new MenuItem("", "User information", "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/user-info', '', false, [], [], {}, null, null, null, null, "_self"));
this.menuHeader = {
route: null,
@ -354,7 +377,7 @@ export class AppComponent implements OnInit, OnDestroy {
"https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/about/learn-how', "", false, [], null, {}, null, null, null, null, "_self"),
items: []
});
if(this.properties.environment === 'development') {
if (this.properties.environment === 'development') {
// @ts-ignore
this.resourcesService.setResourcesDeprecated(this.menuItems, '', "https://" + (this.properties.environment === 'beta' ? 'beta.' : '') + 'monitor.openaire.eu');
}
@ -363,35 +386,26 @@ export class AppComponent implements OnInit, OnDestroy {
"https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/browse', "", false, [], null, {}, null, null, null, null, "_self"),
items: []
});
} else {
this.userMenuItems.push(new MenuItem("", "User information", "", "/admin/user-info", false, [], [], {}));
this.menuHeader = {
route: "/",
url: null,
title: "Monitor Dashboard",
logoUrl: null,
logoSmallUrl: null,
position: 'center',
badge: false,
stickyAnimation: true,
menuPosition: "center"
};
if (this.hasAdminMenu) {
this.adminMenuItems = [];
this.specialSideBarMenuItem = null;
this.adminMenuItems.push(new MenuItem("stakeholders", "Manage profiles", "", "/admin", false, [], [], {}, {name: 'settings'}));
if (Session.isPortalAdministrator(this.user)) {
this.adminMenuItems.push(new MenuItem("super_admin", "Super Admin Options", "", "/admin/admin-tools/portals", false, [], [], {}, {name: 'settings'}, null, null, '/admin/admin-tools'));
this.adminMenuItems.push(new MenuItem("super_admin", "Super Admin options", "", "/admin/admin-tools/portals", false, [], [], {}, {name: 'settings'}, null, null, '/admin/admin-tools'));
}
if (Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user)) {
this.adminMenuItems.push(new MenuItem("monitor", "Monitor Options", "", "/admin/monitor/admin-tools/pages", false, [], [], {}, {name: 'settings'}, null, null, '/admin/monitor/admin-tools'));
this.adminMenuItems.push(new MenuItem("monitor", "Monitor options", "", "/admin/monitor/admin-tools/pages", false, [], [], {}, {name: 'settings'}, null, null, '/admin/monitor/admin-tools'));
}
this.hasAdminMenu = this.hasAdminMenu && this.adminMenuItems.length > 0;
this.hasAdminMenu = this.hasAdminMenu && this.adminMenuItems.length > 1;
}
}
}
public isCurator() {
return this.user && (Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user));
}
public isKindOfMonitorManager() {
return this.user && (Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user) || Session.isKindOfMonitorManager(this.user));
}

View File

@ -1,10 +1,10 @@
<div page-content>
<div header *ngIf="stakeholder">
<div class="uk-flex uk-flex-middle uk-margin-top uk-margin-bottom info">
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
<img [src]="stakeholder | logoUrl" class="uk-margin-right uk-blend-multiply">
<div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Profile</div>
<h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}<span *ngIf="editStakeholderComponent && editStakeholderComponent.dirty && !loading" class="uk-text-large"> (unsaved changes)</span></h1>
<div class="uk-text-background uk-text-bold uk-text-small">Admin Dashboard - Manage Profile</div>
<h1 class="uk-h6 uk-margin-remove">{{stakeholder.name}}<span *ngIf="editStakeholderComponent && editStakeholderComponent.dirty && !loading" class="uk-text-large"> (unsaved changes)</span></h1>
</div>
</div>
</div>

View File

@ -9,8 +9,7 @@ import {ManageStakeholdersComponent} from "./manageStakeholders.component";
{
path: '',
component: ManageStakeholdersComponent,
canDeactivate: [PreviousRouteRecorder],
data: {hasSidebar: true}
canDeactivate: [PreviousRouteRecorder]
}
])
]

View File

@ -1,13 +1,13 @@
<div page-content>
<div header>
<div class="uk-flex uk-flex-middle uk-margin-top info">
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
<img src="assets/common-assets/placeholder.png" class="uk-margin-right">
<div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage profiles</div>
<h1 class="uk-h4 uk-margin-remove">Profile Templates & Profiles</h1>
<div class="uk-text-background uk-text-bold uk-text-small">Admin Dashboard - Manage profiles</div>
<h1 class="uk-h6 uk-margin-remove">Profile Templates & Profiles</h1>
</div>
</div>
<ul *ngIf="isCurator()" class="uk-tab uk-margin-top" uk-tab>
<ul *ngIf="isCurator()" class="uk-tab uk-margin-remove-bottom uk-margin-medium-top" uk-tab>
<li [class.uk-active]="tab === 'all'"><a (click)="tab = 'all'">All</a></li>
<li [class.uk-active]="tab === 'templates'"><a (click)="tab = 'templates'">Profile templates</a></li>
<li [class.uk-active]="tab === 'profiles'"><a (click)="tab = 'profiles'">Profiles</a></li>

View File

@ -37,16 +37,18 @@
</div>
</div>
</ng-template>
<div page-content [headerSticky]="true">
<div *ngIf="activeTopic && activeTopic.categories.length > 0" header>
<div class="uk-flex uk-flex-middle uk-margin-top info">
<div page-content>
<div header>
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
<img [src]="stakeholder | logoUrl" class="uk-margin-right uk-blend-multiply">
<div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Dashboard</div>
<h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}</h1>
<div class="uk-text-background uk-text-bold uk-text-small">Dashboard</div>
<h1 class="uk-h6 uk-margin-remove">{{stakeholder.name}}</h1>
</div>
</div>
<ul *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-tab">
</div>
<div *ngIf="activeTopic && activeTopic.categories.length > 0" class="uk-margin-medium-top" actions>
<ul *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-tab uk-margin-remove-bottom">
<ng-template ngFor [ngForOf]="activeTopic.categories" let-category>
<li *ngIf="isPublicOrIsMember(category.visibility)"
[class.uk-active]="category.alias === activeCategory.alias">
@ -57,8 +59,6 @@
</li>
</ng-template>
</ul>
</div>
<div inner>
<div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1" class="uk-flex uk-flex-right uk-margin-top">
<ul class="uk-subnav uk-subnav-pill-alt">
<ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory let-i="index">
@ -72,6 +72,8 @@
</ng-template>
</ul>
</div>
</div>
<div inner>
<div *ngIf="privateStakeholder" class="message">
<div class="uk-text-center">
<h3 class="uk-flex uk-flex-middle">
@ -81,7 +83,6 @@
</div>
</div>
<div *ngIf="!privateStakeholder && stakeholder" class="uk-section">
<div class="uk-padding uk-padding-remove-vertical">
<div *ngIf="activeSubCategory?.description" class="uk-margin-medium-bottom">
{{activeSubCategory.description}}
</div>
@ -258,7 +259,6 @@
</ng-template>
</div>
</div>
</div>
</div>
<div *ngIf="stakeholder && !privateStakeholder " href="#style_switcher" uk-toggle="" id="filters_switcher_toggle"
class="uk-offcanvas-switcher uk-flex uk-flex-center uk-flex-middle">

@ -1 +1 @@
Subproject commit fd9794ec3aa5fd031a3642febf4c2a4d20425cd7
Subproject commit 6a7559a3ad226e25eeea9c39cb62fa960438d6ef

View File

@ -142,17 +142,17 @@
<div *ngIf="stakeholder && filters" page-content>
<div header>
<div *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex]">
<div class="uk-flex uk-margin-top uk-flex-middle info">
<div class="uk-flex uk-margin-medium-top uk-flex-middle info">
<img [src]="stakeholder | logoUrl" class="uk-margin-right uk-blend-multiply">
<div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Indicators</div>
<h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}</h1>
<div class="uk-text-background uk-text-bold uk-text-small">Admin Dashboard - Manage Indicators</div>
<h1 class="uk-h6 uk-margin-remove">{{stakeholder.name}}</h1>
</div>
</div>
</div>
</div>
<div actions>
<div class="uk-margin-top uk-margin-bottom">
<div class="uk-margin-medium-top uk-margin-bottom">
<ul *ngIf="stakeholder.topics[topicIndex]" #categories transition-group class="uk-tab">
<ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories" let-category let-i="index">
<li class="uk-visible-toggle uk-flex" [class.uk-active]="categoryIndex === i" transition-group-item>

View File

@ -5,14 +5,14 @@
</div>
<role-users *ngIf="!loading && stakeholder" [id]="stakeholder.alias" [type]="stakeholder.type" [name]="stakeholder.name" [link]="link" [role]="tab" [message]="messages.get(tab)"
[emailComposer]="emailComposer" [notificationFn]="notificationFn">
<div class="uk-flex uk-flex-middle uk-margin-top info">
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
<img [src]="stakeholder | logoUrl" class="uk-margin-right uk-blend-multiply">
<div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage {{users}}</div>
<h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}</h1>
<div class="uk-text-background uk-text-bold uk-text-small">Admin Dashboard - Manage Users</div>
<h1 class="uk-h6 uk-margin-remove">{{stakeholder.name}}</h1>
</div>
</div>
<ul class="uk-tab">
<ul class="uk-tab uk-margin-remove-bottom uk-margin-medium-top">
<li [class.uk-active]="tab === 'manager'"><a routerLink="../manager">Managers</a></li>
<li [class.uk-active]="tab === 'member'"><a routerLink="../member">Members</a></li>
</ul>

@ -1 +1 @@
Subproject commit c645362896b10ae00563f38337aa0011c640cb20
Subproject commit adf1b6d5f5e8fb1568615b0fc596a0f39beab3e6

View File

@ -32,6 +32,7 @@
@list-primary-color: @monitor-color;
/* Navbar */
@inverse-navbar-background: @monitor-color;
@inverse-navbar-background-image: url("banner.jpg");
/** Text */

@ -1 +1 @@
Subproject commit ee5eeb0ccc7e8a1b7086730fbce597faa9b25b13
Subproject commit eb5739ab8271aa71c8e58998ab88c61878f8788d