pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] web, *: improve UX of custom group by menu

Browse Source 
*: board, website

This commit simplifies the UX of the 'Custom Group by' menu. Before this
commit, many clicks were needed to apply another filter, from an accordion
menu.

Now, a select element is used instead, allowing a better user experience, by
enabling such group by directly, when an option is selected.

Some tests have been adapted to the new selectors and behaviors, and the
applyGroup and toggleAddCustomGroup has been removed, since groups are applied
when selected, and the value can be modified directly with selectGroup.

task-3458519

closes odoo/odoo#132006

Signed-off-by: Mathieu Duckerts-Antoine (dam) <dam@odoo.com>
This commit is contained in:
luvi
2023-10-03 19:19:53 +00:00
parent 35bb9ffd52
commit 5124feae97
9 changed files with 78 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/board/static/tests/add_to_dashboard_tests.js
+2 -4
View File
@@ -10,14 +10,13 @@ import {
triggerEvent,
} from "@web/../tests/helpers/utils";
import {
applyGroup,
openAddCustomFilterDialog,
removeFacet,
switchView,
toggleAddCustomGroup,
toggleSearchBarMenu,
toggleMenuItem,
toggleMenuItemOption,
selectGroup,
} from "@web/../tests/search/helpers";
import { createWebClient, doAction } from "@web/../tests/webclient/helpers";
import { browser } from "@web/core/browser/browser";
@@ -140,8 +139,7 @@ QUnit.module("Board", (hooks) => {
// Group It
await toggleSearchBarMenu(target);
await toggleAddCustomGroup(target);
await applyGroup(target);
await selectGroup(target, "foo");
// add this action to dashboard
await testUtils.dom.triggerEvent($(".o_add_to_board button.dropdown-toggle"), "mouseenter");
addons/web/static/src/core/select_menu/select_menu.scss
+1 -3
View File
@@ -66,10 +66,8 @@
.dropup .o_select_menu_menu {
box-shadow: 0 -7px 10px rgba(8, 8, 8, 0.319);
border-bottom: none;
}
.dropdown .o_select_menu_menu {
box-shadow: 0 7px 10px rgba(8, 8, 8, 0.319);
border-top: none;
}
}
addons/web/static/src/search/custom_group_by_item/custom_group_by_item.js
+10 -8
View File
@@ -1,20 +1,22 @@
/** @odoo-module **/
import { AccordionItem } from "@web/core/dropdown/accordion_item";
import { Component, useState } from "@odoo/owl";
import { Component } from "@odoo/owl";
export class CustomGroupByItem extends Component {
setup() {
this.state = useState({});
if (this.props.fields.length) {
this.state.fieldName = this.props.fields[0].name;
get choices() {
return this.props.fields.map((f) => ({ label: f.string, value: f.name }));
}
onSelected(ev) {
if (ev.target.value) {
this.props.onAddCustomGroup(ev.target.value);
// reset the placeholder
ev.target.value = "";
}
}
}
CustomGroupByItem.template = "web.CustomGroupByItem";
CustomGroupByItem.components = { AccordionItem };
CustomGroupByItem.props = {
fields: Array,
onAddCustomGroup: Function,
addons/web/static/src/search/custom_group_by_item/custom_group_by_item.scss
+4
View File
@@ -0,0 +1,4 @@
.o_add_custom_group_menu {
background-position-x: calc(100% - 0.6em);
border: 0 !important;
}
addons/web/static/src/search/custom_group_by_item/custom_group_by_item.xml
+8 -18
View File
@@ -1,24 +1,14 @@
<templates xml:space="preserve">
<t t-name="web.CustomGroupByItem">
<AccordionItem class="'o_add_custom_group_menu text-truncate'" description="'Add Custom Group'">
<div class="px-3 py-2">
<select class="pe-3 text-truncate o_input" t-model="state.fieldName">
<option t-foreach="props.fields" t-as="field" t-key="field.name"
t-att-value="field.name"
t-if="field.type !== 'properties' and !field.isProperty"
t-esc="field.string"
/>
</select>
</div>
<div class="px-3 py-2">
<button class="btn btn-primary w-100"
t-on-click="() => props.onAddCustomGroup(state.fieldName)"
>
Apply
</button>
</div>
</AccordionItem>
<select class="o_add_custom_group_menu o_menu_item dropdown-item" t-on-change="(ev) => this.onSelected(ev)">
<option value="" disabled="true" selected="true" hidden="true">Add Custom Group</option>
<option t-foreach="props.fields" t-as="field" t-key="field.name"
t-if="field.type !== 'properties' and !field.isProperty"
t-att-value="field.name"
t-esc="field.string"
/>
</select>
</t>
</templates>
addons/web/static/tests/search/custom_group_by_item_tests.js
+29 -59
View File
@@ -1,15 +1,14 @@
/** @odoo-module **/
import { browser } from "@web/core/browser/browser";
import { getFixture, patchWithCleanup } from "../helpers/utils";
import { getFixture, getNodesTextContent, patchWithCleanup } from "../helpers/utils";
import {
applyGroup,
getFacetTexts,
isItemSelected,
isOptionSelected,
makeWithSearch,
selectGroup,
setupControlPanelServiceRegistry,
toggleAddCustomGroup,
toggleMenuItem,
toggleSearchBarMenu,
} from "./helpers";
@@ -47,7 +46,7 @@ QUnit.module("Search", (hooks) => {
QUnit.module("CustomGroupByItem");
QUnit.test("simple rendering", async function (assert) {
assert.expect(5);
assert.expect(2);
await makeWithSearch({
serverData,
@@ -61,23 +60,13 @@ QUnit.module("Search", (hooks) => {
const groupByMenu = target.querySelector(".o_group_by_menu");
assert.strictEqual(
groupByMenu.querySelector(".o_accordion").innerText.trim(),
groupByMenu.querySelector(".o_group_by_menu option[disabled]").innerText.trim(),
"Add Custom Group"
);
assert.containsOnce(groupByMenu, "button");
assert.containsNone(groupByMenu, ".o_accordion_values");
await toggleAddCustomGroup(target);
assert.containsOnce(groupByMenu, ".o_accordion_values");
assert.deepEqual(
[
...target.querySelectorAll(
".o_add_custom_group_menu + .o_accordion_values select option"
),
].map((el) => el.innerText),
getNodesTextContent(
target.querySelectorAll(".o_add_custom_group_menu option:not([disabled])")
),
["Birthday", "Date", "Foo"]
);
});
@@ -100,16 +89,10 @@ QUnit.module("Search", (hooks) => {
});
await toggleSearchBarMenu(target);
await toggleAddCustomGroup(target);
assert.deepEqual(
[
...target.querySelectorAll(
".o_add_custom_group_menu + .o_accordion_values select option"
),
].map((el) => el.innerText),
["Foo"]
);
const optionDescriptions = [
...target.querySelectorAll(".o_add_custom_group_menu option:not([disabled])"),
].map((option) => option.innerText.trim());
assert.deepEqual(optionDescriptions, ["Foo"]);
}
);
@@ -136,16 +119,10 @@ QUnit.module("Search", (hooks) => {
});
await toggleSearchBarMenu(target);
await toggleAddCustomGroup(target);
assert.deepEqual(
[
...target.querySelectorAll(
".o_add_custom_group_menu + .o_accordion_values select option"
),
].map((el) => el.innerText),
["Char A", "M2M Stored"]
);
const optionDescriptions = [
...target.querySelectorAll(".o_add_custom_group_menu option:not([disabled])"),
].map((option) => option.innerText.trim());
assert.deepEqual(optionDescriptions, ["Char A", "M2M Stored"]);
}
);
@@ -168,10 +145,9 @@ QUnit.module("Search", (hooks) => {
await toggleSearchBarMenu(target);
assert.deepEqual(controlPanel.env.searchModel.groupBy, []);
assert.containsOnce(target, ".o_menu_item"); //Add Custom Group
assert.containsOnce(target, ".o_add_custom_group_menu"); //Add Custom Group
await toggleAddCustomGroup(target);
await applyGroup(target);
await selectGroup(target, "date_field");
assert.deepEqual(controlPanel.env.searchModel.groupBy, ["date_field:month"]);
assert.deepEqual(getFacetTexts(target), ["Date: Month"]);
@@ -184,7 +160,7 @@ QUnit.module("Search", (hooks) => {
);
QUnit.test("click on add custom group toggle group selector", async function (assert) {
assert.expect(4);
assert.expect(3);
await makeWithSearch({
serverData,
@@ -200,27 +176,23 @@ QUnit.module("Search", (hooks) => {
const addCustomGroupMenu = target.querySelector(".o_add_custom_group_menu");
assert.strictEqual(addCustomGroupMenu.innerText.trim(), "Add Custom Group");
await toggleAddCustomGroup(target);
// Single select node with a single option
assert.containsOnce(target, ".o_add_custom_group_menu + .o_accordion_values select");
assert.strictEqual(
target
.querySelector(".o_add_custom_group_menu + .o_accordion_values select option")
.innerText.trim(),
"Super Date"
addCustomGroupMenu.querySelector("option[disabled]").innerText.trim(),
"Add Custom Group"
);
// Button apply
assert.containsOnce(target, ".o_add_custom_group_menu + .o_accordion_values .btn");
// Single select node with a single option
assert.containsOnce(target, ".o_add_custom_group_menu option:not([disabled])");
assert.deepEqual(
target.querySelector(".o_add_custom_group_menu option:not([disabled])").textContent,
"Super Date"
);
});
QUnit.test(
"select a field name in Add Custom Group menu properly trigger the corresponding field",
async function (assert) {
assert.expect(4);
assert.expect(3);
await makeWithSearch({
serverData,
@@ -237,12 +209,10 @@ QUnit.module("Search", (hooks) => {
});
await toggleSearchBarMenu(target);
await toggleAddCustomGroup(target);
await applyGroup(target);
await selectGroup(target, "candle_light");
assert.containsN(target, ".o_group_by_menu .o_menu_item", 2);
assert.containsOnce(target, ".o_add_custom_group_menu.o_accordion_toggle");
assert.containsOnce(target, ".o_add_custom_group_menu + .o_accordion_values");
assert.containsOnce(target, ".o_add_custom_group_menu");
assert.deepEqual(getFacetTexts(target), ["Candlelight"]);
}
);
addons/web/static/tests/search/helpers.js
+2 -13
View File
@@ -280,25 +280,14 @@ export async function toggleGroupByMenu(el) {
await click(findItem(el, `.o_group_by_menu .dropdown-toggle`));
}
export async function toggleAddCustomGroup(el) {
await click(findItem(el, `.o_add_custom_group_menu`));
}
export async function selectGroup(el, fieldName) {
const select = findItem(el, `.o_add_custom_group_menu + .o_accordion_values select`);
select.value = fieldName;
await triggerEvent(select, null, "change");
}
export async function applyGroup(el) {
await click(findItem(el, `.o_add_custom_group_menu + .o_accordion_values .btn`));
el.querySelector(".o_add_custom_group_menu").value = fieldName;
await triggerEvent(el, ".o_add_custom_group_menu", "change");
}
export async function groupByMenu(el, fieldName) {
await toggleSearchBarMenu(el);
await toggleAddCustomGroup(el);
await selectGroup(el, fieldName);
await applyGroup(el);
}
/** Favorite menu */
addons/web/static/tests/views/pivot_view_tests.js
+19 -94
View File
@@ -11,12 +11,11 @@ import {
nextTick,
patchDate,
patchWithCleanup,
triggerEvent,
triggerEvents,
mouseEnter,
getNodesTextContent,
} from "../helpers/utils";
import {
applyGroup,
editFavoriteName,
getFacetTexts,
removeFacet,
@@ -24,7 +23,6 @@ import {
selectGroup,
setupControlPanelFavoriteMenuRegistry,
setupControlPanelServiceRegistry,
toggleAddCustomGroup,
toggleSearchBarMenu,
toggleMenu,
toggleMenuItem,
@@ -1010,7 +1008,7 @@ QUnit.module("Views", (hooks) => {
assert.containsOnce(target, ".o_pivot .dropdown-menu");
assert.strictEqual(
target.querySelector(".o_pivot .dropdown-menu").innerText.replace(/\s/g, ""),
"CompanyTypeCustomerDateOtherProductProductbarAddCustomGroup"
"CompanyTypeCustomerDateOtherProductProductbarAddCustomGroupCompanyTypeCustomerDateOtherProductProductbar"
);
// open the Date sub dropdown
@@ -1160,8 +1158,8 @@ QUnit.module("Views", (hooks) => {
assert.containsN(
target,
".dropdown-menu > .dropdown-item",
3,
"should have 3 dropdown items same as searchview groupby"
4,
"should have 4 dropdown items same as searchview groupby"
);
assert.containsOnce(
target,
@@ -1169,15 +1167,14 @@ QUnit.module("Views", (hooks) => {
"should have custom group generator same as searchview groupby"
);
// check custom groupby selection has groupable fields only
await click(target, ".o_add_custom_group_menu");
assert.containsN(
target,
".o_add_custom_group_menu + .o_accordion_values option",
".o_add_custom_group_menu option:not([disabled])",
6,
"should have 6 fields in custom groupby"
);
const optionDescriptions = [
...target.querySelectorAll(".o_add_custom_group_menu + .o_accordion_values option"),
...target.querySelectorAll(".o_add_custom_group_menu option:not([disabled])"),
].map((option) => option.innerText.trim());
assert.deepEqual(
optionDescriptions,
@@ -1219,13 +1216,12 @@ QUnit.module("Views", (hooks) => {
target,
".dropdown-menu .o_menu_item",
3,
"should have 2 menu items in pivot groupby"
"should have 3 menu items in pivot groupby"
);
// add a custom group in searchview groupby
await toggleSearchBarMenu(target);
await toggleAddCustomGroup(target);
await applyGroup(target);
await selectGroup(target, "company_type");
assert.containsN(
target,
".o_control_panel .o_cp_searchview .dropdown-menu .o_menu_item",
@@ -1237,19 +1233,11 @@ QUnit.module("Views", (hooks) => {
target,
".dropdown-menu .o_menu_item",
3,
"should still have 2 menu items in pivot groupby"
"should still have 3 menu items in pivot groupby"
);
// add a custom group in pivot groupby
await click(target, ".o_add_custom_group_menu");
target.querySelector(".o_add_custom_group_menu + .o_accordion_values select").value =
"date";
await triggerEvent(
target,
".o_add_custom_group_menu + .o_accordion_values select",
"change"
);
await click(target, ".o_add_custom_group_menu + .o_accordion_values .btn");
await selectGroup(target, "date");
// click on closed header to open groupby selection dropdown
await click(target, "tbody tr:last-child .o_pivot_header_cell_closed");
assert.containsN(
@@ -1296,8 +1284,7 @@ QUnit.module("Views", (hooks) => {
5,
"should have 5 menu items in searchview"
);
await toggleAddCustomGroup(target);
await applyGroup(target);
await selectGroup(target, "company_type");
assert.containsN(
target,
".o_control_panel .o_cp_searchview .dropdown-menu .o_menu_item",
@@ -1307,11 +1294,8 @@ QUnit.module("Views", (hooks) => {
// click on closed header to open dropdown
await click(target.querySelectorAll("tbody .o_pivot_header_cell_closed")[1]);
let items = target.querySelectorAll(".o_menu_item:not(.o_accordion_toggle)");
assert.deepEqual(
[...items].map((it) => it.innerText),
["bar", "product"]
);
let items = target.querySelectorAll(".o_menu_item:not(select)");
assert.deepEqual(getNodesTextContent(items), ["bar", "product"]);
assert.containsOnce(
target,
"tbody .dropdown-menu .dropdown-divider",
@@ -1324,22 +1308,10 @@ QUnit.module("Views", (hooks) => {
);
// add a custom group in pivot groupby
await click(target, ".o_add_custom_group_menu");
target.querySelector(".o_add_custom_group_menu + .o_accordion_values select").value =
"customer";
await triggerEvent(
target,
".o_add_custom_group_menu + .o_accordion_values select",
"change"
);
await click(target, ".o_add_custom_group_menu + .o_accordion_values .btn");
await selectGroup(target, "customer");
await click(target.querySelectorAll("tbody .o_pivot_header_cell_closed")[1]);
items = target.querySelectorAll(".o_menu_item:not(.o_accordion_toggle)");
assert.deepEqual(
[...items].map((it) => it.innerText),
["bar", "product", "Customer"]
);
items = target.querySelectorAll(".o_menu_item:not(select)");
assert.deepEqual(getNodesTextContent(items), ["bar", "product", "Customer"]);
assert.containsN(
target,
"tbody .dropdown-menu .dropdown-divider",
@@ -1392,17 +1364,9 @@ QUnit.module("Views", (hooks) => {
// click on closed header to open dropdown and apply groupby on date field
await click(target.querySelector("thead .o_pivot_header_cell_closed"));
await click(target.querySelector("thead .dropdown-menu .o_add_custom_group_menu "));
checkReadGroup = true;
const select = target.querySelector(
".o_add_custom_group_menu + .o_accordion_values select"
);
select.value = "date";
select.dispatchEvent(new Event("change"));
await click(
target.querySelector(".o_add_custom_group_menu + .o_accordion_values .btn-primary")
);
await selectGroup(target, "date");
}
);
@@ -1518,42 +1482,6 @@ QUnit.module("Views", (hooks) => {
}
);
QUnit.test(
"pivot custom groupby: adding a custom group close the pivot groupby menu",
async function (assert) {
assert.expect(3);
await makeView({
type: "pivot",
resModel: "partner",
serverData,
arch: `
<pivot>
<field name="product_id" type="row"/>
<field name="foo" type="measure"/>
</pivot>`,
searchViewArch: `
<search>
<filter name="bar" string="bar" context="{'group_by': 'bar'}"/>
</search>`,
});
// click on closed header to open dropdown
await click(target.querySelector("thead .o_pivot_header_cell_closed"));
assert.containsOnce(target, "thead .dropdown-menu .o_add_custom_group_menu");
await click(target.querySelector("thead .dropdown-menu .o_add_custom_group_menu"));
assert.containsOnce(target, "thead .dropdown-menu .o_add_custom_group_menu");
// click on apply button should close dropdown
await click(
target.querySelector(
"thead .dropdown-menu .o_add_custom_group_menu + .o_accordion_values .btn-primary"
)
);
assert.containsNone(target, "thead .dropdown-menu");
}
);
QUnit.test("can toggle extra measure", async function (assert) {
let rpcCount = 0;
await makeView({
@@ -4477,8 +4405,7 @@ QUnit.module("Views", (hooks) => {
// open group by menu and add new groupby
await toggleSearchBarMenu(target);
await toggleAddCustomGroup(target);
await applyGroup(target);
await selectGroup(target, "company_type");
assert.deepEqual(
[...target.querySelectorAll("thead th")].map((th) => th.innerText),
@@ -4508,9 +4435,7 @@ QUnit.module("Views", (hooks) => {
// open groupby menu generator and add a new groupby
await toggleSearchBarMenu(target);
await toggleAddCustomGroup(target);
await selectGroup(target, "bar");
await applyGroup(target);
assert.deepEqual(
[...target.querySelectorAll("thead th")].map((th) => th.innerText),
@@ -5449,7 +5374,7 @@ QUnit.module("Views", (hooks) => {
"The row headers should be as expected"
);
await toggleMenuItem(target, "Customer");
await toggleMenuItem(target, "customer");
assert.deepEqual(
[...target.querySelectorAll("th")].slice(3).map((el) => el.innerText),
addons/website/static/tests/tours/page_manager.js
+3 -5
View File
@@ -11,11 +11,9 @@ const checkKanbanGroupBy = [{
extra_trigger: '.o_kanban_renderer',
trigger: '.o_control_panel .o_searchview_dropdown_toggler',
}, {
content: "Click on Add Custom Group",
trigger: '.o_add_custom_group_menu',
}, {
content: "Click on Apply", // Active is selected by default
trigger: '.o_add_custom_group_menu + .o_accordion_values .btn-primary',
content: "Select 'Active' in the select of Add Custom Group",
trigger: ".o_add_custom_group_menu",
run: "text active",
}, {
content: "Click on List View",
extra_trigger: '.o_kanban_renderer .o_kanban_header',