Using Menu System

Menu System

The workbench-client has a unique, two part, menu system. This menu system is comprised of a secondary menu, and action menu. The secondary menu handles navigation and breadcrumbs, allowing the user to move around the website including back tracking. It is the menu which appear on the left side of the website for non-fullscreen pages. The action menu handles user actions related to a specific page. It appears on the right side of the website for non-fullscreen pages and allows the user to perform various actions such as navigating sub-pages.

Links in each menu break down into the following types:

• Menu Route
  • A menu link which routes to another angular component
• Menu Link
  • A menu link which redirects the user to an external site
• Menu Action
  • A menu button which runs a set instruction

Create Category

Categories organise menu items into groups under a single app route and name. To create a category for a group of components, create the file <category_name>.menus.ts inside the group folder. Then create the category similar to below:

import { Category } from "src/app/interfaces/menusInterfaces";
import { StrongRoute } from "src/app/interfaces/strongRoute";

export const <category_name>Route = StrongRoute.Base.add("<category_name>");

export const <category_name>Category: Category = {
  icon: ["fas", "<category_icon>"],
  label: <category_name>",
  route: <category_name>Route
};

Create Menu Route

A Menu Route is a link which routes to another angular component. To create a menu route, insert the following code into the <category_name>.menus.ts file with the necessary adjustments:

import { MenuRoute } from "src/app/interfaces/menusInterfaces";
import { isLoggedInPredicate } from "src/app/app.menus";

export const <menu_name>MenuItem = MenuRoute({
  icon: ["fas", <menu_icon>],
  label: "<menu_label>",
  route: <menu_category>Route.add("<menu_name>"),
  tooltip: () => "<menu_tooltip>"

  // Optional
  predicate: isLoggedInPredicate,
  order: {
    priority: 0,
    indentation: 0
  }
});

Create Menu Link

A Menu Link is a link which redirects the user to an external site. To create a menu link, insert the following code into the <category_name>.menus.ts file with the necessary adjustments:

import { MenuLink } from "src/app/interfaces/menusInterfaces";
import { isLoggedInPredicate } from "src/app/app.menus";

export const <menu_name>MenuItem = MenuLink({
  uri: "<menu_uri>",
  icon: ["fas", "<menu_icon>"],
  label: "<menu_label>",
  tooltip: () => "<menu_tooltip>"

  // Optional
  predicate: user => isLoggedInPredicate,
  order: {
    priority: 0,
    indentation: 0
  }
});

Create Menu Action

A Menu Action is a button which runs a set of instructions. To create a menu action, insert the following code into the <category_name>.menus.ts file with the necessary adjustments:

import { MenuAction } from "src/app/interfaces/menusInterfaces";
import { isLoggedInPredicate } from "src/app/app.menus";

export const <menu_name>MenuItem = MenuAction({
  icon: ["fas", "<menu_icon>"],
  label: "<menu_label>",
  tooltip: () => "<menu_tooltip>"
  action: () => { menu_action }

  // Optional
  predicate: user => isLoggedInPredicate,
  order: {
    priority: 0,
    indentation: 0
  }
});

Default Values

There are a number of default values you may use to create consistency across the website. These can be found in the src/app/app.menus.ts file and includes some default icons, and default predicates to be used by the menu system.

Implementing Page Components

To create a component which can be used by MenuRoutes, it must be a page component. To convert a component into a page component, it must follow the below template:

import { PageComponent } from "src/app/helpers/page/pageComponent";
import { Page } from "src/app/helpers/page/pageDecorator";

@Component({
  selector: "baw-mock"
})
class MockComponent extends PageComponent {
  constructor() {
    super();
  }
}

MockComponent.linkComponentToPageInfo({
  category: mockCategory,
  menus: {
    actions: List([]),
    links: List([]),
    actionsWidgets: List([new WidgetMenuItem(MockWidgetComponent, {})]),
    linksWidgets: List([new WidgetMenuItem(MockWidgetComponent, {})])
  },
  resolvers: { "projects": projectResolvers.list }
}).andMenuRoute(mockComponentMenuItem);

export { MockComponent }

Things to check:

• Did you extend PageComponent?
• Did you call super() in the constructor?
• Did you call both linkComponentToPageInfo and andMenuRoute in order, and export the modified class?
• Check your imports to ensure no import file paths end in '.js'