Help

4

how to patch a owl class, in past we use include to patch widget

Avatar
ivan deng

hi, anyone know that,


if we want to patch a owl class, like 'searchpanel'.  how to do that?


===========

like that In odoo 13, we use include. 


It is not common, but we sometimes need to modify another class in place. The goal is to have a mechanism to change a class and all future/present instances. This is done by using the include method:


var Hamster = require('web.Hamster');
Hamster.include({
    sleep: function () {
        this._super.apply(this, arguments);
        console.log('zzzz');
    },
});
3 Comments
Avatar
Discard
Avatar
Odoophile
-

Please go through this, may help you

https://odoo.github.io/owl/playground/

Avatar
Shurshilov Artem
-

there is no this in the playground, I have the same question

Avatar
Marcelo Pereira
-

I have the same question, anyone found right way to do this?

2 Answers
0
Best Answer
const Registry = require('web.Registry');
const Hamster = require('web.Hamster');
const ExtendedHamster = (Hamster) =>
    class extends Hamster {
        sleep() {
            super.sleep(...arguments);
            console.log('zzzz');
        }
    }
Registry.Component.extend(Hamster, ExtendedHamster);
return ExtendedHamster;
Avatar
Discard
0
Avatar
raul paz
Best Answer

After saying Shurshilov's example i work a litle to find a proper solution. Here you can find a complete example.

Thanks Shurshilov!

.js file

\\ \\\
\\ \\\

odoo.define('mail_message_select/static/src/js/mail_message_select.js'function (require) {
'use strict';
/*
- Add new owl.Context variable 'selectedMessage' to mail environment to control which message is selected.
- Add new Context selectedMessage reaction to Message component to control message selected appearance.
- Add new property dummy_property_example to illustrate how to add a new property.
- Overwrite _onClick Message component to save in the Context clicked message as selected.
- Create new get isSelectedMessage method accessible from template.
*/
const {Context} = owl;
const {useContext} = owl.hooks;
const DiscussWidget = require('mail/static/src/widgets/discuss/discuss.js'); // Where the mail environment is created
const MessageList = require('mail/static/src/components/message_list/message_list.js'); // Message's parent component
const oldMessage = require('mail/static/src/components/message/message.js'); // Component what we want inherit
DiscussWidget.include({
  willStart: async function () {
  await this._super(...arguments);
this.env.selectedMessage = new Context({localId: undefined});
  },
});
class newMessage extends oldMessage {
  constructor(parent, props) {
  super(parent, props);
this.selectedMessage = useContext(parent.env.selectedMessage);
/* Here you can add useState, useRef... */
}
  _onClick(ev) {
  super._onClick(ev);
this.env.selectedMessage.state.localId = this.props.messageLocalId;
  }
  get isSelectedMessage () {
return (this.env.selectedMessage.state.localId === this.props.messageLocalId);
  }
};
/* here you can add new properties like:
newMessage.props['dummy_property_example'] = {type: Boolean, optional: true};
*/
MessageList.components.Message = newMessage; // Apply the new inherited component to parent
});

.css file

.o_mail_message_select {
background-color: lightgray;
}

.xml template

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

<t t-inherit="mail.Message" t-inherit-mode="extension">
<xpath expr="//div[hasclass('o_Message')]" position="attributes">
<attribute name="t-att-class">{
'o-clicked': state.isClicked,
'o-discussion': message and (message.is_discussion or message.is_notification),
'o-mobile': env.messaging.device.isMobile,
'o-not-discussion': message and !(message.is_discussion or message.is_notification),
'o-notification': message and message.message_type === 'notification',
'o-selected': props.isSelected,
'o-squashed': props.isSquashed,
'o-starred': message and message.isStarred,
'o_mail_message_select': isSelectedMessage,
}</attribute>
</xpath>
</t>

</templates>
3 Comments
Avatar
Discard
Avatar
Shurshilov Artem
-

I made the solution on classes, not prototypes. Since a separate difference between an owl is that it consists of native classes.

Avatar
raul paz
-

Shurshilov, could you publish your solution, please?

Avatar
Shurshilov Artem
-

odoo.define('attachments_manager/static/src/components/attachment_box_custom/attachment_box_custom.js', function (require) {

'use strict';

const patchMixin = require('web.patchMixin');

const CustomAttachmentBox = patchMixin(require('mail/static/src/components/attachment_box/attachment_box.js'));

const Chatter = require('mail/static/src/components/chatter/chatter.js');

const { Component, useState } = owl;

const { useRef } = owl.hooks;

CustomAttachmentBox.patch('attachments_manager.attachments_box', T => class extends T {

constructor(...args) {

super(...args);

this.state = useState({

hasFavoritesDialog: false,

hasWebcamDialog: false,

snapshot: ''

});

this._amNewRef = useRef('am-new');

}

});

Chatter.components.AttachmentBox = CustomAttachmentBox;

return Chatter.components.AttachmentBox;

});