From 35c8064b1aa2aa94e884f178bc8081333201ab86 Mon Sep 17 00:00:00 2001 From: abd-msyukyu-odoo Date: Fri, 20 May 2022 15:20:38 +0000 Subject: [PATCH] [FIX] knowledge: fix blank chatter when changing tracked fields How to reproduce * Open an article and edit one of the tracked fields (title, root_article_id, parent_id). * Open another article * Re-open the first article * Open the chatter Current behavior The chatter does not appear. Expected behavior The chatter should appear. Fix Instead of loading the chatter with the form view, load the chatter when the user clicks on the chatter button. Implements the use of the chatter component differently from the form_renderer in mail, to be able to update/render it independently from the rest of the view. Hide the chatter button if there is no article in the form view since there is no chatter to display in this case. Task-2858428 X-original-commit: b705ccf952cd67dad4f1480928c94cd7215b601a Part-of: odoo/odoo#93088 --- .../static/src/js/knowledge_renderers.js | 78 ++++++++++++++++++- .../static/src/scss/knowledge_views.scss | 8 -- .../views/knowledge_article_views.xml | 11 +-- 3 files changed, 80 insertions(+), 17 deletions(-) diff --git a/addons/knowledge/static/src/js/knowledge_renderers.js b/addons/knowledge/static/src/js/knowledge_renderers.js index ea7d987ca38..3c55806ff84 100644 --- a/addons/knowledge/static/src/js/knowledge_renderers.js +++ b/addons/knowledge/static/src/js/knowledge_renderers.js @@ -6,11 +6,16 @@ import FormRenderer from 'web.FormRenderer'; import KnowledgeTreePanelMixin from '@knowledge/js/tools/tree_panel_mixin'; import { qweb as QWeb } from 'web.core'; +import { ChatterContainer } from '@mail/components/chatter_container/chatter_container'; +import { ComponentWrapper } from 'web.OwlCompatibility'; + +class ChatterContainerWrapperComponent extends ComponentWrapper {} const KnowledgeArticleFormRenderer = FormRenderer.extend(KnowledgeTreePanelMixin, { className: 'o_knowledge_form_view', events: _.extend({}, FormRenderer.prototype.events, { - 'click .btn-chatter': '_onBtnChatterClick', + 'click .btn-chatter.active': '_onCloseChatter', + 'click .btn-chatter:not(.active)': '_onOpenChatter', 'click .btn-create': '_onBtnCreateClick', 'click .btn-duplicate': '_onBtnDuplicateClick', 'click .btn-move': '_onBtnMoveClick', @@ -28,6 +33,30 @@ const KnowledgeArticleFormRenderer = FormRenderer.extend(KnowledgeTreePanelMixin init: function (parent, state, params) { this._super(...arguments); this.breadcrumbs = params.breadcrumbs; + /** + * Manually set values for the chatter props as it is custom handled + * and not loaded with the view (oe_chatter is not used in Knowledge, + * the chatter is only rendered when the user clicks on the button). + */ + this.chatterFields = { + // `knowledge.article` has `mail.activity.mixin` + hasActivities: true, + hasFollowers: true, + hasMessageIds: true, + }; + }, + /** + * @private + */ + _closeChatter: function () { + const chatter = this.el.querySelector('.o_knowledge_chatter_container'); + while (chatter.firstChild) { + chatter.removeChild(chatter.firstChild); + } + if (this._chatterContainerComponent) { + this._chatterContainerComponent.destroy(); + this._chatterContainerComponent = undefined; + } }, /** * @param {Event} event @@ -93,6 +122,17 @@ const KnowledgeArticleFormRenderer = FormRenderer.extend(KnowledgeTreePanelMixin category: $section.data('section') }); }, + /** + * Update the btn-chatter appearance and hide the chatter section in the + * view. Closes the chatter. + * + * @private + */ + _onCloseChatter: function () { + this.el.querySelector('.o_knowledge_chatter').classList.add('d-none'); + this.el.querySelector('.btn-chatter').classList.remove('active'); + this._closeChatter(); + }, /** * Opens the selected record. * @param {Event} event @@ -107,6 +147,21 @@ const KnowledgeArticleFormRenderer = FormRenderer.extend(KnowledgeTreePanelMixin } }); }, + /** + * Update tbe btn-chatter appearance and show the chatter section in the + * view. Open the chatter. + * + * @private + * @param {OdooEvent} ev + */ + _onOpenChatter: async function (ev) { + ev.stopPropagation(); + if (this.state.res_id) { + this.el.querySelector('.o_knowledge_chatter').classList.remove('d-none'); + this.el.querySelector('.btn-chatter').classList.add('active'); + await this._renderChatter(); + } + }, /** * By default, Bootstrap closes automatically the dropdown menu when the user * clicks inside it. To avoid that behavior, we will add a new event listener @@ -132,6 +187,27 @@ const KnowledgeArticleFormRenderer = FormRenderer.extend(KnowledgeTreePanelMixin }); this.$('.breadcrumb').prepend(items); }, + /** + * Render and mount the chatter of the current record. + * + * @private + * @returns {Promise} + */ + _renderChatter: async function () { + if (!this.state.res_id) { + return; + } + this._closeChatter(); + const props = this._makeChatterContainerProps(); + this._chatterContainerComponent = new ChatterContainerWrapperComponent( + this, + ChatterContainer, + props + ); + const target = this.el.querySelector('.o_knowledge_chatter_container'); + await this._chatterContainerComponent.mount(target); + }, + /** * Attaches an emoji picker widget to every emoji dropdown of the container. * Note: The widget will be attached to the view when the user clicks on diff --git a/addons/knowledge/static/src/scss/knowledge_views.scss b/addons/knowledge/static/src/scss/knowledge_views.scss index f22883ad6cd..d8967a21bd2 100644 --- a/addons/knowledge/static/src/scss/knowledge_views.scss +++ b/addons/knowledge/static/src/scss/knowledge_views.scss @@ -129,14 +129,6 @@ li.nav-item { display: none; } - .o_FormRenderer_chatterContainer { - max-width: unset; - &.o-aside { - width: auto; - padding: 1rem; - border: none; - } - } } .dropdown-menu.o_article_emoji_dropdown_panel { diff --git a/addons/knowledge/views/knowledge_article_views.xml b/addons/knowledge/views/knowledge_article_views.xml index 8b9d2d5aaee..4fdec0ea544 100644 --- a/addons/knowledge/views/knowledge_article_views.xml +++ b/addons/knowledge/views/knowledge_article_views.xml @@ -79,7 +79,8 @@ attrs="{'invisible': [('id', '=', False)]}"> Share - +
-
-
- - - -
-
+