Sébastien Laurent commit tutorials Chapter 1 -> 4

.gitignore

@@ -1,3 +1,5 @@
+**/.vscode/
+
 # Byte-compiled / optimized / DLL files
 __pycache__/
 *.py[cod]

.pre-commit-config.yaml

@@ -0,0 +1,6 @@
+repos:
+  - repo: https://github.com/astral-sh/ruff-pre-commit
+    rev: v0.15.1
+    hooks:
+      - id: ruff
+

awesome_clicker/__init__.py

@@ -1 +0,0 @@
-# -*- coding: utf-8 -*-

awesome_clicker/__manifest__.py

@@ -1,4 +1,3 @@
-# -*- coding: utf-8 -*-
 {
     'name': "Awesome Clicker",
 
@@ -25,5 +24,5 @@
         ],
 
     },
-    'license': 'AGPL-3'
+    'license': 'AGPL-3',
 }

awesome_dashboard/__init__.py

@@ -1,3 +1,2 @@
-# -*- coding: utf-8 -*-
 
 from . import controllers

awesome_dashboard/__manifest__.py

@@ -1,4 +1,3 @@
-# -*- coding: utf-8 -*-
 {
     'name': "Awesome Dashboard",
 
@@ -26,5 +25,5 @@
             'awesome_dashboard/static/src/**/*',
         ],
     },
-    'license': 'AGPL-3'
+    'license': 'AGPL-3',
 }

awesome_dashboard/controllers/__init__.py

@@ -1,3 +1,2 @@
-# -*- coding: utf-8 -*-
 
-from . import controllers
+from . import controllers

awesome_dashboard/controllers/controllers.py

@@ -1,13 +1,12 @@
-# -*- coding: utf-8 -*-
 
 import logging
 import random
 
 from odoo import http
-from odoo.http import request
 
 logger = logging.getLogger(__name__)
 
+
 class AwesomeDashboard(http.Controller):
     @http.route('/awesome_dashboard/statistics', type='jsonrpc', auth='user')
     def get_statistics(self):
@@ -31,6 +30,5 @@ def get_statistics(self):
                 's': random.randint(0, 150),
                 'xl': random.randint(0, 150),
             },
-            'total_amount': random.randint(100, 1000)
+            'total_amount': random.randint(100, 1000),
         }
-

awesome_gallery/__init__.py

@@ -1,2 +1 @@
-# -*- coding: utf-8 -*-
 from . import models

awesome_gallery/__manifest__.py

@@ -1,4 +1,3 @@
-# -*- coding: utf-8 -*-
 {
     'name': "Gallery View",
     'summary': """
@@ -23,5 +22,5 @@
         ],
     },
     'author': 'Odoo S.A.',
-    'license': 'AGPL-3'
+    'license': 'AGPL-3',
 }

awesome_gallery/models/__init__.py

@@ -1,4 +1,2 @@
-# -*- coding: utf-8 -*-
 # import filename_python_file_within_folder_or_subfolder
-from . import ir_action
-from . import ir_ui_view
+from . import ir_action, ir_ui_view

awesome_gallery/models/ir_action.py

@@ -1,10 +1,9 @@
-# -*- coding: utf-8 -*-
 from odoo import fields, models
 
 
 class ActWindowView(models.Model):
     _inherit = 'ir.actions.act_window.view'
 
     view_mode = fields.Selection(selection_add=[
-        ('gallery', "Awesome Gallery")
-    ],  ondelete={'gallery': 'cascade'})
+        ('gallery', "Awesome Gallery"),
+    ], ondelete={'gallery': 'cascade'})

awesome_gallery/models/ir_ui_view.py

@@ -1,4 +1,3 @@
-# -*- coding: utf-8 -*-
 from odoo import fields, models
 
 

awesome_kanban/__init__.py

@@ -1 +0,0 @@
-# -*- coding: utf-8 -*-

awesome_kanban/__manifest__.py

@@ -1,4 +1,3 @@
-# -*- coding: utf-8 -*-
 {
     'name': "Awesome Kanban",
     'summary': """
@@ -23,5 +22,5 @@
         ],
     },
     'author': 'Odoo S.A.',
-    'license': 'AGPL-3'
+    'license': 'AGPL-3',
 }

awesome_owl/__init__.py

@@ -1,3 +1,2 @@
-# -*- coding: utf-8 -*-
 
-from . import controllers
+from . import controllers

awesome_owl/__manifest__.py

@@ -1,4 +1,3 @@
-# -*- coding: utf-8 -*-
 {
     'name': "Awesome Owl",
 
@@ -33,11 +32,12 @@
             'web/static/src/scss/pre_variables.scss',
             'web/static/lib/bootstrap/scss/_variables.scss',
             'web/static/lib/bootstrap/scss/_maps.scss',
-            ('include', 'web._assets_bootstrap'),
+            ('include', 'web._assets_bootstrap_backend'),
             ('include', 'web._assets_core'),
             'web/static/src/libs/fontawesome/css/font-awesome.css',
             'awesome_owl/static/src/**/*',
+            'awesome_owl/static/src/todo_list/todo_list.scss',
         ],
     },
