[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
This commit is contained in:
Tejas Shahu
@@ -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',
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
|
||||
@@ -13,8 +13,13 @@
|
||||
<t t-name="reconciliation.statement">
|
||||
<div t-if="widget._initialState.valuemax">
|
||||
<div>
|
||||
<h1 class="statement_name"/>
|
||||
<h1 class="statement_name_edition" style="display: none;"><button class="btn btn-primary btn-sm pull-right">OK</button></h1>
|
||||
<t t-if="widget._initialState.bank_statement_id">
|
||||
<h1 class="statement_name editable" title="Click to Rename" />
|
||||
</t>
|
||||
<t t-else="">
|
||||
<h1 class="statement_name" />
|
||||
</t>
|
||||
<h1 class="statement_name_edition" style="display: none;"/>
|
||||
<div class="progress progress-striped">
|
||||
<div class="progress-text">
|
||||
<span class="valuenow"><t t-esc="widget._initialState.valuenow"/></span> / <span class="valuemax"><t t-esc="widget._initialState.valuemax"/></span>
|
||||
|
||||
@@ -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");
|
||||
|
||||
Reference in New Issue
Block a user