Technical Training - stoss

awesome_owl/static/src/card/card.js

@@ -0,0 +1,25 @@
+import {Component, useState} from '@odoo/owl'
+
+export class Card extends Component {
+    static props = {
+        title: String,
+        slots: { type: Object },
+    }
+
+    setup(){
+        this.state = useState({
+            isOpen: true
+        })
+
+        this.props.isOpen = true
+        this.toggleOpen = this.toggleOpen.bind(this)
+    }
+
+    toggleOpen(){
+        console.log(this.state.isOpen);
+        this.state.isOpen = !this.state.isOpen
+    }
+
+    static template = "awesome_owl.card"
+
+}

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-header">
+                <h3 class="card-title">
+                    <t t-out="props.title"/> <button class="btn" t-on-click="() => toggleOpen()">Toggle</button>
+                </h3>
+            </div>
+            <t t-if="this.state.isOpen">
+                <div class="card-body" >
+                    <t t-slot="default"/>
+                </div>
+            </t>
+        </div>
+    </t>
+</templates>

awesome_owl/static/src/counter/counter.js

@@ -0,0 +1,20 @@
+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: 1
+        });
+    }
+
+    increment() {
+        this.state.value++;
+        this.props.onChange?.();
+    }
+
+}

awesome_owl/static/src/counter/counter.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.Counter">
+        <div class="card d-inline-block p-2 m-1 justify-content-center">
+            <h5>Counter: <t t-esc="state.value"/></h5>
+            <button t-on-click="increment">Increment</button>
+        </div>
+    </t>
+
+</templates>

awesome_owl/static/src/playground.js

@@ -1,5 +1,25 @@
-import { Component } from "@odoo/owl";
+import {Component, markup, useState} from "@odoo/owl";
+import {Counter} from './counter/counter';
+import {Card} from './card/card';
+import {TodoList} from "./todo/todo_list";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
+    static props = {};
+
+    setup() {
+        this.state = useState({
+            sum: 2,
+            todos:[]
+        })
+
+        this.incrementSum = this.incrementSum.bind(this)
+    }
+
+    incrementSum() {
+        this.state.sum++;
+    }
+
+
+    static components = {Counter, Card, TodoList};
 }

awesome_owl/static/src/playground.xml

@@ -1,9 +1,20 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
-
     <t t-name="awesome_owl.playground">
-        <div class="p-3">
-            hello world
+        <div class="m-5">
+            <h1>Welcome everyone</h1>
+            <p>Click the button below and be amazed!</p>
+            <Card title="'Welcome!'">
+                <h6 class="m-2">As you can see next to this card is a counter, don't hesitate to use it.</h6>
+            </Card>
+            <Card title="'Use this one!'">
+                <Counter onChange="() => incrementSum()"/>
+            </Card>
+            <Counter onChange="() => incrementSum()"/>
+            <br/>
+            <h3>The sum of the counters is: <t t-out="this.state.sum"/></h3>
+            <br/>
+            <TodoList/>
         </div>
     </t>
 

awesome_owl/static/src/todo/todo_item.js

@@ -0,0 +1,11 @@
+import {Component} from "@odoo/owl"
+
+export class TodoItem extends Component{
+    static template = "awesome_owl.todo_item"
+    static props = {
+        todo: {type: {id: Number, description: String, isCompleted: Boolean}},
+        toggleCompleted: {type: Function, optional:true},
+        deleteTodo: {type: Function, optional:true},
+    }
+
+}

awesome_owl/static/src/todo/todo_item.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.todo_item">
+        <input type="checkbox" t-att-checked="props.todo.isCompleted" t-on-click="() => props.toggleCompleted?.()"/>
+        <span class="ms-1" t-att-class="{'text-muted': props.todo.isCompleted, 'text-decoration-line-through': props.todo.isCompleted}">
+            <t t-esc="props.todo.id"/>.
+            <t t-esc="props.todo.description"/>
+            <span class="ms-1 fa fa-remove" t-on-click="() => props.deleteTodo?.()"/>
+        </span>
+        <br/>
+    </t>
+</templates>

