myoffice_public/MyOffice.SPA/src/app/layout/header/header.component.ts

// angular
import { DOCUMENT } from '@angular/common';
import { Component } from '@angular/core';
import { Inject } from '@angular/core';
import { ElementRef } from '@angular/core';
import { OnInit } from '@angular/core';
import { Renderer2 } from '@angular/core';
import { AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';

// libs
import { NgScrollbarModule } from 'ngx-scrollbar';

// app
import { ConfigService } from 'src/app/config/config.service';
import { InConfiguration } from 'src/app/core/models/config.interface';
import { AuthService } from 'src/app/core/service/auth.service';
import { LanguageService } from 'src/app/core/service/language.service';
import { UnsubscribeOnDestroyAdapter } from 'src/app/shared/UnsubscribeOnDestroyAdapter';
import { SharedModule } from 'src/app/shared/shared.module';

interface Notifications {
	message: string;
	time: string;
	icon: string;
	color: string;
	status: string;
}

@Component({
	selector: 'app-header',
	templateUrl: './header.component.html',
	styleUrls: ['./header.component.scss'],
	standalone: true,
	imports: [SharedModule, NgScrollbarModule],
})
export class HeaderComponent extends UnsubscribeOnDestroyAdapter implements OnInit, AfterViewInit {

	config!: InConfiguration;

	userImg?: string;
	userName?: string;

	homePage?: string;
	isNavbarCollapsed = true;
	flagvalue: string | string[] | undefined;
	countryName: string | string[] = [];
	langStoreValue?: string;
	defaultFlag?: string;
	isOpenSidebar?: boolean;
	docElement: HTMLElement | undefined;
	isFullScreen = false;

	constructor(
		@Inject(DOCUMENT) private document: Document,
		private renderer: Renderer2,
		public elementRef: ElementRef,
		private configService: ConfigService,
		private authService: AuthService,
		private router: Router,
		public languageService: LanguageService
	) {
		super();

		this.subs.sink = this.authService.currentUser$.subscribe(() => {
			this.setUser();
		});
	}

	listLang = [
		{ text: 'English', flag: 'assets/images/flags/us.jpg', lang: 'en' },
		{ text: 'Spanish', flag: 'assets/images/flags/spain.jpg', lang: 'es' },
		{ text: 'German', flag: 'assets/images/flags/germany.jpg', lang: 'de' },
		{ text: 'Ukraine', flag: 'assets/images/flags/ukraine.png', lang: 'ua' },
	];
	notifications: Notifications[] = [
		{
			message: 'Please check your mail',
			time: '14 mins ago',
			icon: 'mail',
			color: 'nfc-green',
			status: 'msg-unread',
		},
		{
			message: 'New Employee Added..',
			time: '22 mins ago',
			icon: 'person_add',
			color: 'nfc-blue',
			status: 'msg-read',
		},
		{
			message: 'Your leave is approved!! ',
			time: '3 hours ago',
			icon: 'event_available',
			color: 'nfc-orange',
			status: 'msg-read',
		},
		{
			message: 'Lets break for lunch...',
			time: '5 hours ago',
			icon: 'lunch_dining',
			color: 'nfc-blue',
			status: 'msg-read',
		},
		{
			message: 'Employee report generated',
			time: '14 mins ago',
			icon: 'description',
			color: 'nfc-green',
			status: 'msg-read',
		},
		{
			message: 'Please check your mail',
			time: '22 mins ago',
			icon: 'mail',
			color: 'nfc-red',
			status: 'msg-read',
		},
		{
			message: 'Salary credited...',
			time: '3 hours ago',
			icon: 'paid',
			color: 'nfc-purple',
			status: 'msg-read',
		},
	];

	ngOnInit() {
		this.config = this.configService.configData;

		this.setUser();

		this.homePage = 'dashboard/rests';

		this.langStoreValue = localStorage.getItem('lang') as string;
		const val = this.listLang.filter((x) => x.lang === this.langStoreValue);
		this.countryName = val.map((element) => element.text);
		if (val.length === 0) {
			if (this.flagvalue === undefined) {
				this.defaultFlag = 'assets/images/flags/us.jpg';
			}
		} else {
			this.flagvalue = val.map((element) => element.flag);
		}
	}

	ngAfterViewInit() {
		// set theme on startup
		if (localStorage.getItem('theme')) {
			this.renderer.removeClass(this.document.body, this.config.layout.variant);
			this.renderer.addClass(
				this.document.body,
				localStorage.getItem('theme') as string
			);
		} else {
			this.renderer.addClass(this.document.body, this.config.layout.variant);
		}

		if (localStorage.getItem('menuOption')) {
			this.renderer.addClass(
				this.document.body,
				localStorage.getItem('menuOption') as string
			);
		} else {
			this.renderer.addClass(
				this.document.body,
				'menu_' + this.config.layout.sidebar.backgroundColor
			);
		}

		if (localStorage.getItem('choose_logoheader')) {
			this.renderer.addClass(
				this.document.body,
				localStorage.getItem('choose_logoheader') as string
			);
		} else {
			this.renderer.addClass(
				this.document.body,
				'logo-' + this.config.layout.logo_bg_color
			);
		}

		if (localStorage.getItem('sidebar_status')) {
			if (localStorage.getItem('sidebar_status') === 'close') {
				this.renderer.addClass(this.document.body, 'side-closed');
				this.renderer.addClass(this.document.body, 'submenu-closed');
			} else {
				this.renderer.removeClass(this.document.body, 'side-closed');
				this.renderer.removeClass(this.document.body, 'submenu-closed');
			}
		} else {
			if (this.config.layout.sidebar.collapsed === true) {
				this.renderer.addClass(this.document.body, 'side-closed');
				this.renderer.addClass(this.document.body, 'submenu-closed');
			}
		}
	}

	callFullscreen() {
		if (!this.isFullScreen) {
			this.docElement?.requestFullscreen();
		} else {
			document.exitFullscreen();
		}
		this.isFullScreen = !this.isFullScreen;
	}

	setLanguage(text: string, lang: string, flag: string) {
		this.countryName = text;
		this.flagvalue = flag;
		this.langStoreValue = lang;
		this.languageService.setLanguage(lang);
	}

	mobileMenuSidebarOpen(event: Event, className: string) {
		const hasClass = (event.target as HTMLInputElement).classList.contains(
			className
		);
		if (hasClass) {
			this.renderer.removeClass(this.document.body, className);
		} else {
			this.renderer.addClass(this.document.body, className);
		}

		const hasClass2 = this.document.body.classList.contains('side-closed');
		if (hasClass2) {
			// this.renderer.removeClass(this.document.body, "side-closed");
			this.renderer.removeClass(this.document.body, 'submenu-closed');
		} else {
			// this.renderer.addClass(this.document.body, "side-closed");
			this.renderer.addClass(this.document.body, 'submenu-closed');
		}
	}

	callSidemenuCollapse() {
		const hasClass = this.document.body.classList.contains('side-closed');
		if (hasClass) {
			this.renderer.removeClass(this.document.body, 'side-closed');
			this.renderer.removeClass(this.document.body, 'submenu-closed');
		} else {
			this.renderer.addClass(this.document.body, 'side-closed');
			this.renderer.addClass(this.document.body, 'submenu-closed');
		}
	}

	logout() {
		this.subs.sink = this.authService.logout().subscribe((res) => {
			if (!res.success) {
				this.router.navigate(['/authentication/signin']);
			}
		});
	}

	private setUser() {
		this.userImg = this.authService.currentUserValue.img;

		this.userName = [
			this.authService.currentUserValue.firstName,
			this.authService.currentUserValue.lastName
		].join(' ').trim();

		this.userName = this.userName || this.authService.currentUserValue.userName;
	}
}