migration to OWL 2

Author: PhilDL

src/Root.ts

@@ -11,9 +11,9 @@ const ROOT_TEMPLATE = xml/*xml*/ `
         <div class="w-full flex items-center justify-between">
             <a class="flex items-center text-reddish-brown no-underline hover:no-underline font-bold text-2xl lg:text-4xl" href="#">
                 <img class="h-8 mx-auto lg:mr-0" src="owl.svg"/>
-                OWL Tailwind App Starter Project
+                OWL TypeScript, Vite, Tailwind Starter Project
             </a>
-            <div class="flex w-1/2 justify-end content-center">
+            <div class="flex w-1/3 justify-end content-center">
                 <a class="inline-block text-center h-10 p-2 md:h-auto md:p-4" href="https://github.com/Coding-Dodo/OWL-JavaScript-Tailwind-Project-Starter">
                     <img class="w-2/6 mx-auto lg:mr-0" src="github-logo.svg"/>
                 </a>
@@ -31,7 +31,13 @@ const ROOT_TEMPLATE = xml/*xml*/ `
                 <h2 class="mb-4 text-base text-gray-700 font-bold leading-tight text-center md:text-left slide-in-bottom-h1">
                     Dropdown Component
                 </h2>
-                <DropDown buttonText="'OWL Dropdown'" menuItems="state.menuItems" dropdownLeft="true" selectedMenu="state.selectedMenu">
+                <DropDown 
+                  buttonText="'OWL Dropdown'" 
+                  menuItems="state.menuItems" 
+                  dropdownLeft="true" 
+                  value="state.selectedMenu"
+                  onSelectMenuItem.bind="selectMenuItem"
+                >
                 </DropDown>
             </div>
             <div class="block py-6 fit-content">
@@ -41,7 +47,7 @@ const ROOT_TEMPLATE = xml/*xml*/ `
                 <AutoCompleteInput 
                     data="state.searchData" 
                     value="state.selectedTechnology"
-                    t-on-chosen="onOptionChosen"
+                    onOptionChosen.bind="onOptionChosen"
                     inputClass="'border border-gray-300 py-2 px-3 rounded-md focus:outline-none focus:shadow-outline w-full'"
                     placeHolder="'Type something...'"
                 />
@@ -70,7 +76,6 @@ state.selectedTechnology: <t t-esc="toJsonString(state.selectedTechnology)"/>
 export type MenuItem = {
   id: string;
   name: string;
-  callBack?: (menuItem: MenuItem) => void;
 };
 
 export type RootState = {
@@ -87,17 +92,14 @@ export class Root extends Component {
       {
         id: "item-1",
         name: "OWL",
-        callBack: (menuItem: MenuItem) => this.clickMenu(menuItem),
       },
       {
         id: "item-2",
         name: "Rollup.js",
-        callBack: (menuItem: MenuItem) => this.clickMenu(menuItem),
       },
       {
         id: "item-3",
         name: "TailwindCSS",
-        callBack: (menuItem: MenuItem) => this.clickMenu(menuItem),
       },
     ],
     selectedMenu: undefined,
@@ -115,7 +117,7 @@ export class Root extends Component {
     selectedTechnology: undefined,
   });
 
-  clickMenu(menuItem: MenuItem) {
+  selectMenuItem(menuItem: MenuItem) {
     this.state.selectedMenu = menuItem;
   }
 

src/components/AutoCompleteInput.ts

@@ -1,4 +1,10 @@
-import { Component, useState, xml, useExternalListener, useRef } from "@odoo/owl";
+import {
+  Component,
+  useState,
+  xml,
+  useExternalListener,
+  useRef,
+} from "@odoo/owl";
 
 const AUTO_COMPLETE_INPUT_TEMPLATE = xml/*xml*/ `
 <div class="relative" v-click-outside="clickedOutside">
