Finish UI of Manage communities and manage managers

src/app/app.component.ts

@@ -230,9 +230,9 @@ export class AppComponent implements OnInit {
       };
       this.sideBarItems.push(new MenuItem("communities", "Manage Communities", "", "/", false, [], [], {}, {name: 'settings'}));
       if (Session.isPortalAdministrator(this.user)) {
-        this.sideBarItems.push(new MenuItem("super_admin", "Super Admin Options", "", "/admin-tools/portals", false, [], [], {}, {name: 'settings'}, null, null, 'admin/admin-tools'));
+        this.sideBarItems.push(new MenuItem("super_admin", "Super Admin Options", "", "/admin-tools/portals", false, [], [], {}, {name: 'settings'}, null, null, '/admin-tools'));
-        this.sideBarItems.push(new MenuItem("connect", "Connect Options", "", "/connect/admin-tools/pages", false, [], [], {}, {name: 'settings'}, null, null, 'admin/monitor/admin-tools'));
+        this.sideBarItems.push(new MenuItem("connect", "Connect Options", "", "/connect/admin-tools/pages", false, [], [], {}, {name: 'settings'}, null, null, '/connect/admin-tools'));
-        this.sideBarItems.push(new MenuItem("explore", "Explore Options", "", "/openaire/admin-tools/pages", false, [], [], {}, {name: 'settings'}, null, null, 'admin/monitor/admin-tools'));
+        this.sideBarItems.push(new MenuItem("explore", "Explore Options", "", "/openaire/admin-tools/pages", false, [], [], {}, {name: 'settings'}, null, null, '/openaire/admin-tools'));
       }
       this.specialSideBarMenuItem = null;
     }

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit 4966a1d342ae711a1a84ee924ab23e2f79271ec9
+Subproject commit 5e1fde78411e2913c3757534a073ace32a4eacf2

src/app/pages/manage-communities/manage-communities.component.ts

@@ -23,15 +23,16 @@ type Tab = 'all' | 'communities' | 'ris';
         <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 Research Community Dasbhoards
+              Admin Dashboard - Manage Communities
             </div>
+            <h1 class="uk-h4 uk-margin-remove">Research Communities & Initiatives</h1>
           </div>
         </div>
         <ul class="uk-tab uk-margin-top" uk-tab>
-          <li [class.uk-active]="tab === 'all'"><a routerLink="./"><span class="title">All</span></a></li>
+          <li [class.uk-active]="tab === 'all'"><a (click)="tab = 'all'"><span class="title">All</span></a></li>
-          <li [class.uk-active]="tab === 'communities'"><a routerLink="./" fragment="communities"><span class="title">Research Communities</span></a>
+          <li [class.uk-active]="tab === 'communities'"><a (click)="tab = 'communities'"><span class="title">Research Communities</span></a>
           </li>
-          <li [class.uk-active]="tab === 'ris'"><a routerLink="./" fragment="ris"><span class="title">Research Initiatives</span></a>
+          <li [class.uk-active]="tab === 'ris'"><a (click)="tab = 'ris'"><span class="title">Research Initiatives</span></a>
           </li>
         </ul>
       </div>
@@ -94,12 +95,8 @@ type Tab = 'all' | 'communities' | 'ris';
               </p>
             </div>
             <div class="logoContainer uk-margin-top uk-flex uk-flex-column uk-flex-center uk-flex-middle">
-              <img *ngIf="community.logoUrl; else elseBlock" [src]="community | logoUrl" class="uk-blend-multiply"
+              <img [src]="community | 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>
             </div>
           </a>
         </div>
