18.0 tutorial drod

awesome_owl/__manifest__.py

@@ -38,5 +38,6 @@
             'awesome_owl/static/src/**/*',
         ],
     },
-    'license': 'AGPL-3'
+    'license': 'AGPL-3',
+    'auto_install': True
 }

awesome_owl/static/src/card/card.js

@@ -0,0 +1,9 @@
+/** @odoo-module **/
+
+import { Component } from "@odoo/owl";
+
+export class Card extends Component {
+    static template = "awesome_owl.card";
+
+    static props = ['title', 'content'];
+}

awesome_owl/static/src/card/card.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.card">
+        <div class="card-body">
+            <h5 class="card-title">
+                <t t-out="props.title"/>
+            </h5>
+            <p class="card-text">
+                <t t-out="props.content"/>
+            </p>
+        </div>
+    </t>
+
+</templates>

awesome_owl/static/src/counter/counter.js

@@ -0,0 +1,21 @@
+/** @odoo-module **/
+
+import { Component, useState, xml } from "@odoo/owl";
+
+export class Counter extends Component {
+    static template = "awesome_owl.counter";
+
+    static props = {
+        onChange: { type: Function }
+    };
+
+    setup() {
+        this.state = useState({ value: 1 });
+    }
+
+    increment() {
+        this.state.value++;
+        if (this.props.onChange)
+            this.props.onChange();
+    }
+}

awesome_owl/static/src/counter/counter.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.counter" callback.bind="props.onChange">
+        <p>Count: <t t-esc="this.state.value"/></p>
+        <button class="btn btn-primary" t-on-click="increment">Increment</button>
+    </t>
+
+</templates>

awesome_owl/static/src/playground.js

@@ -1,7 +1,27 @@
 /** @odoo-module **/
 
-import { Component } from "@odoo/owl";
+import { Component, markup, useState } from "@odoo/owl";
+
+// Custom elements
+import { Card } from "./card/card";
+import { Counter } from "./counter/counter";
+import { TodoList } from "./todo/todolist";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
+
+    static components = { Card, Counter, TodoList };
+
+    setup() {
+        this.card_contents = [
+            { title: "Title 1", content: "<div>Text content 1</div>" },
+            { title: "Title 2", content: markup("<div>Text content 2</div>") }
+        ];
+
+        this.state = useState({ total: 2});
+    }
+
+    incrementSum() {
+        this.state.total++;
+    }
 }

awesome_owl/static/src/playground.xml

@@ -3,8 +3,19 @@
 
     <t t-name="awesome_owl.playground">
         <div class="p-3">
-            hello world
+            <Counter onChange.bind="incrementSum"/>
+            <Counter onChange.bind="incrementSum"/>
+            <p>
+                Total: 
+                <t t-esc="this.state.total"/>
+            </p>
+        </div>
+        <div class="card d-inline-block m-2" style="width: 18rem;">
+            <Card title="this.card_contents[0]['title']" content="this.card_contents[0]['content']" />
+            <Card title="this.card_contents[1]['title']" content="this.card_contents[1]['content']" />
+        </div>
+        <div>
+            <TodoList />
         </div>
     </t>
-
 </templates>

awesome_owl/static/src/todo/todoitem.js

@@ -0,0 +1,8 @@
+/** @odoo-module **/
+
+import { Component, useState, xml } from "@odoo/owl";
+
+export class TodoItem extends Component {
+    static template = "awesome_owl.todoitem";
+
+}

awesome_owl/static/src/todo/todoitem.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.todoitem">
+        <div t-att-class="{'text-muted text-decoration-line-through': props.isCompleted}">
+            <t t-esc="props.id" />. <t t-esc="props.description" />
+        </div>
+    </t>
+</templates>

awesome_owl/static/src/todo/todolist.js

