SFM-Broker/src/app/top-bar/top-bar.component.ts

import {Component, OnDestroy, OnInit} from '@angular/core';
import {MenuService} from '../service/menu.service';
import {AuthService} from '../service/auth.service';
import {accountantMenuItems, brokerMenuItems, mainMenuItems, managerMenuItems, peopleMenuItems, userMenuItems} from '../main-menu-items';
import {ApiV1LoginResponse} from '../models/api-v1-login-response';
import {Subscription} from 'rxjs';
import {PeopleModel} from '../models/people.model';
import {SessionService} from '../service/session.service';


@Component({
  selector: 'app-top-bar',
  templateUrl: './top-bar.component.html',
  styleUrls: ['./top-bar.component.scss']
})
export class TopBarComponent implements OnInit , OnDestroy {
  login  = false;
  public LoggedInUser: PeopleModel;

  Avatar = './assets/img/logout.png';
  public items: any[] = mainMenuItems;
  private loginSub: Subscription;
  private logoutSub: Subscription;

  public showMenu = true;
  public opened = false;

  constructor(private menuService: MenuService,
              private ss: SessionService,
              private authService: AuthService) {
  }

  ngOnInit(): void {
    this.initAndSubLogin();
  }

  public initAndSubLogin(): void{
    this.login = this.ss.loggedIn.login;
    this.LoggedInUser = this.ss.loggedIn.User;

    this.selectMenuShow(this.ss.loggedIn.role);

    this.loginSub = this.ss.loginResult.subscribe(
      (rsp: ApiV1LoginResponse) => {
        this.login = rsp.login;
        this.LoggedInUser = this.ss.CurrentUser;
        this.selectMenuShow(rsp.role);
      }
    );

    this.logoutSub = this.ss.logoutEvent.subscribe(
      resp => {
        this.login = false;
        this.LoggedInUser = this.ss.CurrentUser; // always empty user
      }
    );
  }

  private selectMenuShow(role: string): void {
    this.showMenu = true;
    switch ( role ){
      case 'admin':
        this.items = mainMenuItems;
        break;
      case 'broker':
        this.items = brokerMenuItems;
        break;
      case 'user':
        this.items = userMenuItems;
        break;
      case 'people':
        this.items = peopleMenuItems;
        break;
      case 'manager':
        this.items = managerMenuItems;
        break;
      case 'accountant':
        this.items = accountantMenuItems;
        break;
      default:
        this.showMenu = false;
    }
  }

  // check menuItem has fontawesome
  public menuItemHasFontawesome(item: any): boolean {
    return item.hasOwnProperty('fa');
  }

  // menuItem clicked
  public onSelect({ item }): void {
    if (!item.items) {
      this.menuService.itemClicked.emit(item);

      // handle logout
      if (item.text.toLowerCase() === 'logout'){
        this.logout();
      }
    }
  }

  ngOnDestroy(): void {
    this.loginSub.unsubscribe();
    this.logoutSub.unsubscribe();
  }

  public logout(): void{
    this.opened = true;
  }

  public close(action: string): void {
    this.opened = false;
    if ( action === 'yes') {
      // this.login = false;
      this.authService.logout();
    }
  }

  public loggedInUserAvatar(): string {
    return this.authService.getUrl('avatar/') + this.ss.loggedIn.User.Id;
  }

  public profile(): void {
    this.menuService.showProfile();
}

}