From bd1acd4877ca4be23f0f03590e434bc39631c2c2 Mon Sep 17 00:00:00 2001
From: roen-odoo <roen@odoo.com>
Date: Fri, 7 Apr 2023 13:39:12 +0000
Subject: [PATCH] [FIX] point_of_sale: long product name completely visible

Current behavior:
When a product had a too long name, the name was truncated and couldn't
be completely seen.

Steps to reproduce:
- Change the name of a product to a very long name with spaces
- Open the POS
- The product name is truncated

Note:
To fix this we stop showing placeholders when a product doesn't have an
image set.

opw-3245538

closes odoo/odoo#121982

X-original-commit: 13a20470238e14465b4010096f0f6914c1e93a3f
Signed-off-by: Heinz Robin (rhe) <rhe@odoo.com>
Signed-off-by: Engels Robin (roen) <roen@odoo.com>
---
 addons/point_of_sale/models/pos_session.py    |  3 ++-
 addons/point_of_sale/static/src/scss/pos.scss |  4 ++++
 .../xml/Screens/ProductScreen/ProductItem.xml | 22 ++++++++++---------
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/addons/point_of_sale/models/pos_session.py b/addons/point_of_sale/models/pos_session.py
index d15180bcd2a..c51ba5e2d85 100644
--- a/addons/point_of_sale/models/pos_session.py
+++ b/addons/point_of_sale/models/pos_session.py
@@ -1925,7 +1925,7 @@ class PosSession(models.Model):
                 'fields': [
                     'display_name', 'lst_price', 'standard_price', 'categ_id', 'pos_categ_id', 'taxes_id', 'barcode',
                     'default_code', 'to_weight', 'uom_id', 'description_sale', 'description', 'product_tmpl_id', 'tracking',
-                    'write_date', 'available_in_pos', 'attribute_line_ids', 'active'
+                    'write_date', 'available_in_pos', 'attribute_line_ids', 'active', 'image_128'
                 ],
                 'order': 'sequence,default_code,name',
             },
@@ -1945,6 +1945,7 @@ class PosSession(models.Model):
         product_category_by_id = {category['id']: category for category in categories}
         for product in products:
             product['categ'] = product_category_by_id[product['categ_id'][0]]
+            product['image_128'] = bool(product['image_128'])
 
     def _get_pos_ui_product_product(self, params):
         self = self.with_context(**params['context'])
diff --git a/addons/point_of_sale/static/src/scss/pos.scss b/addons/point_of_sale/static/src/scss/pos.scss
index 859dcdd6186..af0f883ea54 100644
--- a/addons/point_of_sale/static/src/scss/pos.scss
+++ b/addons/point_of_sale/static/src/scss/pos.scss
@@ -1145,6 +1145,10 @@ td {
     padding: 0 map-get($spacers, 2) map-get($spacers, 2);
 }
 
+.pos .product .product-name.no-image {
+    -webkit-line-clamp: 9;
+}
+
 .pos .product .product-info-button {
     position: absolute;
     top: 2px;
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductItem.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductItem.xml
index 11536910ae9..5c7a5456e3f 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductItem.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductItem.xml
@@ -6,17 +6,19 @@
                  t-on-click="() => this.pos.addProductToCurrentOrder(props.product)"
                  t-att-data-product-id="props.product.id"
                  t-attf-aria-labelledby="article_product_{{props.product.id}}">
-            <div class="product-img">
-                <img t-att-src="imageUrl" t-att-alt="props.product.display_name" />
-            </div>
-            <div class="product-content">
-                <div class="product-name" t-attf-id="article_product_{{props.product.id}}">
-                    <t t-esc="props.product.display_name" />
+                <t t-if="props.product.image_128">
+                    <div class="product-img">
+                        <img t-att-src="imageUrl" t-att-alt="props.product.display_name" />
+                    </div>
+                </t>
+                <div class="product-content">
+                    <div t-attf-class="#{props.product.image_128 ? 'product-name' : 'product-name no-image' }" t-attf-id="article_product_{{props.product.id}}">
+                        <t t-esc="props.product.display_name" />
+                    </div>
+                    <span class="price-tag">
+                        <t t-esc="price" />
+                    </span>
                 </div>
-                <span class="price-tag">
-                    <t t-esc="price" />
-                </span>
-            </div>
         </article>
     </t>