@@ -0,0 +1,32 @@
+/** @odoo-module **/
+
+import { Component, onMounted, useRef, useState } from "@odoo/owl";
+// Custom elements
+import { TodoItem } from "./todoitem";
+import { autoFocus } from "../utils";
+
+export class TodoList extends Component {
+    static template = "awesome_owl.todolist";
+    static components = { TodoItem };
+
+    nextID;
+
+    setup() {
+        this.nextID = 1;
+
+        this.todos = useState([]);
+        autoFocus("user_input");
+    }
+
+    addTodo(event) {
+        if (event.keyCode === 13 && event.target.value != '') {
+            this.todos.push({
+                id: this.nextID,
+                description: event.target.value,
+                isCompleted: false
+            });
+            this.nextID++;
+            event.target.value = "";
+        }
+    }
+}

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.todolist">
+        <input type="text" t-on-keyup="addTodo" placeholder="Add an item to the todo list" t-ref="user_input"/>
+        <t t-foreach="this.todos" t-as="i" t-key="i.id">
+            <TodoItem id="i['id']" description="i['description']" isCompleted="i['isCompleted']"/>
+        </t>
+    </t>
+</templates>

awesome_owl/static/src/utils.js

@@ -0,0 +1,9 @@
+import { useRef, onMounted } from "@odoo/owl";
+
+export function autoFocus(refName) {
+    const input_ref = useRef(refName);
+
+    onMounted(() => {
+        input_ref.el.focus();
+    });
+}

estate/__init__.py

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

estate/__manifest__.py

@@ -0,0 +1,25 @@
+# A custom real estate module, created for learning purposes
+
+{
+    'name': '[TUTO] Estate',
+    'summary': 'Track your real estate properties',
+    'depends': [
+        'base_setup'
+    ],
+    'license': "LGPL-3",
+    'data': [
+        'security/ir.model.access.csv',
+
+        'views/estate_property_views.xml',
+        'views/estate_property_offer_views.xml',
+        'views/estate_settings_views.xml',
+        'views/res_user_views.xml',
+        'views/estate_menu_views.xml'
+    ],
+    'installable': True,
+    'application': True,
+    'demo': [
+        "demo/estate_demo.xml",
+    ],
+    'auto_install': True
+}

estate/demo/estate_demo.xml

