[FIX] web: add title props in ProgressBar

The legacy ProgressBar could receive a title in props that it had to
display.
In this commit, we add support for the title props in the new
ProgressBard field.

closes odoo/odoo#95922

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
This commit is contained in:
FrancoisGe
2022-07-19 11:50:45 +02:00
parent fdcaa53ca0
commit c971becaa8
4 changed files with 35 additions and 7 deletions
@@ -140,6 +140,7 @@ ProgressBarField.props = {
isEditableInReadonly: { type: Boolean, optional: true },
isCurrentValueEditable: { type: Boolean, optional: true },
isMaxValueEditable: { type: Boolean, optional: true },
title: { type: String, optional: true },
};
ProgressBarField.displayName = _lt("Progress Bar");
@@ -156,6 +157,7 @@ ProgressBarField.extractProps = ({ attrs }) => {
attrs.options.editable &&
(!attrs.options.edit_max_value || attrs.options.edit_current_value),
isMaxValueEditable: attrs.options.editable && attrs.options.edit_max_value,
title: attrs.title,
};
};
@@ -4,6 +4,7 @@
<t t-name="web.ProgressBarField" owl="1">
<t t-if="!state.isEditing">
<div class="o_progressbar" t-on-click="onClick">
<div t-if="props.title" class="o_progressbar_title"><t t-esc="props.title"/></div>
<div class="o_progress" aria-valuemin="0" t-att-aria-valuemax="state.maxValue" t-att-aria-valuenow="state.currentValue">
<div class="o_progressbar_complete" t-att-style="'width: min(' + 100 * state.currentValue / state.maxValue + '%, 100%)'"></div>
</div>
@@ -17,6 +18,7 @@
</t>
<t t-else="">
<div class="o_progressbar d-flex" t-ref="numpadDecimal" t-on-click="onClick">
<div t-if="props.title" class="o_progressbar_title"><t t-esc="props.title"/></div>
<div class="o_progress" aria-valuemin="0" t-att-aria-valuemax="state.maxValue" t-att-aria-valuenow="state.currentValue">
<div class="o_progressbar_complete" t-att-style="'width: min(' + 100 * state.currentValue / state.maxValue + '%, 100%)'"></div>
</div>
@@ -275,7 +275,7 @@ export class KanbanCompiler extends ViewCompiler {
}
for (const attr in attrs) {
if (attr.startsWith("t") && !attr.startsWith("t-att")) {
if (attr.startsWith("t-") && !attr.startsWith("t-att")) {
compiled.setAttribute(attr, attrs[attr]);
}
}
@@ -1,12 +1,12 @@
/** @odoo-module **/
import {
makeFakeNotificationService,
makeFakeLocalizationService,
makeFakeNotificationService,
} from "@web/../tests/helpers/mock_services";
import { registry } from "@web/core/registry";
import { click, editInput, getFixture } from "@web/../tests/helpers/utils";
import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
import { registry } from "@web/core/registry";
let serverData;
let target;
@@ -363,7 +363,7 @@ QUnit.module("Fields", (hooks) => {
});
QUnit.test("ProgressBarField: field is editable in kanban", async function (assert) {
assert.expect(4);
assert.expect(7);
serverData.models.partner.records[0].int_field = 99;
await makeView({
@@ -375,7 +375,7 @@ QUnit.module("Fields", (hooks) => {
<templates>
<t t-name="kanban-box">
<div>
<field name="int_field" widget="progressbar" options="{'editable': true, 'max_value': 'float_field'}" />
<field name="int_field" title="ProgressBarTitle" widget="progressbar" options="{'editable': true, 'max_value': 'float_field'}" />
</div>
</t>
</templates>
@@ -393,6 +393,10 @@ QUnit.module("Fields", (hooks) => {
"99 / 100",
"Initial value should be correct"
);
assert.strictEqual(
target.querySelector(".o_progressbar_title").textContent,
"ProgressBarTitle"
);
// Clicking on the progress bar should not change the value
await click(target.querySelector(".o_progress"));
@@ -402,6 +406,10 @@ QUnit.module("Fields", (hooks) => {
"99",
"Initial value in input is still correct"
);
assert.strictEqual(
target.querySelector(".o_progressbar_title").textContent,
"ProgressBarTitle"
);
await editInput(target, ".o_progressbar_value.o_input", "69");
assert.strictEqual(
@@ -409,6 +417,10 @@ QUnit.module("Fields", (hooks) => {
"69 / 100",
"New value should be different than initial after click"
);
assert.strictEqual(
target.querySelector(".o_progressbar_title").textContent,
"ProgressBarTitle"
);
});
QUnit.test(
@@ -481,7 +493,7 @@ QUnit.module("Fields", (hooks) => {
QUnit.test(
"ProgressBar: value should update in readonly mode with right parameter when typing in input with field value",
async function (assert) {
assert.expect(4);
assert.expect(7);
serverData.models.partner.records[0].int_field = 99;
await makeView({
@@ -490,7 +502,7 @@ QUnit.module("Fields", (hooks) => {
resModel: "partner",
arch: `
<form>
<field name="int_field" widget="progressbar" options="{\'editable\': true, \'editable_readonly\': true}" />
<field name="int_field" widget="progressbar" title="ProgressBarTitle" options="{'editable': true, 'editable_readonly': true}" />
</form>`,
resId: 1,
mockRPC(route, args) {
@@ -509,6 +521,10 @@ QUnit.module("Fields", (hooks) => {
"99%",
"Initial value should be correct"
);
assert.strictEqual(
target.querySelector(".o_progressbar_title").textContent,
"ProgressBarTitle"
);
await click(target.querySelector(".o_progress"));
@@ -517,6 +533,10 @@ QUnit.module("Fields", (hooks) => {
"99",
"Initial value in input is correct"
);
assert.strictEqual(
target.querySelector(".o_progressbar_title").textContent,
"ProgressBarTitle"
);
await editInput(target, ".o_field_widget input", "69.6");
@@ -525,6 +545,10 @@ QUnit.module("Fields", (hooks) => {
"69%",
"New value should be different than initial after changing it"
);
assert.strictEqual(
target.querySelector(".o_progressbar_title").textContent,
"ProgressBarTitle"
);
}
);