From 5c5bb0d3105f0b4d90f0a1c318a5f8617df96e57 Mon Sep 17 00:00:00 2001
From: aizu-odoo <aizu@odoo.com>
Date: Wed, 27 Nov 2024 13:48:53 +0100
Subject: [PATCH] [IMP] awesome_owl: counters, a card and a to do list

---
 awesome_owl/static/src/card/card.js          | 16 ++++++++++++
 awesome_owl/static/src/card/card.xml         | 17 ++++++++++++
 awesome_owl/static/src/counter/counter.js    | 17 ++++++++++++
 awesome_owl/static/src/counter/counter.xml   | 16 ++++++++++++
 awesome_owl/static/src/playground.js         | 18 ++++++++++++-
 awesome_owl/static/src/playground.xml        | 15 +++++++++--
 awesome_owl/static/src/todoitem/todoitem.js  | 15 +++++++++++
 awesome_owl/static/src/todoitem/todoitem.xml | 14 ++++++++++
 awesome_owl/static/src/todolist/todolist.js  | 27 ++++++++++++++++++++
 awesome_owl/static/src/todolist/todolist.xml | 12 +++++++++
 awesome_owl/static/src/utils.js              | 16 ++++++++++++
 11 files changed, 180 insertions(+), 3 deletions(-)
 create mode 100644 awesome_owl/static/src/card/card.js
 create mode 100644 awesome_owl/static/src/card/card.xml
 create mode 100644 awesome_owl/static/src/counter/counter.js
 create mode 100644 awesome_owl/static/src/counter/counter.xml
 create mode 100644 awesome_owl/static/src/todoitem/todoitem.js
 create mode 100644 awesome_owl/static/src/todoitem/todoitem.xml
 create mode 100644 awesome_owl/static/src/todolist/todolist.js
 create mode 100644 awesome_owl/static/src/todolist/todolist.xml
 create mode 100644 awesome_owl/static/src/utils.js

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
new file mode 100644
index 0000000000..0960ea9d07
--- /dev/null
+++ b/awesome_owl/static/src/card/card.js
@@ -0,0 +1,16 @@
+import { Component, useState } from "@odoo/owl";
+
+export class Card extends Component {
+    static template = "awesome_owl.card";
+//     static props = {
+//         title : {type: String },
+//         content : {type: String },
+//     }
+    setup() {
+        this.state= useState({ 'open': false });
+    }
+
+    flip_state(){
+        this.state.open = !this.state.open
+    }
+}
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
new file mode 100644
index 0000000000..f9fbf812ab
--- /dev/null
+++ b/awesome_owl/static/src/card/card.xml
@@ -0,0 +1,17 @@
+<?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">
+                <h3>
+                    I'm a card
+                    <button t-on-click="flip_state">Toggle</button>
+                </h3>
+                <t t-if="state.open">
+                    <t t-slot="default"/>
+                </t>
+            </div>    
+        </div>
+    </t>
+</templates>
\ No newline at end of file
diff --git a/awesome_owl/static/src/counter/counter.js b/awesome_owl/static/src/counter/counter.js
new file mode 100644
index 0000000000..b5fd533aa5
--- /dev/null
+++ b/awesome_owl/static/src/counter/counter.js
@@ -0,0 +1,17 @@
+import { Component,useState } from "@odoo/owl";
+
+export class Counter extends Component {
+    static template = "awesome_owl.counter";
+    static props = {
+        onChange : {type: Function, optional: true},
+    }
+
+    setup() {
+        this.state = useState({value: 0 });
+    }
+
+    increment() {
+        this.state.value++;
+        this.props.onChange()
+    }
+}
diff --git a/awesome_owl/static/src/counter/counter.xml b/awesome_owl/static/src/counter/counter.xml
new file mode 100644
index 0000000000..90afda65c7
--- /dev/null
+++ b/awesome_owl/static/src/counter/counter.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.counter">
+        <h5>
+            I count your clickies
+        </h5>
+        <p> 
+            Counter: <t t-esc="state.value"/>
+            <button class="btn btn-primary" t-on-click="increment">
+                Click me to increment
+            </button>
+        </p>
+    </t>
+
+</templates>
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index 657fb8b07b..9825df4429 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,7 +1,23 @@
 /** @odoo-module **/
 
