[imp] refactored datetime components to allow usage in the search view

bzr revid: nicolas.vanhoren@openerp.com-20110921104136-pu8yvny228jyi5so
This commit is contained in:
niv-openerp 2011-09-21 12:41:36 +02:00
parent e1bde312fc
commit 8df96caa72
3 changed files with 76 additions and 37 deletions

View File

@ -771,7 +771,6 @@ openerp.web.SessionAware = openerp.web.CallbackEnabled.extend(/** @lends openerp
* // stuff that you want to init before the rendering * // stuff that you want to init before the rendering
* }, * },
* start: function() { * start: function() {
* this._super();
* // stuff you want to make after the rendering, `this.$element` holds a correct value * // stuff you want to make after the rendering, `this.$element` holds a correct value
* this.$element.find(".my_button").click(/* an example of event binding * /); * this.$element.find(".my_button").click(/* an example of event binding * /);
* *
@ -915,6 +914,8 @@ openerp.web.Widget = openerp.web.SessionAware.extend(/** @lends openerp.web.Widg
* @returns {jQuery.Deferred} * @returns {jQuery.Deferred}
*/ */
start: function() { start: function() {
/* The default implementation is only useful for retro-compatibility, it is
not necessary to call it using _super() when using Widget for new components. */
if (!this.$element) { if (!this.$element) {
var tmp = document.getElementById(this.element_id); var tmp = document.getElementById(this.element_id);
this.$element = tmp ? $(tmp) : undefined; this.$element = tmp ? $(tmp) : undefined;
@ -922,7 +923,7 @@ openerp.web.Widget = openerp.web.SessionAware.extend(/** @lends openerp.web.Widg
return $.Deferred().done().promise(); return $.Deferred().done().promise();
}, },
/** /**
* Destroys the current widget, also destory all its children before destroying itself. * Destroys the current widget, also destroy all its children before destroying itself.
*/ */
stop: function() { stop: function() {
_.each(_.clone(this.widget_children), function(el) { _.each(_.clone(this.widget_children), function(el) {

View File

@ -1121,16 +1121,13 @@ openerp.web.form.FieldFloat = openerp.web.form.FieldChar.extend({
} }
}); });
openerp.web.form.FieldDatetime = openerp.web.form.Field.extend({ openerp.web.DateTimeWidget = openerp.web.Widget.extend({
init: function(view, node) { template: "web.datetimepicker",
this._super(view, node); jqueryui_object: 'datetimepicker',
this.template = "FieldDate"; type_of_date: "datetime",
this.jqueryui_object = 'datetimepicker';
},
start: function() { start: function() {
var self = this; var self = this;
this._super.apply(this, arguments); this.$element.find('input').change(this.on_change);
this.$element.find('input').change(this.on_ui_change);
this.picker({ this.picker({
onSelect: this.on_picker_select, onSelect: this.on_picker_select,
changeMonth: true, changeMonth: true,
@ -1158,7 +1155,7 @@ openerp.web.form.FieldDatetime = openerp.web.form.Field.extend({
}, },
set_value: function(value) { set_value: function(value) {
value = this.parse(value); value = this.parse(value);
this._super(value); this.value = value;
this.$element.find('input').val(value ? this.format_client(value) : ''); this.$element.find('input').val(value ? this.format_client(value) : '');
}, },
get_value: function() { get_value: function() {
@ -1167,24 +1164,22 @@ openerp.web.form.FieldDatetime = openerp.web.form.Field.extend({
set_value_from_ui: function() { set_value_from_ui: function() {
var value = this.$element.find('input').val() || false; var value = this.$element.find('input').val() || false;
this.value = this.parse_client(value); this.value = this.parse_client(value);
this._super();
}, },
update_dom: function() { set_readonly: function(readonly) {
this._super.apply(this, arguments); this.readonly = readonly;
this.$element.find('input').attr('disabled', this.readonly); this.$element.find('input').attr('disabled', this.readonly);
this.$element.find('img.oe_datepicker_trigger').toggleClass('oe_input_icon_disabled', this.readonly); this.$element.find('img.oe_datepicker_trigger').toggleClass('oe_input_icon_disabled', readonly);
}, },
validate: function() { is_valid: function(required) {
this.invalid = false;
var value = this.$element.find('input').val(); var value = this.$element.find('input').val();
if (value === "") { if (value === "") {
this.invalid = this.required; return !required;
} else { } else {
try { try {
this.parse_client(value); this.parse_client(value);
this.invalid = false; return true;
} catch(e) { } catch(e) {
this.invalid = true; return false;
} }
} }
}, },
@ -1193,24 +1188,64 @@ openerp.web.form.FieldDatetime = openerp.web.form.Field.extend({
}, },
parse: openerp.web.auto_str_to_date, parse: openerp.web.auto_str_to_date,
parse_client: function(v) { parse_client: function(v) {
return openerp.web.parse_value(v, this.field); return openerp.web.parse_value(v, {"widget": this.type_of_date});
}, },
format: function(val) { format: function(val) {
return openerp.web.auto_date_to_str(val, this.field.type); return openerp.web.auto_date_to_str(val, this.type_of_date);
}, },
format_client: function(v) { format_client: function(v) {
return openerp.web.format_value(v, this.field); return openerp.web.format_value(v, {"widget": this.type_of_date});
},
on_change: function() {
if (this.is_valid()) {
this.set_value_from_ui();
}
}
});
openerp.web.DateWidget = openerp.web.DateTimeWidget.extend({
jqueryui_object: 'datepicker',
type_of_date: "date",
on_picker_select: function(text, instance) {
this._super(text, instance);
this.$element.find('.oe_datepicker').hide();
}
});
openerp.web.form.FieldDatetime = openerp.web.form.Field.extend({
template: "EmptyComponent",
build_widget: function() {
return new openerp.web.DateTimeWidget(this);
},
start: function() {
var self = this;
this._super.apply(this, arguments);
this.datewidget = this.build_widget();
this.datewidget.on_change.add(this.on_ui_change);
this.datewidget.appendTo(this.$element);
},
set_value: function(value) {
this._super(value);
this.datewidget.set_value(value);
},
get_value: function() {
return this.datewidget.get_value();
},
update_dom: function() {
this._super.apply(this, arguments);
this.datewidget.set_readonly(this.readonly);
},
validate: function() {
this.invalid = !this.datewidget.is_valid(this.required);
},
focus: function() {
this.datewidget.focus();
} }
}); });
openerp.web.form.FieldDate = openerp.web.form.FieldDatetime.extend({ openerp.web.form.FieldDate = openerp.web.form.FieldDatetime.extend({
init: function(view, node) { build_widget: function() {
this._super(view, node); return new openerp.web.DateWidget(this);
this.jqueryui_object = 'datepicker';
},
on_picker_select: function(text, instance) {
this._super(text, instance);
this.$element.find('.oe_datepicker').hide();
} }
}); });

View File

@ -800,13 +800,16 @@
></textarea> ></textarea>
<img class="oe_field_translate" t-if="widget.field.translate" src="/web/static/src/img/icons/terp-translate.png" width="16" height="16" border="0"/> <img class="oe_field_translate" t-if="widget.field.translate" src="/web/static/src/img/icons/terp-translate.png" width="16" height="16" border="0"/>
</t> </t>
<t t-name="FieldDate"> <t t-name="web.datetimepicker">
<t t-call="FieldChar"/> <!-- t-att-class="'field_' + widget.type"-->
<img class="oe_input_icon oe_datepicker_trigger" src="/web/static/src/img/ui/field_calendar.png" <div>
title="Select date" width="16" height="16" border="0"/> <input type="text" size="1" style="width: 100%"/>
<div class="oe_datepicker ui-widget-content ui-corner-all" style="display: none; position: absolute; z-index: 1;"> <img class="oe_input_icon oe_datepicker_trigger" src="/web/static/src/img/ui/field_calendar.png"
<div class="oe_datepicker_container"/> title="Select date" width="16" height="16" border="0"/>
<button type="button" class="oe_datepicker_close ui-state-default ui-priority-primary ui-corner-all" style="float: right;">Done</button> <div class="oe_datepicker ui-widget-content ui-corner-all" style="display: none; position: absolute; z-index: 1;">
<div class="oe_datepicker_container"/>
<button type="button" class="oe_datepicker_close ui-state-default ui-priority-primary ui-corner-all" style="float: right;">Done</button>
</div>
</div> </div>
</t> </t>
<t t-name="FieldSelection"> <t t-name="FieldSelection">