pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] web_kanban: KanbanProgressBar changes to use ProgressBar widget

Browse Source
This commit is contained in:
qsm-odoo
2015-05-13 17:05:24 +02:00
parent 84208a6ba1
commit 101092b5aa
4 changed files with 64 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_kanban/static/src/css/kanban.css
+12
View File
@@ -559,6 +559,18 @@
background-color: #FFC7F1;
color: #6d2c70;
}
.openerp .oe_kanban_view .o_progressbar .o_progressbar_title {
width: 20%;
}
.openerp .oe_kanban_view .o_progressbar .o_progress {
width: 60%;
height: 20px;
}
.openerp .oe_kanban_view .o_progressbar .o_progressbar_value {
width: 20%;
height: 20px;
text-align: right;
}
.openerp .oe_form .oe_kanban_view .oe_kanban_column, .openerp .oe_form .oe_kanban_view .oe_kanban_group_header {
padding: 0px;
addons/web_kanban/static/src/css/kanban.sass
+12
View File
@@ -497,6 +497,18 @@
color: #6d2c70
// }}}
// KanbanProgressBar
.o_progressbar
.o_progressbar_title
width: 20%
.o_progress
width: 60%
height: 20px
.o_progressbar_value
width: 20%
height: 20px
text-align: right
.openerp .oe_form .oe_kanban_view
.oe_kanban_column, .oe_kanban_group_header
padding: 0px
addons/web_kanban/static/src/js/kanban_common.js
+40 -86
View File
@@ -6,6 +6,7 @@ var data = require('web.data');
var form_common = require('web.form_common');
var formats = require('web.formats');
var framework = require('web.framework');
var ProgressBar = require('web.ProgressBar');
var pyeval = require('web.pyeval');
var Registry = require('web.Registry');
var session = require('web.session');
@@ -847,110 +848,63 @@ var KanbanGroup = Widget.extend({
* Kanban widgets: ProgressBar
* options
* - editable: boolean if current_value is editable
* - editable_value: if set, get the editable_value from the field that must be present in the view
* [default: current_value]
* - current_value: get the current_value from the field that must be present in the view
* - max_value: get the max_value from the field that must be present in the view
* - title: title of the gauge, displayed on top of the gauge
* - on_change: action to call when cliking and setting a value
*
*/
var ProgressBar = AbstractField.extend({
template: "KanbanProgressBar",
var KanbanProgressBar = AbstractField.extend({
events: {
'click': function() {
if(this.progressbar.readonly) {
this.toggle_progressbar();
}
}
},
init: function (parent, field, node) {
this._super(parent, field, node);
var editable = this.options.editable;
var on_change = this.options.on_change;
var title = this.options.title;
var current_value = this.getParent().record[this.options.current_value].raw_value;
var editable_value = current_value;
if (editable && this.options.editable_value){
editable_value = this.getParent().record[this.options.editable_value].raw_value;
}
var max_value = this.getParent().record[this.options.max_value].raw_value;
this.state = {
editable: editable,
on_change: on_change,
title: title,
current_value: current_value,
max_value: max_value,
editable_value: editable_value,
width_complete : 0,
width_over : 0,
};
var record = this.getParent().record;
this.progressbar = new ProgressBar(this, {
readonly: true,
value: record[this.options.current_value].raw_value,
max_value: record[this.options.max_value].raw_value,
title: this.options.title
});
var current_value = this.state.current_value;
var max_value = this.state.max_value;
if (current_value <= max_value){
this.state.width_complete = current_value/max_value * 100;
}
else {
this.state.width_complete = max_value/current_value * 100;
this.state.width_over = (current_value - max_value) / current_value * 100;
}
this.readonly = !this.options.editable;
this.on_change = this.options.on_change;
},
start: function () {
var self = this;
this.$el.click(function (event){
var parent = self.getParent();
var value = self.state.editable_value || self.state.current_value;
event.stopPropagation();
if (!parent.view.is_action_enabled('edit')) {
return;
}
if (!self.state.editable) {
return;
}
// add input
if (!self.$el.find(".o_progress_bar_edit").size()) {
var $div = $('<div class="o_progress_bar_edit" style="z-index:1"/>');
$div.css({
'text-align': 'center',
'position': 'absolute',
'width': $(this).outerWidth() + 'px',
});
var $input = $('<input/>').val(value);
$input.css({
'text-align': 'center',
'margin': 'auto',
});
$div.append($input);
$(this).prepend($div);
$input.focus()
.keydown(function (event) {
event.stopPropagation();
if(isNaN($input.val())){
self.do_warn(_t("Wrong value entered!"), _t("Only Integer Value should be valid."));
$div.remove();
} else {
if (event.keyCode == 13 || event.keyCode == 9) {
if ($input.val() != value) {
parent.view.dataset.call(self.state.on_change, [parent.id, $input.val()]).then(function () {
parent.do_reload();
});
} else {
$div.remove();
}
}
}
})
}
var def = this.progressbar.appendTo('<div>').done(function() {
self.progressbar.$el.addClass(self.$el.attr('class'));
self.replaceElement(self.progressbar.$el);
});
return this._super();
return $.when(this._super(), def).then(function() {
if(!self.readonly) {
var parent = self.getParent();
self.progressbar.on('change:value', self, function(e) {
var value = this.progressbar.get('value') || 0;
if(!isNaN(value)) {
parent.view.dataset.call(this.on_change, [parent.id, value]).then(function() {
self.toggle_progressbar();
});
}
});
}
});
},
_format_number: function(number) {
return utils.human_number(number, this.type)
toggle_progressbar: function() {
this.progressbar.readonly = !this.progressbar.readonly;
var $div = $('<div/>').insertAfter(this.$el);
this.progressbar.replace($div);
this.setElement(this.progressbar.$el);
},
});
@@ -959,7 +913,7 @@ var fields_registry = new Registry();
fields_registry
.add('priority', Priority)
.add('kanban_state_selection', KanbanSelection)
.add("progress", ProgressBar);
.add("progress", KanbanProgressBar);
return {
addons/web_kanban/static/src/xml/web_kanban.xml
-16
View File
@@ -105,20 +105,4 @@
</div>
</div>
</t>
<t t-name="KanbanProgressBar">
<div t-att-class="(widget.state.editable ? 'o_progress_bar_editable' : '')" t-att-style="'text-align: center; ' + (widget.state.editable ? 'cursor: pointer; ' : '')">
<div style="text-align: center; width: 15%; float: left;">
<t t-esc="widget.state.title"/>:
</div>
<div class="progress" style="text-align: center; width: 65%; float: left; margin-bottom: 0;">
<div class="progress-bar o_progress_bar_complete" t-att-style="'width: ' + widget.state.width_complete + '%'">
</div>
<div class="progress-bar o_progress_bar_over" t-att-style="'width: ' + widget.state.width_over + '%'">
</div>
</div>
<div style="width: 20%; display: inline-block;">
<t t-esc="widget._format_number(widget.state.current_value)"/> / <t t-esc="widget._format_number(widget.state.max_value)"/>
</div>
</div>
</t>
</template>