-    'license': 'AGPL-3'
+    'license': 'AGPL-3',
 }

awesome_owl/controllers/__init__.py

@@ -1,3 +1,2 @@
-# -*- coding: utf-8 -*-
 
-from . import controllers
+from . import controllers

awesome_owl/controllers/controllers.py

@@ -1,5 +1,6 @@
 from odoo import http
-from odoo.http import request, route
+from odoo.http import request
+
 
 class OwlPlayground(http.Controller):
     @http.route(['/awesome_owl'], type='http', auth='public')

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: Object
+    }
+
+    setup() {
+        super.setup();
+
+        this.state = useState({
+            open: true,
+        })
+    }
+
+    toggleOpen() {
+        this.state.open = !this.state.open;
+    }
+}

awesome_owl/static/src/card/card.xml

@@ -0,0 +1,21 @@
+<t t-name="awesome_owl.Card">
+    <div class="card d-inline-block m-2" style="width: 18rem;">
+        <div class="card-body">
+            <div class="d-flex justify-content-between align-items-start mb-2">
+                <h5 class="card-title mb-0" style="width: 70%; word-wrap: break-word;">
+                    <t t-out="props.title"/>
+                </h5>
+
+                <button class="btn btn-primary btn-sm" t-on-click="toggleOpen">
+                    <t t-esc="state.open ? 'Close' : 'Open'"/>
+                </button>
+            </div>
+
+            <div t-if="state.open">
+                <p class="card-text">
+                    <t t-slot="default"/>
+                </p>
+            </div>
+        </div>
+    </div>
+</t>

awesome_owl/static/src/counter/counter.js

@@ -0,0 +1,27 @@
+import { Component, useState } from "@odoo/owl";
+
+export class Counter extends Component {
+    static template = "awesome_owl.Counter";
+    static props = {
+        callback: {
+            type: Function,
+            optional: true,
+        }
+    }
+
+    setup() {
+        super.setup();
+
+        this.state = useState({ value: 0 });
+    }
+
+    increment() {
+        this.state.value++;
+
+        if (this.props.callback) {
+            this.props.callback(this.state.value);
+        }
+    }
+
+
+}

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">
+        <div class="m-2 p-2 border d-inline-block">
+            <span class="me-2">Counter: <t t-esc="state.value"/></span>
+            <button class="btn btn-primary" t-on-click="increment">Increment</button>
+        </div>
+    </t>
+</templates>

awesome_owl/static/src/playground.js

@@ -1,5 +1,32 @@
-import { Component } from "@odoo/owl";
+import { Component, useState, markup } from "@odoo/owl";
+import { Counter } from "./counter/counter";
+import { Card } from "./card/card";
+import { TodoList } from "./todo_list/todo_list";
+import { TodoItem } from "./todo_item/todo_item";
 
 export class Playground extends Component {
-    static template = "awesome_owl.playground";
+    static template = "awesome_owl.Playground";
+    static components = { Counter, Card, TodoList };
+
+    setup() {
+        super.setup();
+
+        this.state = useState({
+            html: "The sunset dipped below the jagged horizon, painting the sky in bruised purples and burnt oranges. Blablabla" ,
+            html2: markup("<i>my html content</i>"),
+            counter1: 0,
+            counter2: 0,
+        });
+
+        this.increment1 = this.increment1.bind(this);
+        this.increment2 = this.increment2.bind(this);
+    }
+
+    increment1(value) {
+        this.state.counter1 = value;
+    }
+
+    increment2(value) {
+        this.state.counter2 = value
+    }
 }

awesome_owl/static/src/playground.xml

@@ -1,10 +1,17 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
-
-    <t t-name="awesome_owl.playground">
-        <div class="p-3">
-            hello world
+    <t t-name="awesome_owl.Playground">
+        <div>
+            <Counter callback="increment1"/><Counter callback="increment2"/>
+        </div>
+        This is the sum of the two counters: <t t-esc="state.counter1 + state.counter2"/>
+        <div>
+            <Card title="state.html">
+                <Counter/>
+            </Card>
+        </div>
+        <div>
+            <TodoList/>
         </div>
     </t>
-
-</templates>
+</templates>

awesome_owl/static/src/todo_item/todo_item.js

@@ -0,0 +1,22 @@
+import { Component } from "@odoo/owl";
+
+export class TodoItem extends Component {
+    static template = "awesome_owl.TodoItem";
+    static props = {
+        id: Number,
+        description: String,
+        isCompleted: Boolean,
+        switchIsCompleted: Function,
+        deleteTodo: Function,
+    }
+
+    onChange() {
+        this.props.switchIsCompleted(this.props.id);
+    }
+
+    onDelete() {
+        console.log("delete", this.props.id)
+        this.props.deleteTodo(this.props.id);
+    }
+
+}

awesome_owl/static/src/todo_item/todo_item.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.TodoItem">
+        <div>
+            <b><input type="checkbox" t-att-checked="props.isCompleted" t-on-change="onChange"/>
+              <t t-esc="props.id"/>.</b>
+             <t t-esc="props.description"/>
+             <span class="fa fa-remove btn" t-on-click="onDelete"/>
+        </div>
+    </t>
+</templates>