adastra_app/src/app/components/shared/layout/full.component.ts

import { Component, OnInit, OnDestroy, ChangeDetectorRef, inject } from '@angular/core';
import { Router, RouterOutlet, RouterModule } from '@angular/router';
import { MediaMatcher } from '@angular/cdk/layout';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatMenuModule } from '@angular/material/menu';
import { Observable, Subscription } from 'rxjs';

import { Menu, User } from '@models';
import { UserService } from '@services';
import {
    MenuItems,
    ShowAuthedDirective,
    AccordionAnchorDirective,
    AccordionLinkDirective,
    AccordionDirective,
} from '@components/shared';
//import { SpinnerComponent } from '@components/shared';
//import { HeaderComponent, FooterComponent } from '@components/shared/layout';
import { FooterComponent } from '@components/shared/layout';

/** @title Responsive sidenav */
@Component({
    selector: 'app-full-layout',
    imports: [
        RouterModule,
        RouterOutlet,
        MatBadgeModule,
        MatButtonModule,
        MatDividerModule,
        MatIconModule,
        MatListModule,
        MatMenuModule,
        MatSidenavModule,
        MatToolbarModule,
        ShowAuthedDirective,
        AccordionAnchorDirective,
        AccordionLinkDirective,
        AccordionDirective,
        FooterComponent,
        //HeaderComponent,
        //SpinnerComponent
    ],
    providers: [MenuItems],
    templateUrl: 'full.component.html',
    styleUrls: [],
})
export class FullComponent implements OnInit, OnDestroy {
    private router = inject(Router);
    private userService = inject(UserService);
    menuItems = inject(MenuItems);

    private _currentUser: Subscription = new Subscription();
    private _mobileQueryListener: () => void;
    mobileQuery: MediaQueryList;
    currentUser: User = {} as User;
    today: number = Date.now();
    siteLink = 'https://www.adastra-cbd.com';
    author = 'Ad Astra';
    links: Menu[] = [];
    visibleMenu: string[] = [];
    //visibleMenu: string[] = ['products', 'page'];
    //visibleMenu: string[] = ['products'];

    constructor() {
        const changeDetectorRef = inject(ChangeDetectorRef);
        const media = inject(MediaMatcher);

        this.mobileQuery = media.matchMedia('(min-width: 768px)');
        this._mobileQueryListener = () => changeDetectorRef.detectChanges();
        this.mobileQuery.addListener(this._mobileQueryListener);
    }

    ngOnInit() {
        const user$: Observable<User> = this.userService.currentUser;
        this._currentUser = user$.subscribe((userData) => {
            this.currentUser = userData;
            if (this.currentUser.role === 'Admin') {
                this.links = this.menuItems.getMenuItemsAdmin();
                //this.links = this.menuItems.getMenuItems();
            } else {
                this.links = this.menuItems.getMenuItems();
            }
        });
    }

    getMenuItems(): Menu[] {
        return this.links;
    }

    isVisibleMenu(state: string): boolean {
        const indexOf: number = this.visibleMenu.indexOf(state);
        if (indexOf !== -1) {
            return true;
        } else {
            return false;
        }
    }

    ngOnDestroy(): void {
        this._currentUser.unsubscribe();
        this.mobileQuery.removeListener(this._mobileQueryListener);
    }

    goToGitHub() {
        window.open('https://github.com/rampeur', '_blank');
    }

    toggleShowMenu(state: string) {
        const indexOf: number = this.visibleMenu.indexOf(state);
        if (indexOf !== -1) {
            this.visibleMenu.splice(indexOf, 1);
        } else {
            this.visibleMenu.push(state);
        }
    }

    logout() {
        this.userService.purgeAuth();
        this.router.navigateByUrl('/login');
    }
}