From df31b7d9bad3338492fd6dbd6321f3dcace83e15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexandre=20K=C3=BChn?= Date: Thu, 7 Apr 2022 12:38:31 +0000 Subject: [PATCH] [IMP] mail: move component handlers to models (step 3) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit moves some handler methods from components to models, as a step closer to having most of business code in models. Having business code in models is desirable so that the code is much more maintainable: easier to change and more robust code. Task-2579306 closes odoo/odoo#88594 Signed-off-by: Alexandre Kühn (aku) --- .../src/components/chat_window/chat_window.js | 20 ----- .../components/chat_window/chat_window.xml | 2 +- .../src/components/composer/composer.js | 40 ---------- .../src/components/composer/composer.xml | 6 +- .../composer_suggestion.js | 13 ---- .../composer_suggestion.xml | 2 +- .../composer_text_input.js | 78 +++++-------------- .../composer_text_input.xml | 4 +- addons/mail/static/src/models/chat_window.js | 16 ++++ .../static/src/models/composer_suggestion.js | 7 ++ .../mail/static/src/models/composer_view.js | 40 ++++++++++ 11 files changed, 87 insertions(+), 141 deletions(-) diff --git a/addons/mail/static/src/components/chat_window/chat_window.js b/addons/mail/static/src/components/chat_window/chat_window.js index 7dedac84189..3d414369f34 100644 --- a/addons/mail/static/src/components/chat_window/chat_window.js +++ b/addons/mail/static/src/components/chat_window/chat_window.js @@ -22,7 +22,6 @@ export class ChatWindow extends Component { // the following are passed as props to children this._onAutocompleteSelect = this._onAutocompleteSelect.bind(this); this._onAutocompleteSource = this._onAutocompleteSource.bind(this); - this._onClickedHeader = this._onClickedHeader.bind(this); this._onFocusinThread = this._onFocusinThread.bind(this); } @@ -111,25 +110,6 @@ export class ChatWindow extends Component { }); } - /** - * Called when clicking on header of chat window. Usually folds the chat - * window. - * - * @private - */ - _onClickedHeader() { - if (!this.chatWindow || this.messaging.device.isMobile) { - return; - } - if (this.chatWindow.isFolded) { - this.chatWindow.unfold(); - this.chatWindow.focus(); - } else { - this.chatWindow.saveThreadScrollTop(); - this.chatWindow.fold(); - } - } - /** * Called when an element in the thread becomes focused. * 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 3c583bed8be..de5057454c3 100644 --- a/addons/mail/static/src/components/chat_window/chat_window.xml +++ b/addons/mail/static/src/components/chat_window/chat_window.xml @@ -17,7 +17,7 @@ chatWindowLocalId="chatWindow.localId" hasCloseAsBackButton="props.hasCloseAsBackButton" isExpandable="props.isExpandable" - onClicked="_onClickedHeader" + onClicked="chatWindow.onClickHeader" /> diff --git a/addons/mail/static/src/components/composer/composer.js b/addons/mail/static/src/components/composer/composer.js index 3a81fcccdb0..00f60f428ba 100644 --- a/addons/mail/static/src/components/composer/composer.js +++ b/addons/mail/static/src/components/composer/composer.js @@ -18,8 +18,6 @@ export class Composer extends Component { useComponentToModel({ fieldName: 'component', modelName: 'ComposerView' }); useRefToModel({ fieldName: 'buttonEmojisRef', modelName: 'ComposerView', refName: 'buttonEmojis' }); this._onDropZoneFilesDropped = this._onDropZoneFilesDropped.bind(this); - this._onComposerTextInputSendShortcut = this._onComposerTextInputSendShortcut.bind(this); - this._onPasteTextInput = this._onPasteTextInput.bind(this); } //-------------------------------------------------------------------------- @@ -37,33 +35,6 @@ export class Composer extends Component { // Handlers //-------------------------------------------------------------------------- - /** - * Called when clicking on "discard" button. - * - * @private - * @param {MouseEvent} ev - */ - _onClickDiscard(ev) { - this.composerView.discard(); - } - - /** - * Called when clicking on "send" button. - * - * @private - */ - _onClickSend() { - this.composerView.sendMessage(); - this.composerView.update({ doFocus: true }); - } - - /** - * @private - */ - _onComposerTextInputSendShortcut() { - this.composerView.sendMessage(); - } - /** * Called when some files have been dropped in the dropzone. * @@ -76,17 +47,6 @@ export class Composer extends Component { this.isDropZoneVisible.value = false; } - /** - * @private - * @param {CustomEvent} ev - */ - async _onPasteTextInput(ev) { - if (!ev.clipboardData || !ev.clipboardData.files) { - return; - } - await this.composerView.fileUploader.uploadFiles(ev.clipboardData.files); - } - } Object.assign(Composer, { diff --git a/addons/mail/static/src/components/composer/composer.xml b/addons/mail/static/src/components/composer/composer.xml index ffcf80095fc..7b34ae6d5d7 100644 --- a/addons/mail/static/src/components/composer/composer.xml +++ b/addons/mail/static/src/components/composer/composer.xml @@ -77,8 +77,6 @@ }" localId="composerView.localId" hasMentionSuggestionsBelowPosition="props.hasMentionSuggestionsBelowPosition" - onComposerTextInputSendShortcut="_onComposerTextInputSendShortcut" - onPaste="_onPasteTextInput" t-key="composerView.localId" />
@@ -150,14 +148,14 @@ }" t-att-disabled="!composerView.composer.canPostMessage ? 'disabled' : ''" type="button" - t-on-click="_onClickSend" + t-on-click="composerView.onClickSend" > - diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.js b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.js index 06d0b2aac89..c12422d279a 100644 --- a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.js +++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.js @@ -48,19 +48,6 @@ export class ComposerSuggestion extends Component { } } - //-------------------------------------------------------------------------- - // Handlers - //-------------------------------------------------------------------------- - - /** - * @private - * @param {Event} ev - */ - _onClick(ev) { - ev.preventDefault(); - this.composerSuggestion.composerViewOwner.onClickSuggestion(this.composerSuggestion); - } - } Object.assign(ComposerSuggestion, { diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml index 962c2ed296a..1202ae6e023 100644 --- a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml +++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml @@ -3,7 +3,7 @@ - + diff --git a/addons/mail/static/src/components/composer_text_input/composer_text_input.js b/addons/mail/static/src/components/composer_text_input/composer_text_input.js index c89efb636af..940ebfa516a 100644 --- a/addons/mail/static/src/components/composer_text_input/composer_text_input.js +++ b/addons/mail/static/src/components/composer_text_input/composer_text_input.js @@ -1,11 +1,12 @@ /** @odoo-module **/ import { useComponentToModel } from '@mail/component_hooks/use_component_to_model'; +import { useRefToModel } from '@mail/component_hooks/use_ref_to_model'; import { useUpdate } from '@mail/component_hooks/use_update'; import { registerMessagingComponent } from '@mail/utils/messaging_component'; import { markEventHandled } from '@mail/utils/utils'; -const { Component, useRef } = owl; +const { Component } = owl; export class ComposerTextInput extends Component { @@ -15,6 +16,8 @@ export class ComposerTextInput extends Component { setup() { super.setup(); useComponentToModel({ fieldName: 'textInputComponent', modelName: 'ComposerView' }); + useRefToModel({ fieldName: 'mirroredTextareaRef', modelName: 'ComposerView', refName: 'mirroredTextarea' }); + useRefToModel({ fieldName: 'textareaRef', modelName: 'ComposerView', refName: 'textarea' }); /** * Updates the composer text input content when composer is mounted * as textarea content can't be changed from the DOM. @@ -25,16 +28,6 @@ export class ComposerTextInput extends Component { * whether the current partner is typing something. */ this._textareaLastInputValue = ""; - /** - * Reference of the textarea. Useful to set height, selection and content. - */ - this._textareaRef = useRef('textarea'); - /** - * This is the invisible textarea used to compute the composer height - * based on the text content. We need it to downsize the textarea - * properly without flicker. - */ - this._mirroredTextareaRef = useRef('mirroredTextarea'); } //-------------------------------------------------------------------------- @@ -55,8 +48,8 @@ export class ComposerTextInput extends Component { this.composerView.composer.update({ textInputContent: this._getContent(), textInputCursorEnd: this._getSelectionEnd(), - textInputCursorStart: this._getSelectionStart(), - textInputSelectionDirection: this._textareaRef.el.selectionDirection, + textInputCursorStart: this.composerView.textareaRef.el.selectionStart, + textInputSelectionDirection: this.composerView.textareaRef.el.selectionDirection, }); } @@ -71,7 +64,7 @@ export class ComposerTextInput extends Component { * @returns {string} */ _getContent() { - return this._textareaRef.el.value; + return this.composerView.textareaRef.el.value; } /** @@ -81,18 +74,7 @@ export class ComposerTextInput extends Component { * @returns {integer} */ _getSelectionEnd() { - return this._textareaRef.el.selectionEnd; - } - - /** - * Returns selection start position. - * - * @private - * @returns {integer} - * - */ - _getSelectionStart() { - return this._textareaRef.el.selectionStart; + return this.composerView.textareaRef.el.selectionEnd; } /** @@ -122,12 +104,12 @@ export class ComposerTextInput extends Component { if (this.messaging.device.isMobile) { this.root.el.scrollIntoView(); } - this._textareaRef.el.focus(); + this.composerView.textareaRef.el.focus(); } if (this.composerView.hasToRestoreContent) { - this._textareaRef.el.value = this.composerView.composer.textInputContent; + this.composerView.textareaRef.el.value = this.composerView.composer.textInputContent; if (this.composerView.isFocused) { - this._textareaRef.el.setSelectionRange( + this.composerView.textareaRef.el.setSelectionRange( this.composerView.composer.textInputCursorStart, this.composerView.composer.textInputCursorEnd, this.composerView.composer.textInputSelectionDirection, @@ -144,8 +126,8 @@ export class ComposerTextInput extends Component { * @private */ _updateHeight() { - this._mirroredTextareaRef.el.value = this.composerView.composer.textInputContent; - this._textareaRef.el.style.height = (this._mirroredTextareaRef.el.scrollHeight) + "px"; + this.composerView.mirroredTextareaRef.el.value = this.composerView.composer.textInputContent; + this.composerView.textareaRef.el.style.height = this.composerView.mirroredTextareaRef.el.scrollHeight + 'px'; } //-------------------------------------------------------------------------- @@ -163,16 +145,6 @@ export class ComposerTextInput extends Component { this.saveStateInStore(); } - /** - * @private - */ - _onFocusinTextarea() { - if (!this.composerView) { - return; - } - this.composerView.update({ isFocused: true }); - } - /** * @private */ @@ -192,10 +164,10 @@ export class ComposerTextInput extends Component { return; } this.saveStateInStore(); - if (this._textareaLastInputValue !== this._textareaRef.el.value) { + if (this._textareaLastInputValue !== this.composerView.textareaRef.el.value) { this.composerView.handleCurrentPartnerIsTyping(); } - this._textareaLastInputValue = this._textareaRef.el.value; + this._textareaLastInputValue = this.composerView.textareaRef.el.value; this._updateHeight(); } @@ -254,9 +226,7 @@ export class ComposerTextInput extends Component { !ev.metaKey && !ev.shiftKey ) { - if (this.props.onComposerTextInputSendShortcut) { - this.props.onComposerTextInputSendShortcut(); - } + this.composerView.sendMessage(); ev.preventDefault(); return; } @@ -267,9 +237,7 @@ export class ComposerTextInput extends Component { !ev.metaKey && !ev.shiftKey ) { - if (this.props.onComposerTextInputSendShortcut) { - this.props.onComposerTextInputSendShortcut(); - } + this.composerView.sendMessage(); ev.preventDefault(); return; } @@ -280,9 +248,7 @@ export class ComposerTextInput extends Component { ev.metaKey && !ev.shiftKey ) { - if (this.props.onComposerTextInputSendShortcut) { - this.props.onComposerTextInputSendShortcut(); - } + this.composerView.sendMessage(); ev.preventDefault(); return; } @@ -389,14 +355,6 @@ Object.assign(ComposerTextInput, { type: Boolean, optional: true, }, - onComposerTextInputSendShortcut: { - type: Function, - optional: true, - }, - onPaste: { - type: Function, - optional: true, - }, }, template: 'mail.ComposerTextInput', }); diff --git a/addons/mail/static/src/components/composer_text_input/composer_text_input.xml b/addons/mail/static/src/components/composer_text_input/composer_text_input.xml index 8f4d288d4f3..df4db82aec6 100644 --- a/addons/mail/static/src/components/composer_text_input/composer_text_input.xml +++ b/addons/mail/static/src/components/composer_text_input/composer_text_input.xml @@ -3,14 +3,14 @@ -
+
-