-
-
Save mahmudamen/1fb054cb9c9c59bbe98e8a45e4a2d7cd to your computer and use it in GitHub Desktop.
Odoo OWL Component Example + Owl Component Inheritance (Patching Owl Components)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| odoo.define('my.component', function (require) { | |
| "use strict"; | |
| const { Component, useState } = owl; | |
| const { xml } = owl.tags; | |
| const { patch } = require('web.utils'); | |
| // import { patch } from "@web/core/utils/patch"; | |
| class MyComponent extends Component { | |
| static template = xml` | |
| <div class="bg-info text-center p-2"> | |
| <i class="fa fa-arrow-left p-1" | |
| style="cursor: pointer;" | |
| t-on-click="onPrevious"> </i> | |
| <b t-esc="messageList[Math.abs(state.currentIndex%4)]"/> | |
| <i class="fa fa-arrow-right p-1" | |
| style="cursor: pointer;" | |
| t-on-click="onNext"> </i> | |
| <i class="fa fa-close p-1 float-right" | |
| style="cursor: pointer;" | |
| t-on-click="onRemove"> </i> | |
| </div>` | |
| constructor() { | |
| console.log('CALLED:> constructor'); | |
| super(...arguments); | |
| this.messageList = [ | |
| 'Hello World', | |
| 'Welcome to Odoo', | |
| 'Odoo is awesome', | |
| 'You are awesome too' | |
| ]; | |
| this.state = useState({ currentIndex: 0 }); | |
| } | |
| async willStart() { | |
| console.log('CALLED:> willStart'); | |
| } | |
| mounted() { | |
| console.log('CALLED:> mounted'); | |
| } | |
| willPatch() { | |
| console.log('CALLED:> willPatch'); | |
| } | |
| patched() { | |
| console.log('CALLED:> patched'); | |
| } | |
| willUnmount() { | |
| console.log('CALLED:> willUnmount'); | |
| } | |
| onRemove(ev) { | |
| this.destroy(); | |
| } | |
| onNext(ev) { | |
| this.state.currentIndex++; | |
| } | |
| onPrevious(ev) { | |
| this.state.currentIndex--; | |
| } | |
| } | |
| patch(MyComponent.prototype, "test_patching_my_component", { | |
| setup() { | |
| this._super(...arguments); | |
| console.log("patch patch patch setup"); | |
| } | |
| }); | |
| owl.utils.whenReady().then(() => { | |
| const app = new MyComponent(); | |
| app.mount(document.body); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment