refactoring: widgets -> ui, discuss in subfolder

web/static/src/ts/ui/discuss/clock.ts

@@ -0,0 +1,47 @@
+import { Widget } from "../widget";
+
+//------------------------------------------------------------------------------
+// Types
+//------------------------------------------------------------------------------
+
+interface State {
+  currentTime: string;
+}
+
+//------------------------------------------------------------------------------
+// Clock
+//------------------------------------------------------------------------------
+
+export class Clock extends Widget<{}, State> {
+  inlineTemplate = `<div class="o_clock"><t t-esc="state.currentTime"/></div>`;
+  timeout: any | undefined;
+
+  state = {
+    currentTime: ""
+  };
+
+  willStart() {
+    return this.env.rpc({ model: "res.partner", method: "fetch" });
+  }
+  mounted() {
+    this.updateTime();
+    this.startClock();
+  }
+
+  willUnmount() {
+    clearTimeout(this.timeout);
+  }
+
+  updateTime() {
+    this.updateState({ currentTime: new Date().toLocaleTimeString() });
+  }
+
+  startClock() {
+    const now = Date.now();
+    const offset = 1000 - (now % 1000);
+    this.timeout = setTimeout(() => {
+      this.updateTime();
+      this.startClock();
+    }, offset);
+  }
+}

web/static/src/ts/ui/discuss/counter.ts

@@ -0,0 +1,39 @@
+import { Widget } from "../widget";
+
+//------------------------------------------------------------------------------
+// Types
+//------------------------------------------------------------------------------
+
+interface Props {
+  initialState?: number;
+}
+
+interface State {
+  counter: number;
+}
+
+//------------------------------------------------------------------------------
+// Counter
+//------------------------------------------------------------------------------
+
+export class Counter extends Widget<Props, State> {
+  inlineTemplate = `
+    <div t-name="counter">
+      <button t-on-click="increment(-1)">-</button>
+      <span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
+      <button t-on-click="increment(1)">+</button>
+    </div>`;
+
+  state = {
+    counter: 0
+  };
+
+  constructor(parent: Widget<any, any>, props: Props) {
+    super(parent, props);
+    this.state.counter = props.initialState || 0;
+  }
+
+  increment(delta: number) {
+    this.updateState({ counter: this.state.counter + delta });
+  }
+}

web/static/src/ts/ui/discuss/discuss.ts

@@ -0,0 +1,63 @@
+import { Clock } from "./clock";
+import { Counter } from "./counter";
+import { Widget } from "../widget";
+
+//------------------------------------------------------------------------------
+// Types
+//------------------------------------------------------------------------------
+
+interface State {
+  validcounter: boolean;
+  color: "red" | "blue";
+}
+
+//------------------------------------------------------------------------------
+// Discuss
+//------------------------------------------------------------------------------
+
+export class Discuss extends Widget<{}, State> {
+  template = "web.discuss";
+  widgets = { Clock, Counter, ColorWidget };
+  state: State = { validcounter: true, color: "red" };
+
+  resetCounter(ev: MouseEvent) {
+    if (this.refs.counter instanceof Counter) {
+      this.refs.counter.updateState({ counter: 3 });
+    }
+  }
+
+  resetCounterAsync(ev: MouseEvent) {
+    setTimeout(() => {
+      if (this.refs.counter2 instanceof Counter) {
+        this.refs.counter2.updateState({ counter: 300 });
+      }
+    }, 3000);
+  }
+
+  toggle() {
+    this.updateState({ validcounter: !this.state.validcounter });
+  }
+
+  toggleColor() {
+    const newColor = this.state.color === "red" ? "blue" : "red";
+    this.updateState({ color: newColor });
+  }
+
+  addNotif(sticky: boolean) {
+    const text = (<any>this.refs.textinput).value;
+    const message = `It is now ${new Date().toLocaleTimeString()}.<br/> Msg: ${text}`;
+    this.env.addNotification({
+      title: "hey",
+      message: message,
+      sticky
+    });
+  }
+}
+
+class ColorWidget extends Widget<{ color: "red" | "blue" }, {}> {
+  inlineTemplate = `
+    <div t-name="colorwidget">
+      <span>Current Color: </span>
+      <t t-esc="props.color"/>
+    </div>`;
+}

web/static/src/ts/ui/home_menu.ts

@@ -0,0 +1,28 @@
+import { MenuInfo, MenuItem } from "../store/store";
+import { Widget } from "./widget";
+
+//------------------------------------------------------------------------------
+// Types
+//------------------------------------------------------------------------------
+
+export interface Props {
+  menuInfo: MenuInfo;
+}
+
+//------------------------------------------------------------------------------
+// Home Menu
+//------------------------------------------------------------------------------
+
+export class HomeMenu extends Widget<Props, {}> {
+  template = "web.home_menu";
+
+  get apps(): MenuItem[] {
+    const info = this.props.menuInfo;
+    return info.roots.map(root => info.menus[root]!);
+  }
+
+  openMenu(app: MenuItem, event: MouseEvent) {
+    event.preventDefault();
+    this.env.activateMenuItem(app.id);
+  }
+}

