Odoo 15 – 在Owl框架中覆盖.js文件（Chatter组件）

huangapple
go评论99阅读模式
英文:

Odoo 15 - overwrite .js file in Owl framework (Chatter Component)

问题

  1. 可以覆盖整个 .js 文件，方法是将您的定制 js 文件放入正确的位置并确保它被正确加载。在您的例子中，您试图覆盖 chatter.js 文件，但遇到了一个已经注册的组件名称冲突问题。为了成功覆盖，您可以尝试以下步骤：

    • 确保您的自定义 chatter.js 文件位于正确的位置，即 "freshdesk-connector/static/src/components/chatter/chatter.js"。
    • 确保您的模块中没有与 "Chatter" 相关的其他组件注册。根据错误消息，似乎已经有一个名为 "Chatter" 的组件注册。您需要检查您的模块代码，确保没有重复注册相同名称的组件。
    • 在您的自定义 chatter.js 文件中，确保您的组件被正确命名，不要与现有的 chatter.js 中的组件名称冲突。您可以尝试将组件名称更改为不同的名称，以避免冲突。

  2. 使用 patch 方法来覆盖 Chatter 组件通常是一个好方法，但您可能需要正确设置 patch 以确保覆盖发生。以下是一个示例 patch 配置的可能方式：

  1. <odoo>
  2.     <data>
  3.         <template id="assets_backend_custom" name="Custom Backend Assets" inherit_id="web.assets_backend">
  4.             <xpath expr="." position="inside">
  5.                 <script type="text/javascript" src="/freshdesk-connector/static/src/components/chatter/chatter.js"></script>
  6.             </xpath>
  7.         </template>
  8.     </data>
  9. </odoo>

在这个示例中，我们使用 xpath 来将您的自定义 chatter.js 文件添加到现有的 web.assets_backend 资产中。确保 src 属性指向您的自定义 chatter.js 文件的正确路径。

请确保您的模块的 XML 配置正确加载，且没有其他地方覆盖了 Chatter 组件。如果其他模块或配置也尝试修改 Chatter 组件，可能会导致冲突。

注意：以上只是一种可能的方法，实际实现可能会因您的 Odoo 版本和模块结构而有所不同。确保您的定制方式与您的 Odoo 版本和项目配置一致。

英文:

I want to overwrite chatter.js (module: mail/static/src/components/chatter/chatter.js) in odoo 15.
I want to add there user_chatter_status so, this how look my modified file :

  1. /** @odoo-module **/
  3. import { registerMessagingComponent } from &quot;@mail/utils/messaging_component&quot;;
  4. import { useUpdate } from &quot;@mail/component_hooks/use_update/use_update&quot;;
  5. import { useComponentToModel } from &quot;@mail/component_hooks/use_component_to_model/use_component_to_model&quot;;
  6. import { useRefToModel } from &quot;@mail/component_hooks/use_ref_to_model/use_ref_to_model&quot;;
  7. var rpc = require(&quot;web.rpc&quot;);
  8. const { Component } = owl;
  9. const { useRef } = owl.hooks;
  11. export class Chatter extends Component {
  12.   /**
  13.    * @override
  14.    */
  15.   constructor(...args) {
  16.     super(...args);
  17.     useUpdate({ func: () =&gt; this._update() });
  18.     useComponentToModel({
  19.       fieldName: &quot;component&quot;,
  20.       modelName: &quot;mail.chatter&quot;,
  21.       propNameAsRecordLocalId: &quot;chatterLocalId&quot;,
  22.     });
  23.     useRefToModel({
  24.       fieldName: &quot;threadRef&quot;,
  25.       modelName: &quot;mail.chatter&quot;,
  26.       propNameAsRecordLocalId: &quot;chatterLocalId&quot;,
  27.       refName: &quot;thread&quot;,
  28.     });
  29.     /**
  30.      * Reference of the scroll Panel (Real scroll element). Useful to pass the Scroll element to
  31.      * child component to handle proper scrollable element.
  32.      */
  33.     this._scrollPanelRef = useRef(&quot;scrollPanel&quot;);
  34.     this.getScrollableElement = this.getScrollableElement.bind(this);
  35.   }
  36.   async willStart() {
  37.     await super.willStart();
  38.     this.users = await this.fetchUsers();
  39.     console.log(this.users);
  40.   }
  42.   async fetchUsers() {
  43.     const model = &quot;res.users.chatter&quot;;
  44.     const domain = [
  45.       &quot;&amp;&quot;,
  46.       [&quot;user&quot;, &quot;=&quot;, this.chatter.env.session.uid],
  47.       [&quot;model_name&quot;, &quot;=&quot;, this.chatter.thread.model],
  48.     ];
  49.     const fields = [];
  50.     const data = await this.env.services.rpc({
  51.       model: model,
  52.       method: &quot;search_read&quot;,
  53.       args: [domain, fields],
  54.     });
  55.     return data;
  56.   }
  58.   //--------------------------------------------------------------------------
  59.   // Public
  60.   //--------------------------------------------------------------------------
  62.   /**
  63.    * @returns {mail.chatter}
  64.    */
  65.   get chatter() {
  66.     return (
  67.       this.messaging &amp;&amp;
  68.       this.messaging.models[&quot;mail.chatter&quot;].get(this.props.chatterLocalId)
  69.     );
  70.   }
  71.   get user_chatter_status() {
  72.     return this.users;
  73.   }
  75.   /**
  76.    * @returns {Element|undefined} Scrollable Element
  77.    */
  78.   getScrollableElement() {
  79.     if (!this._scrollPanelRef.el) {
  80.       return;
  81.     }
  82.     return this._scrollPanelRef.el;
  83.   }
  85.   //--------------------------------------------------------------------------
  86.   // Private
  87.   //--------------------------------------------------------------------------
  89.   /**
  90.    * @private
  91.    */
  92.   _notifyRendered() {
  93.     this.trigger(&quot;o-chatter-rendered&quot;, {
  94.       attachments: this.chatter.thread.allAttachments,
  95.       thread: this.chatter.thread.localId,
  96.     });
  97.   }
  99.   /**
  100.    * @private
  101.    */
  102.   _update() {
  103.     if (!this.chatter) {
  104.       return;
  105.     }
  106.     if (this.chatter.thread) {
  107.       this._notifyRendered();
  108.     }
  109.   }
  110. }
  112. Object.assign(Chatter, {
  113.   props: {
  114.     chatterLocalId: String,
  115.   },
  116.   template: &quot;mail.Chatter&quot;,
  117. });
  119. registerMessagingComponent(Chatter);