awesome_owl/static/src/todo/todo_list.js

@@ -0,0 +1,52 @@
+import {Component, useState, useRef, onMounted} from '@odoo/owl'
+import {TodoItem} from "./todo_item";
+import {useAutofocus} from "../utils";
+
+export class TodoList extends Component {
+    static template = "awesome_owl.todo_list";
+    static props = {};
+
+    setup() {
+        this.state = useState({
+            todos: [],
+            ids: 1
+        })
+        useAutofocus("input");
+
+        this.addTodo = this.addTodo.bind(this);
+        this.toggleCompleted = this.toggleCompleted.bind(this);
+        this.deleteTodo = this.deleteTodo.bind(this);
+    }
+
+    addTodo(event) {
+        if (event.keyCode === 13) {
+            this.state.todos.push({id: this.state.ids, description: event.target.value, isCompleted: false});
+            this.state.ids++;
+            event.target.value = "";
+        }
+    }
+
+    toggleCompleted(todo_id){
+        const todo_pos = this.findTodo(todo_id);
+        if (todo_pos < 0) return;
+        const todo = this.state.todos[todo_pos]
+        todo.isCompleted = !todo.isCompleted;
+    }
+
+    deleteTodo(todo_id){
+        const todo_pos = this.findTodo(todo_id);
+        if (todo_pos < 0) return
+        this.state.todos.splice(todo_pos, 1);
+    }
+
+    findTodo(todo_id){
+        let i = 0;
+        const num_todos = this.state.todos.length;
+        while (i < num_todos && this.state.todos[i].id !== todo_id) i += 1;
+        if (i === num_todos) return -1;
+
+        return i;
+    }
+
+    static components = {TodoItem};
+}

awesome_owl/static/src/todo/todo_list.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.todo_list">
+        <div class="card p-1" style="width: 10rem;">
+            <h3 class="card-title ms-2">Todo List</h3>
+            <input class="m-2" t-on-keyup="(event) => addTodo(event)" placeholder="Enter a new todo"
+                   t-ref="input"/>
+            <div class="card-body">
+                <t t-foreach="state.todos" t-as="i" t-key="i.id">
+                    <TodoItem toggleCompleted="() => toggleCompleted(i.id)" deleteTodo="() => deleteTodo(i.id)" todo="i"/>
+                </t>
+            </div>
+        </div>
+    </t>
+</templates>

awesome_owl/static/src/utils.js

@@ -0,0 +1,8 @@
+import {useRef, onMounted} from "@odoo/owl"
+
+export function useAutofocus(reference) {
+    const myRef = useRef(reference)
+    onMounted(() => {
+        myRef.el.focus()
+    });
+}

estate/__init__.py

@@ -0,0 +1 @@
+from . import models

estate/__manifest__.py

@@ -0,0 +1,26 @@
+{
+    'name': 'Estate',
+    'version': '19.0.1.1.0',
+    'depends': [
+        'base',
+    ],
+    'author': 'Stef Ossé',
+    'license': 'LGPL-3',
+    'category': 'Category',
+    'description': '''
+    A specialized application for **estate management**.
+    ''',
+    # data files always loaded at installation
+    'data': [
+        'security/ir.model.access.csv',
+        'views/estate_property_views.xml',
+        'views/estate_property_offer_views.xml',
+        'views/estate_property_type_views.xml',
+        'views/estate_property_tag_views.xml',
+        'views/res_users_views.xml',
+        'views/estate_menus.xml',
+    ],
+    # data files containing optionally loaded demonstration data
+    'demo': [],
+    'application': True
+}

estate/models/__init__.py

@@ -0,0 +1,5 @@
+from . import estate_property
+from . import estate_property_type
+from . import estate_property_tag
+from . import estate_property_offer
+from . import res_users