[Fixed] How to filter role in submenu inside menu array

Issue

I have sidebar-items.ts

export const ROUTES: RouteInfo[] = [
  {
    path: 'dashboard',
    title: 'dashboard',
    moduleName: 'dashboard',
    role: [Role.COMMUNITY_ADMIN, Role.BOARD_MEMBER,Role.CHAIRMAN,Role.OWNER,Role.TENANT],
    submenu: [],
  },
  {
    path: '',
    title: 'users',
    moduleName: 'users',
    role: [Role.COMMUNITY_ADMIN, Role.OWNER, Role.TENANT, Role.BOARD_MEMBER, Role.CHAIRMAN],
    submenu: [
      {
        path: 'persons',
        title: 'persons',
        moduleName: 'persons',
        role: [Role.COMMUNITY_ADMIN, Role.OWNER, Role.TENANT, Role.BOARD_MEMBER, Role.CHAIRMAN],
        submenu: [],
      },
      {
        path: 'users',
        title: 'users',
        moduleName: 'users',
        role: [Role.COMMUNITY_ADMIN],
        submenu: [],
      },
      {
        path: 'owner/list',
        title: 'owner',
        moduleName: 'owner',
        role: [Role.COMMUNITY_ADMIN, Role.OWNER, Role.TENANT, Role.BOARD_MEMBER, Role.CHAIRMAN],
        submenu: [],
      }
    ],
  },
  {....}]

My user login has role "TENANT".

I want to show menu with only Role.TENANT for this I create a filter like code below. This filter is only for menu, not for submenu. I want a filter for submenu, users’s submenu. When I login with account that has role TENANT, in menu doesn’t show users/users because users/users has only role: [Role.COMMUNITY_ADMIN].

this.allowedCommunity = 'community/create';
this.currentUserLoggedIn = this.authService.currentUserLoggedInAccount;
const userRolesFiltered = this.currentUserLoggedIn.user?.user_roles?.filter(
  (userRole: any) =>
    formatDate(userRole.end_date, 'yyyy-MM-dd', 'en_US') >=
    formatDate(new Date(), 'yyyy-MM-dd', 'en_US')
);
this.sidebarItems = ROUTES.filter(
  (x) =>
    userRolesFiltered?.some((userRole: any) =>
      x.role.includes(userRole.role.name)
    )
)

Any idea please?

Solution

There you go. Check my implementation at StackBlitz