finished first owl course

Author: MostafaTwfiq

awesome_owl/__manifest__.py

@@ -37,6 +37,12 @@
             'web/static/src/libs/fontawesome/css/font-awesome.css',
             'awesome_owl/static/src/**/*',
         ],
+        'awesome_owl.assets_counter': [
+                    'awesome_owl/static/src/**/*',
+                ],
+        'awesome_owl.assets_card': [
+                            'awesome_owl/static/src/**/*',
+                        ],
     },
     'license': 'AGPL-3'
 }

awesome_owl/static/src/card.js

@@ -0,0 +1,16 @@
+/** @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, optional: true}, slots: {type: Object}};
+
+    setup() {
+        this.state = useState({cardIsOpen: false});
+    }
+
+    toggleCard() {
+        this.state.cardIsOpen = !this.state.cardIsOpen;
+    }
+}

awesome_owl/static/src/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">
+                <div class="d-flex flex-row gap-3">
+                    <h5 class="card-title"><t t-esc="props.title"/></h5>
+                    <button t-on-click="toggleCard">toggle</button>
+                </div>
+                <t t-if="state.cardIsOpen" t-slot="default"/>
+            </div>
+        </div>
+    </t>
+</templates>

awesome_owl/static/src/counter.js

@@ -0,0 +1,19 @@
+/** @odoo-module **/
+
+import { Component, useState } from "@odoo/owl";
+
+export class Counter extends Component {
+    static props = {callback: {type: Function, optional: true}}
+    static template = "awesome_owl.counter";
+
+    setup() {
+        this.state = useState({ counter: 0 });
+    }
+
+    increment() {
+        this.state.counter++;
+        if (this.props.callBack) {
+            this.props.callback("A message to pass ;)")
+        }
+    }
+}

awesome_owl/static/src/counter.xml

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

awesome_owl/static/src/playground.js

@@ -1,7 +1,11 @@
 /** @odoo-module **/
 
-import { Component } from "@odoo/owl";
+import { Component, useState } from "@odoo/owl";
+import {Counter} from "./counter";
+import {Card} from "./card";
+import {Todolist} from "./todo/todo_list";
 
 export class Playground extends Component {
+    static components = {Counter, Card, Todolist};
     static template = "awesome_owl.playground";
 }

awesome_owl/static/src/playground.xml

@@ -2,9 +2,16 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.playground">
-        <div class="p-3">
-            hello world
-        </div>
+        <Card title="'Card1'"><Counter/></Card>
+        <Card title="'Card2'"><p>This is just a test content</p></Card>
+        <Card title="'Card3'">
+            <div>
+              <ul>
+                <li>Item A</li>
+                <li>Item B</li>
+              </ul>
+            </div>
+        </Card>
     </t>
 
 </templates>

awesome_owl/static/src/todo/todo_item.js

@@ -0,0 +1,14 @@
+/** @odoo-module **/
+
+import { Component, useState } from "@odoo/owl";
+
+export class TodoItem extends Component {
+    static template = "awesome_owl.todo_item";
+    static props = {
+        id: {type: Number},
+        description: {type: String},
+        isCompleted: {type: Boolean},
+        onStatusChange: {type: Function},
+        deleteTodoItem: {type: Function}
+    }
+}

awesome_owl/static/src/todo/todo_item.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.todo_item">
+        <div class="card d-inline-block m-2" style="width: 18rem;">
+            <div class="card-body d-flex align-items-center">
+                <input type="checkbox" class="form-check-input me-3" t-on-change="() => props.onStatusChange(props.id)"/>
+                <p class="card-text flex-grow-1 mb-0" t-att-class="{'text-muted text-decoration-line-through': props.isCompleted}">
+                    <t t-esc="props.id + '. ' + props.description"/>
+                </p>
+                <span class="fa fa-remove ms-3" t-on-click="() => props.deleteTodoItem(props.id)"/>
+            </div>
+        </div>
+    </t>
+</templates>

awesome_owl/static/src/todo/todo_list.js

@@ -0,0 +1,38 @@
+/** @odoo-module **/
+
+import { Component, useState, useRef } from "@odoo/owl";
+import { TodoItem } from './todo_item'
+
+export class Todolist extends Component {
+    static components = {TodoItem};
+    static template = "awesome_owl.todo_list";
+
+    setup() {
+        this.state = useState({idCounter: 1, todoItems: []})
+        this.inputRef = useRef('input');
+        this.addTodo = this.addTodo.bind(this);
+        this.inputFocus = this.inputFocus.bind(this);
+        this.onStatusChange = this.onStatusChange.bind(this);
+        this.deleteTodoItem = this.deleteTodoItem.bind(this);
+    }
+
+    addTodo(ev) {
+        if (ev.keyCode === 13 && ev.target.value) {
+            let newTodoItem = {id: this.state.idCounter++, description: ev.target.value, isCompleted: false}
+            this.state.todoItems = [...this.state.todoItems, newTodoItem];
+        }
+    }
+
+    inputFocus() {
+        this.inputRef.el.focus()
+    }
+
+    onStatusChange(id) {
+        const todoItemToToggle = this.state.todoItems.find(obj => obj.id === id);
+        todoItemToToggle.isCompleted = !todoItemToToggle.isCompleted;
+    }
+
+    deleteTodoItem(id) {
+        this.state.todoItems = this.state.todoItems.filter(obj => obj.id !== id);
+    }
+}