[Monitor Dashboard | Trunk]: Add full page loading on app component, fix admin dashboard guard

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@59724 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2020-10-30 11:33:51 +00:00
parent bb1893a62a
commit fe47322863
7 changed files with 227 additions and 195 deletions

View File

@ -1,4 +1,8 @@
<!--disable_transitions -->
<div *ngIf="loading == true">
<loading [full]="true"></loading>
</div>
<div *ngIf="loading == false">
<div class="sidebar_main_swipe" [class.sidebar_main_active]="open && hasSidebar"
[class.sidebar_mini]="!open && hasSidebar" [class.stakeholderPage]="isFrontPage">
<div *ngIf="hasHeader" id="header_main" [class.light_header]="isFrontPage" [class.header_full]="!hasSidebar"
@ -72,3 +76,4 @@
<role-verification *ngIf="stakeholder && properties.environment === 'development'"
[id]="stakeholder.alias" [name]="stakeholder.name" [type]="stakeholder.type"></role-verification>
</div>
</div>

View File

@ -12,6 +12,7 @@ import {Stakeholder, Topic, Visibility} from "./openaireLibrary/monitor/entities
import {LinksResolver} from "./search/links-resolver";
import {Header} from "./openaireLibrary/sharedComponents/navigationBar.component";
import {arrow_left} from "./openaireLibrary/utils/icons/icons";
import {properties} from "../environments/environment";
@Component({
@ -19,7 +20,7 @@ import {arrow_left} from "./openaireLibrary/utils/icons/icons";
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
properties: EnvProperties;
properties: EnvProperties = properties;
user: User;
params: BehaviorSubject<Params> = new BehaviorSubject<Params>(null);
hasSidebar: boolean = false;
@ -31,11 +32,21 @@ export class AppComponent implements OnInit, OnDestroy {
sideBarItems: MenuItem[] = [];
specialSideBarMenuItem: MenuItem = null;
menuItems: RootMenuItem[] = [];
menuHeader: Header = { route: "/", url: null, title: "Default menu header", logoUrl: null, logoSmallUrl:null, position:'center', badge: false };
menuHeader: Header = {
route: "/",
url: null,
title: "Default menu header",
logoUrl: null,
logoSmallUrl: null,
position: 'center',
badge: false
};
userMenuItems: MenuItem[] = [new MenuItem("", "My profile", "", "", false, [], [], {})];
adminMenuItems: MenuItem[] = [];
stakeholder: Stakeholder = null;
activeTopic: Topic = null;
loading: boolean = true;
paramsResolved: boolean = false;
innerWidth;
private subscriptions: any[] = [];
@ -53,6 +64,7 @@ export class AppComponent implements OnInit, OnDestroy {
r = r.firstChild;
}
let params = r.snapshot.params;
this.paramsResolved = true;
this.params.next(params);
}
}));
@ -89,22 +101,20 @@ export class AppComponent implements OnInit, OnDestroy {
this.isViewPublic = (params['view'] == 'public');
});
this.layoutService.setOpen(false);
this.propertiesService.loadEnvironment()
.then(properties => {
this.properties = properties;
this.subscriptions.push(this.params.subscribe(params => {
if(this.paramsResolved) {
this.loading = true;
this.layoutService.setSmallScreen((this.innerWidth && this.innerWidth < 1219));
this.layoutService.setOpen(!(this.innerWidth && this.innerWidth < 1219));
let isSearch = this.router.url.includes('search');
if (params && params['stakeholder']) {
if (!this.stakeholderService.stakeholder ||
this.stakeholderService.stakeholder.alias !== params['stakeholder']) {
this.stakeholderService.getStakeholder(this.properties.monitorServiceAPIURL, params['stakeholder']).subscribe(stakeholder => {
this.stakeholder = this.stakeholderService.stakeholder;
if (!this.stakeholder || this.stakeholderService.stakeholder.alias !== params['stakeholder']) {
this.stakeholderService.getStakeholder(params['stakeholder']).subscribe(stakeholder => {
if (stakeholder) {
this.stakeholder = stakeholder;
LinksResolver.setProperties(this.stakeholder.alias);
this.buildMenu();
this.stakeholderService.setStakeholder(stakeholder);
this.layoutService.setSmallScreen((this.innerWidth && this.innerWidth < 1219));
this.layoutService.setOpen(!(this.innerWidth && this.innerWidth < 1219));
if (isSearch) {
this.activeTopic = null;
} else if (params && params['topic'] && !this.activeTopic) {
@ -113,17 +123,18 @@ export class AppComponent implements OnInit, OnDestroy {
this.activeTopic = this.stakeholder.topics.find(topic => this.isPublicOrIsMember(topic.visibility));
}
this.setSideBar();
this.loading = false;
} else {
this.stakeholderService.setStakeholder(null);
LinksResolver.resetProperties();
this.navigateToError();
this.buildMenu();
this.loading = false;
}
}, error => {
this.stakeholderService.setStakeholder(null);
LinksResolver.resetProperties();
this.navigateToError();
this.buildMenu();
this.loading = false;
});
} else {
this.buildMenu();
@ -134,7 +145,7 @@ export class AppComponent implements OnInit, OnDestroy {
} else {
this.activeTopic = this.stakeholder.topics.find(topic => this.isPublicOrIsMember(topic.visibility));
}
this.loading = false;
}
} else {
LinksResolver.resetProperties();
@ -142,6 +153,8 @@ export class AppComponent implements OnInit, OnDestroy {
this.layoutService.setOpen(!(this.innerWidth && this.innerWidth < 1219));
this.stakeholder = null;
this.buildMenu();
this.loading = false;
}
}
}));
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
@ -153,7 +166,6 @@ export class AppComponent implements OnInit, OnDestroy {
console.log("App couldn't fetch properties");
console.log(error);
}));
});
}
public ngOnDestroy() {
@ -255,11 +267,27 @@ export class AppComponent implements OnInit, OnDestroy {
}
} else {
if (this.isFrontPage || !this.hasAdminMenu) {
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 };
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
};
//TODO monitor menu items?
} else {
this.menuHeader = { route: "/", url: null, title: "Monitor Dashboard", logoUrl: null, logoSmallUrl:null, position:'center' , badge: false };
this.menuHeader = {
route: "/",
url: null,
title: "Monitor Dashboard",
logoUrl: null,
logoSmallUrl: null,
position: 'center',
badge: false
};
this.adminMenuItems = [];
this.specialSideBarMenuItem = null;
this.adminMenuItems.push(new MenuItem("stakeholders", "Manage profiles", "", "/admin", false, [], [], {}, "<i uk-icon=\"cog\"></i>"));

View File

@ -20,6 +20,7 @@ import {SideBarModule} from "./openaireLibrary/dashboard/sharedComponents/sideba
import {SharedModule} from "./openaireLibrary/shared/shared.module";
import {Schema2jsonldModule} from "./openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
import {RoleVerificationModule} from "./openaireLibrary/role-verification/role-verification.module";
import {LoadingModule} from "./openaireLibrary/utils/loading/loading.module";
@NgModule({
@ -36,7 +37,7 @@ import {RoleVerificationModule} from "./openaireLibrary/role-verification/role-v
SubscribeModule.forRoot(),
BrowserModule.withServerTransition({appId: 'my-app'}),
AppRoutingModule,
UserMiniModule, SideBarModule, Schema2jsonldModule, RoleVerificationModule
UserMiniModule, SideBarModule, Schema2jsonldModule, RoleVerificationModule, LoadingModule
],
declarations: [AppComponent, OpenaireErrorPageComponent],
exports: [AppComponent],

View File

@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
import {ManageStakeholdersComponent} from "./manageStakeholders.component";
import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
import {LoginGuard} from "../openaireLibrary/login/loginGuard.guard";
@NgModule({
imports: [
@ -10,7 +10,7 @@ import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
{
path: '',
component: ManageStakeholdersComponent,
canActivate: [AdminDashboardGuard],
canActivate: [LoginGuard],
canDeactivate: [PreviousRouteRecorder],
data: {hasSidebar: true}
}

View File

@ -8,11 +8,11 @@ import {InputModule} from "../openaireLibrary/dashboard/sharedComponents/input/i
import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module";
import {ReactiveFormsModule} from "@angular/forms";
import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
import {EditStakeholderModule} from "../general/edit-stakeholder/edit-stakeholder.module";
import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
import {IconsService} from "../openaireLibrary/utils/icons/icons.service";
import {bullet} from "../openaireLibrary/utils/icons/icons";
import {LoginGuard} from "../openaireLibrary/login/loginGuard.guard";
@NgModule({
declarations: [ManageStakeholdersComponent],
@ -28,7 +28,7 @@ import {bullet} from "../openaireLibrary/utils/icons/icons";
IconsModule
],
providers: [
AdminDashboardGuard, PreviousRouteRecorder,
LoginGuard, PreviousRouteRecorder,
],
exports: [ManageStakeholdersComponent]
})

View File

@ -2,25 +2,41 @@ import {Injectable} from '@angular/core';
import {ActivatedRouteSnapshot, CanActivate, CanLoad, Route, Router, RouterStateSnapshot} from '@angular/router';
import {Observable} from 'rxjs/Observable';
import {filter, map} from "rxjs/operators";
import {filter, map, mergeMap} from "rxjs/operators";
import {UserManagementService} from "../openaireLibrary/services/user-management.service";
import {LoginErrorCodes} from "../openaireLibrary/login/utils/guardHelper.class";
import {Session} from "../openaireLibrary/login/utils/helper.class";
import {properties} from "../../environments/environment";
import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
import {of} from "rxjs";
@Injectable()
export class AdminDashboardGuard implements CanActivate, CanLoad {
export class AdminDashboardGuard implements CanActivate {
constructor(private router: Router,
private stakeholderService: StakeholderService,
private userManagementService: UserManagementService) {
}
check(path: string): Observable<boolean> | boolean {
check(path: string, alias: string): Observable<boolean> | boolean {
if (Session.isLoggedIn()) {
const obs = this.userManagementService.getUserInfo(false).pipe(map(user => {
return (Session.isPortalAdministrator(user) || Session.isCommunityCurator(user) || Session.isMonitorCurator(user) || Session.isKindOfMonitorManager(user));
if(user) {
return this.stakeholderService.getStakeholder(alias).pipe(map(stakeholder => {
if(stakeholder) {
return (Session.isPortalAdministrator(user) || Session.isCommunityCurator(user) ||
Session.isMonitorCurator(user) || Session.isManager(stakeholder.type, stakeholder.alias, user));
} else {
return false;
}
}));
obs.pipe(filter(isLoggedIn => !isLoggedIn)).subscribe(() => {
} else {
return of(false);
}
}), mergeMap( authorized => {
return authorized;
}));
obs.pipe(filter(isManager => !isManager)).subscribe(() => {
this.router.navigate(['/user-info'], {queryParams: {'errorCode': LoginErrorCodes.NOT_ADMIN, 'redirectUrl':path}});
});
return obs;
@ -31,10 +47,6 @@ export class AdminDashboardGuard implements CanActivate, CanLoad {
}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
return this.check(state.url);
}
canLoad(route: Route): Observable<boolean> | Promise<boolean> | boolean {
return this.check('/' + route.path);
return this.check(state.url, route.params.stakeholder);
}
}

View File

@ -32,21 +32,7 @@
<app-root></app-root>
</div>
</body>
<!--<script src="assets/theme-assets/js/common.min.js"></script>
<script src="assets/theme-assets/js/altair_admin_common.min.js"></script>
<script src="assets/theme-assets/uikit/js/uikit.min.js"></script>
<script src="assets/theme-assets/uikit/js/uikit-icons.min.js"></script>-->
<script src="https://cdn.ckeditor.com/4.5.11/full-all/ckeditor.js"></script>
<script>
if(Modernizr.touch) {
// fastClick (touch devices)
FastClick.attach(document.body);
}
$window.load(function() {
// ie fixes
altair_helpers.ie_fix();
});
</script>
<script type="text/javascript">
function loadAltmetrics(e, t, n) {
var d = "createElement", c = "getElementsByTagName", m = "setAttribute", n = document.getElementById(e);