Split managers and members to seperate pages. Apply multiply filter to all logos in page content header.

src/app/admin-stakeholder/admin-stakeholder-routing.module.ts

@@ -11,6 +11,11 @@ import {RouterModule} from "@angular/router";
     },
     {
       path: 'users',
+      redirectTo: 'users/manager',
+      pathMatch: 'full'
+    },
+    {
+      path: 'users/:user_type',
       loadChildren: () => import('../users/users.module').then(m => m.UsersModule),
       data: {hasAdminMenu: true},
       pathMatch: 'full'

src/app/general/general.component.html

@@ -2,8 +2,7 @@
 	<div header *ngIf="stakeholder">
 		<div class="uk-flex uk-flex-middle uk-grid" uk-grid>
 			<div class="uk-width-expand uk-flex uk-flex-middle uk-margin-top uk-margin-bottom info" [class.uk-active]="stickyPageHeader">
-				<img *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl" class="uk-margin-right">
-				<img *ngIf="!stakeholder.logoUrl" src="assets/common-assets/placeholder.png" class="uk-margin-right">
+				<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>

src/app/general/general.module.ts

@@ -10,6 +10,7 @@ import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module
 import {ReactiveFormsModule} from "@angular/forms";
 import {EditStakeholderModule} from "./edit-stakeholder/edit-stakeholder.module";
 import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
+import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module";
 
 @NgModule({
   declarations: [GeneralComponent],
@@ -22,7 +23,8 @@ import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/p
     AlertModalModule,
     ReactiveFormsModule,
     EditStakeholderModule,
-    PageContentModule
+    PageContentModule,
+    LogoUrlPipeModule
   ],
   providers: [
     PreviousRouteRecorder,

src/app/manageStakeholders/manageStakeholders.component.html

@@ -1,11 +1,11 @@
 <div page-content (stickyEmitter)="stickyPageHeader = $event">
   <div header>
-    <div class="uk-flex uk-flex-middle uk-margin-top info"
-         [class.uk-active]="stickyPageHeader">
+    <div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader">
       <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>
     </div>
     <ul *ngIf="isCurator()" class="uk-tab uk-margin-top" uk-tab>
@@ -26,7 +26,7 @@
 			<div uk-height-match="target: .logoContainer; row: false">
 				<div *ngIf="tab != 'profiles' && isCurator()" class="uk-section">
 					<h4>Profile Templates</h4>
-					<div class="uk-grid uk-child-width-1-4@xl uk-child-width-1-3@l uk-child-width-1-2@m uk-grid-match" uk-grid>
+					<div class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m uk-child-width-1-1 uk-grid-match" uk-grid>
 						<ng-template ngFor [ngForOf]="displayDefaultStakeholders" let-stakeholder>
 							<ng-container *ngTemplateOutlet="stakeholderBox; context: {stakeholder:stakeholder}"></ng-container>
 						</ng-template>
@@ -42,7 +42,7 @@
 				</div>
 				<div *ngIf="tab != 'templates' && isManager()" class="uk-section">
 					<h4>Profiles</h4>
-					<div class="uk-grid uk-grid-match uk-child-width-1-4@xl uk-child-width-1-3@l uk-child-width-1-2@m" uk-grid>
+					<div class="uk-grid uk-grid-match uk-child-width-1-3@l uk-child-width-1-2@m uk-child-width-1-1" uk-grid>
 						<ng-template ngFor [ngForOf]="displayStakeholders" let-stakeholder>
 							<ng-container *ngTemplateOutlet="stakeholderBox; context: {stakeholder:stakeholder}"></ng-container>
 						</ng-template>
@@ -96,18 +96,14 @@
 					</p>
 				</div>
         <div class="logoContainer uk-margin-top uk-flex uk-flex-column uk-flex-center uk-flex-middle">
-          <img *ngIf="stakeholder.logoUrl; else elseBlock" [src]="stakeholder | logoUrl" class="uk-blend-multiply" style="max-height: 80px;">
-					<ng-template #elseBlock>
-						<img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-blend-multiply" style="max-height: 80px;">
-					</ng-template>
+          <img [src]="stakeholder | logoUrl" class="uk-blend-multiply" style="max-height: 80px;">
         </div>
       </a>
     </div>
   </div>
 </ng-template>
-
 <ng-template #newBox let-text="text" let-isDefault="isDefault">
-  <div *ngIf="!loading">
+  <ng-container *ngIf="!loading">
     <div class="uk-card uk-card-default uk-text-center uk-card-body clickable" (click)="editStakeholder(null, isDefault)">
       <div class="uk-text-small uk-text-muted">
         {{text}}
@@ -118,7 +114,7 @@
         </span>
       </div>
     </div>
-  </div>
+  </ng-container>
 </ng-template>
 <modal-alert #editStakeholderModal
 						id="edit_modal" [large]="true" classTitle="uk-background-primary uk-light"

src/app/monitor/monitor.component.html

@@ -42,10 +42,7 @@
 <div page-content (stickyEmitter)="stickyPageHeader = $event">
   <div *ngIf="activeTopic && activeTopic.categories.length > 0" header>
     <div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader">
-      <img *ngIf="stakeholder.logoUrl; else elseBlock" [src]="stakeholder | logoUrl" class="uk-margin-right">
-			<ng-template #elseBlock>
-				<img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-margin-right">
-			</ng-template>
+      <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>

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit 950f50030fa8256f90b577dc5866526ff98fcda1
+Subproject commit 5e1fde78411e2913c3757534a073ace32a4eacf2

src/app/topic/topic.component.html

@@ -114,8 +114,7 @@
   <div header>
     <div *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex]">
       <div class="uk-width-expand uk-flex uk-margin-top uk-flex-middle info" [class.uk-active]="stickyPageHeader">
-        <img *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl" class="uk-margin-right">
-        <img *ngIf="!stakeholder.logoUrl" src="assets/common-assets/placeholder.png" class="uk-margin-right">
+        <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>

src/app/topic/topic.module.ts

@@ -18,11 +18,12 @@ import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
 import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
 import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
 import {NotifyFormModule} from "../openaireLibrary/notifications/notify-form/notify-form.module";
+import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module";
 
 @NgModule({
   imports: [
     CommonModule, TopicRoutingModule, ClickModule, RouterModule, FormsModule, AlertModalModule,
-    ReactiveFormsModule, InputModule, IconsModule, PageContentModule, LoadingModule, NotifyFormModule
+    ReactiveFormsModule, InputModule, IconsModule, PageContentModule, LoadingModule, NotifyFormModule, LogoUrlPipeModule
   ],
   declarations: [
     TopicComponent, IndicatorsComponent

src/app/users/users.component.html

@@ -6,19 +6,18 @@
 <ng-template #tabs>
 	<div class="uk-margin uk-margin-remove-bottom">
 		<ul class="uk-tab">
-			<li [class.uk-active]="tab === 'manager'"><a routerLink="./"><span class="title">Managers</span></a></li>
-			<li [class.uk-active]="tab === 'member'"><a routerLink="./" fragment="member"><span class="title">Members</span></a></li>
+			<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>
 	</div>
 </ng-template>
-<role-users *ngIf="!loading && alias" [id]="alias" [type]="type" [name]="name" [link]="link" [role]="tab" [message]="messages.get(tab)"
+<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" (stickyEmitter)="stickyPageHeader = $event">
 	<div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader">
-		<img *ngIf="logo" [src]="logo" class="uk-margin-right">
-		<img *ngIf="!logo" src="assets/common-assets/placeholder.png" class="uk-margin-right">
+		<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">{{name}}</h1>
+			<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>
 	</div>
   <ng-container [ngTemplateOutlet]="tabs"></ng-container>

src/app/users/users.component.ts

@@ -11,6 +11,8 @@ import {Notification} from "../openaireLibrary/notifications/notifications";
 import {User} from "../openaireLibrary/login/utils/helper.class";
 import {UserManagementService} from "../openaireLibrary/services/user-management.service";
 import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
+import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder";
+import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
 
 type Tab = 'member' | 'manager';
 
@@ -19,11 +21,8 @@ type Tab = 'member' | 'manager';
   templateUrl: 'users.component.html'
 })
 export class UsersComponent implements OnInit {
-  
-  public alias: string;
-  public name: string;
-	public logo: string;
-  public type: string;
+ 
+	public stakeholder: Stakeholder;
   public link: string;
   public loading: boolean;
   public messages: Map<Tab, string> = new Map<Tab, string>();
@@ -38,10 +37,10 @@ export class UsersComponent implements OnInit {
     if(invitation) {
       invitation.link = this.link + invitation.link;
     }
-    let notification: Notification = NotificationUtils.invite(this.name, role, 'user', invitation);
+    let notification: Notification = NotificationUtils.invite(this.stakeholder.name, role, 'user', invitation);
     notification.entity = recipient;
-    notification.stakeholderType = this.type;
-    notification.stakeholder = this.alias;
+    notification.stakeholderType = this.stakeholder.type;
+    notification.stakeholder = this.stakeholder.alias;
     notification.name = this.user.firstname;
     notification.surname = this.user.lastname;
     notification.groups = [recipient];
@@ -57,21 +56,21 @@ export class UsersComponent implements OnInit {
   
   ngOnInit() {
     this.loading = true;
-    this.subscriptions.push(this.route.fragment.subscribe((fragment: Tab) => {
-      if (this.isTab(fragment)) {
-        this.tab = fragment;
+    this.subscriptions.push(this.route.params.subscribe(params => {
+      if (this.isTab(params['user_type'])) {
+        this.tab = params['user_type'];
       } else {
         this.tab = 'manager';
       }
+      if(this.stakeholder) {
+        this.title.setTitle(this.stakeholder.name + " | " + this.users);
+      }
     }));
     this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
       if (stakeholder) {
-        this.alias = stakeholder.alias;
-        this.name = stakeholder.name;
-				this.logo = stakeholder.logoUrl;
-        this.title.setTitle(this.name + " | Users");
-        this.type = stakeholder.type;
-        this.link = this.getURL(this.alias);
+				this.stakeholder = stakeholder;
+        this.title.setTitle(this.stakeholder.name + " | " + this.users);
+        this.link = this.getURL(this.stakeholder.alias);
         this.messages.set("member", 'A member has the right to view the <b>restricted access</b> areas of this indicator\'s profile. ' +
           'A member has <b>no access</b> to the administration part of the profile.');
         this.messages.set("manager", 'A manager has the right to access the administration part of this indicator\'s profile, ' +
@@ -92,6 +91,10 @@ export class UsersComponent implements OnInit {
     });
   }
   
+  get users(): string {
+    return StringUtils.capitalize(this.tab) + 's';
+  }
+  
   private isTab(tab: Tab): boolean {
    switch (tab) {
      case "manager":

src/app/users/users.module.ts

@@ -6,9 +6,10 @@ import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
 import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
 import {RoleUsersModule} from "../openaireLibrary/dashboard/users/role-users/role-users.module";
 import {RouterModule} from "@angular/router";
+import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module";
 
 @NgModule({
-  imports: [CommonModule, UsersRoutingModule, LoadingModule, PageContentModule, RoleUsersModule, RouterModule],
+  imports: [CommonModule, UsersRoutingModule, LoadingModule, PageContentModule, RoleUsersModule, RouterModule, LogoUrlPipeModule],
   declarations: [UsersComponent],
   exports: [UsersComponent]
 })

src/assets/dashboard-theme

@@ -1 +1 @@
-Subproject commit 635d56f198026c2d24a923ad58b813254591fa33
+Subproject commit cd1a176ceb3aaa3493e16fc4d7ef67749655f351