[FIX] web: ListView colspan for empty lines

Before this commit, empty lines on non-editable form's list are 1 column
too long and breaks the list's layout (ie. squish other columns and
empty space on non-empty columns).

This commit fixes it by properly calculating the number of columns and
their application on the empty lines' colspan. It also fixes an assert
in the list view's tests which mistakenly required that list's records
should be editable in a non-editable form.

Steps to reproduce:
- Open a Contact
- In the notebook, choose the Accounting tab
=> The Bank Accounts list has broken layout

closes odoo/odoo#101550

X-original-commit: 543134e215200bafd89edc1303032a210a4206cf
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
This commit is contained in:
Pierre Paridans
2022-09-29 12:17:12 +02:00
parent 23e93f9341
commit 7fbc49d486
3 changed files with 68 additions and 6 deletions
@@ -338,7 +338,10 @@ export class ListRenderer extends Component {
if (this.hasSelectors) {
nbCols++;
}
if (this.props.activeActions && this.props.activeActions.onDelete) {
if (
(this.props.activeActions && this.props.activeActions.onDelete) ||
this.displayOptionalFields
) {
nbCols++;
}
return nbCols;
@@ -126,7 +126,7 @@
</tr>
<t t-if="!props.list.isGrouped">
<tr t-foreach="getEmptyRowIds" t-as="emptyRowId" t-key="emptyRowId">
<td t-att-colspan="props.list.editedRecord ? nbCols : nbCols + 1">&#8203;</td>
<td t-att-colspan="nbCols">&#8203;</td>
</tr>
</t>
</t>
@@ -3291,9 +3291,8 @@ QUnit.module("Views", (hooks) => {
resModel: "foo",
serverData,
resId: 1,
mode: "readonly",
arch: `
<form>
<form edit="0">
<sheet>
<field name="foo_o2m">
<tree editable="bottom">
@@ -3303,8 +3302,8 @@ QUnit.module("Views", (hooks) => {
</sheet>
</form>`,
});
// in readonly mode, the delete action is available and the empty lines should cover that col
assert.strictEqual(target.querySelector("tbody td").getAttribute("colspan"), "2");
// in readonly mode, the delete action is not available
assert.strictEqual(target.querySelector("tbody td").getAttribute("colspan"), "1");
});
QUnit.test("colspan of empty lines is correct in edit", async function (assert) {
@@ -3333,6 +3332,66 @@ QUnit.module("Views", (hooks) => {
assert.strictEqual(target.querySelector("tbody td").getAttribute("colspan"), "2");
});
QUnit.test(
"colspan of empty lines is correct in readonly with optional fields",
async function (assert) {
serverData.models.foo.fields.foo_o2m = {
string: "Foo O2M",
type: "one2many",
relation: "foo",
};
await makeView({
type: "form",
resModel: "foo",
serverData,
resId: 1,
arch: `
<form edit="0">
<sheet>
<field name="foo_o2m">
<tree editable="bottom">
<field name="int_field"/>
<field name="foo" optional="hidden"/>
</tree>
</field>
</sheet>
</form>`,
});
// in readonly mode, the delete action is not available but the optional fields is and the empty lines should cover that col
assert.strictEqual(target.querySelector("tbody td").getAttribute("colspan"), "2");
}
);
QUnit.test(
"colspan of empty lines is correct in edit with optional fields",
async function (assert) {
serverData.models.foo.fields.foo_o2m = {
string: "Foo O2M",
type: "one2many",
relation: "foo",
};
await makeView({
type: "form",
resModel: "foo",
serverData,
resId: 1,
arch: `
<form>
<sheet>
<field name="foo_o2m">
<tree editable="bottom">
<field name="int_field"/>
<field name="foo" optional="hidden"/>
</tree>
</field>
</sheet>
</form>`,
});
// in edit mode, both the delete action and the optional fields are available and the empty lines should cover that col
assert.strictEqual(target.querySelector("tbody td").getAttribute("colspan"), "2");
}
);
QUnit.test(
"width of some fields should be hardcoded if no data, and list initially invisible",
async function (assert) {