WIMAR - Onboarding

.gitignore

@@ -127,3 +127,13 @@ dmypy.json
 
 # Pyre type checker
 .pyre/
+
+# JetBrains specific folders
+.idea/
+*/.idea/
+
+# Odoo specific folders
+.run
+*/.run/
+.odev
+*/.odev/

awesome_owl/__manifest__.py

@@ -29,11 +29,15 @@
     'assets': {
         'awesome_owl.assets_playground': [
             ('include', 'web._assets_helpers'),
+            ('include', 'web._assets_frontend_helpers'),
             'web/static/src/scss/pre_variables.scss',
             'web/static/lib/bootstrap/scss/_variables.scss',
-            ('include', 'web._assets_bootstrap'),
-            ('include', 'web._assets_core'),
+            'web/static/lib/bootstrap/scss/_variables-dark.scss',
+            'web/static/lib/bootstrap/scss/_maps.scss',
+            ('include', 'web._assets_bootstrap_frontend'),
             'web/static/src/libs/fontawesome/css/font-awesome.css',
+            'web/static/src/scss/fontawesome_overridden.scss',
+            ('include', 'web._assets_core'),
             'awesome_owl/static/src/**/*',
         ],
     },

awesome_owl/static/src/card/card.js

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

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 d-inline-block m-2" style="width: 18rem;">
+            <div class="card-body">
+                <h5 class="card-title"><t t-out="props.title"/><button class="btn btn-secondary" style="margin-left: 10px" t-on-click="toggle">Toggle</button></h5>
+                <div class="card-text" t-if="this.state.isToggled">
+                    <t t-slot="default"/>
+                </div>
+            </div>
+        </div>
+    </t>
+
+</templates>

awesome_owl/static/src/counter/counter.js

@@ -0,0 +1,24 @@
+import { Component, useState } from "@odoo/owl";
+
+
+export class Counter extends Component {
+    static template = "awesome_owl.counter";
+    static defaultProps = {
+        buttonText: "Increment",
+    }
+    static props = {
+        buttonText: { type: String, optional: true, },
+        onChange: { type: Function, optional: true },
+    };
+
+    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,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.counter">
+        <div>
+            Counter: <t t-esc="state.value"/>
+            <button class="btn btn-primary" t-on-click="increment" style="margin-left: 5px">
+                <t t-out="props.buttonText"/>
+            </button>
+        </div>
+    </t>
+
+</templates>

awesome_owl/static/src/playground.js

@@ -1,5 +1,19 @@
-import { Component } from "@odoo/owl";
+import { Component, useState } 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, TodoList };
+
+    setup() {
+        this.state = useState({ value : 2 });
+    }
+
+    incrementSum() {
+        this.state.value++;
+    }
 }

awesome_owl/static/src/playground.scss

@@ -0,0 +1,3 @@
+.chapter_tuto {
+    border: solid; padding: 10px; border-radius: 5px; margin-bottom: 5px
+}

awesome_owl/static/src/playground.xml

@@ -2,9 +2,29 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.playground">
-        <div class="p-3">
+        <div class="p-3 chapter_tuto">
             hello world
         </div>
+
+        <div class="chapter_tuto">
+            <Counter onChange.bind="incrementSum" t-props="{'buttonText': 'Custom Incr.'}"/>
+            <Counter onChange.bind="incrementSum"/>
+            <p>The sum id: <t t-esc="state.value"/></p>
+        </div>
+
+        <div class="chapter_tuto">
+            <Card t-props="{'title': 'Card 1'}">
+                <p>Some content</p>
+            </Card>
+
+            <Card t-props="{'title': 'Card 2'}">
+                <Counter/>
+            </Card>
+        </div>
+
+        <div class="chapter_tuto">
+            <TodoList/>
+        </div>
     </t>
 
 </templates>

awesome_owl/static/src/todo/todoitem.js

@@ -0,0 +1,27 @@
+import { Component } from "@odoo/owl";
+
+
+export class TodoItem extends Component {
+    static template = "awesome_owl.todoitem";
+    static props = {
+        id: Number,
+        description: String,
+        isCompleted: Boolean,
+        onToggle: {
+            Function,
+            optional: true,
+        },
+        onClick: {
+          Function,
+          optional: true,
+        },
+    };
+
+    toggleState() {
+        this.props.onToggle(this.props.id);
+    }
+
+    removeTodo() {
+        this.props.onClick(this.props.id);
+    }
+}

awesome_owl/static/src/todo/todoitem.xml

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

awesome_owl/static/src/todo/todolist.js

@@ -0,0 +1,39 @@
+import { Component, useState, useRef } from "@odoo/owl";
+import { TodoItem } from "./todoitem"
+import { useAutofocus } from "@awesome_owl/utils"
+
+
+export class TodoList extends Component {
+    static template = "awesome_owl.todolist";
+    static components = { TodoItem };
+
+    setup() {
+        this.todos = useState([]);
+        this.nextId = 0;
+        this.description_inputRef = useRef("todo_input");
+        useAutofocus(this.description_inputRef);
+    }
+
+    addTodo(ev) {
+        const description = this.description_inputRef.el.value.trim();
+        if (ev.keyCode === 13 && description) {
+            this.todos.push({ id: this.nextId, description: description, isCompleted: false });
+            this.nextId++;
+            this.description_inputRef.el.value = "";
+        }
+    }
+
+    toggleTodo(id) {
+        const todo = this.todos.find(t => t.id === id);
+        if (todo) {
+            todo.isCompleted = !todo.isCompleted;
+        }
+    }
+
+    removeTodo(id) {
+        const index = this.todos.findIndex(t => t.id === id);
+        if (index >= 0) {
+              this.todos.splice(index, 1);
+        }
+    }
+}

awesome_owl/static/src/todo/todolist.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.todolist">
+        <input placeholder="Add a todo" t-on-keyup="addTodo" t-ref="todo_input"/>
+        <t t-foreach="this.todos" t-as="i" t-key="i.id">
+            <TodoItem
+                    t-props="{'id': i.id, 'description': i.description, 'isCompleted': i.isCompleted}"
+                    onToggle.bind="toggleTodo"
+                    onClick.bind="removeTodo"
+            />
+        </t>
+    </t>
+
+</templates>

awesome_owl/static/src/utils.js

@@ -0,0 +1,13 @@
+import { useEffect } from "@odoo/owl";
+
+
+export function useAutofocus(ref) {
+    useEffect(
+        () => {
+            if (ref.el) {
+                ref.el.focus();
+            }
+        },
+        () => [ref.el]
+    );
+}

estate/__init__.py

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

estate/__manifest__.py

@@ -0,0 +1,23 @@
+{
+    "name": "Real Estate",
+    "version": "1.0",
+    "summary":  "Manage properties and buyers.",
+    "license": "OEEL-1",
+    "depends": [
+        "base",
+    ],
+    "author": "wimar-odoo",
+    "description": """
+    Manage efficiently real estate properties for sale and match them with potential buyers.
+    """,
+    "application": True,
+    "data": [
+        "security/ir.model.access.csv",
+        "views/estate_property_views.xml",
+        "views/estate_property_type_views.xml",
+        "views/estate_property_tag_views.xml",
+        "views/estate_property_offer_views.xml",
+        "views/res_users_views.xml",
+        "views/estate_menus.xml",
+    ],
+}

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