-import { Component } from "@odoo/owl";
+import { Component, useState } 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 }
+    // title = markup("<div>I am a title</div>")
+    // content = markup("<div>some content</div>")
+    
+    setup() {
+        this.sum = useState({value: 2 });
+        
+    }
+
+    incrementSum() {
+        this.sum.value++;
+    }
+
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 4fb905d59f..0f0dd612f1 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -2,9 +2,20 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.playground">
-        <div class="p-3">
-            hello world
+        <div>
+            <h1>
+                Hello World \(0o0)/
+            </h1>
         </div>
+        <Counter onChange.bind="incrementSum"/>
+        <Counter onChange.bind="incrementSum"/>
+        I'm a sum of all the clickies: <t t-esc="sum.value"/>
+        <div>
+        <Card>
+            <Counter onChange.bind="incrementSum"/>
+        </Card>
+        </div>
+        <ToDoList/>
     </t>
 
 </templates>
diff --git a/awesome_owl/static/src/todoitem/todoitem.js b/awesome_owl/static/src/todoitem/todoitem.js
new file mode 100644
index 0000000000..c78fc7b51e
--- /dev/null
+++ b/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, optional: true},
+        todo_index : {type: Number, optional: true},
+    }
+
+    removeTodo() {
+        this.props.todo.splice("props.todo_index", 1);
+    }
+
+}
diff --git a/awesome_owl/static/src/todoitem/todoitem.xml b/awesome_owl/static/src/todoitem/todoitem.xml
new file mode 100644
index 0000000000..cbe19912bd
--- /dev/null
+++ b/awesome_owl/static/src/todoitem/todoitem.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.todoitem">
+        <div>
+            <input type="checkbox" t-model="props.todo.isCompleted"/>
+            <p t-attf-class="{{props.todo.isCompleted == true ? 'text-muted text-decoration-line-through' : ''}}">
+            <t t-esc="((props.todo_index)+1) + '. ' + props.todo.description"/>
+            <button class="fa fa-remove" t-on-click="removeTodo"/>
+            </p>
+        </div>
+    </t>
+
+</templates>
diff --git a/awesome_owl/static/src/todolist/todolist.js b/awesome_owl/static/src/todolist/todolist.js
new file mode 100644
index 0000000000..5416e85fc3
--- /dev/null
+++ b/awesome_owl/static/src/todolist/todolist.js
@@ -0,0 +1,27 @@
+import { Component,useState, useRef, onMounted } from "@odoo/owl";
+import { ToDoItem } from "../todoitem/todoitem";
+import { useAutofocus } from '../utils.js';
+
+
+export class ToDoList extends Component {
+    static template = "awesome_owl.todolist";
+    static components = { ToDoItem };
+
+    setup (){
+        this.todos = useState({todos_list:[], current_input: ""});
+        useAutofocus('focus')
+        // alternative way
+        // this.focusRef = useRef('focus');
+        // onMounted(() => {
+        //     this.focus.el.focus()
+        // })
+    }
+
+    addTodo (ev){
+        if (ev.keyCode === 13 && this.todos.current_input){
+            this.todos.todos_list.push({ description: this.todos.current_input , isCompleted: false})
+            this.todos.current_input = ''
+        }
+    }
+
+}
diff --git a/awesome_owl/static/src/todolist/todolist.xml b/awesome_owl/static/src/todolist/todolist.xml
new file mode 100644
index 0000000000..a640ebc284
--- /dev/null
+++ b/awesome_owl/static/src/todolist/todolist.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.todolist">
+        <h3>To Do List</h3>
+        <input type="text" t-on-keyup="addTodo" t-model="todos.current_input" t-ref="focus"/>
+        <p t-foreach="todos.todos_list" t-as="todo" t-key="todo_index">
+            <ToDoItem todo="todo" todo_index="todo_index"/>
+        </p>
+    </t>
+
+</templates>
diff --git a/awesome_owl/static/src/utils.js b/awesome_owl/static/src/utils.js
new file mode 100644
index 0000000000..6e2d86e2e3
--- /dev/null
+++ b/awesome_owl/static/src/utils.js
@@ -0,0 +1,16 @@
+import { useRef, useEffect } from "@odoo/owl";
+
+function useAutofocus(refname) {
+
+    let ref = useRef(refname);
+    useEffect(
+        (el) => el && el.focus(),
+        () => [ref.el]
+    );
+
+
+  }
+
+export {
+    useAutofocus
+};