ekangularbase/src/baseclass/SidebarBase.ts

Authentication service for usermanagement(oidc client)

import { SideBarMenuClass } from '../SideBarMenu/side-bar-menu';
import { SideBarMenuService } from '../SideBarMenu/side-bar-menu.service';
import { MenuItem } from 'primeng/api';
import { AuthService } from '../auth/auth.service';
import { TranslateService } from '@ngx-translate/core';
import { Router, NavigationEnd } from '@angular/router';
import { OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { AppConfig } from 'ekangularbase/src/AppConfig/AppConfig';

export class SidebarBase implements OnInit {
    showSpinner = true;
    isActive = false;
    showMenu = '';
    pushRightClass = 'push-right';

    items: MenuItem[];
    itemsHide: MenuItem[];

    username: string;

    menuList: SideBarMenuClass[];

    LoadingCompletedSubscription: Subscription;

    constructor(public translate: TranslateService, public router: Router,
        public authService: AuthService, public sideBarMenuService: SideBarMenuService) {

        this.translate.addLangs(['en', 'fr', 'ur', 'es', 'it', 'fa', 'de']);
        this.translate.setDefaultLang('en');
        const browserLang = this.translate.getBrowserLang();
        this.translate.use(browserLang.match(/en|fr|ur|es|it|fa|de/) ? browserLang : 'en');

        this.router.events.subscribe(val => {
            if (
                val instanceof NavigationEnd &&
                window.innerWidth <= 992 &&
                this.isToggled()
            ) {
                this.toggleSidebar();
            }
        });

        this.username = this.authService.getUserName();
    }

    ngOnInit() {
        console.log('loadMenu ngOnInit');
        this.LoadingCompletedSubscription = this.authService.loadingcompleted.subscribe(s => {
            if (s) {
                console.log('loadMenu subscribe');
                this.initMenu();
                this.dynamicMenu(AppConfig.settings.module_name);
                this.ngOnLocalInit();
            }
        });
    }

    ngOnLocalInit() { }

    initMenu() {

        // this.items = [];

        this.itemsHide = [
            {
                label: 'RTL/LTR', icon: 'fa fa-arrows-h', command: (onclick) => { this.rltAndLtr(); }
            },
            {
                label: 'Language',
                icon: 'fa fa-language',
                items: [{ label: 'English', icon: '', command: (onclick) => { this.changeLang('en'); } },
                { label: 'French', icon: '', command: (onclick) => { this.changeLang('fr'); } },
                { label: 'Urdu', icon: '', command: (onclick) => { this.changeLang('ur'); } },
                { label: 'Spanish', icon: '', command: (onclick) => { this.changeLang('es'); } },
                { label: 'Italian', icon: '', command: (onclick) => { this.changeLang('it'); } },
                { label: 'Farsi', icon: '', command: (onclick) => { this.changeLang('fa'); } },
                { label: 'German', icon: '', command: (onclick) => { this.changeLang('de'); } },
                { label: 'Simplified Chinese', icon: '', command: (onclick) => { this.changeLang('zh-CHS'); } }
                ]
            },
            // {
            //     label: this.username, icon: 'fa fa-user',
            //     items: [{label: 'Profile', icon: 'fa fa-fw fa-user', routerLink: '/profile'},
            //             // {label: 'Inbox', icon: 'fa fa-fw fa-envelope'},
            //             // {label: 'Settings', icon: 'fa fa-fw fa-gear'},
            //             {label: 'Log Out', icon: 'fa fa-fw fa-power-off', command: (onclick)=> {this.onLoggedout()} }
            //     ]
            // }
        ];

        const items: MenuItem[] = [];

        // if (this.checkPermission("pf-cp")) {
        //     let newItem = {
        //         label: 'Change Password', icon: 'fa fa-fw fa-key', routerLink: '/change-password'
        //     }
        //     items.push(newItem);
        // }

        // if (this.checkPermission("pf-rd")) {
        //     let newItem = {
        //         label: 'Profile', icon: 'fa fa-fw fa-user', routerLink: '/profile'
        //     }
        //     items.push(newItem);
        // }

        const x = {
            label: 'Log Out', icon: 'fa fa-fw fa-power-off', command: (onclick) => { this.onLoggedout(); }
        };
        items.push(x);

        const i = {
            label: this.username, icon: 'fa fa-user',
            items: items
        };
        this.itemsHide.push(i);

    }

    createQueryParams(queryParams): any {
        if (!queryParams || queryParams === '') { return null; }

        try {
            const obj: any = JSON.parse(queryParams);

            return obj;
        } catch (error) {
            return null;
        }
    }

    dynamicMenu(moduleName: string) {
        this.showSpinner = true;
        const mod = moduleName.toLowerCase();

        if (mod === 'estimate' || mod === 'ocprofile' || mod === 'ideas') {
            this.sideBarMenuService.GetAllByMRC(moduleName).subscribe(res => {
                this.authService.currentSidebarMenu = res;
                this.items = [];
                this.createMenu(res);
            });
        } else {
            this.sideBarMenuService.GetByModule(moduleName).subscribe(res => {
                this.authService.currentSidebarMenu = res;
                this.items = [];
                this.createMenu(res);
            });
        }
    }

    menuClick(event) {
        console.log('menu click');
        console.log(event);
        this.authService.menuClicked.next({ previousUrl: this.authService.currentUrl, currentUrl: event });
        this.authService.ResetFlag();
        this.authService.currentUrl = event;
    }

    createMenu(res: SideBarMenuClass[]) {
        res = res.filter(r => r.isHide === false);
        this.menuList = res;

        for (let i = 0; i < res.length; i++) {
            try {
                if ((!res[i].parentMenuId || res[i].parentMenuId === '') &&
                    !(!res[i].routerLink || res[i].routerLink === '')) {
                    const col = <MenuItem>{};

                    col.label = res[i].displayName;
                    col.title = res[i].displayName;
                    col.icon = 'ipms-left-first-menu ' + res[i].icon;
                    col.styleClass = 'ipms-left-first-label';
                    col.routerLink = res[i].routerLink;
                    col.command = () => { this.menuClick(col.routerLink); };
                    if (res[i].queryParams) { col.queryParams = this.createQueryParams(res[i].queryParams); }

                    if (res[i].permission && this.checkPermission(res[i].permission)) {
                        this.items.push(col);
                    }
                } else if ((!res[i].parentMenuId || res[i].parentMenuId === '') &&
                    (!res[i].routerLink || res[i].routerLink === '')) {
                    const col = <MenuItem>{};
                    const subcollst: MenuItem[] = [];

                    col.label = res[i].displayName;
                    col.icon = res[i].icon;

                    const menuId = res[i].menuId;

                    if (!(!menuId || menuId === '')) {

                        for (let j = 0; j < res.length; j++) {
                            const subcol = <MenuItem>{};

                            try {
                                if ((res[j].parentMenuId === menuId) &&
                                    !(!res[j].routerLink || res[j].routerLink === '')) {
                                    subcol.label = res[j].displayName;
                                    subcol.title = res[j].displayName;
                                    subcol.icon = 'ipms-left-second-menu ' + res[j].icon;
                                    subcol.styleClass = 'ipms-left-second-label';
                                    subcol.routerLink = res[j].routerLink;
                                    subcol.command = () => { this.menuClick(subcol.routerLink); };
                                    if (res[j].queryParams) { subcol.queryParams = this.createQueryParams(res[j].queryParams); }

                                    if (res[j].permission && this.checkPermission(res[j].permission)) {
                                        subcollst.push(subcol);
                                    }
                                } else if ((res[j].parentMenuId === menuId) &&
                                    (!res[j].routerLink || res[j].routerLink === '')) {
                                    const loopResult = this.findSubMenu(res[j].menuId, 2);
                                    if (loopResult.length > 0) {
                                        subcol.label = res[j].displayName;
                                        subcol.icon = res[j].icon;
                                        subcol.items = loopResult;

                                        subcollst.push(subcol);
                                    }
                                }
                            } catch (error) {
                                console.log(error);
                            }
                        }

                    }

                    if (subcollst.length > 0) {
                        col.items = subcollst;
                        this.items.push(col);
                    }
                }
                // console.log(this.items);
            } catch (error) {
                console.log(error);
                return;
            }
        }

        this.showSpinner = false;
    }

    findSubMenu(parentMenuId: string, loopValue: number): MenuItem[] {
        loopValue += 1;
        const subcollst: MenuItem[] = [];

        if (!parentMenuId || parentMenuId === '') { return subcollst; }

        for (let j = 0; j < this.menuList.length; j++) {
            const subcol = <MenuItem>{};

            try {
                if (this.menuList[j].parentMenuId === parentMenuId &&
                    !(!this.menuList[j].routerLink || this.menuList[j].routerLink === '')) {
                    subcol.label = this.menuList[j].displayName;
                    subcol.title = this.menuList[j].displayName;
                    subcol.icon = 'ipms-left-third-menu ipms-left-menu-' + loopValue + ' ' + this.menuList[j].icon;
                    subcol.styleClass = 'ipms-left-third-label ipms-left-label-' + loopValue;
                    subcol.routerLink = this.menuList[j].routerLink;
                    subcol.command = () => { this.menuClick(subcol.routerLink); };
                    if (this.menuList[j].queryParams) { subcol.queryParams = this.createQueryParams(this.menuList[j].queryParams); }

                    if (this.menuList[j].permission && this.checkPermission(this.menuList[j].permission)) {
                        subcollst.push(subcol);
                    }
                } else if ((this.menuList[j].parentMenuId === parentMenuId) &&
                    (!this.menuList[j].routerLink || this.menuList[j].routerLink === '')) {
                    const loopResult = this.findSubMenu(this.menuList[j].menuId, loopValue);
                    if (loopResult.length > 0) {
                        subcol.label = this.menuList[j].displayName;
                        subcol.icon = this.menuList[j].icon;
                        subcol.items = loopResult;

                        subcollst.push(subcol);
                    }
                }
            } catch (error) {
                console.log(error);
            }
        }

        if (subcollst.length === 0) { return []; }

        return subcollst;
    }

    checkPermission(claim: string): boolean {
        return this.authService.hasPermissions(claim);
    }

    eventCalled() {
        this.isActive = !this.isActive;
    }

    addExpandClass(element: any) {
        if (element === this.showMenu) {
            this.showMenu = '0';
        } else {
            this.showMenu = element;
        }
    }

    isToggled(): boolean {
        const dom: Element = document.querySelector('body');
        return dom.classList.contains(this.pushRightClass);
    }

    toggleSidebar() {
        const dom: any = document.querySelector('body');
        dom.classList.toggle(this.pushRightClass);
    }

    rltAndLtr() {
        const dom: any = document.querySelector('body');
        dom.classList.toggle('rtl');
    }

    changeLang(language: string) {
        this.translate.use(language);
    }

    onLoggedout() {
        this.authService.logOut();
        // localStorage.removeItem('isLoggedin');
    }

    ngOnDestroy() {
        if (this.LoadingCompletedSubscription !== undefined) {
            this.LoadingCompletedSubscription.unsubscribe();
        }
    }

}