[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) <jcb@odoo.com>
2023-10-27 14:22:11 +00:00
parent 9634fd87bb
commit c6bed1a843
5 changed files with 52 additions and 5 deletions
@@ -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'])

@@ -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() {
@@ -6,12 +6,14 @@
                <div class="d-flex flex-column">
                    <div t-foreach="this.props.product.attributes" t-as="attribute" t-key="attribute.id">
                        <h2 t-out="attribute.name"/>
-                        <div class="row g-2 g-md-3 g-xl-4 justify-content-between justify-content-md-start row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-xl-5 row-cols-xxl-6 mb-5">
+                        <div class="row g-2 g-md-3 g-xl-4 justify-content-between justify-content-md-start mb-5 row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-xl-5 row-cols-xxl-6"
+                            t-ref="attribute_grid_{{attribute.id}}">
                            <t t-foreach="availableAttributeValue(attribute)" t-as="value" t-key="value.id">
                                <div class="col">
                                    <label t-attf-for="{{ attribute.id }}_{{ value.id }}"
                                            t-attf-class="self_order_attribute_selection_option {{ this.isChecked(attribute, value) ? 'text-bg-primary border-primary active' : '' }}
-                                            d-flex align-items-center justify-content-center h-100 rounded border ratio ratio-16x9">
+                                            d-flex align-items-center justify-content-center h-100 rounded border ratio ratio-16x9"
+                                            t-ref="value_{{attribute.id}}_{{value.id}}">
                                        <div class="name position-relative d-flex flex-column justify-content-center align-items-center flex-grow-1 w-100 p-4 text-center">
                                            <span t-out="value.name"/>
                                            <span t-if="shouldShowPriceExtra(value)">
@@ -28,6 +28,7 @@ export class ProductPage extends Component {
            qty: 1,
            customer_note: "",
            product: this.props.product,
+            selectedValues: this.env.selectedValues,
        });

        this.initState();
@@ -148,4 +149,8 @@ export class ProductPage extends Component {
    get showQtyButtons() {
        return this.props.product.self_order_available;
    }
+
+    isEveryValueSelected() {
+        return Object.values(this.state.selectedValues).find((value) => !value) == false;
+    }
 }
@@ -50,7 +50,7 @@
            </div>

            <div t-if="showQtyButtons and !props.onValidate" class="page-buttons d-flex justify-content-end p-3 gap-3 bg-view border-top">
-                <button t-if="showQtyButtons and !props.onValidate" class="btn btn-primary btn-lg" t-on-click="addToCart">Add to cart</button>
+                <button t-if="showQtyButtons and !props.onValidate" class="btn btn-primary btn-lg" t-att-class="{ 'disabled': this.isEveryValueSelected() }" t-on-click="addToCart">Add to cart</button>
            </div>
        </div>
    </t>