original file:

  1. /** @odoo-module **/
  3. import { registerMessagingComponent } from &#39;@mail/utils/messaging_component&#39;;
  4. import { useUpdate } from &#39;@mail/component_hooks/use_update/use_update&#39;;
  5. import { useComponentToModel } from &#39;@mail/component_hooks/use_component_to_model/use_component_to_model&#39;;
  6. import { useRefToModel } from &#39;@mail/component_hooks/use_ref_to_model/use_ref_to_model&#39;;
  8. const { Component } = owl;
  9. const { useRef } = owl.hooks;
  11. export class Chatter extends Component {
  13.     /**
  14.      * @override
  15.      */
  16.     constructor(...args) {
  17.         super(...args);
  18.         useUpdate({ func: () =&gt; this._update() });
  19.         useComponentToModel({ fieldName: &#39;component&#39;, modelName: &#39;mail.chatter&#39;, propNameAsRecordLocalId: &#39;chatterLocalId&#39; });
  20.         useRefToModel({ fieldName: &#39;threadRef&#39;, modelName: &#39;mail.chatter&#39;, propNameAsRecordLocalId: &#39;chatterLocalId&#39;, refName: &#39;thread&#39; });
  21.         /**
  22.          * Reference of the scroll Panel (Real scroll element). Useful to pass the Scroll element to
  23.          * child component to handle proper scrollable element.
  24.          */
  25.         this._scrollPanelRef = useRef(&#39;scrollPanel&#39;);
  26.         this.getScrollableElement = this.getScrollableElement.bind(this);
  27.     }
  29.     //--------------------------------------------------------------------------
  30.     // Public
  31.     //--------------------------------------------------------------------------
  33.     /**
  34.      * @returns {mail.chatter}
  35.      */
  36.     get chatter() {
  37.         return this.messaging &amp;&amp; this.messaging.models[&#39;mail.chatter&#39;].get(this.props.chatterLocalId);
  38.     }
  40.     /**
  41.      * @returns {Element|undefined} Scrollable Element
  42.      */
  43.     getScrollableElement() {
  44.         if (!this._scrollPanelRef.el) {
  45.             return;
  46.         }
  47.         return this._scrollPanelRef.el;
  48.     }
  50.     //--------------------------------------------------------------------------
  51.     // Private
  52.     //--------------------------------------------------------------------------
  54.     /**
  55.      * @private
  56.      */
  57.     _notifyRendered() {
  58.         this.trigger(&#39;o-chatter-rendered&#39;, {
  59.             attachments: this.chatter.thread.allAttachments,
  60.             thread: this.chatter.thread.localId,
  61.         });
  62.     }
  64.     /**
  65.      * @private
  66.      */
  67.     _update() {
  68.         if (!this.chatter) {
  69.             return;
  70.         }
  71.         if (this.chatter.thread) {
  72.             this._notifyRendered();
  73.         }
  74.     }
  76. }
  78. Object.assign(Chatter, {
  79.     props: {
  80.         chatterLocalId: String,
  81.     },
  82.     template: &#39;mail.Chatter&#39;,
  83. });
  85. registerMessagingComponent(Chatter);

I try to overwrite adding to manifest.py:

  1. &quot;assets&quot;: {
  2.         &quot;web.assets_backend&quot;: [
  3.             &quot;freshdesk-connector/static/src/components/chatter/chatter.js&quot;,
  4.         ],

but have an error :

  1. UncaughtPromiseError
  2. Uncaught Promise &gt; There already is a registered component with the name &quot;Chatter&quot;

I try also to use patch but this not work for me (i think i use this bad, because I'm 'dummy' from .js).

So the main questions is:

  1. Is it possible to overwrite whole .js file, if yes how to do this.
  2. How to use patch method to overwrite Chatter component ?

答案1

得分: 0

你可以在注册新的 Chatter 组件之前取消注册旧的聊天组件。

示例:

  1. import { Chatter as OldChatter } from "@mail/components/chatter/chatter";
  2. import { registerMessagingComponent, unregisterMessagingComponent } from "@mail/utils/messaging_component";
  4. // ...
  6. unregisterMessagingComponent(OldChatter);
  7. registerMessagingComponent(Chatter);
英文:

You can unregister the old chat component before registering the new Chatter

Example:

  2. import { Chatter as OldChatter } from &quot;@mail/components/chatter/chatter&quot;;
  3. import { registerMessagingComponent, unregisterMessagingComponent } from &quot;@mail/utils/messaging_component&quot;;
  5. // ...
  7. unregisterMessagingComponent(OldChatter);
  8. registerMessagingComponent(Chatter);

huangapple
  • 本文由 发表于 2023年7月10日 16:21:04
  • 转载请务必保留本文链接：https://go.coder-hub.com/76651948.html
  • javascript
  • odoo
  • odoo-15
  • odoo-owl
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定