From c6bed1a8439a529e24566e87924cd6cdd4201439 Mon Sep 17 00:00:00 2001 From: "Adrien Guilliams (adgu)" Date: Wed, 25 Oct 2023 13:04:56 +0200 Subject: [PATCH] [IMP] pos_self_order: display attributes with long text In this commit, we change the display of product attributes with long text. Now, if an attribute has a long text (>15 characters), the attributes will be displayed in 1 column. We also prevent the user from adding a product with attributes to the cart if some attributes are not selected. closes odoo/odoo#140045 Signed-off-by: Joseph Caburnay (jcb) --- addons/point_of_sale/models/pos_session.py | 2 +- .../attribute_selection.js | 42 ++++++++++++++++++- .../attribute_selection.xml | 6 ++- .../app/pages/product_page/product_page.js | 5 +++ .../app/pages/product_page/product_page.xml | 2 +- 5 files changed, 52 insertions(+), 5 deletions(-) diff --git a/addons/point_of_sale/models/pos_session.py b/addons/point_of_sale/models/pos_session.py index 0f2f1237e03..af0e558d3ff 100644 --- a/addons/point_of_sale/models/pos_session.py +++ b/addons/point_of_sale/models/pos_session.py @@ -2243,7 +2243,7 @@ class PosSession(models.Model): 'models_data': self.get_onboarding_data(), 'successful': allowed, } - + def _get_closed_orders(self): return self.order_ids.filtered(lambda o: o.state not in ['draft', 'cancel']) diff --git a/addons/pos_self_order/static/src/app/components/attribute_selection/attribute_selection.js b/addons/pos_self_order/static/src/app/components/attribute_selection/attribute_selection.js index dd562a4b466..187ec2e7a7c 100644 --- a/addons/pos_self_order/static/src/app/components/attribute_selection/attribute_selection.js +++ b/addons/pos_self_order/static/src/app/components/attribute_selection/attribute_selection.js @@ -1,6 +1,6 @@ /** @odoo-module */ -import { Component, useState } from "@odoo/owl"; +import { Component, onMounted, useRef, useState } from "@odoo/owl"; import { ProductCustomAttribute } from "@point_of_sale/app/store/models/product_custom_attribute"; import { useSelfOrder } from "@pos_self_order/app/self_order_service"; import { attributeFlatter, attributeFormatter } from "@pos_self_order/app/utils"; @@ -15,6 +15,16 @@ export class AttributeSelection extends Component { this.numberOfAttributes = this.props.product.attributes.length; this.currentAttribute = 0; + this.gridsRef = {}; + this.valuesRef = {}; + for (const attr of this.props.product.attributes) { + this.gridsRef[attr.id] = useRef(`attribute_grid_${attr.id}`); + this.valuesRef[attr.id] = {}; + for (const value of attr.values) { + this.valuesRef[attr.id][value.id] = useRef(`value_${attr.id}_${value.id}`); + } + } + this.state = useState({ showNext: false, showCustomInput: false, @@ -23,6 +33,36 @@ export class AttributeSelection extends Component { this.selectedValues = useState(this.env.selectedValues); this.initAttribute(); + onMounted(this.onMounted); + } + + onMounted() { + for (const attr of Object.entries(this.valuesRef)) { + let classicValue = 0; + for (const valueRef of Object.values(attr[1])) { + if (valueRef.el) { + const height = valueRef.el.parentNode.offsetHeight; + if (classicValue === 0) { + classicValue = height; + } else { + if (height !== classicValue || height > window.innerHeight * 0.18) { + this.gridsRef[attr[0]].el.classList.remove( + "row-cols-2", + "row-cols-sm-3", + "row-cols-md-4", + "row-cols-xl-5", + "row-cols-xxl-6" + ); + this.gridsRef[attr[0]].el.classList.add("row-cols-1"); + for (const gridValueRef of Object.values(attr[1])) { + gridValueRef.el.classList.remove("ratio", "ratio-16x9"); + } + break; + } + } + } + } + } } get showNextBtn() { diff --git a/addons/pos_self_order/static/src/app/components/attribute_selection/attribute_selection.xml b/addons/pos_self_order/static/src/app/components/attribute_selection/attribute_selection.xml index b88903f6db4..9f85c29a821 100644 --- a/addons/pos_self_order/static/src/app/components/attribute_selection/attribute_selection.xml +++ b/addons/pos_self_order/static/src/app/components/attribute_selection/attribute_selection.xml @@ -6,12 +6,14 @@

-
+