[merge] improvements regarding the date/time widgets in the search view

bzr revid: nicolas.vanhoren@openerp.com-20110921120451-xtaa77yce9rpw46p
This commit is contained in:
niv-openerp 2011-09-21 14:04:51 +02:00
commit 650cd80e71
5 changed files with 114 additions and 65 deletions

View File

@ -904,7 +904,14 @@ label.error {
position: absolute;
cursor: pointer;
right: 5px;
top: 5px;
top: 3px;
}
.openerp .oe_datepicker {
position: relative;
display: inline-block;
}
.openerp .oe_datepicker input[type="text"] {
min-width: 160px;
}
.openerp .oe_input_icon_disabled {
position: absolute;

View File

@ -774,7 +774,6 @@ openerp.web.SessionAware = openerp.web.CallbackEnabled.extend(/** @lends openerp
* // stuff that you want to init before the rendering
* },
* start: function() {
* this._super();
* // 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 * /);
*
@ -918,6 +917,8 @@ openerp.web.Widget = openerp.web.SessionAware.extend(/** @lends openerp.web.Widg
* @returns {jQuery.Deferred}
*/
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) {
var tmp = document.getElementById(this.element_id);
this.$element = tmp ? $(tmp) : undefined;
@ -925,7 +926,7 @@ openerp.web.Widget = openerp.web.SessionAware.extend(/** @lends openerp.web.Widg
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() {
_.each(_.clone(this.widget_children), function(el) {

View File

@ -795,20 +795,18 @@ openerp.web.search.BooleanField = openerp.web.search.SelectionField.extend(/** @
* @extends openerp.web.search.DateField
*/
openerp.web.search.DateField = openerp.web.search.Field.extend(/** @lends openerp.web.search.DateField# */{
/**
* enables date picker on the HTML widgets
*/
template: "SearchView.date",
start: function () {
this._super();
this.$element.addClass('field_date').datepicker({
dateFormat: 'yy-mm-dd'
});
},
stop: function () {
this.$element.datepicker('destroy');
this.datewidget = new openerp.web.DateWidget(this);
this.datewidget.prependTo(this.$element);
this.datewidget.$element.find("input").attr("size", 15);
this.datewidget.$element.find("input").attr("autofocus",
this.attrs.default_focus === '1' ? 'autofocus' : undefined);
this.datewidget.set_value(this.defaults[this.attrs.name] || false);
},
get_value: function () {
return this.$element.val();
return this.datewidget.get_value() || null;
}
});
/**
@ -1123,7 +1121,7 @@ openerp.web.search.ExtendedSearchProposition.Char = openerp.web.OldWidget.extend
}
});
openerp.web.search.ExtendedSearchProposition.DateTime = openerp.web.OldWidget.extend({
template: 'SearchView.extended_search.proposition.datetime',
template: 'SearchView.extended_search.proposition.empty',
identifier_prefix: 'extended-search-proposition-datetime',
operators: [
{value: "=", text: "is equal to"},
@ -1134,18 +1132,16 @@ openerp.web.search.ExtendedSearchProposition.DateTime = openerp.web.OldWidget.ex
{value: "<=", text: "less or equal than"}
],
get_value: function() {
return this.$element.val();
return this.datewidget.get_value();
},
start: function() {
this._super();
this.$element.datetimepicker({
dateFormat: 'yy-mm-dd',
timeFormat: 'hh:mm:ss'
});
this.datewidget = new openerp.web.DateTimeWidget(this);
this.datewidget.prependTo(this.$element);
}
});
openerp.web.search.ExtendedSearchProposition.Date = openerp.web.OldWidget.extend({
template: 'SearchView.extended_search.proposition.date',
template: 'SearchView.extended_search.proposition.empty',
identifier_prefix: 'extended-search-proposition-date',
operators: [
{value: "=", text: "is equal to"},
@ -1156,14 +1152,12 @@ openerp.web.search.ExtendedSearchProposition.Date = openerp.web.OldWidget.extend
{value: "<=", text: "less or equal than"}
],
get_value: function() {
return this.$element.val();
return this.datewidget.get_value();
},
start: function() {
this._super();
this.$element.datepicker({
dateFormat: 'yy-mm-dd',
timeFormat: 'hh:mm:ss'
});
this.datewidget = new openerp.web.DateWidget(this);
this.datewidget.prependTo(this.$element);
}
});
openerp.web.search.ExtendedSearchProposition.Integer = openerp.web.OldWidget.extend({

View File

@ -1121,16 +1121,13 @@ openerp.web.form.FieldFloat = openerp.web.form.FieldChar.extend({
}
});
openerp.web.form.FieldDatetime = openerp.web.form.Field.extend({
init: function(view, node) {
this._super(view, node);
this.template = "FieldDate";
this.jqueryui_object = 'datetimepicker';
},
openerp.web.DateTimeWidget = openerp.web.Widget.extend({
template: "web.datetimepicker",
jqueryui_object: 'datetimepicker',
type_of_date: "datetime",
start: function() {
var self = this;
this._super.apply(this, arguments);
this.$element.find('input').change(this.on_ui_change);
this.$element.find('input').change(this.on_change);
this.picker({
onSelect: this.on_picker_select,
changeMonth: true,
@ -1148,6 +1145,7 @@ openerp.web.form.FieldDatetime = openerp.web.form.Field.extend({
this.$element.find('button.oe_datepicker_close').click(function() {
self.$element.find('.oe_datepicker').hide();
});
this.set_readonly(false);
},
picker: function() {
return $.fn[this.jqueryui_object].apply(this.$element.find('.oe_datepicker_container'), arguments);
@ -1158,7 +1156,7 @@ openerp.web.form.FieldDatetime = openerp.web.form.Field.extend({
},
set_value: function(value) {
value = this.parse(value);
this._super(value);
this.value = value;
this.$element.find('input').val(value ? this.format_client(value) : '');
},
get_value: function() {
@ -1167,24 +1165,22 @@ openerp.web.form.FieldDatetime = openerp.web.form.Field.extend({
set_value_from_ui: function() {
var value = this.$element.find('input').val() || false;
this.value = this.parse_client(value);
this._super();
},
update_dom: function() {
this._super.apply(this, arguments);
set_readonly: function(readonly) {
this.readonly = 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() {
this.invalid = false;
is_valid: function(required) {
var value = this.$element.find('input').val();
if (value === "") {
this.invalid = this.required;
return !required;
} else {
try {
this.parse_client(value);
this.invalid = false;
return true;
} catch(e) {
this.invalid = true;
return false;
}
}
},
@ -1193,24 +1189,64 @@ openerp.web.form.FieldDatetime = openerp.web.form.Field.extend({
},
parse: openerp.web.auto_str_to_date,
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) {
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) {
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({
init: function(view, node) {
this._super(view, node);
this.jqueryui_object = 'datepicker';
},
on_picker_select: function(text, instance) {
this._super(text, instance);
this.$element.find('.oe_datepicker').hide();
build_widget: function() {
return new openerp.web.DateWidget(this);
}
});

View File

@ -800,13 +800,15 @@
></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"/>
</t>
<t t-name="FieldDate">
<t t-call="FieldChar"/>
<img class="oe_input_icon oe_datepicker_trigger" src="/web/static/src/img/ui/field_calendar.png"
title="Select date" width="16" height="16" border="0"/>
<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>
<t t-name="web.datetimepicker">
<div class="oe_datepicker">
<input type="text" size="1" style="width: 100%"/>
<img class="oe_input_icon oe_datepicker_trigger" src="/web/static/src/img/ui/field_calendar.png"
title="Select date" width="16" height="16" border="0"/>
<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>
</t>
<t t-name="FieldSelection">
@ -1051,6 +1053,18 @@
<t t-if="filters.length" t-raw="filters.render(defaults)"/>
</div>
</t>
<t t-name="SearchView.date">
<label t-att-class="'oe_label' + (attrs.help ? '_help' : '')"
t-att-title="attrs.help"
t-att-for="element_id">
<t t-esc="attrs.string || attrs.name"/>
<span t-if="attrs.help">?</span>
</label>
<div style="white-space: nowrap;">
<span t-att-id="element_id"></span>
<t t-if="filters.length" t-raw="filters.render(defaults)"/>
</div>
</t>
<t t-name="SearchView.field.selection">
<label t-att-title="attrs.help"
t-att-class="'oe_label' + (attrs.help ? '_help' : '')"
@ -1142,11 +1156,8 @@
<t t-name="SearchView.extended_search.proposition.char">
<input t-att-id="element_id" class="field_char"/>
</t>
<t t-name="SearchView.extended_search.proposition.datetime">
<input t-att-id="element_id" class="field_datetime"/>
</t>
<t t-name="SearchView.extended_search.proposition.date">
<input t-att-id="element_id" class="field_date"/>
<t t-name="SearchView.extended_search.proposition.empty">
<span t-att-id="element_id"></span>
</t>
<t t-name="SearchView.extended_search.proposition.integer">
<input type="number" t-att-id="element_id" class="field_integer" step="1"/>