web-app-template/frontend/login-counter/src/app/components/header/header.component.ts

import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { Router } from '@angular/router';
import { LangChangeEvent, TranslateService } from '@ngx-translate/core';
import { MenuItem, PrimeNGConfig } from 'primeng/api';
import { catchError } from 'rxjs/operators';
import { AuthService } from 'src/app/services/auth/auth.service';
import { SettingsService } from 'src/app/services/settings/settings.service';
import { SpinnerService } from 'src/app/services/spinner/spinner.service';
import { ThemeService } from 'src/app/services/theme/theme.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
  @Output() isSidebarFullWidth: EventEmitter<boolean> = new EventEmitter<boolean>(this.themeService.isSidebarOpen);

  langList: MenuItem[] = [];
  themeList: MenuItem[] = [];
  userMenuList: MenuItem[];

  constructor(
    private authService: AuthService,
    private router: Router,
    private themeService: ThemeService,
    private spinnerService: SpinnerService,
    private settings: SettingsService,
    private translateService: TranslateService,
    private config: PrimeNGConfig
  ) { }

  ngOnInit(): void {
    this.translateService.setDefaultLang('en');
    this.initMenuLists();
    this.loadLang();
    this.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
      this.initUserMenuList();
    });
  }

  initUserMenuList(): void {
    this.spinnerService.showSpinner();
    const mail = this.authService.getEMailFromDecodedToken(this.authService.getDecodedToken());
    this.authService.getUserByEMail(mail)
      .pipe(catchError(err => {
        this.spinnerService.hideSpinner();
        this.authService.logout();
        throw err;
      }))
      .subscribe(user => {
        this.spinnerService.hideSpinner();


        this.userMenuList = [
          {
            label: `${user.firstName} ${user.lastName}`,
            disabled: true
          },
          {
            separator: true
          },
          {
            label: this.translateService.instant('header.change_password'), command: () => {
              this.changePassword();
            },
            icon: 'pi pi-key'
          },
          {
            label: this.translateService.instant('header.settings'), command: () => {
              this.userSettings();
            },
            icon: 'pi pi-cog'
          },
          {
            label: this.translateService.instant('header.logout'), command: () => {
              this.logout();
            },
            icon: 'pi pi-sign-out'
          }
        ];
      });
  }

  initMenuLists(): void {
    this.langList = [
      {
        label: 'English', command: () => {
          this.translate('en');
          this.setLang('en');
        },
      },
      {
        label: 'Deutsch', command: () => {
          this.translate('de');
          this.setLang('de');
        },
      },
    ];

    this.initUserMenuList();

    this.settings.getThemes().forEach(theme => {
      this.themeList.push({
        label: theme.Label,
        command: () => {
          this.changeTheme(theme.Name);
        }
      });
    });
  }

  toggleMenu(): void {
    this.themeService.setIsMenuOpen(!this.themeService.isSidebarOpen);
    this.isSidebarFullWidth.emit(this.themeService.isSidebarOpen);
  }

  changeTheme(name: string): void {
    this.themeService.setTheme(name);
  }

  changePassword(): void {
    this.router.navigate(['/change-password']);
  }

  userSettings(): void {
    this.router.navigate(['/user-settings']);
  }

  logout(): void {
    this.authService.logout();
  }

  translate(lang: string) {
    this.translateService.use(lang);
    this.translateService.get('primeng').subscribe(res => this.config.setTranslation(res));
  }

  loadLang(): void {
    const token = this.authService.getDecodedToken();
    const mail = this.authService.getEMailFromDecodedToken(token);

    if (!mail) {
      this.translate('en');
      return;
    }

    let lang = localStorage.getItem(`${mail}_lang`);
    if (!lang) {
      lang = 'en';
      this.setLang(lang);
    }
    this.translate(lang);
  }

  setLang(lang: string): void {
    this.authService.isUserLoggedInAsync().then(result => {
      if (!result) {
        return;
      }

      const token = this.authService.getDecodedToken();
      const mail = this.authService.getEMailFromDecodedToken(token);
      localStorage.setItem(`${mail}_lang`, lang);
    });
  }

}