Angular 6 Material Menu Building,

Question

Due to the complexity of the company I work for, we have a number of departments and a number of roles within each department. Therefore using the typical roles of admin, staff and user simply won't cut it. Therefore I am using bit manipulation to assign a value to each department/role in order to prevent complicated user access control strings (for routes and menus).

I have the code below, but no matter what I do, I cannot get the children of the menu item to be visible or not depending upon the UAC value.

import { Injectable } from '@angular/core';

export interface BadgeItem {
    type: string;
    value: string;
}
export interface Saperator {
    name: string;
    type ? : string;
}
export interface ChildrenItems {
    state: string;
    name: string;
    type ? : string;
}

export interface Menu {
    state: string;
    name: string;
    type: string;
    icon: string;
    badge ? : BadgeItem[];
    saperator ? : Saperator[];
    children ? : ChildrenItems[];
}

const MENUITEMS = [
    {
        state: '',
        name: 'Personal',
        type: 'saperator',
        icon: 'av_timer'
    },
    {
        state: 'dashboards',
        name: 'Dashboards',
        type: 'sub',
        icon: 'av_timer',
        children: [
            { state: 'dashboard1', name: 'Dashboard 1', UAC: 0 },
            { state: 'dashboard2', name: 'Dashboard 2', UAC: 128 },
        ]
    },
    {
        state: 'apps',
        name: 'Apps',
        type: 'sub',
        icon: 'apps',
        children: [
            { state: 'calendar', name: 'Calendar' },
            { state: 'messages', name: 'Mail box' },
            { state: 'chat', name: 'Chat' },
            { state: 'taskboard', name: 'Taskboard' }
        ],
        UAC: 256
    },
    {
        state: '',
        name: 'Forms, Table & Widgets',
        type: 'saperator',
        icon: 'av_timer'
    }, {
        state: 'datatables',
        name: 'Data Tables',
        type: 'sub',
        icon: 'border_all',

        children: [
            { state: 'basicdatatable', name: 'Basic Data Table' },
            { state: 'filter', name: 'Filterable' },
            { state: 'editing', name: 'Editing' },
        ]
    }, {
        state: 'pages',
        name: 'Pages',
        type: 'sub',
        icon: 'content_copy',

        children: [
            { state: 'icons', name: 'Material Icons' },
            { state: 'timeline', name: 'Timeline' },
            { state: 'invoice', name: 'Invoice' },
            { state: 'pricing', name: 'Pricing' },
            { state: 'helper', name: 'Helper Classes' }
        ]
    }

];

@Injectable()

export class MenuItems {

    getMenuitem(): Menu[] {

        // Get the JSON form of the stored user object
        let currentUser = JSON.parse(localStorage.getItem('currentUser'));

        // If the user has logged in, then this user object will be non null
        if (currentUser && currentUser.token) 
        {
            var filtered_MENUITEMS = MENUITEMS.filter(obj => {

                let parentUAC: boolean = true;

                // Or are we using a UAC value instead.
                if(obj.UAC)
                {
                    // Current User UAC could be 256, using bit manipulation for the number of departments and roles.
                    parentUAC = ((obj.UAC & currentUser.UAC) > 0) ? true : false;
                } 

                // We are going to show the parent, now check the children.
                if( (parentUAC == true) && (obj.children) )
                {
                    // Need code in here to check for children of the menu item and removing if it's not meant to be visible.
                }

                return parentUAC;
            });

            return filtered_MENUITEMS;
        } 
        else 
        {
            return MENUITEMS;
        }

    }

}

I think the issue that I'm getting confused with, is that I'm trying to remove the sub-menu or child-menu item from the filtered OBJ whereas it should be removed from the main menu object.

I'm new to Angular so any help is greatly appreciated.

Thanks for reading.

Answer 1

Here's the code I eventually ended up using, just in case it is helpful to anyone in the future.

@Injectable()

export class MenuItems {

    getMenuitem(): Menu[] {

        // Set the default UAC.
        let UAC: number = 0;

        // Get the JSON form of the stored user object
        let currentUser = JSON.parse(localStorage.getItem('currentUser'));

        // If the user has logged in, then this user object will be non null
        if (currentUser && currentUser.token) 
        {
            // Overwrite the default UAC with the current users one.
            UAC = currentUser.UAC;
        }

        MENUITEMS.forEach(function(v, i){

                        // If there's a UAC, test it.
                        if( (v.UAC) && ( (v.UAC & UAC) != v.UAC))
                                MENUITEMS.splice(i, 1);

                        // If the menu item has children.
                        if(v.children)
                        {
                                let children: any = v.children;

                                children.forEach(function(w, j){

                                        // If a child has a UAC value, check it!
                                        if( (w.UAC) && ( (w.UAC & UAC) == w.UAC))
                                                MENUITEMS[i].children.splice(j, 1);
                                });

                        }
        })

        // Return the MENUITEMS.
        return MENUITEMS;
    }
}

This is how the code currently stands, no doubt it will be tweaked as the project progresses.

Answer 2

I changed your default parentUAC to false

let parentUAC: boolean = false;

I then changed your parentUAC comparison to this.

 parentUAC = obj.UAC == currentUser.UAC ? true : false;

I then used the view to control if the children items are displayed.

<button mat-button [matMenuTriggerFor]="menu3">Menu With UAC 256</button>
<mat-menu #menu3="matMenu">
    <div *ngFor="let item of getMenuitem({token:'1234', UAC:'256'})">
      <button *ngIf="!item.children" mat-menu-item>{{item.name}}</button>
      <button *ngIf="item.children" mat-menu-item [matMenuTriggerFor]="submenu">{{item.name}}</button>
      <mat-menu #submenu="matMenu">
        <button mat-menu-item *ngFor="let subItem of item.children">{{subItem.name}}</button>
      </mat-menu>
  </div>
</mat-menu> 

Please see Menu With UAC 256 in revised stackblitz.

Stackblitz

https://stackblitz.com/edit/angular-v43gjg?embed=1&file=app/menu-overview-example.ts