From 396d79aef3deb3bf894f3f38a6960bfa10f62782 Mon Sep 17 00:00:00 2001 From: Zelong Lin Date: Mon, 19 Sep 2022 15:39:00 +0000 Subject: [PATCH] [IMP] mail: autocompleteInput refactor MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit task-2974765 closes odoo/odoo#99839 Signed-off-by: Alexandre Kühn (aku) --- .../autocomplete_input_view.js | 138 +++--------------- .../autocomplete_input_view.xml | 4 +- .../components/chat_window/chat_window.xml | 4 +- .../static/src/components/discuss/discuss.xml | 5 +- .../discuss_sidebar_category.xml | 5 +- .../messaging_menu/messaging_menu.xml | 5 +- .../src/models/autocomplete_input_view.js | 82 ++++++++++- .../tests/models/autocomplete_input_view.js | 12 ++ 8 files changed, 117 insertions(+), 138 deletions(-) create mode 100644 addons/mail/static/tests/models/autocomplete_input_view.js diff --git a/addons/mail/static/src/components/autocomplete_input_view/autocomplete_input_view.js b/addons/mail/static/src/components/autocomplete_input_view/autocomplete_input_view.js index b95755d6b69..24f13bc02ac 100644 --- a/addons/mail/static/src/components/autocomplete_input_view/autocomplete_input_view.js +++ b/addons/mail/static/src/components/autocomplete_input_view/autocomplete_input_view.js @@ -5,7 +5,7 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component'; const { Component, onMounted, onWillUnmount } = owl; -export class AutocompleteInput extends Component { +export class AutocompleteInputView extends Component { /** * @override @@ -25,11 +25,18 @@ export class AutocompleteInput extends Component { this.root.el.focus(); } - let args = { + const args = { autoFocus: true, - select: (ev, ui) => this._onAutocompleteSelect(ev, ui), - source: (req, res) => this._onAutocompleteSource(req, res), - focus: ev => this._onAutocompleteFocus(ev), + select: (ev, ui) => { + if (this.autocompleteInputView) { + this.autocompleteInputView.onSelect(ev, ui); + } + }, + source: (req, res) => { + if (this.autocompleteInputView) { + this.autocompleteInputView.onSource(req, res); + } + }, html: this.autocompleteInputView.isHtml, }; @@ -40,7 +47,7 @@ export class AutocompleteInput extends Component { const autoCompleteElem = $(this.root.el).autocomplete(args); // Resize the autocomplete dropdown options to handle the long strings // By setting the width of dropdown based on the width of the input element. - autoCompleteElem.data("ui-autocomplete")._resizeMenu = function () { + autoCompleteElem.data('ui-autocomplete')._resizeMenu = function () { const ul = this.menu.element; ul.outerWidth(this.element.outerWidth()); }; @@ -56,124 +63,15 @@ export class AutocompleteInput extends Component { /** * @returns {AutocompleteInputView} */ - get autocompleteInputView() { + get autocompleteInputView() { return this.props.record; } - //-------------------------------------------------------------------------- - // Public - //-------------------------------------------------------------------------- - - /** - * Returns whether the given node is self or a children of self, including - * the suggestion menu. - * - * @param {Node} node - * @returns {boolean} - */ - contains(node) { - if (!this.root.el) { - return false; - } - if (this.root.el.contains(node)) { - return true; - } - if (!this.autocompleteInputView.customClass) { - return false; - } - const element = document.querySelector(`.${this.autocompleteInputView.customClass}`); - if (!element) { - return false; - } - return element.contains(node); - } - - //-------------------------------------------------------------------------- - // Handlers - //-------------------------------------------------------------------------- - - /** - * @private - * @param {FocusEvent} ev - */ - _onAutocompleteFocus(ev) { - if (this.props.focus) { - this.props.focus(ev); - } else { - ev.preventDefault(); - } - } - - /** - * @private - * @param {Event} ev - * @param {Object} ui - */ - _onAutocompleteSelect(ev, ui) { - if (this.props.select) { - this.props.select(ev, ui); - } - } - - /** - * @private - * @param {Object} req - * @param {function} res - */ - _onAutocompleteSource(req, res) { - if (this.props.source) { - this.props.source(req, res); - } - if (this.messaging) { - this.messaging.messagingBus.trigger('o-AutocompleteInput-source', {}); - } - } - - /** - * @private - * @param {MouseEvent} ev - */ - _onBlur(ev) { - if (this.props.onHide) { - this.props.onHide(); - } - } - - /** - * @private - * @param {MouseEvent} ev - */ - _onKeydown(ev) { - if (ev.key === 'Escape') { - if (this.props.onHide) { - this.props.onHide(); - } - } - } - } -Object.assign(AutocompleteInput, { - props: { - focus: { - type: Function, - optional: true, - }, - record: Object, - onHide: { - type: Function, - optional: true, - }, - select: { - type: Function, - optional: true, - }, - source: { - type: Function, - optional: true, - }, - }, - template: 'mail.AutocompleteInput', +Object.assign(AutocompleteInputView, { + props: { record: Object }, + template: 'mail.AutocompleteInputView', }); -registerMessagingComponent(AutocompleteInput); +registerMessagingComponent(AutocompleteInputView); diff --git a/addons/mail/static/src/components/autocomplete_input_view/autocomplete_input_view.xml b/addons/mail/static/src/components/autocomplete_input_view/autocomplete_input_view.xml index 7d6658a5e8d..8b32aaadb03 100644 --- a/addons/mail/static/src/components/autocomplete_input_view/autocomplete_input_view.xml +++ b/addons/mail/static/src/components/autocomplete_input_view/autocomplete_input_view.xml @@ -1,8 +1,8 @@ - - + + diff --git a/addons/mail/static/src/components/chat_window/chat_window.xml b/addons/mail/static/src/components/chat_window/chat_window.xml index cdd6119ee34..88ee0d71b9f 100644 --- a/addons/mail/static/src/components/chat_window/chat_window.xml +++ b/addons/mail/static/src/components/chat_window/chat_window.xml @@ -39,11 +39,9 @@ To: - diff --git a/addons/mail/static/src/components/discuss/discuss.xml b/addons/mail/static/src/components/discuss/discuss.xml index 2f623439799..fa5575b4385 100644 --- a/addons/mail/static/src/components/discuss/discuss.xml +++ b/addons/mail/static/src/components/discuss/discuss.xml @@ -26,12 +26,9 @@
-
diff --git a/addons/mail/static/src/components/discuss_sidebar_category/discuss_sidebar_category.xml b/addons/mail/static/src/components/discuss_sidebar_category/discuss_sidebar_category.xml index 668e13717aa..053a8a4ecf1 100644 --- a/addons/mail/static/src/components/discuss_sidebar_category/discuss_sidebar_category.xml +++ b/addons/mail/static/src/components/discuss_sidebar_category/discuss_sidebar_category.xml @@ -29,12 +29,9 @@
-
diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml index 1c23a62732c..0700359b345 100644 --- a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml +++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml @@ -35,12 +35,9 @@ - diff --git a/addons/mail/static/src/models/autocomplete_input_view.js b/addons/mail/static/src/models/autocomplete_input_view.js index c01ee3ad698..7a118ab0845 100644 --- a/addons/mail/static/src/models/autocomplete_input_view.js +++ b/addons/mail/static/src/models/autocomplete_input_view.js @@ -8,16 +8,96 @@ registerModel({ name: 'AutocompleteInputView', identifyingMode: 'xor', recordMethods: { + onBlur() { + if (!this.exists()) { + return; + } + if (this.discussSidebarCategoryOwnerAsAddingItem) { + this.discussSidebarCategoryOwnerAsAddingItem.onHideAddingItem(); + return; + } + if (this.discussViewOwnerAsMobileAddItemHeader) { + this.discussViewOwnerAsMobileAddItemHeader.onHideMobileAddItemHeader(); + return; + } + if (this.messagingMenuOwnerAsMobileNewMessageInput) { + this.messagingMenuOwnerAsMobileNewMessageInput.onHideMobileNewMessage(); + return; + } + }, /** * @param {FocusEvent} ev */ onFocusin(ev) { + if (!this.exists()) { + return; + } if (this.chatWindowOwnerAsNewMessage) { this.chatWindowOwnerAsNewMessage.onFocusInNewMessageFormInput(ev); return; } }, - /** + /** + * @param {MouseEvent} ev + */ + onKeydown(ev) { + if (!this.exists()) { + return; + } + if (ev.key === 'Escape') { + this.onBlur(); + } + }, + /** + * @param {MouseEvent} ev + */ + onSelect(ev, ui) { + if (!this.exists()) { + return; + } + if (this.chatWindowOwnerAsNewMessage) { + this.chatWindowOwnerAsNewMessage.onAutocompleteSelect(ev, ui); + return; + } + if (this.discussSidebarCategoryOwnerAsAddingItem) { + this.discussSidebarCategoryOwnerAsAddingItem.onAddItemAutocompleteSelect(ev, ui); + return; + } + if (this.discussViewOwnerAsMobileAddItemHeader) { + this.discussViewOwnerAsMobileAddItemHeader.onMobileAddItemHeaderInputSelect(ev, ui); + return; + } + if (this.messagingMenuOwnerAsMobileNewMessageInput) { + this.messagingMenuOwnerAsMobileNewMessageInput.onMobileNewMessageInputSelect(ev, ui); + return; + } + }, + /** + * @param {Object} req + * @param {function} res + */ + onSource(req, res) { + if (!this.exists()) { + return; + } + if (this.chatWindowOwnerAsNewMessage) { + this.chatWindowOwnerAsNewMessage.onAutocompleteSource(req, res); + return; + } + if (this.discussSidebarCategoryOwnerAsAddingItem) { + this.discussSidebarCategoryOwnerAsAddingItem.onAddItemAutocompleteSource(req, res); + return; + } + if (this.discussViewOwnerAsMobileAddItemHeader) { + this.discussViewOwnerAsMobileAddItemHeader.onMobileAddItemHeaderInputSource(req, res); + return; + } + if (this.messagingMenuOwnerAsMobileNewMessageInput) { + this.messagingMenuOwnerAsMobileNewMessageInput.onMobileNewMessageInputSource(req, res); + return; + } + }, + /** * @private * @returns {boolean|FieldCommand} */ diff --git a/addons/mail/static/tests/models/autocomplete_input_view.js b/addons/mail/static/tests/models/autocomplete_input_view.js new file mode 100644 index 00000000000..d046873c761 --- /dev/null +++ b/addons/mail/static/tests/models/autocomplete_input_view.js @@ -0,0 +1,12 @@ +/** @odoo-module **/ + +import { patchRecordMethods } from '@mail/model/model_core'; +// ensure that the model definition is loaded before the patch +import '@mail/models/autocomplete_input_view'; + +patchRecordMethods('AutocompleteInputView', { + onSource(req, res) { + this._super(req, res); + this.messaging.messagingBus.trigger('o-AutocompleteInput-source'); + }, +});