From 399e08fa8513b6d28709eeed2611a4e2a2c8d2d1 Mon Sep 17 00:00:00 2001
From: "Audric Onockx (auon)" <auon@odoo.com>
Date: Fri, 3 Feb 2023 12:12:10 +0000
Subject: [PATCH] [IMP] web: display progressbar in a different color when >
 100%

This improvement will give a visual indication that the progress
has gone over 100% by changing its color.
As, depending on what it measures, it could be positive or negative,
we add an option to the widget to determine the class (color)
that should be used.

task-2909337

Part-of: odoo/odoo#96104
---
 .../fields/progress_bar/progress_bar_field.js |  2 ++
 .../progress_bar/progress_bar_field.xml       |  2 +-
 .../views/fields/progress_bar_field_tests.js  | 22 +++++++++++++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/views/fields/progress_bar/progress_bar_field.js b/addons/web/static/src/views/fields/progress_bar/progress_bar_field.js
index e6574e1ccc9..10976050610 100644
--- a/addons/web/static/src/views/fields/progress_bar/progress_bar_field.js
+++ b/addons/web/static/src/views/fields/progress_bar/progress_bar_field.js
@@ -20,6 +20,7 @@ export class ProgressBarField extends Component {
         isCurrentValueEditable: { type: Boolean, optional: true },
         isMaxValueEditable: { type: Boolean, optional: true },
         title: { type: String, optional: true },
+        overflowClass: { type: String, optional: true },
     };
 
     setup() {
@@ -155,6 +156,7 @@ export const progressBarField = {
         isCurrentValueEditable: options.editable && !options.edit_max_value,
         isMaxValueEditable: options.editable && options.edit_max_value,
         title: attrs.title,
+        overflowClass: options.overflow_class || 'bg-secondary',
     }),
 };
 
diff --git a/addons/web/static/src/views/fields/progress_bar/progress_bar_field.xml b/addons/web/static/src/views/fields/progress_bar/progress_bar_field.xml
index 73c855dc17b..caeda54fd5d 100644
--- a/addons/web/static/src/views/fields/progress_bar/progress_bar_field.xml
+++ b/addons/web/static/src/views/fields/progress_bar/progress_bar_field.xml
@@ -5,7 +5,7 @@
         <div class="o_progressbar w-100 d-flex align-items-center" t-ref="numpadDecimal">
             <div t-if="props.title" class="o_progressbar_title text-nowrap pe-1"><t t-esc="props.title"/></div>
             <div class="o_progress align-middle overflow-hidden" aria-valuemin="0" t-att-aria-valuemax="state.maxValue" t-att-aria-valuenow="state.currentValue">
-                <div t-attf-class="{{ state.currentValue > state.maxValue ? 'bg-secondary' : 'bg-primary' }} h-100" t-att-style="'width: min(' + 100 * state.currentValue / state.maxValue + '%, 100%)'"></div>
+                <div t-attf-class="{{ state.currentValue > state.maxValue ? props.overflowClass : 'bg-primary' }} h-100" t-att-style="'width: min(' + 100 * state.currentValue / state.maxValue + '%, 100%)'"></div>
             </div>
             <div class="o_progressbar_value d-flex">
                 <t t-if="isPercentage">
diff --git a/addons/web/static/tests/views/fields/progress_bar_field_tests.js b/addons/web/static/tests/views/fields/progress_bar_field_tests.js
index 3a75eb39612..3ac95b6777a 100644
--- a/addons/web/static/tests/views/fields/progress_bar_field_tests.js
+++ b/addons/web/static/tests/views/fields/progress_bar_field_tests.js
@@ -538,4 +538,26 @@ QUnit.module("Fields", (hooks) => {
             assert.verifySteps(["Show error message"], "The error message was shown correctly");
         }
     );
+
+    QUnit.test(
+        "ProgressBarField: color is correctly set when value > max value",
+        async function (assert) {
+            serverData.models.partner.records[0].float_field = 101;
+            await makeView({
+                serverData,
+                type: "form",
+                resModel: "partner",
+                arch: `
+                    <form>
+                        <field name="float_field" widget="progressbar" options="{'overflow_class': 'bg-warning'}"/>
+                    </form>`,
+                resId: 1,
+            });
+
+            assert.containsOnce(
+                target, ".o_progressbar .bg-warning",
+                "As the value has excedded the max value, the color should be set to bg-warning"
+            );
+        }
+    );
 });