[ADD] Discover the JavaScript framework

README.md

@@ -1,10 +1,10 @@
 # Odoo tutorials
 
 This repository hosts the code for the bases and solutions of the
-[official Odoo tutorials](https://www.odoo.com/documentation/16.0/developer/howtos.html).
+[official Odoo tutorials](https://www.odoo.com/documentation/17.0/developer/tutorials.html).
 
-It has 2 branches for each Odoo version: one for the bases and one for
-the solutions. For example, `16.0` and `16.0-solutions`. The first
-contains the code of the modules that serve as base for the tutorials,
-and the second contains the code of the same modules with the complete
-solution.
+It has 3 branches for each Odoo version: one for the bases, one for
+[Discover the JS framework](https://www.odoo.com/documentation/17.0/developer/tutorials/discover_js_framework.html) solutions and one for [Master the Odoo web framework](https://www.odoo.com/documentation/17.0/developer/tutorials/master_odoo_web_framework.html) solutions. For example, `17.0`, `17.0-discover-js-framework-solutions` and `17.0-master-odoo-web-framework-solutions`. 
+The first contains the code of the modules that serve as base for the tutorials,
+and the others contains the code of each chapter with the complete
+solution.

awesome_clicker/__init__.py

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

awesome_clicker/__manifest__.py

@@ -0,0 +1,29 @@
+# -*- coding: utf-8 -*-
+{
+    'name': "Awesome Clicker",
+
+    'summary': """
+        Starting module for "Master the Odoo web framework, chapter 1: Build a Clicker game"
+    """,
+
+    'description': """
+        Starting module for "Master the Odoo web framework, chapter 1: Build a Clicker game"
+    """,
+
+    'author': "Odoo",
+    'website': "https://www.odoo.com/",
+    'category': 'Tutorials/AwesomeClicker',
+    'version': '0.1',
+    'application': True,
+    'installable': True,
+    'depends': ['base', 'web'],
+
+    'data': [],
+    'assets': {
+        'web.assets_backend': [
+            'awesome_clicker/static/src/**/*',
+        ],
+
+    },
+    'license': 'AGPL-3'
+}

awesome_dashboard/__init__.py

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

awesome_dashboard/__manifest__.py

@@ -0,0 +1,30 @@
+# -*- coding: utf-8 -*-
+{
+    'name': "Awesome Dashboard",
+
+    'summary': """
+        Starting module for "Discover the JS framework, chapter 2: Build a dashboard"
+    """,
+
+    'description': """
+        Starting module for "Discover the JS framework, chapter 2: Build a dashboard"
+    """,
+
+    'author': "Odoo",
+    'website': "https://www.odoo.com/",
+    'category': 'Tutorials/AwesomeDashboard',
+    'version': '0.1',
+    'application': True,
+    'installable': True,
+    'depends': ['base', 'web', 'mail', 'crm'],
+
+    'data': [
+        'views/views.xml',
+    ],
+    'assets': {
+        'web.assets_backend': [
+            'awesome_dashboard/static/src/**/*',
+        ],
+    },
+    'license': 'AGPL-3'
+}

awesome_dashboard/controllers/__init__.py

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

awesome_dashboard/controllers/controllers.py

@@ -0,0 +1,36 @@
+# -*- 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='json', auth='user')
+    def get_statistics(self):
+        """
+        Returns a dict of statistics about the orders:
+            'average_quantity': the average number of t-shirts by order
+            'average_time': the average time (in hours) elapsed between the
+                moment an order is created, and the moment is it sent
+            'nb_cancelled_orders': the number of cancelled orders, this month
+            'nb_new_orders': the number of new orders, this month
+            'total_amount': the total amount of orders, this month
+        """
+
+        return {
+            'average_quantity': random.randint(4, 12),
+            'average_time': random.randint(4, 123),
+            'nb_cancelled_orders': random.randint(0, 50),
+            'nb_new_orders': random.randint(10, 200),
+            'orders_by_size': {
+                'm': random.randint(0, 150),
+                's': random.randint(0, 150),
+                'xl': random.randint(0, 150),
+            },
+            'total_amount': random.randint(100, 1000)
+        }
+

awesome_dashboard/static/src/dashboard.js

@@ -0,0 +1,10 @@
+/** @odoo-module **/
+
+import { Component } from "@odoo/owl";
+import { registry } from "@web/core/registry";
+
+class AwesomeDashboard extends Component {
+    static template = "awesome_dashboard.AwesomeDashboard";
+}
+
+registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboard);

awesome_dashboard/static/src/dashboard.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.AwesomeDashboard">
+        hello dashboard
+    </t>
+
+</templates>

awesome_dashboard/views/views.xml

@@ -0,0 +1,11 @@
+<odoo>
+  <data>
+    <record model="ir.actions.client" id="dashboard">
+      <field name="name">Dashboard</field>
+      <field name="tag">awesome_dashboard.dashboard</field>
+    </record>
+
+    <menuitem name="Awesome Dashboard" id="awesome_dashboard.menu_root" groups="base.group_user" web_icon="awesome_dashboard,static/description/icon.png"/>
+    <menuitem name="Dashboard" id="awesome_dashboard.dashboard_menu" parent="awesome_dashboard.menu_root" action="awesome_dashboard.dashboard" sequence="1"/>
+  </data>
+</odoo>

awesome_gallery/__init__.py

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

awesome_gallery/__manifest__.py

@@ -0,0 +1,26 @@
+# -*- coding: utf-8 -*-
+{
+    'name': "Gallery View",
+    'summary': """
+        Starting module for "Master the Odoo web framework, chapter 3: Create a Gallery View"
+    """,
+
+    'description': """
+        Starting module for "Master the Odoo web framework, chapter 3: Create a Gallery View"
+    """,
+
+    'version': '0.1',
+    'application': True,
+    'category': 'Tutorials/AwesomeGallery',
+    'installable': True,
+    'depends': ['web', 'contacts'],
+    'data': [
+        'views/views.xml',
+    ],
+    'assets': {
+        'web.assets_backend': [
+            'awesome_gallery/static/src/**/*',
+        ],
+    },
+    'license': 'AGPL-3'
+}

awesome_gallery/models/__init__.py

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

awesome_gallery/models/ir_action.py

@@ -0,0 +1,10 @@
+# -*- 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'})

awesome_gallery/models/ir_ui_view.py

@@ -0,0 +1,8 @@
+# -*- coding: utf-8 -*-
+from odoo import fields, models
+
+
+class View(models.Model):
+    _inherit = 'ir.ui.view'
+
+    type = fields.Selection(selection_add=[('gallery', "Awesome Gallery")])

awesome_gallery/static/src/gallery_view.js

@@ -0,0 +1,3 @@
+/** @odoo-module */
+
+// TODO: Begin here!

awesome_gallery/views/views.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+<data>
+    <record id="contacts.action_contacts" model="ir.actions.act_window">
+        <field name="name">Contacts</field>
+        <field name="res_model">res.partner</field>
+        <field name="view_mode">kanban,tree,form,activity</field>
+        <field name="search_view_id" ref="base.view_res_partner_filter"/>
+        <field name="context">{'default_is_company': True}</field>
+        <field name="help" type="html">
+          <p class="o_view_nocontent_smiling_face">
+            Create a Contact in your address book
+          </p><p>
+            Odoo helps you track all activities related to your contacts.
+          </p>
+        </field>
+    </record>
+    </data>
+</odoo>

awesome_kanban/__init__.py

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

awesome_kanban/__manifest__.py

@@ -0,0 +1,26 @@
+# -*- coding: utf-8 -*-
+{
+    'name': "Awesome Kanban",
+    'summary': """
+        Starting module for "Master the Odoo web framework, chapter 4: Customize a kanban view"
+    """,
+
+    'description': """
+        Starting module for "Master the Odoo web framework, chapter 4: Customize a kanban view.
+    """,
+
+    'version': '0.1',
+    'application': True,
+    'category': 'Tutorials/AwesomeKanban',
+    'installable': True,
+    'depends': ['web', 'crm'],
+    'data': [
+        'views/views.xml',
+    ],
+    'assets': {
+        'web.assets_backend': [
+            'awesome_kanban/static/src/**/*',
+        ],
+    },
+    'license': 'AGPL-3'
+}

awesome_kanban/static/src/awesome_kanban_view.js

@@ -0,0 +1,3 @@
+/** @odoo-module */
+
+// TODO: Define here your AwesomeKanban view

awesome_kanban/views/views.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+  <data>
+    <record id="crm_lead_kanban_inherited" model="ir.ui.view">
+        <field name="name">crm.lead.kanban.lead.awesome_gallery</field>
+        <field name="model">crm.lead</field>
+        <field name="inherit_id" ref="crm.crm_case_kanban_view_leads"/>
+        <field name="arch" type="xml">
+            <xpath expr="//kanban" position="attributes">
+                <attribute name="js_class">awesome_kanban</attribute>
+            </xpath>
+        </field>
+    </record>
+  </data>
+</odoo>

awesome_owl/__init__.py

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

awesome_owl/__manifest__.py

@@ -0,0 +1,42 @@
+# -*- coding: utf-8 -*-
+{
+    'name': "Awesome Owl",
+
+    'summary': """
+        Starting module for "Discover the JS framework, chapter 1: Owl components"
+    """,
+
+    'description': """
+        Starting module for "Discover the JS framework, chapter 1: Owl components"
+    """,
+
+    'author': "Odoo",
+    'website': "https://www.odoo.com",
+
+    # Categories can be used to filter modules in modules listing
+    # Check https://github.com/odoo/odoo/blob/15.0/odoo/addons/base/data/ir_module_category_data.xml
+    # for the full list
+    'category': 'Tutorials/AwesomeOwl',
+    'version': '0.1',
+
+    # any module necessary for this one to work correctly
+    'depends': ['base', 'web'],
+    'application': True,
+    'installable': True,
+    'data': [
+        'views/templates.xml',
+    ],
+    'assets': {
+        'awesome_owl.assets_playground': [
+            ('include', 'web._assets_helpers'),
+            '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_core'),
+            'web/static/src/libs/fontawesome/css/font-awesome.css',
+            'awesome_owl/static/src/**/*',
+        ],
+    },
+    'license': 'AGPL-3'
+}

awesome_owl/controllers/__init__.py

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

awesome_owl/controllers/controllers.py

@@ -0,0 +1,10 @@
+from odoo import http
+from odoo.http import request, route
+
+class OwlPlayground(http.Controller):
+    @http.route(['/awesome_owl'], type='http', auth='public')
+    def show_playground(self):
+        """
+        Renders the owl playground page
+        """
+        return request.render('awesome_owl.playground')

awesome_owl/static/src/main.js

@@ -0,0 +1,11 @@
+import { whenReady } from "@odoo/owl";
+import { mountComponent } from "@web/env";
+import { Playground } from "./playground";
+
+const config = {
+    dev: true,
+    name: "Owl Tutorial",
+};
+
+// Mount the Playground component when the document.body is ready
+whenReady(() => mountComponent(Playground, document.body, config));

awesome_owl/static/src/playground.js

@@ -0,0 +1,7 @@
+/** @odoo-module **/
+
+import { Component } from "@odoo/owl";
+
+export class Playground extends Component {
+    static template = "awesome_owl.playground";
+}

awesome_owl/static/src/playground.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.playground">
+        <div class="p-3">
+            hello world
+        </div>
+    </t>
+
+</templates>

awesome_owl/views/templates.xml

@@ -0,0 +1,15 @@
+<odoo>
+    <data>
+          <template id="awesome_owl.playground" name="Awesome T-Shirt thank you">
+            <html>
+                <head>
+                    <link type="image/x-icon" rel="shortcut icon" href="/web/static/img/favicon.ico"/>
+                    <t t-call-assets="awesome_owl.assets_playground"/>
+                </head>
+
+                <body>
+                </body>
+            </html>
+          </template>
+    </data>
+</odoo>