@@ -15,7 +21,7 @@ const AUTO_COMPLETE_INPUT_TEMPLATE = xml/*xml*/ `
     />
     <span
       t-if="props.value"
-      t-on-click.prevent="reset()"
+      t-on-click.prevent="reset"
       class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer"
     >
       x
@@ -51,10 +57,10 @@ export class AutoCompleteInput extends Component {
       type: Array,
     },
     value: { name: "", optional: true },
+    onOptionChosen: { type: Function, optional: true },
   };
   state = useState({
     showOptions: false,
-    chosenOption: "",
     searchTerm: "",
   });
   autoCompleteInputRef = useRef("autoCompleteInputRef");
@@ -64,18 +70,15 @@ export class AutoCompleteInput extends Component {
   }
 
   hideOptions(event: Event) {
-    console.log("hide Options", this.autoCompleteInputRef.el);
     if (!this.autoCompleteInputRef.el?.contains(event.target as Node)) {
-      Object.assign(this.state, { showOptions: false });
+      this.state.showOptions = false;
     }
   }
 
   reset() {
-    // this.trigger("input", "");
-    // this.trigger("chosen", { selectedTechnology: null });
-    this.state.chosenOption = "";
     this.state.searchTerm = "";
     this.state.showOptions = false;
+    this.props.onOptionChosen(null);
   }
 
   handleShowOptions(evt: Event) {
@@ -90,18 +93,16 @@ export class AutoCompleteInput extends Component {
     if (!this.state.searchTerm) {
       return this.props.data;
     }
-    return this.props.data.filter((item: { name: string; optional: boolean }) => {
-      return item.name.toLowerCase().includes(this.state.searchTerm.toLowerCase());
-    });
+    return this.props.data.filter(
+      (item: { name: string; optional: boolean }) => {
+        return item.name
+          .toLowerCase()
+          .includes(this.state.searchTerm.toLowerCase());
+      }
+    );
   }
 
   handleClick(item: { name: string; optional: boolean }) {
-    // this.trigger("input", item.name);
-    // this.trigger("chosen", { selectedTechnology: item });
-    Object.assign(this.state, {
-      chosenOption: item.name,
-      showOptions: false,
-      searchTerm: item.name,
-    });
+    this.props.onOptionChosen(item);
   }
 }

src/components/DropDown.ts

@@ -10,7 +10,12 @@ const DROPDOWN_TEMPLATE = xml/*xml*/ `
 <div t-ref="DropDown" class="relative inline-block text-left">
   <div>
     <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500" id="menu-button" aria-expanded="true" aria-haspopup="true" t-on-click.prevent="toggleDropDown">
-      <t t-esc="props.buttonText"/>
+      <t t-if="props.value">
+        <t t-esc="props.value.name"/>
+      </t>
+      <t t-else="">
+        <t t-esc="props.buttonText"/>
+      </t>
       <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
         <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
       </svg>
@@ -21,9 +26,9 @@ const DROPDOWN_TEMPLATE = xml/*xml*/ `
       <t t-foreach="props.menuItems" t-as="menuItem" t-key="menuItem.id">
         <t t-slot="menu-item">
           <a 
-            t-on-click="() => onClickMenuItem.bind(this)(menuItem)" 
+            t-on-click="() => this.onClickMenuItem(menuItem)" 
             t-attf-href="{{menuItem.target ? menuItem.target : '#'}}" 
-            t-attf-class="hover:bg-gray-100 hover:text-gray-900 text-gray-700 block px-4 py-2 text-sm {{ props.selectedMenu and props.selectedMenu.id == menuItem.id ? 'bg-gray-100 text-gray-900': ''}}" 
+            t-attf-class="hover:bg-gray-100 hover:text-gray-900 text-gray-700 block px-4 py-2 text-sm {{ props.value and props.value.id == menuItem.id ? 'bg-gray-100 text-gray-900': ''}}" 
             role="menuitem" 
             tabindex="-1" 
             t-att-id="menuItem.id"
@@ -40,7 +45,6 @@ const DROPDOWN_TEMPLATE = xml/*xml*/ `
 export type MenuItem = {
   id: string;
   name: string;
-  callBack: (menuItem: MenuItem) => void;
 };
 
 export class DropDown extends Component {
@@ -54,10 +58,10 @@ export class DropDown extends Component {
         id: String,
         target: { type: String, optional: true },
         name: String,
-        callBack: { type: Function, optional: true },
       },
     },
-    selectedMenu: {
+    onSelectMenuItem: { type: Function, optional: true },
+    value: {
       type: Object,
       optional: true,
     },
@@ -73,16 +77,16 @@ export class DropDown extends Component {
 
   closeDropDown(event: Event) {
     if (!this.dropdownContainerRef.el?.contains(event.target as Node)) {
-      Object.assign(this.state, { open: false });
+      this.state.open = false;
     }
   }
 
   toggleDropDown() {
-    Object.assign(this.state, { open: !this.state.open });
+    this.state.open = !this.state.open;
   }
 
   onClickMenuItem(menuItem: MenuItem) {
-    menuItem.callBack(menuItem);
+    this.props.onSelectMenuItem(menuItem);
     this.state.open = false;
   }
 }

src/components/MyComponent.ts

@@ -12,6 +12,5 @@ export class MyComponent extends Component {
 
   updateState() {
     this.state.text = this.state.text === "Owl" ? "World" : "Owl";
-    this.env.router.navigate("/about");
   }
 }