khanh.pndc/odoo-docs
1
0
Fork 0
mirror of https://github.com/odoo/documentation.git synced 2025-12-13 16:09:11 +07:00
Code Issues Packages Projects Releases Wiki Activity

[FW][IMP] developer/*: update js code to ES6

Browse Source 
This PR updates javascript code to be up to date with the codebase standards:
- use the `static` keyword when possible
- proper owl imports
- removed unecessary `@odoo-module` directives

Task ID: 2258359

closes odoo/documentation#11483

Forward-port-of: odoo/documentation#11466
Signed-off-by: Bastien Fafchamps (bafa) <bafa@odoo.com>
Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
This commit is contained in:
Bastien Fafchamps (bafa)
2024-12-11 12:35:20 +00:00
parent f51520413e
commit b21777ddae
10 changed files with 108 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
content/developer/reference/frontend/framework_overview.rst
View File

@@ -152,9 +152,10 @@ client can use it. For example, the field registry contains all field components
.. code-block:: javascript
import { Component } from "@odoo/owl";
import { registry } from "./core/registry";
class MyFieldChar extends owl.Component {
class MyFieldChar extends Component {
// some code
}

36
content/developer/reference/frontend/hooks.rst
View File

@@ -193,18 +193,20 @@ the window is resized/scrolled.
.. code-block:: javascript
import { usePosition } from "@web/core/position_hook";
import { Component, xml } from "@odoo/owl";
class MyPopover extends Component {
static template = xml`
<div t-ref="popper">
I am positioned through a wonderful hook!
</div>
`;
class MyPopover extends owl.Component {
setup() {
// Here, the reference is the target props, which is an HTMLElement
usePosition(this.props.target);
}
}
MyPopover.template = owl.tags.xml`
<div t-ref="popper">
I am positioned through a wonderful hook!
</div>
`;
.. important::
You should indicate your `popper` element using a `t-ref directive <https://github.com/odoo/owl/blob/master/doc/reference/hooks.md#useref>`_.
@@ -260,11 +262,21 @@ API
.. code-block:: javascript
import { Component, xml, useRef } from "@odoo/owl";
import { usePosition } from "@web/core/position_hook";
class DropMenu extends owl.Component {
class DropMenu extends Component {
static template = xml`
<button t-ref="toggler">Toggle Menu</button>
<div t-ref="menu">
<t t-slot="default">
This is the menu default content.
</t>
</div>
`;
setup() {
const toggler = owl.useRef("toggler");
const toggler = useRef("toggler");
usePosition(
() => toggler.el,
{
@@ -278,14 +290,6 @@ API
);
}
}
DropMenu.template = owl.tags.xml`
<button t-ref="toggler">Toggle Menu</button>
<div t-ref="menu">
<t t-slot="default">
This is the menu default content.
</t>
</div>
`;
.. _frontend/hooks/useSpellCheck:

1
content/developer/reference/frontend/javascript_reference.rst
View File

@@ -154,7 +154,6 @@ This is done by using the `patch` utility function:
.. code-block:: javascript
/** @odoo-module */
import { Hamster } from "@web/core/hamster"
import { patch } from "@web/core/utils/patch";

108
content/developer/reference/frontend/owl_components.rst
View File

