From 7675905b889df5249803424a582d8bb55b714bad Mon Sep 17 00:00:00 2001
From: "Loukas Wets (lowe)" <lowe@odoo.com>
Date: Mon, 6 Nov 2023 11:09:44 +0100
Subject: [PATCH] [IMP] pos_restaurant: category count display

Change the category count display in the order button.

closes odoo/odoo#143298

Signed-off-by: Joseph Caburnay (jcb) <jcb@odoo.com>
---
 .../product_screen/action_pad/action_pad.js     |  2 +-
 .../actionpad_widget/actionpad_widget.js        | 16 ++++++++++------
 .../actionpad_widget/actionpad_widget.xml       | 17 +++++++++++++----
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/action_pad/action_pad.js b/addons/point_of_sale/static/src/app/screens/product_screen/action_pad/action_pad.js
index d311f07c1b4..29fbe13ee21 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/action_pad/action_pad.js
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/action_pad/action_pad.js
@@ -25,6 +25,6 @@ export class ActionpadWidget extends Component {
         return this.pos.get_order()?.orderlines?.length;
     }
     getMainButtonClasses() {
-        return "button btn d-flex flex-column flex-fill align-items-center justify-content-center fw-bolder btn-lg py-5 rounded-0";
+        return "button btn d-flex flex-column flex-fill align-items-center justify-content-center fw-bolder btn-lg rounded-0";
     }
 }
diff --git a/addons/pos_restaurant/static/src/overrides/components/product_screen/actionpad_widget/actionpad_widget.js b/addons/pos_restaurant/static/src/overrides/components/product_screen/actionpad_widget/actionpad_widget.js
index 1c2ae0b350e..5f0ab700003 100644
--- a/addons/pos_restaurant/static/src/overrides/components/product_screen/actionpad_widget/actionpad_widget.js
+++ b/addons/pos_restaurant/static/src/overrides/components/product_screen/actionpad_widget/actionpad_widget.js
@@ -60,11 +60,15 @@ patch(ActionpadWidget.prototype, {
             }
             return acc;
         }, {});
-
-        return Object.values(categories)
-            .map((value) => {
-                return `${value.name} ${value.count}`;
-            })
-            .join(" | ");
+        return Object.values(categories);
+    },
+    get displayCategoryCount() {
+        return this.categoryCount.slice(0, 3);
+    },
+    get isCategoryCountOverflow() {
+        if (this.categoryCount.length > 3) {
+            return true;
+        }
+        return false;
     },
 });
diff --git a/addons/pos_restaurant/static/src/overrides/components/product_screen/actionpad_widget/actionpad_widget.xml b/addons/pos_restaurant/static/src/overrides/components/product_screen/actionpad_widget/actionpad_widget.xml
index 4c15f285bad..24a7cde3d38 100644
--- a/addons/pos_restaurant/static/src/overrides/components/product_screen/actionpad_widget/actionpad_widget.xml
+++ b/addons/pos_restaurant/static/src/overrides/components/product_screen/actionpad_widget/actionpad_widget.xml
@@ -9,14 +9,23 @@
         <xpath expr="//button[hasclass('validation')]" position="after">
             <button
                 t-if="this.swapButton"
-                t-attf-class="submit-order w-100 h-100 {{getMainButtonClasses()}}"
+                t-attf-class="submit-order h-100 {{getMainButtonClasses()}}"
                 t-att-class="swapButtonClasses"
-                t-on-click="submitOrder">
+                t-on-click="submitOrder"
+                style="width: 170px;">
                 <i class="fa fa-cutlery"></i>
                 Order
-                <div class="break-line">
-                    <t t-esc="categoryCount" />
+                <div t-if="displayCategoryCount.length" class="break-line fw-normal fs-6 w-100  border-top mt-1 pt-1">
+                    <t t-foreach="displayCategoryCount" t-as="categoryCountLine"  t-key="categoryCountLine.id">
+                        <div class="row g-0 my-1 w-100">
+                            <label class="col text-start text-truncate ps-0" ><t t-esc="categoryCountLine.name"/></label>
+                            <label class="col-3 text-center rounded p-0" style="background-color:rgba(0, 0, 0, 0.3);"><t t-esc="categoryCountLine.count"/></label>
+                        </div>
+                    </t>
                 </div>
+                <t t-if="isCategoryCountOverflow">
+                    <div class="position-absolute bottom-0">...</div>
+                </t>
             </button>
         </xpath>
         <xpath expr="//button[hasclass('validation')]" position="attributes">