[IMP] web: New generic progressbar widget + FieldProgressBar adaptation

6 files changed, 195 insertions, 18 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 31cb1d35b5f..40050a72e2d 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -35,6 +35,12 @@
   border: 0;
 }
 
+.oe_tz_warning {
+  color: red;
+  float: right;
+  margin: 4px;
+}
+
 .oe_indicator {
   z-index: 99999;
   position: absolute;
@@ -653,11 +659,6 @@
   color: #4c4c4c;
   text-decoration: none;
 }
-.oe_tz_warning {
-  color: red;
-  float: right;
-  margin: 4px;
-}
 .openerp .oe_dropdown_menu > li > a:hover {
   text-decoration: none;
 }
@@ -3263,3 +3264,31 @@ body {
     position: relative !important;
   }
 }
+.o_progressbar > div {
+  display: inline-block;
+}
+.o_progressbar .o_progressbar_title {
+  white-space: nowrap;
+  padding-right: 10px;
+}
+.o_progressbar .o_progress {
+  width: 100px;
+  height: 15px;
+  vertical-align: middle;
+  border: 1px solid silver;
+  border-radius: 10px;
+  overflow: hidden;
+  background-color: white;
+}
+.o_progressbar .o_progress.o_progress_overflow {
+  background-color: gray;
+}
+.o_progressbar .o_progress .o_progressbar_complete {
+  background-color: #3071A9;
+  height: 100%;
+}
+.o_progressbar .o_progressbar_value {
+  width: 100px;
+  white-space: nowrap;
+  padding-left: 10px;
+}
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index b27eddb890e..c619cc15e1e 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -2697,3 +2697,35 @@ body
 
 
 // au BufWritePost,FileWritePost *.sass :!sass --style expanded --line-numbers <afile> > "%:p:r.css"
+
+// ProgresBar widget
+
+.o_progressbar
+    > div
+        display: inline-block
+
+    .o_progressbar_title
+        white-space: nowrap
+        padding-right: 10px
+
+    .o_progress
+        width: 100px
+        height: 15px
+        vertical-align: middle
+
+        border: 1px solid silver
+        border-radius: 10px
+        overflow: hidden
+
+        background-color: white
+        &.o_progress_overflow
+            background-color: gray
+
+        .o_progressbar_complete
+            background-color: #3071A9
+            height: 100%
+
+    .o_progressbar_value
+        width: 100px
+        white-space: nowrap
+        padding-left: 10px
diff --git a/addons/web/static/src/js/framework/utils.js b/addons/web/static/src/js/framework/utils.js
index a7852ce4442..50a35fbbbea 100644
--- a/addons/web/static/src/js/framework/utils.js
+++ b/addons/web/static/src/js/framework/utils.js
@@ -303,8 +303,7 @@ function human_number (number) {
         number /= 1000;
         ++i;
     }
-    // return number.toFixed(2) + ' ' + units[i];
-    return parseInt(number) + ' ' + units[i];
+    return parseInt(number) + units[i];
 }
 
 /**
diff --git a/addons/web/static/src/js/views/form_widgets.js b/addons/web/static/src/js/views/form_widgets.js
index 273b18958a1..b23bff4cc84 100644
--- a/addons/web/static/src/js/views/form_widgets.js
+++ b/addons/web/static/src/js/views/form_widgets.js
@@ -5,6 +5,7 @@ var core = require('web.core');
 var crash_manager = require('web.crash_manager');
 var data = require('web.data');
 var datepicker = require('web.datepicker');
+var ProgressBar = require('web.ProgressBar');
 var Dialog = require('web.Dialog');
 var common = require('web.form_common');
 var formats = require('web.formats');
@@ -689,15 +690,26 @@ var FieldBoolean = common.AbstractField.extend({
 /**
     The progressbar field expect a float from 0 to 100.
 */
