31.3. Management Component Base Implementation (#31)

support-portal-frontend/src/app/component/management/management.component.html

@@ -1,2 +1,54 @@
-<p>management works!</p>
+<div class="container">
+  <div class="row mb-2 mt-2 text-center">
+    <div class="col-md-4">
+    </div>
+    <div class="col-md-4">
+      <h5>User Management Portal</h5>
+      <small *ngIf="titleAction$ | async as title">{{title}}</small>
+    </div>
+    <div class="col-md-4">
+    </div>
+  </div>
+
+  <!-- nav bar -->
+  <nav class="navbar navbar-expand-md breadcrumb">
+    <div class="collapse navbar-collapse" id="navbarCollapse">
+      <div class="nav nav-pills">
+        <a
+          class="nav-item nav-link ml-1"
+          routerLinkActive="active"
+          (click)="changeTitle('Users')"
+          data-bs-toggle="tab"
+          [routerLink]="['users']">
+          <i class="fa fa-users"></i>
+          Users
+        </a>
+
+        <a *ngIf="isAdmin"
+           class="nav-item nav-link ml-3"
+           routerLinkActive="active"
+           (click)="changeTitle('Settings')"
+           data-bs-toggle="tab"
+           [routerLink]="['settings']">
+          <i class="fa fa-cogs"></i>
+          Settings
+        </a>
+        <a
+          class="nav-item nav-link move-right mr-3"
+          routerLinkActive="active"
+          (click)="changeTitle('Profile')"
+          data-bs-toggle="tab"
+          [routerLink]="['profile']">
+          Welcome, {{loggedInUser.firstName}} {{loggedInUser.lastName}}
+          <i class="fa fa-user"></i>
+        </a>
+      </div>
+    </div>
+  </nav>
+
+  <!-- main content -->
+  <div class="tab-content mt-3" id="myTabContent">
     <router-outlet></router-outlet>
+  </div>
+
+</div>

support-portal-frontend/src/app/component/management/management.component.ts

@@ -1,4 +1,9 @@
 import {Component, OnInit} from '@angular/core';
+import {Role} from "../../enum/role.enum";
+import {User} from "../../model/user";
+import {AuthenticationService} from "../../service/authentication.service";
+import {Router} from "@angular/router";
+import {BehaviorSubject} from "rxjs";
 
 @Component({
   selector: 'app-management',
@@ -7,9 +12,26 @@ import {Component, OnInit} from '@angular/core';
 })
 export class ManagementComponent implements OnInit {
 
-  constructor() { }
+  public loggedInUser: User;
+  private titleSubject = new BehaviorSubject<string>('Users');
+  public titleAction$ = this.titleSubject.asObservable();
+
+  constructor(private authenticationService: AuthenticationService,
+              private router: Router) { }
 
   ngOnInit(): void {
+    this.loggedInUser = this.authenticationService.getUserFromLocalStorage();
   }
 
+  public changeTitle(title: string): void {
+    this.titleSubject.next(title);
+  }
+
+  public get isAdmin(): boolean {
+    return this.loggedInUser.role === Role.ADMIN || this.loggedInUser.role === Role.SUPER_ADMIN;
+  }
+
+  public get isManager(): boolean {
+    return this.isAdmin || this.loggedInUser.role === Role.MANAGER;
+  }
 }