@@ -0,0 +1,121 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<odoo>
+    <data>
+
+        <!-- Demo Estate Property Types -->
+        <record id="estate_property_type_1" model="estate_property_type">
+            <field name="name">Appartment</field>
+        </record>
+        <record id="estate_property_type_2" model="estate_property_type">
+            <field name="name">House</field>
+        </record>
+
+        <!-- Demo Estate Property Tags -->
+        <record id="estate_property_tag_1" model="estate_property_tag">
+            <field name="name">cosy</field>
+            <field name="color">5</field>
+        </record>
+        <record id="estate_property_tag_2" model="estate_property_tag">
+            <field name="name">renovated</field>
+            <field name="color">3</field>
+        </record>
+        <record id="estate_property_tag_3" model="estate_property_tag">
+            <field name="name">renovation needed</field>
+            <field name="color">4</field>
+        </record>
+
+        <!-- Demo Estate Properties -->
+        <record id="estate_property_1" model="estate_property">
+            <field name="name">Beach House</field>
+            <field name="status">new</field>
+            <field name="description">A brand new house by the beach</field>
+            <field name="postcode">8300</field>
+            <field name="date_availability" eval="(DateTime.today() + relativedelta(months=3)).strftime('%Y-%m-%d %H:%M')" />
+            <field name="expected_price">2500000</field>
+            <field name="selling_price">0</field>
+            <field name="bedrooms">6</field>
+            <field name="living_area">1050</field>
+            <field name="facades">4</field>
+            <field name="garage">True</field>
+            <field name="garden">True</field>
+            <field name="garden_area">420</field>
+            <field name="garden_orientation">south</field>
+            <field name="type_id" ref="estate_property_type_2" />
+            <field name="salesperson" ref="base.user_demo"/>
+            <field name="tag_ids" eval="[(6, 0, [ref('estate_property_tag_1'), ref('estate_property_tag_2')])]"/>
+        </record>
+        <record id="estate_property_2" model="estate_property">
+            <field name="name">City Apt</field>
+            <field name="status">offer_accepted</field>
+            <field name="description">A shitty appartment in Brussels</field>
+            <field name="postcode">1090</field>
+            <field name="date_availability" eval="(DateTime.today() + relativedelta(months=1)).strftime('%Y-%m-%d %H:%M')" />
+            <field name="expected_price">250000</field>
+            <field name="selling_price">0</field>
+            <field name="bedrooms">2</field>
+            <field name="living_area">95</field>
+            <field name="facades">1</field>
+            <field name="garage">False</field>
+            <field name="garden">False</field>
+            <field name="garden_area">0</field>
+            <field name="type_id" ref="estate_property_type_1"/>
+            <field name="salesperson" ref="base.user_admin"/>
+            <field name="tag_ids" eval="[(6, 0, [ref('estate_property_tag_3')])]"/>
+        </record>
+        <record id="estate_property_3" model="estate_property">
+            <field name="name">Small House</field>
+            <field name="status">new</field>
+            <field name="description">A small house in the centre of Brussels</field>
+            <field name="postcode">1000</field>
+            <field name="date_availability" eval="(DateTime.today() + relativedelta(days=5, months=3)).strftime('%Y-%m-%d %H:%M')" />
+            <field name="expected_price">450000</field>
+            <field name="selling_price">0</field>
+            <field name="bedrooms">2</field>
+            <field name="living_area">120</field>
+            <field name="facades">2</field>
+            <field name="garage">True</field>
+            <field name="garden">False</field>
+            <field name="garden_area">0</field>
+            <field name="type_id" ref="estate_property_type_2"/>
+            <field name="salesperson" ref="base.user_admin"/>
+            <field name="tag_ids" eval="[(6, 0, [ref('estate_property_tag_1'), ref('estate_property_tag_3')])]"/>
+        </record>
+
+        <!-- Demo Estate Property Offers -->
+        <record id="estate_property_offer_1" model="estate_property_offer">
+            <field name="price">2000000</field>
+            <field name="partner_id" ref="base.res_partner_4"/>
+            <field name="validity">12</field>
+            <field name="property_id" ref="estate_property_1"/>
+        </record>
+        <record id="estate_property_offer_2" model="estate_property_offer">
+            <field name="price">200000</field>
+            <field name="partner_id" ref="base.res_partner_3"/>
+            <field name="validity">10</field>
+            <field name="property_id" ref="estate_property_2"/>
+        </record>
+        <record id="estate_property_offer_3" model="estate_property_offer">
+            <field name="price">220000</field>
+            <field name="partner_id" ref="base.res_partner_5"/>
+            <field name="validity">25</field>
+            <field name="property_id" ref="estate_property_2"/>
+        </record>
+        <record id="estate_property_offer_4" model="estate_property_offer">
+            <field name="price">260000</field>
+            <field name="status">accepted</field>
+            <field name="partner_id" ref="base.res_partner_4"/>
+            <field name="deadline" eval="(DateTime.today() + relativedelta(days=7)).strftime('%Y-%m-%d %H:%M')" />
+            <field name="property_id" ref="estate_property_2"/>
+        </record>
+
+        <!-- Mass cancel -->
+        <record id="model_estate_property_action_cancel" model="ir.actions.server">
+            <field name="name">Mass cancel</field>
+            <field name="model_id" ref="estate.model_estate_property"/>
+            <field name="binding_model_id" ref="estate.model_estate_property"/>
+            <field name="binding_view_types">list</field>
+            <field name="state">code</field>
+            <field name="code">action = records.action_cancel()</field>
+        </record>
+    </data>
+</odoo>

estate/models/__init__.py

@@ -0,0 +1 @@
+from . import estate_property_infos, estate_property, estate_property_offer, res_user