OWL
data_display
Properties Group By Item
Odoo 19 OWL component — Properties Group By Item (search)
Live preview
Interactive
Source excerpt
web/static/src/search/properties_group_by_item/properties_group_by_item.js
import { AccordionItem, ACCORDION } from "@web/core/dropdown/accordion_item";
import { CheckboxItem } from "@web/core/dropdown/checkbox_item";
import { DropdownItem } from "@web/core/dropdown/dropdown_item";
import { Component, useState, useChildSubEnv } from "@odoo/owl";
export class PropertiesGroupByItem extends Component {
static template = "web.PropertiesGroupByItem";
static components = { AccordionItem, CheckboxItem, DropdownItem };
static props = {
item: Object,
onGroup: Function,
};
setup() {
this.state = useState({ groupByItems: [] });
useChildSubEnv({
[ACCORDION]: {
accordionStateChanged: this.beforeOpen.bind(this),
},
});
}
/**
* The properties field is considered as active if one of its property is active.
*/
get isActive() {
return this.state.groupByItems.some((item) => item.isActive);
}
/**
* True if all group items come from the same definition record.
*/
get isSingleParent() {
const uniqueNames = new Set(this.state.groupByItems.map((item) => item.definitionRecordId));
return uniqueNames.size < 2;
}
/**
* Dynamically load the definition, only when needed (if we open the dropdown).
*/
async beforeOpen() {
if (this.definitionLoaded) {
return;
}
this.definitionLoaded = true;
await this.env.searchModel.fillSearchViewItemsProperty();
this._updateGroupByItems();
}
/**
* Callback to group records per one property.
*/
onGroup(ids) {
this.props.onGroup(ids);
this._updateGroupByItems(); // isActive state might have changed
}
/**
* Update the component state to sync it with the search model group item.
*/
_updateGroupByItems() {
this.state.groupByItems = this.env.searchModel.getSearchItems(
(searchItem) =>
["groupBy", "dateGroupBy"].includes(searchItem.type) &&
searchItem.isProperty &&
searchItem.propertyFieldName === this.props.item.fieldName
);
}
}
Registry / API
- Registry name
PropertiesGroupByItem- Category
—- Module
web- Slug
properties-group-by-item- Nav group
data_display