From fe47322863a00ea1d4c65f7ecb68dc98f91b43ad Mon Sep 17 00:00:00 2001 From: Konstantinos Triantafyllou Date: Fri, 30 Oct 2020 11:33:51 +0000 Subject: [PATCH] [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 --- src/app/app.component.html | 149 ++++++------ src/app/app.component.ts | 214 ++++++++++-------- src/app/app.module.ts | 3 +- .../manageStakeholders-routing.module.ts | 4 +- .../manageStakeholders.module.ts | 6 +- src/app/utils/adminDashboard.guard.ts | 32 ++- src/index.html | 14 -- 7 files changed, 227 insertions(+), 195 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 04dd017..c776464 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,74 +1,79 @@ -
-
- - - - - - -
- - - - +
+ +
+
+
+
+ + + + + + +
+ + + + +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 058a5c7..6554c7e 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -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 = new BehaviorSubject(null); hasSidebar: boolean = false; @@ -29,13 +30,23 @@ export class AppComponent implements OnInit, OnDestroy { isFrontPage: boolean = false; isViewPublic: boolean = false; sideBarItems: MenuItem[] = []; - specialSideBarMenuItem:MenuItem = null; + 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,13 +64,14 @@ export class AppComponent implements OnInit, OnDestroy { r = r.firstChild; } let params = r.snapshot.params; + this.paramsResolved = true; this.params.next(params); } })); } ngOnInit() { - if(window) { + if (window) { this.innerWidth = window.innerWidth; } this.subscriptions.push(this.layoutService.hasSidebar.subscribe(hasSidebar => { @@ -89,71 +101,71 @@ 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 => { - 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 => { - 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) { - this.activeTopic = this.stakeholder.topics.find(topic => topic.alias === decodeURIComponent(params['topic']) && this.isPublicOrIsMember(topic.visibility)); - } else { - this.activeTopic = this.stakeholder.topics.find(topic => this.isPublicOrIsMember(topic.visibility)); - } - this.setSideBar(); + 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']) { + 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(); + if (isSearch) { + this.activeTopic = null; + } else if (params && params['topic'] && !this.activeTopic) { + this.activeTopic = this.stakeholder.topics.find(topic => topic.alias === decodeURIComponent(params['topic']) && this.isPublicOrIsMember(topic.visibility)); } else { - this.stakeholderService.setStakeholder(null); - LinksResolver.resetProperties(); - this.navigateToError(); - this.buildMenu(); + this.activeTopic = this.stakeholder.topics.find(topic => this.isPublicOrIsMember(topic.visibility)); } - }, error => { - this.stakeholderService.setStakeholder(null); + this.setSideBar(); + this.loading = false; + } else { LinksResolver.resetProperties(); this.navigateToError(); this.buildMenu(); - }); - } else { - this.buildMenu(); - if(isSearch) { - this.activeTopic = null; - } else if (params && params['topic']) { - this.activeTopic = this.stakeholder.topics.find(topic => topic.alias === decodeURIComponent(params['topic']) && this.isPublicOrIsMember(topic.visibility)); - } else { - this.activeTopic = this.stakeholder.topics.find(topic => this.isPublicOrIsMember(topic.visibility)); + this.loading = false; } - - } + }, error => { + LinksResolver.resetProperties(); + this.navigateToError(); + this.buildMenu(); + this.loading = false; + }); } else { - LinksResolver.resetProperties(); - this.stakeholderService.setStakeholder(null); - this.layoutService.setOpen(!(this.innerWidth && this.innerWidth < 1219)); - this.stakeholder = null; this.buildMenu(); + if (isSearch) { + this.activeTopic = null; + } else if (params && params['topic']) { + this.activeTopic = this.stakeholder.topics.find(topic => topic.alias === decodeURIComponent(params['topic']) && this.isPublicOrIsMember(topic.visibility)); + } else { + this.activeTopic = this.stakeholder.topics.find(topic => this.isPublicOrIsMember(topic.visibility)); + } + this.loading = false; } - })); - this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => { - this.user = user; - if(user){ - this.buildMenu(); - } - }, error => { - console.log("App couldn't fetch properties"); - console.log(error); - })); - }); + } else { + LinksResolver.resetProperties(); + this.stakeholderService.setStakeholder(null); + this.layoutService.setOpen(!(this.innerWidth && this.innerWidth < 1219)); + this.stakeholder = null; + this.buildMenu(); + this.loading = false; + } + } + })); + this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => { + this.user = user; + if (user) { + this.buildMenu(); + } + }, error => { + console.log("App couldn't fetch properties"); + console.log(error); + })); } public ngOnDestroy() { @@ -198,7 +210,7 @@ export class AppComponent implements OnInit, OnDestroy { this.menuItems = []; this.adminMenuItems = []; this.userMenuItems = []; - if(this.stakeholder) { + if (this.stakeholder) { if (this.isFrontPage) { this.menuHeader = { route: "/" + this.stakeholder.alias, @@ -209,16 +221,16 @@ export class AppComponent implements OnInit, OnDestroy { position: 'center', badge: false }; - if(this.isAdmin()) { + if (this.isAdmin()) { this.menuItems.push({ rootItem: new MenuItem("manage", "Manage", - "", "/admin", false, [], null, {}), items: [] + "", "/admin", false, [], null, {}), items: [] }); - + } - this.specialSideBarMenuItem = new MenuItem("search", "Search research outcomes", "", this.properties.searchLinkToResults, false, [], null, {}) + this.specialSideBarMenuItem = new MenuItem("search", "Search research outcomes", "", this.properties.searchLinkToResults, false, [], null, {}) this.specialSideBarMenuItem.icon = ''; - + } else { this.menuHeader = { route: "/admin/" + this.stakeholder.alias, @@ -231,14 +243,14 @@ export class AppComponent implements OnInit, OnDestroy { }; this.menuItems.push({ rootItem: new MenuItem("", "Dashboard", - "", '/'+ this.stakeholder.alias+'/', false, [], null, {}), items: [] + "", '/' + this.stakeholder.alias + '/', false, [], null, {}), items: [] }); - this.adminMenuItems.push(new MenuItem("general", "General", "", "/admin/"+this.stakeholder.alias, false, [], [], {}, "")); - this.adminMenuItems.push(new MenuItem("indicators", "Indicators", "", "/admin/"+this.stakeholder.alias + '/indicators', false, [], [], {}, "")); - this.adminMenuItems.push(new MenuItem("users", "Users", "", "/admin/"+this.stakeholder.alias+"/users", false, [], [], {}, "")); - this.specialSideBarMenuItem = new MenuItem("back", "Manage profiles", "", "/admin",false, [], null, {}); + this.adminMenuItems.push(new MenuItem("general", "General", "", "/admin/" + this.stakeholder.alias, false, [], [], {}, "")); + this.adminMenuItems.push(new MenuItem("indicators", "Indicators", "", "/admin/" + this.stakeholder.alias + '/indicators', false, [], [], {}, "")); + this.adminMenuItems.push(new MenuItem("users", "Users", "", "/admin/" + this.stakeholder.alias + "/users", false, [], [], {}, "")); + this.specialSideBarMenuItem = new MenuItem("back", "Manage profiles", "", "/admin", false, [], null, {}); this.specialSideBarMenuItem.icon = '' + arrow_left.data + ''; // ''; - + } this.userMenuItems = []; /* if (Session.isPortalAdministrator(this.user)) { @@ -253,13 +265,29 @@ export class AppComponent implements OnInit, OnDestroy { if (this.user) { this.userMenuItems.push(new MenuItem("", "User information", "", "/user-info", false, [], [], {})); } - }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 }; + } 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 + }; //TODO monitor menu items? - - }else{ - this.menuHeader = { route: "/", url: null, title: "Monitor Dashboard", logoUrl: null, logoSmallUrl:null, position:'center' , badge: false }; + + } else { + 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, [], [], {}, "")); @@ -275,18 +303,18 @@ export class AppComponent implements OnInit, OnDestroy { monitorOptions.items.push(new MenuItem("classes", "Class help texts", "", "/classContents", false, [], [], {communityId: 'openaire'})); monitorOptions.items.push(new MenuItem("helptexts", "Help texts", "", "/helptexts", false, [], [], {communityId: 'openaire'})); this.adminMenuItems.push(monitorOptions);*/ - + } } - + } public isAdmin() { - return this.user && (Session.isPortalAdministrator(this.user) || Session.isCommunityCurator(this.user) || Session.isMonitorCurator(this.user) || (this.stakeholder && Session.isManager(this.stakeholder.type,this.stakeholder.alias,this.user))); + return this.user && (Session.isPortalAdministrator(this.user) || Session.isCommunityCurator(this.user) || Session.isMonitorCurator(this.user) || (this.stakeholder && Session.isManager(this.stakeholder.type, this.stakeholder.alias, this.user))); } - + public isPublicOrIsMember(visibility: Visibility): boolean { - if(visibility == "PRIVATE"){ + if (visibility == "PRIVATE") { return false; } if (visibility == "PUBLIC") { @@ -294,25 +322,25 @@ export class AppComponent implements OnInit, OnDestroy { } else { if (this.isViewPublic) { // preview for not members return false; - } else if(this.isAdmin()) { + } else if (this.isAdmin()) { // if user is member, return true return true; } return false; } } - - createSearchParameters(){ - if(!this.stakeholder){ + + 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"){ + 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") { // https://beta.explore.openaire.eu/search/find/research-outcomes?f0=q&fv0=&resultbestaccessright=%22Open%20Access%22&community=%22mes%7C%7CEuropean%20Marine%20Science%22&qf=true - return { "community":encodeURIComponent("\"" + this.stakeholder.index_id + "||"+this.stakeholder.index_name + "\"" )}; - }else if(this.stakeholder.type == "organization"){ - return { "cf":true}; + return {"community": encodeURIComponent("\"" + this.stakeholder.index_id + "||" + this.stakeholder.index_name + "\"")}; + } else if (this.stakeholder.type == "organization") { + return {"cf": true}; } } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 959fc7a..559a0fb 100755 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -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], diff --git a/src/app/manageStakeholders/manageStakeholders-routing.module.ts b/src/app/manageStakeholders/manageStakeholders-routing.module.ts index 093fe70..b4817f7 100644 --- a/src/app/manageStakeholders/manageStakeholders-routing.module.ts +++ b/src/app/manageStakeholders/manageStakeholders-routing.module.ts @@ -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} } diff --git a/src/app/manageStakeholders/manageStakeholders.module.ts b/src/app/manageStakeholders/manageStakeholders.module.ts index d8a816a..76f9d77 100644 --- a/src/app/manageStakeholders/manageStakeholders.module.ts +++ b/src/app/manageStakeholders/manageStakeholders.module.ts @@ -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,12 +28,12 @@ import {bullet} from "../openaireLibrary/utils/icons/icons"; IconsModule ], providers: [ - AdminDashboardGuard, PreviousRouteRecorder, + LoginGuard, PreviousRouteRecorder, ], exports: [ManageStakeholdersComponent] }) export class ManageStakeholdersModule { constructor(private iconsService: IconsService) { - this.iconsService.registerIcons([ bullet]); + this.iconsService.registerIcons([bullet]); } } diff --git a/src/app/utils/adminDashboard.guard.ts b/src/app/utils/adminDashboard.guard.ts index 7d9a095..6b5c49a 100644 --- a/src/app/utils/adminDashboard.guard.ts +++ b/src/app/utils/adminDashboard.guard.ts @@ -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 { + check(path: string, alias: string): Observable | 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; + } + })); + } else { + return of(false); + } + }), mergeMap( authorized => { + return authorized; })); - obs.pipe(filter(isLoggedIn => !isLoggedIn)).subscribe(() => { + 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 { - return this.check(state.url); - } - - canLoad(route: Route): Observable | Promise | boolean { - return this.check('/' + route.path); + return this.check(state.url, route.params.stakeholder); } } diff --git a/src/index.html b/src/index.html index 7f39126..d183693 100644 --- a/src/index.html +++ b/src/index.html @@ -32,21 +32,7 @@
- -