[IMP] awesome_owl: Web Framework Finished Chapter 1 Part 1-8

Author: VincentJanssen-Code

awesome_owl/controllers/controllers.py

@@ -1,6 +1,7 @@
 from odoo import http
 from odoo.http import request, route
 
+
 class OwlPlayground(http.Controller):
     @http.route(['/awesome_owl'], type='http', auth='public')
     def show_playground(self):

awesome_owl/static/src/TodoItem/TodoItem.js

@@ -0,0 +1,15 @@
+import { Component, useState } from "@odoo/owl";
+
+export class TodoItem extends Component 
+{
+    static template = 'awesome_owl.TodoItem';
+    static props = {
+        todo : {
+            type: Object, 
+            shape:{
+                id: {type : Number},
+                description: {type : String},
+                isCompleted: {type: Boolean}}}
+        
+    };
+}

awesome_owl/static/src/TodoItem/TodoItem.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.TodoItem">
+        <div class="m-2 p-2 border d-inline-block" t-att-class="{'text-muted text-decoration-line-through' : props.todo.isCompleted};">
+
+            <p>ID : <t t-esc="props.todo.id"/></p>
+            <p>Desc : <t t-esc="props.todo.description"/></p>
+        </div>
+    </t>
+</templates>

awesome_owl/static/src/TodoList/TodoList.js

@@ -0,0 +1,16 @@
+import { Component, useState } from "@odoo/owl";
+import { TodoItem } from "../TodoItem/TodoItem";
+
+export class TodoList extends Component 
+{
+    static template = 'awesome_owl.TodoList';
+    static components = { TodoItem };
+     setup()
+     {
+        this.todos = useState([
+            {id: 3, description: "buy milk", isCompleted: false },
+            {id: 4, description: "buy milk 2", isCompleted: false },
+            {id: 5, description: "buy milk -1", isCompleted: true }
+        ]);
+     }
+}

awesome_owl/static/src/TodoList/TodoList.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.TodoList">
+        <t t-foreach="todos" t-as="todo" t-key="todo.id">
+            <TodoItem todo="todo"/> 
+        </t>
+    </t>
+</templates>

awesome_owl/static/src/card/card.js

@@ -0,0 +1,11 @@
+import { Component, useState } from "@odoo/owl";
+
+export class Card extends Component {
+    static template = "awesome_owl.Card";
+    static props = {
+        title: String,
+        content: String,
+        html: String
+    };
+
+}

awesome_owl/static/src/card/card.xml

@@ -0,0 +1,14 @@
+<?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-esc="props.content"/>
+                <t t-out="props.html"/>
+                </p>
+            </div>
+        </div>
+    </t>
+</templates>

awesome_owl/static/src/counter/counter.js

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

awesome_owl/static/src/counter/counter.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.counter">
+        <div class="m-2 p-2 border d-inline-block">
+            <p>Counter : <t t-esc="state.value"/></p>
+            <button class='btn btn-primary' t-on-click='increment'>
+                Increment
+            </button>
+        </div>
+    </t>
+</templates>

awesome_owl/static/src/playground.js

@@ -1,5 +1,23 @@
-import { Component } from "@odoo/owl";
+import { Component, useState, markup } from "@odoo/owl";
+import { Counter } from "./counter/counter";
+import { Card } from "./card/card";
+import { TodoList } from "./TodoList/TodoList"
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
+    static components = { Counter, Card, TodoList };
+    todo= {id: 3, description: "buy milk", isCompleted: false };
+    html = markup("<h1> Hi </h1>");
+
+    setup()
+    {
+        this.sum = useState({value: 0});
+    }
+    incrementSum()
+    {
+        console.log("test this");
+        this.sum.value ++;
+    }
+
+    
 }