reorganize files

web/static/src/ts/widgets/CRM.ts

@@ -0,0 +1,12 @@
+import Widget from "../core/Widget";
+
+const template = `
+    <div class="o_crm">
+        <span>CRM!!!!</span>
+    </div>
+`;
+
+export default class Discuss extends Widget {
+  name = "crm";
+  template = template;
+}

web/static/src/ts/widgets/Counter.ts

@@ -0,0 +1,26 @@
+import Widget from "../core/Widget";
+
+const template = `
+    <div>
+        <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>
+`;
+
+export default class Counter extends Widget {
+  name = "counter";
+  template = template;
+  state = {
+    counter: 0
+  };
+
+  constructor(parent: Widget | null, props: {initialState?: number}) {
+    super(parent);
+    this.state.counter = props.initialState || 0;
+  }
+
+  increment(delta: number) {
+    this.updateState({ counter: this.state.counter + delta });
+  }
+}

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

@@ -0,0 +1,40 @@
+import Widget from "../core/Widget";
+import Counter from "./Counter";
+
+const template = `
+    <div class="o_discuss">
+        <span>Root Widget</span>
+        <button t-on-click="resetCounter">Reset</button>
+        <button t-on-click="resetCounterAsync">Reset in 3s</button>
+        <button t-on-click="toggle">Toggle  Counter</button>
+        <input/>
+        <t t-if="state.validcounter">
+            <t t-widget="Counter" t-ref="counter" t-props="{initialState:4}"/>
+        </t>
+        <t t-else="1">
+            <t t-widget="Counter" t-ref="counter" t-props="{initialState:7}"/>
+        </t>
+        <div ref="target"/>
+    </div>
+`;
+
+export default class Discuss extends Widget {
+  name = "discuss";
+  template = template;
+  widgets = { Counter };
+  state = { validcounter: true };
+
+  resetCounter(ev: MouseEvent) {
+    this.refs.counter.updateState({ counter: 3 });
+  }
+
+  resetCounterAsync(ev: MouseEvent) {
+    setTimeout(() => {
+      this.refs.counter.updateState({ counter: 3 });
+    }, 3000);
+  }
+
+  toggle() {
+    this.updateState({ validcounter: !this.state.validcounter });
+  }
+}

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

@@ -0,0 +1,23 @@
+import Widget from "../core/Widget";
+import { Action } from "../services/actions";
+
+const template = `
+    <div class="o_navbar">
+        <span class="title">Odoo</span>
+        <ul>
+            <li t-foreach="env.services.actions" t-as="action">
+                <a t-att-href="getUrl(action)"><t t-esc="action.title"/></a>
+            </li>
+        </ul>
+    </div>
+`;
+
+export default class Navbar extends Widget {
+  name = "navbar";
+  template = template;
+
+  getUrl(action: Action) {
+    const action_id = action.id;
+    return this.env.services.router.formatURL("web", { action_id });
+  }
+}

web/static/src/ts/widgets/RootWidget.ts

@@ -0,0 +1,54 @@
+import Widget, { Env } from "../core/Widget";
+import Navbar from "./Navbar";
+import { Action } from "../services/actions";
+
+const template = `
+    <div class="o_web_client">
+        <t t-widget="Navbar"/>
+        <div class="o_content">
+          <t t-widget="Content"/>
+        </div>
+    </div>
+`;
+
+export default class RootWidget extends Widget {
+  name = "root";
+  template = template;
+  widgets = { Navbar };
+  state = { validcounter: true };
+
+  constructor(env: Env) {
+    super(env);
+    this.setMainWidget();
+  }
+
+  mounted() {
+    this.env.services.router.register(this, this.onUrlChange);
+  }
+
+  setMainWidget() {
+    const action = this.getAction();
+    (<any>this.widgets).Content = action.Widget;
+  }
+
+  onUrlChange() {
+    this.setMainWidget();
+    // notice that this can only be safely done because the root widget is
+    // mounted now.
+    this.render();
+  }
+
+  getAction(): Action {
+    const routeInfo = this.env.services.router.getRouteInfo();
+    const actionID = parseInt(routeInfo.query.action_id);
+    let actions: Action[] = this.env.services.actions;
+    let action = actions.find(a => a.id === actionID);
+    if (!action) {
+      action = actions.find(a => a.default === true);
+      if (!action) {
+        throw new Error("No valid action!");
+      }
+    }
+    return action;
+  }
+}