work on navbar

web/static/src/ts/core/base_widget.ts

@@ -40,7 +40,11 @@ export interface Type<T> extends Function {
 // Widget
 //------------------------------------------------------------------------------
 
-export class BaseWidget<T extends WEnv, Props, State> extends EventBus {
+export class BaseWidget<
+  T extends WEnv,
+  Props,
+  State extends {}
+> extends EventBus {
   __widget__: Meta<WEnv>;
   template: string = "default";
   inlineTemplate: string | null = null;
@@ -50,7 +54,7 @@ export class BaseWidget<T extends WEnv, Props, State> extends EventBus {
   }
 
   env: T;
-  state: Object = {};
+  state: State = <State>{};
   props: Props;
   refs: {
     [key: string]: BaseWidget<T, any, any> | HTMLElement | undefined;

web/static/src/ts/env.ts

@@ -36,9 +36,6 @@ export interface Env extends WEnv {
   // registries
   actionRegistry: Registry<ActionWidget>;
 
-  // data
-  menus: Menu[];
-
   // helpers
   rpc: IAjax["rpc"];
 
@@ -72,12 +69,6 @@ export const makeEnvironment = memoize(async function(): Promise<Env> {
   const actionManager = new ActionManager(actionRegistry);
   const notifications = new NotificationManager();
 
-  // demo data
-  const menus = [
-    { title: "Discuss", actionID: 1 },
-    { title: "CRM", actionID: 2 }
-  ];
-
   // templates
   const result = await fetch("templates.xml");
   if (!result.ok) {
@@ -98,8 +89,6 @@ export const makeEnvironment = memoize(async function(): Promise<Env> {
     actionRegistry,
     router,
 
-    menus,
-
     rpc: ajax.rpc,
 
     debug: false,

web/static/src/ts/misc/menu_helpers.ts

@@ -14,6 +14,7 @@ export interface BaseMenuItem {
 }
 
 export interface MenuItem extends BaseMenuItem {
+  // root menu id
   menuId: number;
   actionId: number;
   children: MenuItem[];
@@ -28,6 +29,10 @@ export interface MenuInfo {
 // Helpers
 //------------------------------------------------------------------------------
 
+/**
+ * Generate a valid MenuInfo object from a list of BaseMenuItems. This function
+ * is supposed to be called once at startup.
+ */
 export function processMenuItems(items: BaseMenuItem[]): MenuInfo {
   const menuMap: MenuInfo["menuMap"] = {};
   const roots: number[] = [];
@@ -38,10 +43,11 @@ export function processMenuItems(items: BaseMenuItem[]): MenuInfo {
     addToMap(root, root.id);
   }
 
-  function addToMap(m: BaseMenuItem, menuId: number) {
+  function addToMap(m: BaseMenuItem, menuId: number): MenuItem {
     let item: MenuItem = Object.assign({ menuId, actionId: -1 }, <MenuItem>m);
     menuMap[item.id] = item;
-    m.children.forEach(c => addToMap(c, menuId));
+    item.children = m.children.map(c => addToMap(c, menuId));
+    return item;
   }
 
   // add proper actionId to every menuitems

web/static/src/ts/services/action_manager.ts

@@ -59,10 +59,12 @@ export class ActionManager extends EventBus implements IActionManager {
   }
 
   doAction(request: ActionRequest) {
+    console.log("doaction", request);
     if (typeof request === "number") {
       // this is an action ID
-      let name = request === 1 ? "discuss" : "crm";
-      let title = request === 1 ? "Discuss" : "CRM";
+      let name = request === 131 ? "discuss" : "crm";
+      let title =
+        request === 131 ? "Discuss" : request === 250 ? "Notes" : "CRM";
       let Widget = this.registry.get(name);
       this.stack = [
         {

web/static/src/ts/widgets/Discuss.ts

@@ -18,7 +18,7 @@ interface State {
 export class Discuss extends Widget<{}, State> {
   template = "web.discuss";
   widgets = { Clock, Counter, ColorWidget };
-  state = { validcounter: true, color: "red" };
+  state: State = { validcounter: true, color: "red" };
 
   resetCounter(ev: MouseEvent) {
     if (this.refs.counter instanceof Counter) {

web/static/src/ts/widgets/Navbar.ts

@@ -1,6 +1,5 @@
-import { Menu } from "../env";
 import { MenuItem } from "../misc/menu_helpers";
-import { Widget } from "./widget";
+import { PureWidget } from "./widget";
 
 //------------------------------------------------------------------------------
 // Types
@@ -15,16 +14,21 @@ export interface Props {
 // Navbar
 //------------------------------------------------------------------------------
 
-export class Navbar extends Widget<Props, {}> {
+export class Navbar extends PureWidget<Props, {}> {
   template = "web.navbar";
 
-  getUrl(menu: Menu) {
-    const action_id = String(menu.actionID);
-    return this.env.router.formatURL("", { action_id });
+  getUrl(menu: MenuItem) {
+    const action_id = String(menu.actionId);
+    const menu_id = String(menu.menuId);
+    return this.env.router.formatURL("", { action_id, menu_id });
   }
 
   toggleHome(ev: MouseEvent) {
     ev.preventDefault();
     this.trigger("toggle_home_menu");
   }
+
+  openMenu(menu: MenuItem) {
+    this.trigger("open_menu", menu);
+  }
 }

web/static/src/ts/widgets/home_menu.ts

@@ -21,8 +21,8 @@ export class HomeMenu extends Widget<Props, {}> {
     return info.roots.map(root => info.menuMap[root]!);
   }
 
-  openApp(app: MenuItem, event: MouseEvent) {
+  openMenu(app: MenuItem, event: MouseEvent) {
     event.preventDefault();
-    this.trigger("app_opened", app);
+    this.trigger("open_menu", app);
   }
 }

web/static/src/ts/widgets/notification.ts

@@ -4,7 +4,9 @@ import { Widget } from "./widget";
 export class Notification extends Widget<INotification, {}> {
   template = "web.notification";
 
-  close() {
+  close(ev: MouseEvent) {
+    // we do not want the url to change
+    ev.preventDefault();
     this.env.notifications.close(this.props.id);
   }
 }

web/static/src/ts/widgets/root.ts

@@ -89,7 +89,8 @@ export class Root extends Widget<Props, State> {
     this.updateState({ inHome: !this.state.inHome });
   }
 
-  openApp(app: MenuItem) {
-    this.updateAppState(app, app.actionId);
+  openMenu(menu: MenuItem) {
+    const app = this.props.menuInfo.menuMap[menu.menuId]!;
+    this.updateAppState(app, menu.actionId);
   }
 }

web/static/src/ts/widgets/widget.ts

@@ -2,3 +2,23 @@ import { BaseWidget } from "../core/base_widget";
 import { Env } from "../env";
 
 export class Widget<Props, State> extends BaseWidget<Env, Props, State> {}
+
+// TODO: move this to PureComponent in core
+export class PureWidget<Props, State> extends Widget<Props, State> {
+  shouldUpdate(nextProps: Props): boolean {
+    for (let k in nextProps) {
+      if (nextProps[k] !== this.props[k]) {
+        return true;
+      }
+    }
+    return false;
+  }
+  async updateState(nextState: Partial<State>) {
+    for (let k in nextState) {
+      if (nextState[k] !== this.state[k]) {
+        return;
+      }
+    }
+    return super.updateState(nextState);
+  }
+}