web/static/src/ts/ui/navbar.ts

@@ -0,0 +1,34 @@
+import { MenuItem } from "../store/store";
+import { PureWidget } from "./widget";
+
+//------------------------------------------------------------------------------
+// Types
+//------------------------------------------------------------------------------
+
+export interface Props {
+  inHome: boolean;
+  app: MenuItem | null;
+}
+
+//------------------------------------------------------------------------------
+// Navbar
+//------------------------------------------------------------------------------
+
+export class Navbar extends PureWidget<Props, {}> {
+  template = "web.navbar";
+
+  getUrl(menu: MenuItem) {
+    const action_id = String(menu.actionId);
+    const menu_id = String(menu.app.id);
+    return this.env.services.router.formatURL("", { action_id, menu_id });
+  }
+
+  toggleHome(ev: MouseEvent) {
+    ev.preventDefault();
+    this.env.toggleHomeMenu();
+  }
+
+  openMenu(menu: MenuItem) {
+    this.env.activateMenuItem(menu.id);
+  }
+}

web/static/src/ts/ui/notification.ts

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

web/static/src/ts/ui/root.ts

@@ -0,0 +1,73 @@
+import { debounce } from "../core/utils";
+import { Env } from "../env";
+import { State, Store } from "../store/store";
+import { HomeMenu } from "./home_menu";
+import { Navbar } from "./navbar";
+import { Notification } from "./notification";
+import { Widget } from "./widget";
+import { Action } from "../store/action_manager_mixin";
+
+//------------------------------------------------------------------------------
+// Root Widget
+//------------------------------------------------------------------------------
+
+export class Root extends Widget<Store, State> {
+  template = "web.web_client";
+  widgets = { Navbar, HomeMenu };
+
+  notifications: { [id: number]: Notification } = {};
+  store: Store;
+
+  constructor(env: Env, store: Store) {
+    super(env, store);
+    this.store = store;
+    this.state = store.state;
+  }
+  mounted() {
+    this.store.on("state_updated", this, newState => {
+      this.updateState(newState);
+    });
+
+    // notifications
+    this.store.on("notification_added", this, notif => {
+      const notification = new Notification(this, notif);
+      this.notifications[notif.id] = notification;
+      notification.mount(<any>this.refs.notification_container);
+    });
+    this.store.on("notification_closed", this, id => {
+      this.notifications[id].destroy();
+      delete this.notifications[id];
+    });
+
+    // loading indicator
+    this.store.on("rpc_status", this, status => {
+      const method = status === "loading" ? "remove" : "add";
+      (<any>this.refs.loading_indicator).classList[method]("d-none");
+    });
+
+    // adding reactiveness to mobile/non mobile
+    window.addEventListener("resize", <any>debounce(() => {
+      const isMobile = window.innerWidth <= 768;
+      if (isMobile !== this.env.isMobile) {
+        this.env.isMobile = isMobile;
+        this.render();
+      }
+    }, 50));
+
+    // actions
+    this.store.on("update_action", this, this.applyAction);
+    if (this.store.lastAction) {
+      this.applyAction(this.store.lastAction);
+    }
+  }
+
+  async applyAction(action: Action) {
+    const widget = await action.executor(this);
+    if (widget) {
+      // to do: call some public method of widget instead...
+      (<HTMLElement>this.refs.content).appendChild(widget.el!);
+      widget.__mount();
+      action.activate();
+    }
+  }
+}

web/static/src/ts/ui/view.ts

@@ -0,0 +1,5 @@
+import { Widget } from "./widget";
+
+export class View extends Widget<{}, {}> {
+  inlineTemplate = "<div>some view</div>";
+}

web/static/src/ts/ui/widget.ts

@@ -0,0 +1,22 @@
+import { Component, PureComponent } from "../core/component";
+import { Env } from "../env";
+
+//------------------------------------------------------------------------------
+// Widget classes
+//------------------------------------------------------------------------------
+
+export class Widget<Props, State> extends Component<Env, Props, State> {}
+
+export class PureWidget<P, S> extends PureComponent<Env, P, S> {
+  constructor(parent, props) {
+    super(parent, props);
+    (<any>this.__widget__).isMobile = this.env.isMobile;
+  }
+  shouldUpdate(nextProps: P): boolean {
+    if ((<any>this.__widget__).isMobile !== this.env.isMobile) {
+      (<any>this.__widget__).isMobile = this.env.isMobile;
+      return true;
+    }
+    return super.shouldUpdate(nextProps);
+  }
+}