@@ -29,10 +29,15 @@ can make a simple component in Odoo.
.. code-block:: javascript
const { useState } = owl.hooks;
const { xml } = owl.tags;
import { Component, xml, useState } from "@odoo/owl";
class MyComponent extends Component {
static template = xml`
<div t-on-click="increment">
<t t-esc="state.value">
</div>
`;
setup() {
this.state = useState({ value: 1 });
}
@@ -41,10 +46,6 @@ can make a simple component in Odoo.
this.state.value++;
}
}
MyComponent.template = xml
`<div t-on-click="increment">
<t t-esc="state.value">
</div>`;
This example shows that Owl is available as a library in the global namespace as
`owl`: it can simply be used like most libraries in Odoo. Note that we
@@ -67,12 +68,13 @@ Here is how the component above should be defined:
.. code-block:: javascript
const { useState } = owl.hooks;
import { Component, useState } from "@odoo/owl";
class MyComponent extends Component {
static template = 'myaddon.MyComponent';
...
}
MyComponent.template = 'myaddon.MyComponent';
And the template is now located in the corresponding xml file:
@@ -768,16 +770,21 @@ Props
.. code-block:: javascript
import { Component, xml } from "@odoo/owl";
import { Notebook } from "@web/core/notebook/notebook";
class MyTemplateComponent extends owl.Component {
static template = owl.tags.xml`
class MyTemplateComponent extends Component {
static template = xml`
<h1 t-esc="props.title" />
<p t-esc="props.text" />
`;
}
class MyComponent extends owl.Component {
class MyComponent extends Component {
static template = xml`
<Notebook defaultPage="'page_2'" pages="pages" />
`;
get pages() {
return [
{
@@ -800,9 +807,6 @@ Props
]
}
}
MyComponent.template = owl.tags.xml`
<Notebook defaultPage="'page_2'" pages="pages" />
`;
Both examples are shown here:
@@ -941,9 +945,18 @@ The shape of a `group` is the following:
.. code-block:: javascript
import { Component, xml } from "@odoo/owl";
import { SelectMenu } from "@web/core/select_menu/select_menu";
class MyComponent extends owl.Component {
class MyComponent extends Component {
static template = xml`
<SelectMenu
choices="choices"
groups="groups"
value="'value_2'"
/>
`;
get choices() {
return [
{
@@ -979,30 +992,21 @@ The shape of a `group` is the following:
]
}
}
MyComponent.template = owl.tags.xml`
<SelectMenu
choices="choices"
groups="groups"
value="'value_2'"
/>
`;
You can also customize the appearance of the toggler and set a custom template for the choices, using the appropriate component `slot`'s.
.. code-block:: javascript
.. code-block:: xml
MyComponent.template = owl.tags.xml`
<SelectMenu
choices="choices"
groups="groups"
value="'value_2'"
>
Make a choice!
<t t-set-slot="choice" t-slot-scope="choice">
<span class="coolClass" t-esc="'👉 ' + choice.data.label + ' 👈'" />
</t>
</SelectMenu>
`;
<SelectMenu
choices="choices"
groups="groups"
value="'value_2'"
>
Make a choice!
<t t-set-slot="choice" t-slot-scope="choice">
<span class="coolClass" t-esc="'👉 ' + choice.data.label + ' 👈'" />
</t>
</SelectMenu>
.. image:: owl_components/select_menu.png
:width: 400 px
@@ -1019,22 +1023,20 @@ The shape of a `group` is the following:
For more advanced use cases, you can customize the bottom area of the dropdown, using the `bottomArea` slot. Here, we choose to display
a button with the corresponding value set in the search input.
.. code-block:: javascript
.. code-block:: xml
MyComponent.template = owl.tags.xml`
<SelectMenu
choices="choices"
>
<span class="select_menu_test">Select something</span>
<t t-set-slot="bottomArea" t-slot-scope="select">
<div t-if="select.data.searchValue">
<button class="btn text-primary" t-on-click="() => this.onCreate(select.data.searchValue)">
Create this article "<i t-esc="select.data.searchValue" />"
</button>
</div>
</t>
</SelectMenu>
`;
<SelectMenu
choices="choices"
>
<span class="select_menu_test">Select something</span>
<t t-set-slot="bottomArea" t-slot-scope="select">
<div t-if="select.data.searchValue">
<button class="btn text-primary" t-on-click="() => this.onCreate(select.data.searchValue)">
Create this article "<i t-esc="select.data.searchValue" />"
</button>
</div>
</t>
</SelectMenu>
.. image:: owl_components/select_menu_bottomArea.png
:width: 400 px
@@ -1098,9 +1100,13 @@ The shape of a `tag` is the following:
.. code-block:: javascript
import { Component, xml } from "@odoo/owl";
import { TagsList } from "@web/core/tags_list/tags_list";
class Parent extends Component {
static template = xml`<TagsList tags="tags" />`;
static components = { TagsList };
setup() {
this.tags = [{
id: "tag1",
@@ -1119,8 +1125,6 @@ The shape of a `tag` is the following:
}];
}
}
Parent.components = { TagsList };
Parent.template = xml`<TagsList tags="tags" />`;
Depending the attributes given to each tag, their appearance and behavior will differ.

9
content/developer/reference/frontend/services.rst
View File

@@ -313,10 +313,10 @@ Let's say we want to add an effect that add a sepia look at the page.
.. code-block:: javascript
import { registry } from "@web/core/registry";
const { Component, tags } = owl;
import { Component, xml } from "@odoo/owl";
class SepiaEffect extends Component {}
SepiaEffect.template = tags.xml`
class SepiaEffect extends Component {
static template = xml`
<div style="
position: absolute;
left: 0;
@@ -326,7 +326,8 @@ Let's say we want to add an effect that add a sepia look at the page.
pointer-events: none;
background: rgba(124,87,0, 0.4);
"></div>
`;
`;
}
export function sepiaEffectProvider(env, params = {}) {
return {