From e069da80fd8a91a23c05eaffcc3ce9a0568d7ffe Mon Sep 17 00:00:00 2001 From: Tejas Shahu Date: Wed, 28 Mar 2018 15:45:52 +0200 Subject: [PATCH] [IMP] account: improve usability in the bank reconciliation widget. - Removed 'OK' button to save title. Now, title will be saved on focusout or enter key pressed. - If more than one statements to be reconciled, then title should not be editable. - If no title for statement display text 'No Title'. - Improve UI for title to better understand clickable area and fix issue if title is too long. Was task 34890. Was PR #19971 --- .../reconciliation/reconciliation_action.js | 2 +- .../reconciliation/reconciliation_renderer.js | 29 ++++++++++++++----- .../src/less/account_reconciliation.less | 9 ++++++ .../static/src/xml/account_reconciliation.xml | 9 ++++-- .../static/tests/reconciliation_tests.js | 3 +- 5 files changed, 39 insertions(+), 13 deletions(-) diff --git a/addons/account/static/src/js/reconciliation/reconciliation_action.js b/addons/account/static/src/js/reconciliation/reconciliation_action.js index 9cfeb3798ca..5dbe30ba482 100644 --- a/addons/account/static/src/js/reconciliation/reconciliation_action.js +++ b/addons/account/static/src/js/reconciliation/reconciliation_action.js @@ -13,7 +13,7 @@ var core = require('web.core'); * Widget used as action for 'account.bank.statement' reconciliation */ var StatementAction = AbstractAction.extend(ControlPanelMixin, { - title: core._t('Bank reconciliation'), + title: core._t('Bank Reconciliation'), template: 'reconciliation', custom_events: { change_mode: '_onAction', diff --git a/addons/account/static/src/js/reconciliation/reconciliation_renderer.js b/addons/account/static/src/js/reconciliation/reconciliation_renderer.js index 9003e9e7f4d..e43ee206639 100644 --- a/addons/account/static/src/js/reconciliation/reconciliation_renderer.js +++ b/addons/account/static/src/js/reconciliation/reconciliation_renderer.js @@ -20,9 +20,10 @@ var StatementRenderer = Widget.extend(FieldManagerMixin, { events: { 'click div:first button.o_automatic_reconciliation': '_onAutoReconciliation', 'click div:first h1.statement_name': '_onClickStatementName', - 'click div:first h1.statement_name_edition button': '_onValidateName', "click *[rel='do_action']": "_onDoAction", 'click button.js_load_more': '_onLoadMore', + 'blur .statement_name_edition > input': '_onValidateName', + 'keyup .statement_name_edition > input': '_onKeyupInput' }, /** * @override @@ -63,9 +64,7 @@ var StatementRenderer = Widget.extend(FieldManagerMixin, { defs.push(def); } - this.$('h1.statement_name').text(this._initialState.title); - - delete this._initialState; + this.$('h1.statement_name').text(this._initialState.title || _t('No Title')); this.enterHandler = function (e) { if ((e.which === 13 || e.which === 10) && (e.ctrlKey || e.metaKey)) { @@ -134,7 +133,8 @@ var StatementRenderer = Widget.extend(FieldManagerMixin, { this._renderNotifications(state.notifications); } - this.$('h1.statement_name').text(state.title); + this.$('.statement_name, .statement_name_edition').toggle(); + this.$('h1.statement_name').text(state.title || _t('No Title')); }, //-------------------------------------------------------------------------- @@ -171,7 +171,10 @@ var StatementRenderer = Widget.extend(FieldManagerMixin, { * @private */ _onClickStatementName: function () { - this.$('.statement_name, .statement_name_edition').toggle(); + if (this._initialState.bank_statement_id) { + this.$('.statement_name, .statement_name_edition').toggle(); + this.$('.statement_name_edition input').focus(); + } }, /** * @private @@ -233,9 +236,19 @@ var StatementRenderer = Widget.extend(FieldManagerMixin, { * @private */ _onValidateName: function () { - var name = this.model.get(this.handleNameRecord).data.name; + var name = this.$('.statement_name_edition input').val().trim(); this.trigger_up('change_name', {'data': name}); - this.$('.statement_name, .statement_name_edition').toggle(); + }, + /** + * Save title on enter key pressed + * + * @private + * @param {KeyboardEvent} event + */ + _onKeyupInput: function (event) { + if (event.which === $.ui.keyCode.ENTER) { + this.$('.statement_name_edition input').blur(); + } }, }); diff --git a/addons/account/static/src/less/account_reconciliation.less b/addons/account/static/src/less/account_reconciliation.less index a8dd669e918..80183536f2c 100644 --- a/addons/account/static/src/less/account_reconciliation.less +++ b/addons/account/static/src/less/account_reconciliation.less @@ -14,6 +14,15 @@ float: left; font-size: 2em; height: 1.5em; + line-height: 1.5em; + &.statement_name { + .o-text-overflow(); + &.editable:hover { + outline: 1px dashed @odoo-brand-optional; + outline-offset: -1px; + cursor: pointer; + } + } &.statement_name_edition input { width: 85%; } diff --git a/addons/account/static/src/xml/account_reconciliation.xml b/addons/account/static/src/xml/account_reconciliation.xml index e8cc7694292..a367feb03c0 100644 --- a/addons/account/static/src/xml/account_reconciliation.xml +++ b/addons/account/static/src/xml/account_reconciliation.xml @@ -13,8 +13,13 @@
-

-

+ +

+ + +

+ +

/ diff --git a/addons/account/static/tests/reconciliation_tests.js b/addons/account/static/tests/reconciliation_tests.js index 13427bb6870..0ef3ec63b6e 100644 --- a/addons/account/static/tests/reconciliation_tests.js +++ b/addons/account/static/tests/reconciliation_tests.js @@ -857,8 +857,7 @@ QUnit.module('account', { clientAction.$('h1.statement_name').trigger('click'); assert.strictEqual(clientAction.$('h1.statement_name:visible').length, 0, "Should hide the statement name title to edit the content"); assert.strictEqual(clientAction.$('h1.statement_name_edition:visible').length, 1, "Should show the edition field of statement name"); - clientAction.$('h1.statement_name_edition input').val('BNK/2014/001-BB').trigger('input'); - clientAction.$('h1.statement_name_edition button').trigger('click'); + clientAction.$('h1.statement_name_edition input').val('BNK/2014/001-BB').trigger('input').blur(); assert.strictEqual(clientAction.$('h1.statement_name_edition:visible').length, 0, "Should hide the edition field of statement name"); assert.strictEqual(clientAction.$('h1.statement_name:visible').length, 1, "Should show the statement name"); assert.strictEqual(clientAction.$('h1.statement_name:visible').text(), "BNK/2014/001-BB", "Should update the statement name");