[IMP] awesome_owl: chapter 1 of owl training

Implemented all OWL features mentioned in Chapter 1.
Added tutorials covering hooks, reactivity, and reusable components.
Provides a basic understanding of core OWL concepts.

Author: yame-odoo

awesome_owl/static/src/card/card.js

@@ -0,0 +1,14 @@
+/** @odoo-module **/
+
+import { Component, useState } from "@odoo/owl";
+
+export class Card extends Component {
+    static template = "awesome_owl.card";
+    static props = {
+    title: {type: String},
+    content: {type: String},
+    slots: {type:Object}
+    }
+
+   
+}

awesome_owl/static/src/card/card.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.card">
+
+        <div class="card d-inline-block m-2" style="width: 18rem;">
+            <div class="card-body">
+                <h5 class="card-title">
+                    <t t-esc="props.title" />
+                </h5>
+                <p class="card-text">
+                    <t t-out="props.content" />
+
+                </p>
+
+                <t t-slot="counter" />
+            </div>
+        </div>
+    </t>
+
+</templates>

awesome_owl/static/src/counter/counter.js

@@ -0,0 +1,20 @@
+/** @odoo-module **/
+
+import { Component, useState } from "@odoo/owl";
+
+export class Counter extends Component {
+    static template = "awesome_owl.counter";
+    static props ={
+        incrementsum:{type:Function}
+    }
+
+    setup() {
+        this.state = useState({ value: 0 });
+    }
+
+
+    increment() {
+        this.state.value++;
+        this.props.incrementsum();
+    }
+}

awesome_owl/static/src/counter/counter.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.counter">
+        <div class="p-3">
+            <p>Counter: <t t-esc="state.value" />
+            </p>
+            <button class="btn btn-outline-primary" t-on-click="increment">Increment</button>
+        </div>
+
+    </t>
+
+</templates>

awesome_owl/static/src/playground.js

@@ -1,7 +1,32 @@
 /** @odoo-module **/
 
-import { Component } from "@odoo/owl";
+import {markup, Component , useState } from "@odoo/owl";
+import { Counter } from "./counter/counter";
+import { Card } from "./card/card";
+import { Todolist } from "./todo/todo_list";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
+    static props ={
+        
+    }
+    value2 = markup("<div>some text 2</div>");
+    static components = { Counter , Card , Todolist}; 
+
+    state= useState({
+        sum:0,
+        card1:false,
+        card2:false
+    })
+    incrementsum= ()=> {
+        this.state.sum++;
+    }
+    inccard1= ()=> {
+                this.state.card1= !this.state.card1;
+
+    }
+    inccard2= ()=> {
+               this.state.card2= !this.state.card2;
+
+    }
 }

awesome_owl/static/src/playground.xml

@@ -2,9 +2,31 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.playground">
+        <div>
+            <button class="btn btn-outline-primary" t-on-click="inccard1">card1</button>
+            <button class="btn btn-outline-primary" t-on-click="inccard2">card2</button>
+
+        </div>
+        <t t-if="this.state.card1">
+            <Card title="'counter-1'" content="'counter -1 '">
+                <t t-set-slot="counter">
+                    <Counter incrementsum="incrementsum" />
+                </t>
+
+            </Card>
+        </t>
+        <t t-if="this.state.card2">
+            <Card title="'counter-2'" content="value2">
+                <t t-set-slot="counter">
+                    <Counter incrementsum="incrementsum" />
+                </t>
+            </Card>
+        </t>
         <div class="p-3">
-            hello world
+            <p>sum: <t t-esc="state.sum" />
+            </p>
         </div>
+        <Todolist />
     </t>
 
 </templates>

awesome_owl/static/src/todo/todo_item.js

@@ -0,0 +1,17 @@
+/** @odoo-module **/
+
+import { Component } from "@odoo/owl";
+
+export class Todoitem extends Component {
+    static template = "awesome_owl.todoitem";
+    static props = {
+    item: {type: Object
+    },
+    delete: {type: Function
+    }
+    }
+    check = () =>{
+        this.props.item.isCompleted = !this.props.item.isCompleted
+    }
+
+}

awesome_owl/static/src/todo/todo_item.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.todoitem">
+        <div >
+
+            <li class="list-group-item" t-att-class="{'text-muted text-decoration-line-through':props.item.isCompleted}">
+                <input type="checkbox" t-att-checked="props.item.isCompleted" t-on-change="check" />
+                <t t-esc="props.item.name" />
+                <span class="fa fa-remove" t-on-click="()=> props.delete(props.item)" />
+
+            </li>
+
+        </div>
+
+    </t>
+
+</templates>

awesome_owl/static/src/todo/todo_list.js

@@ -0,0 +1,54 @@
+/** @odoo-module **/
+
+import { Component, useState, onMounted, useRef } from "@odoo/owl";
+import { Todoitem } from "./todo_item";
+export class Todolist extends Component {
+    static template = "awesome_owl.todolist";
+    static props ={
+        
+    }
+    setup() {
+        this.inputRef = useRef('input');
+        onMounted(() => {
+            this.inputRef.el.focus()
+        });
+    this.todo= useState([{
+        id:1,
+        name:"ch1-owl",
+        isCompleted: false 
+    },
+    {
+        id:2,
+        name:"ch2-owl",
+        isCompleted: false 
+    },
+    {
+        id:3,
+        name:"estate",
+        isCompleted: true 
+    }])
+    }
+   
+    addtodo = (e) => {
+        if(e.key=="Enter" && e.target.value){
+                this.todo.push({
+                    id: this.todo.length +2,
+                    name: e.target.value,
+                    isCompleted: false 
+
+                })
+                e.target.value=""
+        
+        }
+    }
+
+    delete=(e)=>{        
+        const index = this.todo.findIndex((todo) => todo.id === e.id);
+        if (index >= 0) {
+              this.todo.splice(index, 1);
+        }    
+    }
+
+   static components = {Todoitem}
+    
+}

awesome_owl/static/src/todo/todo_list.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.todolist">
+        <div class="m-3">
+            <input class="form-control m-3" t-ref="input" t-on-keyup="addtodo" />
+            <ul class="list-group">
+                <t t-foreach="todo" t-as="item" t-key="item.id">
+
+                    <Todoitem item="item" delete="delete" />
+                </t>
+            </ul>
+        </div>
+
+    </t>
+
+</templates>