[IMP] awesome_dashboard: added layout component in dashboard.

added layout component in dashboard.js.
created dashboard.scss to use className in xml.
added display prop in layout.

Author: danal-odoo

awesome_dashboard/static/src/dashboard.js

@@ -1,8 +1,10 @@
 import { Component } from "@odoo/owl";
 import { registry } from "@web/core/registry";
+import { Layout } from "@web/search/layout";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
+    static components = { Layout }
 }
 
 registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboard);

awesome_dashboard/static/src/dashboard.scss

@@ -0,0 +1,3 @@
+.o_dashboard {
+    background-color: gray;
+}

awesome_dashboard/static/src/dashboard.xml

@@ -2,7 +2,9 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_dashboard.AwesomeDashboard">
-        hello dashboard
+        <Layout display="{controlPanel: {}}" className="'o_dashboard h-100'">
+            <h1>Hello World</h1>
+        </Layout>
     </t>
 
 </templates>

awesome_owl/static/src/todo/todoitem.js

@@ -13,7 +13,7 @@ export class TodoItem extends Component {
         this.props.toggleState(this.props.todo.id)
     }
 
-    onClickRremove(){
+    onClickRemove(){
         this.props.removeTodo(this.props.todo.id)
     }
 }

awesome_owl/static/src/todo/todoitem.xml

@@ -5,7 +5,7 @@
         <input type="checkbox" t-att-checked="props.todo.isCompleted" t-on-change="toggleIsCompleted"/>
         <span t-esc="props.todo.id"/>. 
         <span t-esc="props.todo.description"/>
-        <span style="margin-left: 10px; cursor: pointer;" t-on-click="onClickRremove">❌</span>
+        <span style="margin-left: 10px; cursor: pointer;" t-on-click="onClickRemove">❌</span>
     </div>
     </t>
 </templates>

awesome_owl/static/src/utils.js

@@ -1,13 +1,13 @@
 import { useRef, onMounted } from "@odoo/owl";
 
+
 export function useAutofocus(refName) {
     const ref = useRef(refName);
 
     onMounted(() => {
         if (ref.el) {
             ref.el.focus();
         }
-    }); 
-
+    });
     return ref;
 }