From 0ef798a3db497bdd5fa2f55cd4fd9a684542b41b Mon Sep 17 00:00:00 2001 From: luvi Date: Sun, 19 Feb 2023 23:39:38 +0000 Subject: [PATCH] [IMP] web: StateSelectionField: add current value in the dropdown This commit revamps the UX of the StateSelection field widget. Now, instead of filtering the options by removing the current selected value, the field displays the entire list in the dropdown, and the selected item has a checkmark to indicate its status. This allows us to remove the tooltip, since its presence was not useful anymore, and was unintuitive to use. This changes required to adapt some tests asserting its presence, as well as the number of items shown in the dropdown menu. task #3177182 closes odoo/odoo#113203 Signed-off-by: Aaron Bohy (aab) --- .../state_selection/state_selection_field.js | 3 -- .../state_selection/state_selection_field.xml | 14 +++--- .../fields/state_selection_field_tests.js | 48 +++++++++---------- .../static/tests/views/kanban_view_tests.js | 4 +- 4 files changed, 33 insertions(+), 36 deletions(-) diff --git a/addons/web/static/src/views/fields/state_selection/state_selection_field.js b/addons/web/static/src/views/fields/state_selection/state_selection_field.js index 937a5f4022f..acd97912c04 100644 --- a/addons/web/static/src/views/fields/state_selection/state_selection_field.js +++ b/addons/web/static/src/views/fields/state_selection/state_selection_field.js @@ -51,9 +51,6 @@ export class StateSelectionField extends Component { return [state, this.props.record.data[`legend_${state}`] || label]; }); } - get availableOptions() { - return this.options.filter((o) => o[0] !== this.currentValue); - } get currentValue() { return this.props.value || this.options[0][0]; } diff --git a/addons/web/static/src/views/fields/state_selection/state_selection_field.xml b/addons/web/static/src/views/fields/state_selection/state_selection_field.xml index 2c9fc133871..2f343e74f69 100644 --- a/addons/web/static/src/views/fields/state_selection/state_selection_field.xml +++ b/addons/web/static/src/views/fields/state_selection/state_selection_field.xml @@ -9,19 +9,19 @@ - +
- - -
- - -
+ + + + diff --git a/addons/web/static/tests/views/fields/state_selection_field_tests.js b/addons/web/static/tests/views/fields/state_selection_field_tests.js index ceb0647f93f..1da2740c221 100644 --- a/addons/web/static/tests/views/fields/state_selection_field_tests.js +++ b/addons/web/static/tests/views/fields/state_selection_field_tests.js @@ -83,11 +83,6 @@ QUnit.module("Fields", (hooks) => { "should not have one green status since selection is the second, blocked state" ); assert.containsNone(target, ".dropdown-menu", "there should not be a dropdown"); - assert.strictEqual( - target.querySelector(".o_field_state_selection .dropdown-toggle").dataset.tooltip, - "Blocked", - "tooltip attribute has the right text" - ); // Click on the status button to make the dropdown appear await click(target, ".o_field_widget.o_field_state_selection .o_status"); @@ -95,8 +90,13 @@ QUnit.module("Fields", (hooks) => { assert.containsN( target, ".dropdown-menu .dropdown-item", - 2, - "there should be two options in the dropdown" + 3, + "there should be three options in the dropdown" + ); + assert.hasClass( + target.querySelector(".dropdown-menu .dropdown-item:nth-child(2)"), + "active", + "current value has a checkmark" ); // Click on the first option, "Normal" @@ -141,8 +141,8 @@ QUnit.module("Fields", (hooks) => { assert.containsN( target, ".dropdown-menu .dropdown-item", - 2, - "there should be two options in the dropdown" + 3, + "there should be three options in the dropdown" ); // Click on the last option, "Done" @@ -297,8 +297,8 @@ QUnit.module("Fields", (hooks) => { assert.containsN( target, ".dropdown-menu .dropdown-item", - 2, - "there should be two options in the dropdown" + 3, + "there should be three options in the dropdown" ); // Click on the first option, "Normal" @@ -352,8 +352,8 @@ QUnit.module("Fields", (hooks) => { assert.containsN( target, ".dropdown-menu .dropdown-item", - 2, - "there should be two options in the dropdown" + 3, + "there should be three options in the dropdown" ); // Click on another row @@ -382,8 +382,8 @@ QUnit.module("Fields", (hooks) => { assert.containsN( target, ".dropdown-menu .dropdown-item", - 2, - "there should be two options in the dropdown" + 3, + "there should be three options in the dropdown" ); // Click on the last option, "Done" @@ -495,17 +495,17 @@ QUnit.module("Fields", (hooks) => { }); await click(target, ".o_status"); - let dropdownItemTexts = [...target.querySelectorAll(".dropdown-item")].map( - (el) => el.textContent - ); - assert.deepEqual(dropdownItemTexts, ["Custom normal", "Custom done"]); + let dropdownItemTexts = [ + ...target.querySelectorAll(".o_field_state_selection .dropdown-item"), + ].map((el) => el.textContent); + assert.deepEqual(dropdownItemTexts, ["Custom normal", "Custom blocked", "Custom done"]); await click(target.querySelector(".dropdown-item .o_status")); await click(target, ".o_status"); - dropdownItemTexts = [...target.querySelectorAll(".dropdown-item")].map( - (el) => el.textContent - ); - assert.deepEqual(dropdownItemTexts, ["Custom blocked", "Custom done"]); + dropdownItemTexts = [ + ...target.querySelectorAll(".o_field_state_selection .dropdown-item"), + ].map((el) => el.textContent); + assert.deepEqual(dropdownItemTexts, ["Custom normal", "Custom blocked", "Custom done"]); }); QUnit.test("works when required in a readonly view ", async function (assert) { @@ -534,7 +534,7 @@ QUnit.module("Fields", (hooks) => { }); await click(target, ".o_field_state_selection button"); - const doneItem = target.querySelectorAll(".dropdown-item")[1]; // item "done"; + const doneItem = target.querySelectorAll(".dropdown-item")[2]; // item "done"; await click(doneItem); assert.verifySteps(["write"]); diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js index 3fe096e0a6b..67fa712e452 100644 --- a/addons/web/static/tests/views/kanban_view_tests.js +++ b/addons/web/static/tests/views/kanban_view_tests.js @@ -2561,7 +2561,7 @@ QUnit.module("Views", (hooks) => { // Select state in kanban await click(getCard(0), ".o_status"); - await click(getCard(0), ".o_field_state_selection .dropdown-item:first-child"); + await click(getCard(0), ".o_field_state_selection .dropdown-item:nth-child(2)"); assert.hasClass( target.querySelector(".o_status"), @@ -11651,7 +11651,7 @@ QUnit.module("Views", (hooks) => { // Changes the state of the first record of the "Yes" column to "def" // The updated record should remain visible await click(getCard(2), ".o_status"); - await click(getCard(2), ".o_field_state_selection .dropdown-item:first-child"); + await click(getCard(2), ".o_field_state_selection .dropdown-item:nth-child(2)"); assert.deepEqual(getCounters(), ["1", "1"]); assert.containsN(getColumn(1), ".o_kanban_record", 2);