+
+ 
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+
+ + Advanced Search Widget
++ An Advanced Design of Search Menu Items and Advanced + Expression for Category Filter Options
+
+
+
+
+ 
+
+
+ + Explore This + Module
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Overview +
+
+
+
+
+
+
+ Here, we show an advanced view of the search menus, including the
+ filter, group by, and favourites options. For adding unique filters, it
+ defines advanced expressions. The user-friendly design also includes
+ options to save favourites and group by customers.
+
+
+
+
+ 
+
+
+ + Features +
+
+
+
+
+
+
+
+
+ 
+ Search Menus are in single dropdown.
+
+
+ Search Menus are in single dropdown.
+
+
+ Advanced expressions are available for custom filter choices.
+
+
+ Advanced expressions are available for custom filter choices.
+
+
+ Search menus with a user-friendly interface
+
+
+ Search menus with a user-friendly interface
+
+
+
+ 
+
+
+ + Screenshots +
+
+
+
+
+
+
+
+
+ 
+
+
+ The dropdown arrow symbol allows you to view the search menus in more detail.
+
+
+ 
+
+
+ + Advanced Custom Filter view
+By selecting "Add Custom Filter", you can get an enhanced view with branch and node criteria. The ' + ' button allows you to add numerous nodes.
+
+
+ 
+
+
+ Branch condition of Custom Filter
+The new capability or requirement is that we can now add a single filter with two conditions.
+
+
+ 
+
+
+ + Add Custom Group
+Added a wizard window for the opportunity to add a custom group.
+
+
+ 
+
+
+ + Save current search feature of Favorites menu
++ Added a wizard window for the opportunity to save current search feature.
+
+
+
+
+ 
+
+
+ + Related + Products +
+
+
+
+
+
+
+
+
+ 
+
+
+
+ 
+
+
+ + Our Services +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Odoo + Customization
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+
+
+ 
+
+
+ + Odoo + Support
+
+
+
+
+ 
+
+
+ + Hire + Odoo + Developer
+
+
+
+
+ 
+
+
+ + Odoo + Integration
+
+
+
+
+
+ 
+
+
+ + Odoo + Migration
+
+
+
+
+ 
+
+
+ + Odoo + Consultancy
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Licensing Consultancy
+
+
+
+
+ 
+
+
+ + Our + Industries +
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Trading +
++ Easily procure + and + sell your products
+
+
+
+
+ 
+
+
+ + POS +
++ Easy + configuration + and convivial experience
+
+
+
+
+ 
+
+
+ + Education +
++ A platform for + educational management
+
+
+
+
+ 
+
+
+ + Manufacturing +
++ Plan, track and + schedule your operations
+
+
+
+
+ 
+
+
+ + E-commerce & Website +
++ Mobile + friendly, + awe-inspiring product pages
+
+
+
+
+ 
+
+
+ + Service Management +
++ Keep track of + services and invoice
+
+
+
+
+ 
+
+
+ + Restaurant +
++ Run your bar or + restaurant methodically
+
+
+
+ 
+
+
+ + Hotel Management +
++ An + all-inclusive + hotel management application
+
+
+
+ 
+
+
+ + Support +
+
+
+
\ No newline at end of file
diff --git a/advanced_search_widget/static/src/js/SearchWidget.js b/advanced_search_widget/static/src/js/SearchWidget.js
new file mode 100644
index 000000000..7eea2b958
--- /dev/null
+++ b/advanced_search_widget/static/src/js/SearchWidget.js
@@ -0,0 +1,135 @@
+/** @odoo-module **/
+
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { registry } from "@web/core/registry";
+import { useBus, useService } from "@web/core/utils/hooks";
+import { Component } from "@odoo/owl";
+import { SearchDropdownItem } from "@web/search/search_dropdown_item/search_dropdown_item";
+import { CustomGroupByItem } from "@web/search/group_by_menu/custom_group_by_item";
+import { FACET_ICONS, GROUPABLE_TYPES } from "@web/search/utils/misc";
+import { sortBy } from "@web/core/utils/arrays";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
+import { _t } from "@web/core/l10n/translation";
+import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
+import { DomainSelectorDialog } from "@web/core/domain_selector_dialog/domain_selector_dialog";
+const favoriteMenuRegistry = registry.category("favoriteMenu");
+
+export class SearchWidget extends Component {
+ setup() {
+ // Filter
+ this.dialogService = useService("dialog");
+ this.filterIcon = FACET_ICONS.filter;
+ // GroupBy
+ const fields = [];
+ for (const [fieldName, field] of Object.entries(this.env.searchModel.searchViewFields)) {
+ if (this.validateField(fieldName, field)) {
+ fields.push(Object.assign({ name: fieldName }, field));
+ }
+ }
+ this.groupByIcon = FACET_ICONS.groupBy;
+ this.fields = sortBy(fields, "string");
+ // Favorite
+ this.favoriteIcon = FACET_ICONS.favorite;
+ useBus(this.env.searchModel, "update", this.render);
+ }
+
+// Filter Menu
+ get Filteritems() {
+ // Get filter items for the menu.
+ return this.env.searchModel.getSearchItems((searchItem) =>
+ ["filter", "dateFilter"].includes(searchItem.type)
+ );
+ }
+ onFilterSelected({ itemId, optionId }) {
+ // Handle selection of a filter item.
+ if (optionId) {
+ this.env.searchModel.toggleDateFilter(itemId, optionId);
+ } else {
+ this.env.searchModel.toggleSearchItem(itemId);
+ }
+ }
+// Add custom filter dialog
+ onAddCustomFilterClick() {
+ const { _context: context, resModel } = this.env.searchModel;
+ this.dialogService.add(DomainSelectorDialog, {
+ resModel,
+ domain : "[]",
+ context,
+ readonly : false,
+ title: _t("Add Custom Filter"),
+ onSave: (domain) => this.env.searchModel.splitAndAddDomain(domain),
+ isDebugMode: !!this.env.debug,
+ })
+ }
+
+// GroupBy Menu
+ get groupByitems() {
+ // Get groupBy items for the menu.
+ return this.env.searchModel.getSearchItems((searchItem) =>
+ ["groupBy", "dateGroupBy"].includes(searchItem.type)
+ );
+ }
+ onGroupBySelected({ itemId, optionId }) {
+ // Handle selection of a groupBy item.
+ if (optionId) {
+ this.env.searchModel.toggleDateGroupBy(itemId, optionId);
+ } else {
+ this.env.searchModel.toggleSearchItem(itemId);
+ }
+ }
+ onAddCustomGroup(fieldName) {
+ // Create new custom group by
+ this.env.searchModel.createNewGroupBy(fieldName);
+ }
+ get hideCustomGroupBy() {
+ // Hide new custom group by
+ return this.env.searchModel.hideCustomGroupBy || false;
+ }
+ validateField(fieldName, field) {
+ // Validate if a field is suitable for groupBy
+ const { sortable, store, type } = field;
+ return (
+ (type === "many2many" ? store : sortable) &&
+ fieldName !== "id" &&
+ GROUPABLE_TYPES.includes(type)
+ );
+ }
+// Favorite Menu
+ get favoriteitems() {
+ // Get favorite items for the menu.
+ const favorites = this.env.searchModel.getSearchItems(
+ (searchItem) => searchItem.type === "favorite"
+ );
+ const registryMenus = [];
+ for (const item of favoriteMenuRegistry.getAll()) {
+ if ("isDisplayed" in item ? item.isDisplayed(this.env) : true) {
+ registryMenus.push({
+ Component: item.Component,
+ groupNumber: item.groupNumber,
+ key: item.Component.name,
+ });
+ }
+ }
+ return [...favorites, ...registryMenus];
+ }
+ onFavoriteSelected(itemId) {
+ this.env.searchModel.toggleSearchItem(itemId);
+ }
+ openConfirmationDialog(itemId) {
+ // Open a confirmation dialog for removing a favorite item.
+ const { userId } = this.favoriteitems.find((item) => item.id === itemId);
+ const dialogProps = {
+ title: this.env._t("Warning"),
+ body: userId
+ ? this.env._t("Are you sure that you want to remove this filter?")
+ : this.env._t(
+ "This filter is global and will be removed for everybody if you continue."
+ ),
+ confirm: () => this.env.searchModel.deleteFavorite(itemId),
+ cancel: () => {},
+ };
+ this.dialogService.add(ConfirmationDialog, dialogProps);
+ }
+}
+SearchWidget.template = "SearchWidget";
+SearchWidget.components = {Dropdown, CustomGroupByItem, DropdownItem:SearchDropdownItem};
diff --git a/advanced_search_widget/static/src/js/domain_selector_dialog.js b/advanced_search_widget/static/src/js/domain_selector_dialog.js
new file mode 100644
index 000000000..3dd92c378
--- /dev/null
+++ b/advanced_search_widget/static/src/js/domain_selector_dialog.js
@@ -0,0 +1,58 @@
+/** @odoo-module **/
+/**
+ * This file is used to add some features to DomainSelectorDialog .
+*/
+import { DomainSelectorDialog } from "@web/core/domain_selector_dialog/domain_selector_dialog";
+import {useService } from "@web/core/utils/hooks";
+import { useState } from "@odoo/owl";
+import { patch } from "@web/core/utils/patch";
+import { _t } from "@web/core/l10n/translation";
+import { Domain } from "@web/core/domain";
+
+patch(DomainSelectorDialog.prototype, 'advanced_search_widget', {
+ setup() {
+ this.orm = useService("orm");
+ this.notification = useService("notification");
+ this.state = useState({
+ domain: this.props.domain
+ });
+ return this._super(...arguments);
+ },
+ get dialogTitle() {
+ // Return title of the DomainSelectorDialog
+ return this.props.title || _t("Domain");
+ },
+ get domainSelectorProps() {
+ // Default domain selector props values
+ return {
+ className: this.props.className,
+ resModel: this.props.resModel,
+ readonly: this.props.readonly,
+ isDebugMode: this.props.isDebugMode,
+ defaultLeafValue: this.props.defaultLeafValue,
+ value: this.state.domain || this.props.domain,
+ update: (domain) => {
+ this.state.domain = domain;
+ },
+ };
+ },
+ async onSave() {
+ // It will apply the domain as new filter
+ if (!this.state.domain){
+ this.notification.add(this.env._t("Domain is invalid. Please correct it"), {
+ type: "danger",
+ });
+ }
+ else{
+ this.props.onSave(this.state.domain);
+ this.props.close();
+ }
+ },
+});
+DomainSelectorDialog.props = {
+ ...DomainSelectorDialog.props,
+ onSave: Function,
+ title: { type: String, optional: true },
+ context: { type: Object, optional: true },
+ domain: { type: String, optional: true },
+};
diff --git a/advanced_search_widget/static/src/js/domain_tree.js b/advanced_search_widget/static/src/js/domain_tree.js
new file mode 100644
index 000000000..6e1f310f1
--- /dev/null
+++ b/advanced_search_widget/static/src/js/domain_tree.js
@@ -0,0 +1,159 @@
+/** @odoo-module **/
+/**
+ * This file is used to create the domain as tree structure based on the
+ branch and node domains and also based on the operator.
+*/
+import { Domain } from "@web/core/domain";
+import { formatAST, toPyValue} from "@web/core/py_js/py_utils";
+const TERM_OPERATORS_NEGATION = {
+ "<": ">=",
+ ">": "<=",
+ "<=": ">",
+ ">=": "<",
+ "=": "!=",
+ "!=": "=",
+ in: "not in",
+ like: "not like",
+ ilike: "not ilike",
+ "not in": "in",
+ "not like": "like",
+ "not ilike": "ilike",
+};
+
+function _construcTree(ASTs, distributeNot, negate = false) {
+ // Construct a tree structure based on the branch and node domains and the operator.
+ const [firstAST, ...tailASTs] = ASTs;
+
+ if (firstAST.type === 1 && firstAST.value === "!") {
+ return _construcTree(tailASTs, distributeNot, !negate);
+ }
+
+ const tree = {
+ type: firstAST.type === 1 ? "connector" : "condition"
+ };
+ if (tree.type === "connector") {
+ tree.value = firstAST.value;
+ if (distributeNot && negate) {
+ tree.value = tree.value === "&" ? "|" : "&";
+ tree.negate = false;
+ } else {
+ tree.negate = negate;
+ }
+ tree.children = [];
+ } else {
+ const [pathAST, operatorAST, valueAST] = firstAST.value;
+ tree.path = pathAST.value;
+ if (negate && TERM_OPERATORS_NEGATION[operatorAST.value]) {
+ tree.operator = TERM_OPERATORS_NEGATION[operatorAST.value];
+ } else {
+ tree.operator = operatorAST.value;
+ tree.negate = negate;
+ }
+ tree.valueAST = valueAST;
+ }
+ let remaimingASTs = tailASTs;
+ if (tree.type === "connector") {
+ for (let i = 0; i < 2; i++) {
+ const {
+ tree: child,
+ remaimingASTs: otherASTs
+ } = _construcTree(
+ remaimingASTs,
+ distributeNot,
+ distributeNot && negate
+ );
+ remaimingASTs = otherASTs;
+ if (child.type === "connector" && !child.negate && child.value === tree.value) {
+ tree.children.push(...child.children);
+ } else {
+ tree.children.push(child);
+ }
+ }
+ }
+ return {
+ tree,
+ remaimingASTs
+ };
+}
+
+function construcTree(initialASTs, options) {
+ // Construct a tree structure based on the initial abstract syntax trees and options
+ const value = options.defaultConnector || "&";
+ if (!initialASTs.length) {
+ return {
+ type: "connector",
+ value,
+ negate: false,
+ children: []
+ };
+ }
+ const {
+ tree
+ } = _construcTree(initialASTs, options.distributeNot);
+ if (tree.type === "condition") {
+ return {
+ type: "connector",
+ value,
+ negate: false,
+ children: [tree]
+ };
+ }
+ return tree;
+}
+
+function createBetweenOperators(tree, isRoot = true) {
+ // Create between operators from a tree structure representing the domain.
+ if (tree.type === "condition") {
+ return tree;
+ }
+ const processedChildren = tree.children.map((c) => createBetweenOperators(c, false));
+ if (tree.value === "|") {
+ return {
+ ...tree,
+ children: processedChildren
+ };
+ }
+ const children = [];
+ for (let i = 0; i < processedChildren.length; i++) {
+ const child1 = processedChildren[i];
+ const child2 = processedChildren[i + 1];
+ if (
+ child1.type === "condition" &&
+ child2 &&
+ child2.type === "condition" &&
+ child1.path === child2.path &&
+ child1.operator === ">=" &&
+ child2.operator === "<="
+ ) {
+ children.push({
+ type: "condition",
+ path: child1.path,
+ operator: "between",
+ valueAST: {
+ type: 4,
+ value: [child1.valueAST, child2.valueAST],
+ },
+ });
+ i += 1;
+ } else {
+ children.push(child1);
+ }
+ }
+ if (children.length === 1 && !isRoot) {
+ return {
+ ...children[0]
+ };
+ }
+ return {
+ ...tree,
+ children
+ };
+}
+
+export function toTree(domain, options = {}) {
+ // Convert a domain to a tree structure.
+ domain = new Domain(domain);
+ const domainAST = domain.ast;
+ const tree = construcTree(domainAST.value, options);
+ return createBetweenOperators(tree);
+}
diff --git a/advanced_search_widget/static/src/js/search_bar.js b/advanced_search_widget/static/src/js/search_bar.js
new file mode 100644
index 000000000..ee006ae0f
--- /dev/null
+++ b/advanced_search_widget/static/src/js/search_bar.js
@@ -0,0 +1,10 @@
+/** @odoo-module **/
+/**
+ * This file is used to add the SearchWidget component SearchBar .
+*/
+import { SearchBar } from "@web/search/search_bar/search_bar";
+import {SearchWidget} from "@advanced_search_widget/js/SearchWidget";
+
+SearchBar.components = {
+ SearchWidget,
+};
diff --git a/advanced_search_widget/static/src/js/search_model.js b/advanced_search_widget/static/src/js/search_model.js
new file mode 100644
index 000000000..455b2dd04
--- /dev/null
+++ b/advanced_search_widget/static/src/js/search_model.js
@@ -0,0 +1,81 @@
+/** @odoo-module **/
+/**
+ * This file is used to add a some functions to SearchModel for creating filter .
+ */
+import { SearchModel} from "@web/search/search_model";
+import {patch} from "@web/core/utils/patch";
+import {toTree} from "@advanced_search_widget/js/domain_tree"
+
+patch(SearchModel.prototype, 'advanced_search_widget', {
+ setup() {
+ return this._super(...arguments);
+ },
+ FieldType(tree, description) {
+ // Return a description of the domain operator string based on the operator
+ if (tree.valueAST.type === 2) {
+ description += ' is';
+ if (tree.operator === '=' && !tree.valueAST.value) {
+ description += ' not';
+ }
+ if (tree.operator === '!=' && tree.valueAST.value) {
+ description += ' not';
+ }
+ description += ' set';
+ } else if (tree.valueAST.type === 1) {
+ if (tree.operator === 'ilike') {
+ description += ' contains ' + tree.valueAST.value;
+ } else if (tree.operator === 'not ilike') {
+ description += ' does not contain ' + tree.valueAST.value;
+ } else {
+ description += ' ' + tree.operator + ' ' + tree.valueAST.value;
+ }
+ } else if (tree.valueAST.type === 0) {
+ description += ' ' + tree.operator + ' ' + tree.valueAST.value;
+ }
+ return description;
+ },
+
+ DomainDescription(tree) {
+ // Returns a description for the domain to show in the search bar.
+ const getFieldString = (path) => {
+ if (path.includes(".")) {
+ const [mainField, subField] = path.split(".");
+ return `${this.searchViewFields[mainField].string} ${this.searchViewFields[subField].string}`;
+ } else {
+ return this.searchViewFields[path].string;
+ }
+ };
+ let description;
+ switch (tree.type) {
+ case 'condition':
+ description = this.FieldType(tree, getFieldString(tree.path));
+ break;
+ case 'connector':
+ const childDescriptions = tree.children.map((childTree) =>
+ this.FieldType(childTree, getFieldString(childTree.path)));
+ description = childDescriptions.join(" or ");
+ break;
+ }
+ return description;
+ },
+
+ async splitAndAddDomain(domain) {
+ // It will split domain based domain is branch or node and create filters
+ const tree = toTree(domain);
+ const trees = !tree.negate && tree.value === "&" ? tree.children : [tree];
+ const promises = trees.map(async (tree) => {
+ const description = await this.DomainDescription(tree);
+ const preFilter = {
+ description,
+ domain: domain,
+ invisible: true,
+ type: "filter",
+ };
+ return preFilter;
+ });
+ const preFilters = await Promise.all(promises);
+ for (const preFilter of preFilters) {
+ this.createNewFilters([preFilter]);
+ }
+ }
+});
diff --git a/advanced_search_widget/static/src/xml/SearchWidget.xml b/advanced_search_widget/static/src/xml/SearchWidget.xml
new file mode 100644
index 000000000..9fb4a1c18
--- /dev/null
+++ b/advanced_search_widget/static/src/xml/SearchWidget.xml
@@ -0,0 +1,160 @@
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+