From 5f13b7f019a0aa56dabd426bb33b3be93f2954b0 Mon Sep 17 00:00:00 2001 From: Christophe Matthieu Date: Mon, 15 May 2017 16:18:28 +0200 Subject: [PATCH] [IMP] web: update datepicker syntax with the new guidelines --- .../web/static/src/js/fields/basic_fields.js | 10 +- .../web/static/src/js/widgets/date_picker.js | 135 +++++++++++++----- .../static/src/js/widgets/domain_selector.js | 4 +- 3 files changed, 104 insertions(+), 45 deletions(-) diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js index 921169e5ab6..cafa59bbd00 100644 --- a/addons/web/static/src/js/fields/basic_fields.js +++ b/addons/web/static/src/js/fields/basic_fields.js @@ -345,7 +345,7 @@ var FieldDate = InputField.extend({ * @private */ _doDebouncedAction: function () { - this.datewidget.change_datetime(); + this.datewidget.changeDatetime(); }, /** @@ -354,7 +354,7 @@ var FieldDate = InputField.extend({ * @private */ _getValue: function () { - return this.datewidget.get_value(); + return this.datewidget.getValue(); }, /** * @override @@ -383,7 +383,7 @@ var FieldDate = InputField.extend({ * @private */ _renderEdit: function () { - this.datewidget.set_value(this.value); + this.datewidget.setValue(this.value); this.$input = this.datewidget.$input; }, @@ -412,7 +412,7 @@ var FieldDateTime = FieldDate.extend({ * @private */ _getValue: function () { - var value = this.datewidget.get_value(); + var value = this.datewidget.getValue(); return value && value.add(-this.getSession().tzOffset, 'minutes'); }, @@ -435,7 +435,7 @@ var FieldDateTime = FieldDate.extend({ */ _renderEdit: function () { var value = this.value && this.value.clone().add(this.getSession().tzOffset, 'minutes'); - this.datewidget.set_value(value); + this.datewidget.setValue(value); this.$input = this.datewidget.$input; }, diff --git a/addons/web/static/src/js/widgets/date_picker.js b/addons/web/static/src/js/widgets/date_picker.js index 06dccc85d4a..353a5dc78f2 100644 --- a/addons/web/static/src/js/widgets/date_picker.js +++ b/addons/web/static/src/js/widgets/date_picker.js @@ -12,10 +12,13 @@ var DateWidget = Widget.extend({ template: "web.datepicker", type_of_date: "date", events: { - 'dp.change': 'change_datetime', - 'dp.show': 'set_datetime_default', - 'change .o_datepicker_input': 'change_datetime', + 'dp.change': 'changeDatetime', + 'dp.show': '_onShow', + 'change .o_datepicker_input': 'changeDatetime', }, + /** + * @override + */ init: function(parent, options) { this._super.apply(this, arguments); @@ -41,6 +44,9 @@ var DateWidget = Widget.extend({ keyBinds: null, }); }, + /** + * @override + */ start: function() { this.$input = this.$('input.o_datepicker_input'); this.$input.focus(function(e) { @@ -49,67 +55,120 @@ var DateWidget = Widget.extend({ this.$input.datetimepicker(this.options); this.picker = this.$input.data('DateTimePicker'); this.$input.click(this.picker.toggle.bind(this.picker)); - this.set_readonly(false); + this._setReadonly(false); }, - set_value: function(value) { - this.set({'value': value}); - var formatted_value = value ? this.format_client(value) : null; - this.$input.val(formatted_value); - if (this.picker) { - this.picker.date(value || null); + /** + * @override + */ + destroy: function() { + this.picker.destroy(); + this._super.apply(this, arguments); + }, + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * set datetime value + */ + changeDatetime: function () { + if(this.isValid()) { + this._setValueFromUi(); + this.trigger("datetime_changed"); } }, - get_value: function() { + /** + * @returns {Moment|false} + */ + getValue: function () { var value = this.get('value'); return value && value.clone(); }, - set_value_from_ui: function() { - var value = this.$input.val() || false; - this.set_value(this.parse_client(value)); - }, - set_readonly: function(readonly) { - this.readonly = readonly; - this.$input.prop('readonly', this.readonly); - }, - is_valid: function() { + /** + * @returns {boolean} + */ + isValid: function () { var value = this.$input.val(); if(value === "") { return true; } else { try { - this.parse_client(value); + this._parseClient(value); return true; } catch(e) { return false; } } }, - parse_client: function(v) { - return field_utils.parse[this.type_of_date](v, null, {timezone: false}); + /** + * @param {Moment|false} + */ + setValue: function (value) { + this.set({'value': value}); + var formatted_value = value ? this._formatClient(value) : null; + this.$input.val(formatted_value); + if (this.picker) { + this.picker.date(value || null); + } }, - format_client: function(v) { + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @private + * @param {Moment} + * @returns {string} + */ + _formatClient: function (v) { return field_utils.format[this.type_of_date](v, null, {timezone: false}); }, - set_datetime_default: function() { + /** + * @private + * @param {string|false} + * @returns {Moment} + */ + _parseClient: function (v) { + return field_utils.parse[this.type_of_date](v, null, {timezone: false}); + }, + /** + * @private + * @param {boolean} + */ + _setReadonly: function (readonly) { + this.readonly = readonly; + this.$input.prop('readonly', this.readonly); + }, + /** + * set the value from the input value + * + * @private + */ + _setValueFromUi: function() { + var value = this.$input.val() || false; + this.setValue(this._parseClient(value)); + }, + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * set the date of the picker by the current date or the today date + * + * @private + */ + _onShow: function () { //when opening datetimepicker the date and time by default should be the one from //the input field if any or the current day otherwise var value = moment().second(0); - if(this.$input.val().length !== 0 && this.is_valid()) { - value = this.parse_client(this.$input.val()); + if(this.$input.val().length !== 0 && this.isValid()) { + value = this._parseClient(this.$input.val()); } - this.picker.date(value); }, - change_datetime: function() { - if(this.is_valid()) { - this.set_value_from_ui(); - this.trigger("datetime_changed"); - } - }, - destroy: function() { - this.picker.destroy(); - this._super.apply(this, arguments); - }, }); var DateTimeWidget = DateWidget.extend({ diff --git a/addons/web/static/src/js/widgets/domain_selector.js b/addons/web/static/src/js/widgets/domain_selector.js index 8bbebb3cdf9..74572e81b39 100644 --- a/addons/web/static/src/js/widgets/domain_selector.js +++ b/addons/web/static/src/js/widgets/domain_selector.js @@ -660,9 +660,9 @@ var DomainLeaf = DomainNode.extend({ this.valueWidget = new (selectedField.type === "datetime" ? datepicker.DateTimeWidget : datepicker.DateWidget)(this); wDefs.push(this.valueWidget.appendTo("
").then((function () { this.valueWidget.$el.addClass("o_domain_leaf_value_input"); - this.valueWidget.set_value(moment(this.value)); + this.valueWidget.setValue(moment(this.value)); this.valueWidget.on("datetime_changed", this, function () { - this._changeValue(this.valueWidget.get_value()); + this._changeValue(this.valueWidget.getValue()); }); }).bind(this))); }