[IMP] owl_playground : ch1 rest of the tasks

Author: hazemayman1

awesome_owl/static/src/card/card.js

@@ -1,11 +1,18 @@
-import { Component, useState } from "@odoo/owl";
+import { Component, useState, Slot } from "@odoo/owl";
 
 
 export class Card extends Component {
     static template = "awesome_owl.card";
 
     static props = {
         title: {type: String},
-        content: {type: String}
+        slots : { type: Object, optional: true },
+    }
+    setup(){
+        this.state = useState({ show: false });
+    }
+
+    toggleShow(){
+        this.state.show = !this.state.show;
     }
 }

awesome_owl/static/src/card/card.xml

@@ -5,9 +5,10 @@
             <div class="card-body">
                 <h5 class="card-title">        
                     <t t-out="props.title"/>
+                    <button class="btn btn-primary" t-on-click="toggleShow">Show</button>
                 </h5>
-                <p class="card-text">
-                    <t t-out="props.content"/>
+                <p class="card-text" t-if="state.show">
+                    <t t-slot="default"/>
                 </p>
             </div>
         </div>

awesome_owl/static/src/playground.js

@@ -1,12 +1,13 @@
 import { Component, useState, markup } from "@odoo/owl";
 import { Counter } from "./counter/counter";
 import { Card } from "./card/card";
+import { TodoList } from "./todo/TodoList";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
-    static components = { Counter, Card };
+    static components = { Counter, Card, TodoList };
     no_markup_value = "<div class='text-primary'>Testing no markup</div>";
-    markup_value = markup("<div class='text-primary'>Testing markup</div>");
+    markup_value = markup("<Counter/>");
     setup(){
         this.state = useState({ sum: 2 });
         this.incrementSum = this.incrementSum.bind(this);

awesome_owl/static/src/playground.xml

@@ -7,9 +7,13 @@
             <Counter callback.bind="incrementSum" />
         </div>
         <div>
-            <Card title="'Task 1'" content="no_markup_value"/>
-            <Card title="'Task 2'" content="markup_value"/>
+            <Card title="'Task 1'"/>
+            <Card title="'Task 2'">
+                <Counter callback.bind="incrementSum" />
+            </Card>
         </div>
         <p>Sum: <t t-esc="state.sum"/></p>
+
+        <TodoList/>
    </t>
 </templates>

awesome_owl/static/src/todo/TodoItem.js

@@ -0,0 +1,20 @@
+import { Component, useRef, onMounted, 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},
+        onClick : { Type: Function, optional : true },
+    }
+    
+    toggleState(){
+        this.props.isCompleted = !this.props.isCompleted;
+    }
+
+    removeTodo() {
+        this.props.onClick(this.props.id);
+    }
+}

awesome_owl/static/src/todo/TodoItem.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.todo_item">
+        <p t-att-class="props.isCompleted ? 'text-muted text-decoration-line-through' : ''">
+            <input type="checkbox" 
+                t-att-checked="props.isCompleted"
+                t-on-change="toggleState"
+            /> <t t-out="props.id"/>: <t t-out="props.description"/>  Done: <t t-out="props.isCompleted"/> <span class="fa fa-remove" t-on-click="removeTodo"/>
+        </p>
+   </t>
+</templates>

awesome_owl/static/src/todo/TodoList.js

@@ -0,0 +1,31 @@
+import { Component, useState, useRef, onMounted } from "@odoo/owl";
+import { TodoItem } from "./TodoItem";
+
+
+export class TodoList extends Component {
+    static template = "awesome_owl.todo_list";
+    static components = { TodoItem };
+    setup(){
+        this.todos = useState([]);
+        this.todoId = 0;
+        this.inputRef = useRef("new_task");
+        onMounted(() => {
+            this.inputRef.el.focus();
+        })
+    }
+    addTodo(e){
+        if (e.keyCode === 13){
+            if (this.inputRef.el.value){
+                this.todoId += 1;
+                this.todos.push({ id: this.todoId, description: this.inputRef.el.value, isCompleted: false });
+            }
+            this.inputRef.el.value = "";
+        }
+    }
+    removeTodo(id){
+        const index = this.todos.findIndex(todo => todo.id === id);
+        if (index >= 0) {
+            this.todos.splice(index, 1);
+        }
+    }
+}

awesome_owl/static/src/todo/TodoList.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.todo_list">
+        <input t-ref="new_task" placeholder="Add new task" t-on-keyup="addTodo"/>
+        <t t-foreach="todos" t-as="i" t-key="i.id">
+            <TodoItem id="i.id" description="i.description" isCompleted="i.isCompleted" onClick.bind="removeTodo"/> 
+            <br/>
+        </t>
+   </t>
+</templates>