-var FieldProgressBar = common.AbstractField.extend({
-    template: 'FieldProgressBar',
-    render_value: function() {
-        this.$el.progressbar({
+var FieldProgressBar = common.AbstractField.extend(common.ReinitializeFieldMixin, {
+    initialize_content: function() {
+        if(this.progressbar) {
+            this.progressbar.destroy();
+        }
+
+        this.progressbar = new ProgressBar(this, {
+            readonly: this.get('effective_readonly'),
             value: this.get('value') || 0,
-            disabled: this.get("effective_readonly")
         });
-        var formatted_value = formats.format_value(this.get('value') || 0, { type : 'float' });
-        this.$('span').html(formatted_value + '%');
+
+        var self = this;
+        this.progressbar.appendTo('<div>').done(function() {
+            self.progressbar.$el.addClass(self.$el.attr('class'));
+            self.replaceElement(self.progressbar.$el);
+
+            self.progressbar.on('change:value', self, function() {
+                self.set('value', self.progressbar.get('value'));
+            });
+        });
     }
 });
 
diff --git a/addons/web/static/src/js/widgets/progress_bar.js b/addons/web/static/src/js/widgets/progress_bar.js
new file mode 100644
index 00000000000..814afd8c412
--- /dev/null
+++ b/addons/web/static/src/js/widgets/progress_bar.js
@@ -0,0 +1,103 @@
+odoo.define('web.ProgressBar', function (require) {
+"use strict";
+
+var core = require('web.core');
+var utils = require('web.utils');
+var Widget = require('web.Widget');
+
+var QWeb = core.qweb;
+var _t = core._t;
+
+/**
+ * options
+ * - readonly
+ * - value
+ * - max_value
+ * - title: title of the gauge, displayed on the left
+ */
+var ProgressBar = Widget.extend({
+    template: "ProgressBar",
+
+    events: {
+        'change input': 'on_change_input',
+        'input input': 'on_change_input',
+        'click .o_progress': function(e) {
+            if(!this.readonly) {
+                var $target = $(e.currentTarget);
+                this.set('value', Math.floor((e.pageX - $target.offset().left) / $target.outerWidth() * this.get('max_value')));
+            }
+        }
+    },
+
+    init: function (parent, options) {
+        this._super(parent);
+
+        options = _.defaults(options || {}, {
+            readonly: true,
+            value: 0,
+            max_value: 100,
+            title: ''
+        });
+
+        this.readonly = options.readonly;
+        this.set('value', options.value);
+        this.set('max_value', options.max_value);
+        this.title = options.title;
+
+        this.on('change:value', this, this._render_value);
+        this.on('change:max_value', this, this._render_value);
+    },
+
+    start: function() {
+        this._render_value();
+        return this._super();
+    },
+
+    on_change_input: function(e) {
+        var $input = $(e.target);
+        if(isNaN($input.val())) {
+            this.do_warn(_t("Wrong value entered!"), _t("Only Integer Value should be valid."));
+        } else {
+            if(e.type === 'input') {
+                this._render_value($input.val());
+                if(parseFloat($input.val()) === 0) {
+                    $input.select();
+                }
+            } else {
+                this.set('value', $(e.target).val());
+            }
+        }
+    },
+
+    _render_value: function(value) {
+        if(isNaN(value)) {
+            value = this.get('value');
+        }
+        value = value || 0;
+        var max_value = this.get('max_value');
+
+        var widthComplete;
+        if(value <= max_value) {
+            widthComplete = value/max_value * 100;
+        } else {
+            widthComplete = max_value/value * 100;
+        }
+
+        this.$('.o_progress').toggleClass('o_progress_overflow', value > max_value);
+        this.$('.o_progressbar_complete').css('width', widthComplete + '%');
+
+        if(this.readonly) {
+            if(max_value !== 100) {
+                this.$('.o_progressbar_value').html(utils.human_number(value) + " / " + utils.human_number(max_value));
+            } else {
+                this.$('.o_progressbar_value').html(utils.human_number(value) + "%");
+            }
+        } else {
+            this.$('.o_progressbar_value').val(value);
+        }
+    }
+});
+
+return ProgressBar;
+
+});
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index d992eca7f60..c5913ce43ed 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1302,10 +1302,12 @@
             class="field_boolean"/>
     </span>
 </t>
-<t t-name="FieldProgressBar">
-    <span class="oe_form_field oe_form_field_progressbar" t-att-style="widget.node.attrs.style">
-        <span></span>
-    </span>
+<t t-name="ProgressBar">
+    <div class="o_progressbar">
+        <div t-if="widget.title" class="o_progressbar_title"><t t-esc="widget.title"/></div><div class="o_progress">
+            <div class="o_progressbar_complete"/>
+        </div><div t-if="widget.readonly" class="o_progressbar_value"/><input t-if="!widget.readonly" class="o_progressbar_value"/>
+    </div>
 </t>
 <t t-name="FieldPercentPie">
     <div class="oe_form_field oe_form_field_percent_pie" t-att-style="widget.node.attrs.style">