mirror of
https://github.com/OCA/web.git
synced 2025-02-22 13:21:25 +02:00
[ADD] web_widget_dropdown_dynamic
This commit is contained in:
Alexey Pelykh
47
web_widget_dropdown_dynamic/static/src/js/basic_model.js
Normal file
47
web_widget_dropdown_dynamic/static/src/js/basic_model.js
Normal file
@@ -0,0 +1,47 @@
|
||||
/*
|
||||
* Copyright 2019 Brainbean Apps (https://brainbeanapps.com)
|
||||
* License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl.html).
|
||||
*/
|
||||
odoo.define('web_widget_dropdown_dynamic.basic_model', function (require) {
|
||||
"use strict";
|
||||
|
||||
var BasicModel = require('web.BasicModel');
|
||||
|
||||
BasicModel.include({
|
||||
/**
|
||||
* Fetches all the values associated to the given fieldName.
|
||||
*
|
||||
* @param {Object} record - an element from the localData
|
||||
* @param {Object} fieldName - the name of the field
|
||||
* @param {Object} fieldInfo
|
||||
* @returns {Promise<any>}
|
||||
* The promise is resolved with the fetched special values.
|
||||
* If this data is the same as the previously fetched one
|
||||
* (for the given parameters), no RPC is done and the promise
|
||||
* is resolved with the undefined value.
|
||||
*/
|
||||
_fetchDynamicDropdownValues: function (record, fieldName, fieldInfo) {
|
||||
var model = fieldInfo.options.model || record.model;
|
||||
var method = fieldInfo.values || fieldInfo.options.values;
|
||||
if (!method) {
|
||||
return $.when();
|
||||
}
|
||||
|
||||
var context = record.getContext({fieldName: fieldName});
|
||||
|
||||
// avoid rpc if not necessary
|
||||
var hasChanged = this._saveSpecialDataCache(record, fieldName, {
|
||||
context: context,
|
||||
});
|
||||
if (!hasChanged) {
|
||||
return $.when();
|
||||
}
|
||||
|
||||
return this._rpc({
|
||||
model: model,
|
||||
method: method,
|
||||
context: context,
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,140 @@
|
||||
/*
|
||||
* Copyright 2019 Brainbean Apps (https://brainbeanapps.com)
|
||||
* License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl.html).
|
||||
*/
|
||||
odoo.define('web_widget_dropdown_dynamic.field_dynamic_dropdown', function (require) {
|
||||
"use strict";
|
||||
|
||||
var core = require('web.core');
|
||||
var AbstractField = require('web.AbstractField');
|
||||
var field_registry = require('web.field_registry');
|
||||
|
||||
var _lt = core._lt;
|
||||
|
||||
var FieldDynamicDropdown = AbstractField.extend({
|
||||
description: _lt('Dynamic Dropdown'),
|
||||
template: 'FieldSelection',
|
||||
specialData: '_fetchDynamicDropdownValues',
|
||||
supportedFieldTypes: ['selection', 'char', 'integer'],
|
||||
events: _.extend({}, AbstractField.prototype.events, {
|
||||
'change': '_onChange',
|
||||
}),
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
init: function () {
|
||||
this._super.apply(this, arguments);
|
||||
this._setValues();
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Public
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @override
|
||||
* @returns {jQuery}
|
||||
*/
|
||||
getFocusableElement: function () {
|
||||
return this.$el.is('select') ? this.$el : $();
|
||||
},
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
isSet: function () {
|
||||
return this.value !== false;
|
||||
},
|
||||
/**
|
||||
* Listen to modifiers updates to hide/show the falsy value in the dropdown
|
||||
* according to the required modifier.
|
||||
*
|
||||
* @override
|
||||
*/
|
||||
updateModifiersValue: function () {
|
||||
this._super.apply(this, arguments);
|
||||
if (!this.attrs.modifiersValue.invisible && this.mode !== 'readonly') {
|
||||
this._setValues();
|
||||
this._renderEdit();
|
||||
}
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Private
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @override
|
||||
* @private
|
||||
*/
|
||||
_formatValue: function (value) {
|
||||
var options = _.extend({}, this.nodeOptions, { data: this.recordData }, this.formatOptions);
|
||||
var formattedValue = _.find(this.values, function (option) {
|
||||
return option[0] === value;
|
||||
});
|
||||
if (!formattedValue) {
|
||||
return value;
|
||||
}
|
||||
formattedValue = formattedValue[1];
|
||||
if (options && options.escape) {
|
||||
formattedValue = _.escape(formattedValue);
|
||||
}
|
||||
return formattedValue;
|
||||
},
|
||||
/**
|
||||
* @override
|
||||
* @private
|
||||
*/
|
||||
_renderEdit: function () {
|
||||
this.$el.empty();
|
||||
for (var i = 0 ; i < this.values.length ; i++) {
|
||||
this.$el.append($('<option/>', {
|
||||
value: JSON.stringify(this.values[i][0]),
|
||||
text: this.values[i][1]
|
||||
}));
|
||||
}
|
||||
this.$el.val(JSON.stringify(this.value));
|
||||
},
|
||||
/**
|
||||
* @override
|
||||
* @private
|
||||
*/
|
||||
_renderReadonly: function () {
|
||||
this.$el.empty().text(this._formatValue(this.value));
|
||||
},
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
_reset: function () {
|
||||
this._super.apply(this, arguments);
|
||||
this._setValues();
|
||||
},
|
||||
/**
|
||||
* Sets the possible field values.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
_setValues: function () {
|
||||
this.values = _.reject(this.record.specialData[this.name], function (v) {
|
||||
return v[0] === false && v[1] === '';
|
||||
});
|
||||
if (!this.attrs.modifiersValue || !this.attrs.modifiersValue.required) {
|
||||
this.values = [[false, this.attrs.placeholder || '']].concat(this.values);
|
||||
}
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Handlers
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_onChange: function () {
|
||||
var value = JSON.parse(this.$el.val());
|
||||
this._setValue(value.toString());
|
||||
},
|
||||
});
|
||||
field_registry.add('dynamic_dropdown', FieldDynamicDropdown);
|
||||
|
||||
return FieldDynamicDropdown;
|
||||
});
|
||||
@@ -0,0 +1,177 @@
|
||||
odoo.define('web_widget_dropdown_dynamic.web_widget_dropdown_dynamic_tests', function (require) {
|
||||
"use strict";
|
||||
|
||||
var FormView = require('web.FormView');
|
||||
var testUtils = require('web.test_utils');
|
||||
|
||||
QUnit.module('web_widget_dropdown_dynamic', {}, function () {
|
||||
|
||||
QUnit.test('values are fetched w/o context (char)', async function (assert) {
|
||||
assert.expect(2);
|
||||
|
||||
var form = await testUtils.createView({
|
||||
View: FormView,
|
||||
model: 'demo_entry',
|
||||
data: {
|
||||
demo_entry: {
|
||||
fields: {
|
||||
test_field: {string: 'Test Field', type: 'char'},
|
||||
},
|
||||
records: [{id: 1, test_field: ''}],
|
||||
},
|
||||
},
|
||||
arch:
|
||||
'<form>' +
|
||||
'<field name="test_field" widget="dynamic_dropdown" values="_get_test_field_values"/>' +
|
||||
'</form>',
|
||||
mockRPC: function (route, args) {
|
||||
if (args.method === '_get_test_field_values') {
|
||||
return $.when([
|
||||
['value', 'Title'],
|
||||
]);
|
||||
}
|
||||
return this._super.apply(this, arguments);
|
||||
},
|
||||
});
|
||||
|
||||
assert.containsN(form, 'option', 2);
|
||||
assert.containsOnce(form, 'option[value=\'"value"\']');
|
||||
|
||||
form.destroy();
|
||||
});
|
||||
|
||||
QUnit.test('values are fetched w/o context (integer)', async function (assert) {
|
||||
assert.expect(2);
|
||||
|
||||
var form = await testUtils.createView({
|
||||
View: FormView,
|
||||
model: 'demo_entry',
|
||||
data: {
|
||||
demo_entry: {
|
||||
fields: {
|
||||
test_field: {string: 'Test Field', type: 'integer'},
|
||||
},
|
||||
records: [{id: 1, test_field: 0}],
|
||||
},
|
||||
},
|
||||
arch:
|
||||
'<form>' +
|
||||
'<field name="test_field" widget="dynamic_dropdown" values="_get_test_field_values"/>' +
|
||||
'</form>',
|
||||
mockRPC: function (route, args) {
|
||||
if (args.method === '_get_test_field_values') {
|
||||
return $.when([
|
||||
[0, 'Title'],
|
||||
]);
|
||||
}
|
||||
return this._super.apply(this, arguments);
|
||||
},
|
||||
});
|
||||
|
||||
assert.containsN(form, 'option', 2);
|
||||
assert.containsOnce(form, 'option[value=\'0\']');
|
||||
|
||||
form.destroy();
|
||||
});
|
||||
|
||||
QUnit.test('values are fetched w/o context (selection)', async function (assert) {
|
||||
assert.expect(2);
|
||||
|
||||
var form = await testUtils.createView({
|
||||
View: FormView,
|
||||
model: 'demo_entry',
|
||||
data: {
|
||||
demo_entry: {
|
||||
fields: {
|
||||
test_field: {string: 'Test Field', type: 'selection'},
|
||||
},
|
||||
records: [{id: 1, test_field: ''}],
|
||||
},
|
||||
},
|
||||
arch:
|
||||
'<form>' +
|
||||
'<field name="test_field" widget="dynamic_dropdown" values="_get_test_field_values"/>' +
|
||||
'</form>',
|
||||
mockRPC: function (route, args) {
|
||||
if (args.method === '_get_test_field_values') {
|
||||
return $.when([
|
||||
['value', 'Title'],
|
||||
]);
|
||||
}
|
||||
return this._super.apply(this, arguments);
|
||||
},
|
||||
});
|
||||
|
||||
assert.containsN(form, 'option', 2);
|
||||
assert.containsOnce(form, 'option[value=\'"value"\']');
|
||||
|
||||
form.destroy();
|
||||
});
|
||||
|
||||
QUnit.test('values are fetched with changing context', async function (assert) {
|
||||
assert.expect(6);
|
||||
|
||||
var form = await testUtils.createView({
|
||||
View: FormView,
|
||||
model: 'demo_entry',
|
||||
data: {
|
||||
demo_entry: {
|
||||
fields: {
|
||||
other_field: {string: 'Other Field', type: 'char'},
|
||||
test_field: {string: 'Test Field', type: 'char'},
|
||||
},
|
||||
records: [{id: 1, other_field: '', test_field: ''}],
|
||||
},
|
||||
},
|
||||
arch:
|
||||
'<form>' +
|
||||
'<field name="other_field" />' +
|
||||
'<field name="test_field" widget="dynamic_dropdown" values="_get_test_field_values" context="{\'step\': other_field}"/>' +
|
||||
'</form>',
|
||||
mockRPC: function (route, args) {
|
||||
if (args.method === '_get_test_field_values') {
|
||||
if (args.kwargs.context.step === 'step-1') {
|
||||
return $.when([
|
||||
['value', 'Title'],
|
||||
]);
|
||||
} else if (args.kwargs.context.step === 'step-2') {
|
||||
return $.when([
|
||||
['value', 'Title'],
|
||||
['value_2', 'Title 2'],
|
||||
]);
|
||||
} else {
|
||||
return $.when([]);
|
||||
}
|
||||
}
|
||||
return this._super.apply(this, arguments);
|
||||
},
|
||||
});
|
||||
|
||||
await testUtils.fields.editAndTrigger(
|
||||
form.$('.o_field_widget[name="other_field"]'),
|
||||
'step-1',
|
||||
['input']
|
||||
);
|
||||
assert.containsN(form, 'option', 2);
|
||||
assert.containsOnce(form, 'option[value=\'"value"\']');
|
||||
|
||||
await testUtils.fields.editAndTrigger(
|
||||
form.$('.o_field_widget[name="other_field"]'),
|
||||
'step-2',
|
||||
['input']
|
||||
);
|
||||
assert.containsN(form, 'option', 3);
|
||||
assert.containsOnce(form, 'option[value=\'"value"\']');
|
||||
assert.containsOnce(form, 'option[value=\'"value_2"\']');
|
||||
|
||||
await testUtils.fields.editAndTrigger(
|
||||
form.$('.o_field_widget[name="other_field"]'),
|
||||
'step-other',
|
||||
['input']
|
||||
);
|
||||
assert.containsN(form, 'option', 1);
|
||||
|
||||
form.destroy();
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user