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

Author: VincentJanssen-Code

awesome_owl/static/src/TodoItem/TodoItem.js

@@ -9,7 +9,25 @@ export class TodoItem extends Component
             shape:{
                 id: {type : Number},
                 description: {type : String},
-                isCompleted: {type: Boolean}}}
-        
+                isCompleted: {type: Boolean}}
+            },
+
+        updateState : {
+            type: Function,
+        },
+
+        deleteTodo : {
+            type : Function,
+            optional: true
+        }
     };
+    
+    updateState(event)
+    {
+        this.props.updateState(this.props.todo.id);
+    }
+    deleteTodo(event)
+    {
+        this.props.deleteTodo(this.props.todo.id);
+    }
 }

awesome_owl/static/src/TodoItem/TodoItem.xml

@@ -6,6 +6,8 @@
 
             <p>ID : <t t-esc="props.todo.id"/></p>
             <p>Desc : <t t-esc="props.todo.description"/></p>
+            <input type="checkbox" t-on-click="updateState"/>
+            <span class="fa fa-remove" t-on-click="deleteTodo"/>
         </div>
     </t>
 </templates>

awesome_owl/static/src/TodoList/TodoList.js

@@ -1,16 +1,46 @@
 import { Component, useState } from "@odoo/owl";
 import { TodoItem } from "../TodoItem/TodoItem";
+import { useAutoFocus } from "../utils";
 
 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 }
-        ]);
-     }
+    static props = {};
+    setup()
+    {
+        this.todos = useState([]);
+        this.ids = 0;
+        useAutoFocus('todo_input');
+    }
+    addTodo(event)
+    {
+        if (event.type !== 'keyup' || event.keyCode !== 13 || event.target.value == "" )
+            {
+                return;
+            }
+        this.todos.push({id:this.ids++,description:event.target.value,isCompleted:false});
+        event.target.value = "";
+        
+    }
+    updateTodo(id)
+    {
+        let selectedTodo = this.todos.find(todo => todo.id == id);
+        if(selectedTodo)
+            {
+                selectedTodo.isCompleted = !selectedTodo.isCompleted;
+            }
+        
+    }
+    deleteTodo(id)
+    {
+        const selectedTodo = this.todos.findIndex(todo => todo.id == id);
+        if(selectedTodo >= 0)
+            {
+                this.todos.splice(selectedTodo, 1);
+            }
+
+
+    }
+
 }

awesome_owl/static/src/TodoList/TodoList.xml

@@ -2,8 +2,9 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.TodoList">
+        <input t-on-keyup="addTodo" t-ref="todo_input"/>
         <t t-foreach="todos" t-as="todo" t-key="todo.id">
-            <TodoItem todo="todo"/> 
+            <TodoItem todo="todo" updateState.bind="updateTodo" deleteTodo.bind="deleteTodo"/> 
         </t>
     </t>
 </templates>

awesome_owl/static/src/card/card.js

@@ -4,8 +4,23 @@ export class Card extends Component {
     static template = "awesome_owl.Card";
     static props = {
         title: String,
-        content: String,
-        html: String
+        slots: {
+            type: Object,
+            shape: {
+                default:true
+            }
+        },
+        html: {type:String}
     };
 
+    setup()
+    {
+        this.hide = useState({value:false});
+    }
+
+    hideToggle()
+    {
+        this.hide.value = ! this.hide.value;
+    }
+
 }

awesome_owl/static/src/card/card.xml

@@ -2,11 +2,12 @@
 <templates xml:space="preserve">
     <t t-name="awesome_owl.Card">
         <div class="card d-inline-block m-2" style="width: 18rem;">
+            <span class="fa fa-window-minimize" t-on-click="hideToggle"/>
             <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 class="card-text" t-if="! hide.value">
+                    <t t-slot="default"/>
+                    <t t-out="props.html"/>
                 </p>
             </div>
         </div>

awesome_owl/static/src/playground.js

@@ -6,7 +6,8 @@ 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 };
+    static props = {};
+    todo = {id: 3, description: "buy milk", isCompleted: false };
     html = markup("<h1> Hi </h1>");
 
     setup()
@@ -15,7 +16,6 @@ export class Playground extends Component {
     }
     incrementSum()
     {
-        console.log("test this");
         this.sum.value ++;
     }
 

awesome_owl/static/src/playground.xml

@@ -3,7 +3,9 @@
     <t t-name="awesome_owl.playground">
         <Counter onChange.bind="incrementSum"/>
         <Counter onChange.bind="incrementSum"/>
-        <Card content="'test content'" title="'Test title'" html="html"/>
+        <Card title="'Test title'" html="html">
+            <Counter onChange.bind="incrementSum"/>
+        </Card>
         <t t-esc="sum.value"/>
         <div>
             <TodoList/>

awesome_owl/static/src/utils.js

@@ -0,0 +1,10 @@
+import { useRef, onMounted } from "@odoo/owl";
+
+
+export function useAutoFocus(ref_name)
+{
+    const inputRef = useRef(ref_name);
+        onMounted(() => {
+            inputRef.el.focus();
+        });
+}