[Monitor Dashboard | Trunk]: Users add fragment about tab

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@60270 d315682c-612b-4755-9ff5-7f18f6832af3

src/app/users/users.component.html

@@ -5,8 +5,8 @@
 </div>
 <ng-template #tabs>
   <ul class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m" uk-tab>
-    <li [class.uk-active]="tab === 'manager'"><a (click)="changeTab('manager')"><span class="title">Managers</span></a></li>
-    <li [class.uk-active]="tab === 'member'"><a (click)="changeTab('member')"><span class="title">Members</span></a></li>
+    <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>
   </ul>
 </ng-template>
 <role-users *ngIf="!loading && alias" [id]="alias" [type]="type" [name]="name" [link]="link" [role]="tab" [message]="messages.get(tab)" [emailComposer]="emailComposer">

src/app/users/users.component.ts

@@ -5,33 +5,44 @@ import {Subscriber} from "rxjs";
 import {Title} from "@angular/platform-browser";
 import {Composer} from "../openaireLibrary/utils/email/composer";
 import {Email} from "../openaireLibrary/utils/email/email";
+import {ActivatedRoute} from "@angular/router";
+
+type Tab = 'member' | 'manager';
 
 @Component({
   selector: 'users',
   templateUrl: 'users.component.html'
 })
-export class UsersComponent implements OnInit{
+export class UsersComponent implements OnInit {
   
   public alias: string;
   public name: string;
   public type: string;
   public link: string;
   public loading: boolean;
-  public messages: Map<"member" | "manager", string> = new Map<"member"|"manager", string>();
-  public tab: "manager" | "member" = 'manager';
-  private subscription;
-  public emailComposer: Function = (name, recipient, role):Email => {
+  public messages: Map<Tab, string> = new Map<Tab, string>();
+  public tab: Tab = 'manager';
+  private subscriptions = [];
+  public emailComposer: Function = (name, recipient, role): Email => {
     return Composer.composeEmailForMonitorDashboard(name, recipient, role);
   }
   
   constructor(private stakeholderService: StakeholderService,
+              private route: ActivatedRoute,
               private title: Title) {
   }
   
   ngOnInit() {
     this.loading = true;
-    this.subscription = this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
-      if(stakeholder) {
+    this.subscriptions.push(this.route.fragment.subscribe((fragment: Tab) => {
+      if (this.isTab(fragment)) {
+        this.tab = fragment;
+      } else {
+        this.tab = 'manager';
+      }
+    }));
+    this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
+      if (stakeholder) {
         this.alias = stakeholder.alias;
         this.name = stakeholder.name;
         this.title.setTitle(this.name + " | Users");
@@ -43,17 +54,26 @@ export class UsersComponent implements OnInit{
           'where he is able to customize and manage indicators, and invite other users as members.');
         this.loading = false;
       }
-    })
+    }));
   }
   
   ngOnDestroy() {
-    if (this.subscription instanceof Subscriber) {
-      this.subscription.unsubscribe();
-    }
+    this.subscriptions.forEach(value => {
+      if (value instanceof Subscriber) {
+        value.unsubscribe();
+      }
+    });
   }
   
-  changeTab(tab: "manager" | "member") {
-    this.tab = tab;
+  private isTab(tab: Tab): boolean {
+   switch (tab) {
+     case "manager":
+       return true;
+     case "member":
+       return true;
+     default:
+       return false;
+   }
   }
   
   private getURL(id: string): string {

src/app/users/users.module.ts

@@ -6,9 +6,10 @@ import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
 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";
 
 @NgModule({
-  imports: [CommonModule, UsersRoutingModule, LoadingModule, PageContentModule, RoleUsersModule],
+  imports: [CommonModule, UsersRoutingModule, LoadingModule, PageContentModule, RoleUsersModule, RouterModule],
   declarations: [UsersComponent],
   exports: [UsersComponent],
   providers: [AdminDashboardGuard]