@@ -148,13 +145,6 @@ export class ManageCommunitiesComponent implements OnInit, OnDestroy {
     
     this.loading = true;
     this.title.setTitle('Administrator Dashboard | Manage Communities');
-    this.subscriptions.push(this.route.fragment.subscribe((fragment: Tab) => {
-      if (this.isTab(fragment)) {
-        this.tab = fragment;
-      } else {
-        this.tab = 'all';
-      }
-    }));
     this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
       this.user = user;
       if (this.user) {
@@ -195,19 +185,6 @@ export class ManageCommunitiesComponent implements OnInit, OnDestroy {
       (this.tab === "ris" && this.ris.length === 0);
   }
   
-  private isTab(tab: Tab): boolean {
-    switch (tab) {
-      case "all":
-        return true;
-      case "communities":
-        return true;
-      case "ris":
-        return true;
-      default:
-        return false;
-    }
-  }
-  
   public applyFilters() {
     this.filteredCommunities = this.communities.filter(community => community.shortTitle.toLowerCase().includes(this.searchText) || community.title.toLowerCase().includes(this.searchText) || community.communityId.toLowerCase().includes(this.searchText));
     this.filteredRis = this.ris.filter(community => community.shortTitle.toLowerCase().includes(this.searchText) || community.title.toLowerCase().includes(this.searchText) || community.communityId.toLowerCase().includes(this.searchText));

src/app/pages/users/users-managers/users-managers.component.ts

@@ -6,20 +6,25 @@ import {Subscriber} from "rxjs";
 import {Email} from "../../../openaireLibrary/utils/email/email";
 import {Composer} from "../../../openaireLibrary/utils/email/composer";
 import {properties} from "../../../../environments/environment";
+import {CommunityInfo} from "../../../openaireLibrary/connect/community/communityInfo";
 
 @Component({
   selector: 'users-managers',
   template: `
-    <role-users [id]="communityId" [type]="type" [name]="name" [inviteDisableMessage]="inviteDisableMessage"
+    <role-users [id]="community.communityId" [type]="community.type" [name]="community.shortTitle" [inviteDisableMessage]="inviteDisableMessage"
-                [link]="link" [role]="'manager'" [message]="message" [emailComposer]="emailComposer">
+                [link]="link" [role]="'manager'" [message]="message" [emailComposer]="emailComposer" (stickyEmitter)="stickyPageHeader = $event">
+      <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 Users</div>
+          <h1 class="uk-h4 uk-margin-remove">{{community.shortTitle}}</h1>
+        </div>
+      </div>
       <users-tabs tab="manager"></users-tabs>
     </role-users>
   `
 })
 export class UsersManagersComponent implements OnInit {
-  public communityId: string;
+  public community: CommunityInfo;
-  public name: string;
-  public type: string;
   public link: string;
   public loading: boolean;
   public message: string;
@@ -27,6 +32,7 @@ export class UsersManagersComponent implements OnInit {
   public emailComposer: Function = (name, recipient, role):Email => {
     return Composer.composeEmailForCommunityDashboard(name, recipient);
   }
+  public stickyPageHeader: boolean = false;
   private subscriptions: any[] = [];
   
   constructor(private communityService: CommunityService,
@@ -38,11 +44,9 @@ export class UsersManagersComponent implements OnInit {
     this.loading = true;
     this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(community => {
       if(community) {
-        this.communityId = community.communityId;
+        this.community = community;
-        this.name = community.shortTitle;
+        this.title.setTitle(this.community.communityId.toUpperCase() + " | Managers");
-        this.title.setTitle(this.communityId.toUpperCase() + " | Managers");
+        this.link = this.getURL(this.community.communityId);
-        this.type = 'community';
-        this.link = this.getURL(this.communityId);
         this.message = 'A manager has the right to access the administration part of Research Community Dashboard, ' +
           'where he is able to customize and manage the content, invite other users as managers or to subscribe.';
         if(community.status === "hidden") {

src/app/pages/users/users-managers/users-managers.module.ts

@@ -5,11 +5,12 @@ import {LoadingModule} from "../../../openaireLibrary/utils/loading/loading.modu
 import {RouterModule} from "@angular/router";
 import {RoleUsersModule} from "../../../openaireLibrary/dashboard/users/role-users/role-users.module";
 import {UsersTabsModule} from '../users-tabs.module';
+import {LogoUrlPipeModule} from "../../../openaireLibrary/utils/pipes/logoUrlPipe.module";
 
 @NgModule({
   imports: [CommonModule, LoadingModule, RoleUsersModule, RouterModule.forChild([
     {path: '', component: UsersManagersComponent}
-  ]), UsersTabsModule],
+  ]), UsersTabsModule, LogoUrlPipeModule],
   declarations: [UsersManagersComponent],
   exports: [UsersManagersComponent]
 })

src/app/pages/users/users-routing.module.ts

@@ -4,9 +4,9 @@ import {RouterModule} from '@angular/router';
 @NgModule({
   imports: [
     RouterModule.forChild([
-      {path: '', redirectTo: 'managers', pathMatch: 'full'},
+      {path: '', redirectTo: 'manager', pathMatch: 'full'},
-      {path: 'managers', loadChildren: () => import('./users-managers/users-managers.module').then(m => m.UsersManagersModule)},
+      {path: 'manager', loadChildren: () => import('./users-managers/users-managers.module').then(m => m.UsersManagersModule)},
-      {path: 'subscribers', loadChildren: () => import('./users-subscribers/users-subscribers.module').then(m => m.UsersSubscribersModule)},
+      {path: 'subscriber', loadChildren: () => import('./users-subscribers/users-subscribers.module').then(m => m.UsersSubscribersModule)},
       {
         path: 'notifications',
         loadChildren: () => import('../usernotifications/manage-user-notifications.module').then(m => m.ManageUserNotificationsModule)

src/app/pages/users/users-subscribers/users-subscribers.component.ts

@@ -8,7 +8,7 @@ import {Subscriber} from "rxjs";
   selector: 'users-subscribers',
   template: `
     <subscribers [id]="communityId" [type]="type" [name]="name" [inviteDisableMessage]="inviteDisableMessage">
-      <users-tabs tab="members"></users-tabs>
+      <users-tabs tab="subscriber"></users-tabs>
     </subscribers>
   `
 })

src/app/pages/users/users-tabs.component.ts

@@ -7,14 +7,13 @@ import {ActivatedRoute} from '@angular/router';
 @Component({
   selector: 'users-tabs',
   template: `
-    <ul class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m" uk-tab>
+    <ul class="uk-tab uk-flex uk-flex-center uk-flex-left@m" uk-tab>
-      <li [class.uk-active]="tab === 'managers'"><a routerLink="../managers"><span class="title">Managers</span></a></li>
+      <li [class.uk-active]="tab === 'manager'"><a routerLink="../manager">Managers</a></li>
-      <li [class.uk-active]="tab === 'members'"><a routerLink="../subscribers"><span class="title">Subscribers</span></a></li>
+      <li [class.uk-active]="tab === 'subscriber'"><a routerLink="../subscriber">Subscribers</a></li>
-      <li *ngIf="canManageNotifications" [class.uk-active]="tab === 'notifications'"><a routerLink="../notifications"><span
+      <li *ngIf="canManageNotifications" [class.uk-active]="tab === 'notifications'"><a routerLink="../notifications">Notification
-        class="title">Notification  settings</span></a></li>
+        settings</a></li>
-      <li [class.uk-active]="tab === 'claims'"><a routerLink="../claims"><span class="title">links</span></a></li>
+      <li [class.uk-active]="tab === 'claims'"><a routerLink="../claims">Links</a></li>
-      <li *ngIf=" isAManager" [class.uk-active]="tab === 'personal'"><a routerLink="../personal"><span
+      <li *ngIf="isAManager" [class.uk-active]="tab === 'personal'"><a routerLink="../personal">>Personal info</a></li>
-        class="title">Personal info</span></a></li>
     </ul>
   `
 })
@@ -22,7 +21,7 @@ export class UsersTabsComponent implements OnInit {
   @Input()
   public type: string;
   @Input()
-  public tab: "managers"| "members" | "notifications" | "claims" | "personal" = 'managers';
+  public tab: "manager"| "subscriber" | "notifications" | "claims" | "personal" = 'manager';
   private subscriptions = [];
   isAManager: boolean = false;
   canManageNotifications: boolean = false;

src/assets/dashboard-theme

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