From b512d5f0b6df17ed69e2c91a2c1345326e25b4c7 Mon Sep 17 00:00:00 2001
From: "Loukas Wets (lowe)" <lowe@odoo.com>
Date: Mon, 11 Sep 2023 09:20:05 +0200
Subject: [PATCH] [FIX] point_of_sale: New mobile order list display

Prior to this commit the displayed order information in the order list
was inconsistent. This commit rearranges the displayed information.

Task-3502304

closes odoo/odoo#134969

Signed-off-by: Joseph Caburnay (jcb) <jcb@odoo.com>
---
 .../screens/ticket_screen/ticket_screen.xml   |  47 +++--
 .../static/tests/tours/TicketScreen.tour.js   |  10 +-
 .../tours/helpers/TicketScreenTourMethods.js  |  14 +-
 addons/pos_hr/static/tests/tours/PosHrTour.js | 168 +++++++++---------
 .../ticket_screen/ticket_screen.xml           |   5 +
 5 files changed, 130 insertions(+), 114 deletions(-)

diff --git a/addons/point_of_sale/static/src/app/screens/ticket_screen/ticket_screen.xml b/addons/point_of_sale/static/src/app/screens/ticket_screen/ticket_screen.xml
index bbb4a911217..c729c1ab7c5 100644
--- a/addons/point_of_sale/static/src/app/screens/ticket_screen/ticket_screen.xml
+++ b/addons/point_of_sale/static/src/app/screens/ticket_screen/ticket_screen.xml
@@ -58,39 +58,50 @@
                                 <div class="col narrow p-2">Status</div>
                                 <div class="col very-narrow p-2" name="delete"></div>
                             </div>
-                            <t t-foreach="_filteredOrderList" t-as="order" t-key="order.cid">
+                            <t t-if="!ui.isSmall" t-foreach="_filteredOrderList" t-as="order" t-key="order.cid">
                                 <div class="order-row" t-att-class="{ 'highlight bg-primary text-white': isHighlighted(order) }" t-on-click="() => this.onClickOrder(order)">
                                     <div class="col wide p-2 ">
                                         <div><t t-esc="getDate(order)"></t></div>
-                                        <div t-if="ui.isSmall"><t t-esc="getTotal(order)"></t></div>
                                     </div>
                                     <div class="col wide p-2">
                                         <div><t t-esc="order.name"></t></div>
-                                        <div t-if="ui.isSmall"><t t-esc="getStatus(order)"></t></div>
                                     </div>
-                                    <div class="col p-2" t-if="!ui.isSmall">
+                                    <div class="col p-2">
                                         <div><t t-esc="getPartner(order)"></t></div>
                                     </div>
-                                    <div t-if="showCardholderName() and !ui.isSmall" class="col p-2">
+                                    <div t-if="showCardholderName()" class="col p-2">
                                         <div><t t-esc="getCardholderName(order)"></t></div>
                                     </div>
+                                    <div class="col p-2">
+                                        <t t-esc="getCashier(order)"></t>
+                                    </div>
+                                    <div class="col end p-2">
+                                        <div><t t-esc="getTotal(order)"></t></div>
+                                    </div>
+                                    <div class="col narrow p-2">
+                                        <div><t t-esc="getStatus(order)"></t></div>
+                                    </div>
+                                    <div t-if="!shouldHideDeleteButton(order)" class="col very-narrow delete-button p-2" name="delete" t-on-click.stop="() => this.onDeleteOrder(order)">
+                                        <i class="fa fa-trash" aria-hidden="true"/>
+                                    </div>
+                                    <div t-else="" class="col very-narrow p-2"></div>
+                                </div>
+                            </t>
+                            <t t-if="ui.isSmall" t-foreach="_filteredOrderList" t-as="order" t-key="order.cid">
+                                <div class="mobileOrderList order-row" t-att-class="{ 'highlight bg-primary text-white': isHighlighted(order) }" t-on-click="() => this.onClickOrder(order)">
                                     <div class="col p-2 d-flex justify-content-between align-items-center">
-                                        <div t-if="ui.isSmall and getPartner(order)"><t t-esc="getPartner(order)"></t></div>
-                                        <div t-att-class = "ui.isSmall ? 'cashier':''"><t t-esc="getCashier(order)"></t></div>
-                                        <div t-if="ui.isSmall and !shouldHideDeleteButton(order)" class="col very-narrow delete-button p-2 rounded-2" name="delete" t-on-click.stop="() => this.onDeleteOrder(order)">
+                                        <div><t t-esc="order.name"></t></div>
+                                        <div><t t-esc="getTotal(order)"></t></div>
+                                    </div>
+                                    <div class="col p-2 d-flex justify-content-between align-items-center">
+                                        <div><t t-esc="getDate(order)"></t></div>
+                                        <div class="orderStatus"><t t-esc="getStatus(order)"></t></div>
+                                    </div>
+                                    <div class="col p-2">
+                                        <div t-if="!shouldHideDeleteButton(order)" class="col very-narrow delete-button p-2 rounded-2" name="delete" t-on-click.stop="() => this.onDeleteOrder(order)">
                                             <i class="fa fa-trash" aria-hidden="true"/> Delete
                                         </div>
                                     </div>
-                                    <div class="col end p-2" t-if="!ui.isSmall">
-                                        <div><t t-esc="getTotal(order)"></t></div>
-                                    </div>
-                                    <div class="col narrow p-2" t-if="!ui.isSmall">
-                                        <div><t t-esc="getStatus(order)"></t></div>
-                                    </div>
-                                    <div t-if="!shouldHideDeleteButton(order) and !ui.isSmall" class="col very-narrow delete-button p-2" name="delete" t-on-click.stop="() => this.onDeleteOrder(order)">
-                                        <i class="fa fa-trash" aria-hidden="true"/><t t-if="ui.isSmall"> Delete</t>
-                                    </div>
-                                    <div t-else="" class="col very-narrow p-2"></div>
                                 </div>
                             </t>
                         </t>
diff --git a/addons/point_of_sale/static/tests/tours/TicketScreen.tour.js b/addons/point_of_sale/static/tests/tours/TicketScreen.tour.js
index ad36aae9ab7..37bc5f24f20 100644
--- a/addons/point_of_sale/static/tests/tours/TicketScreen.tour.js
+++ b/addons/point_of_sale/static/tests/tours/TicketScreen.tour.js
@@ -42,7 +42,7 @@ registry.category("web_tour.tours").add("TicketScreenTour", {
         ProductScreen.do.clickCustomer("Nicole Ford");
         Chrome.do.clickMenuButton();
         Chrome.do.clickTicketButton();
-        TicketScreen.check.nthRowContains(2, "Nicole Ford");
+        TicketScreen.check.nthRowContains(2, "Nicole Ford", false);
         TicketScreen.do.clickNewTicket();
         ProductScreen.exec.addOrderline("Desk Pad", "1", "3");
         ProductScreen.do.clickPartnerButton();
@@ -51,7 +51,7 @@ registry.category("web_tour.tours").add("TicketScreenTour", {
         PaymentScreen.check.isShown();
         Chrome.do.clickMenuButton();
         Chrome.do.clickTicketButton();
-        TicketScreen.check.nthRowContains(3, "Brandon Freeman");
+        TicketScreen.check.nthRowContains(3, "Brandon Freeman", false);
         TicketScreen.do.clickNewTicket();
         ProductScreen.exec.addOrderline("Desk Pad", "2", "4");
         ProductScreen.do.clickPayButton();
@@ -70,9 +70,9 @@ registry.category("web_tour.tours").add("TicketScreenTour", {
         TicketScreen.do.selectFilter("All active orders");
         TicketScreen.check.nthRowContains(4, "Receipt");
         TicketScreen.do.search("Customer", "Nicole");
-        TicketScreen.check.nthRowContains(2, "Nicole");
+        TicketScreen.check.nthRowContains(2, "Nicole", false);
         TicketScreen.do.search("Customer", "Brandon");
-        TicketScreen.check.nthRowContains(2, "Brandon");
+        TicketScreen.check.nthRowContains(2, "Brandon", false);
         TicketScreen.do.search("Receipt Number", "-0005");
         TicketScreen.check.nthRowContains(2, "Receipt");
         // Close the TicketScreen to see the current order which is in ReceiptScreen.
@@ -97,7 +97,7 @@ registry.category("web_tour.tours").add("TicketScreenTour", {
         Chrome.do.clickMenuButton();
         Chrome.do.clickTicketButton();
         TicketScreen.do.selectFilter("Paid");
-        TicketScreen.check.nthRowContains(2, "Brandon Freeman");
+        TicketScreen.check.nthRowContains(2, "Brandon Freeman", false);
         TicketScreen.check.nthRowContains(3, "-0005");
         // Invoice order
         TicketScreen.do.selectOrder("-0005");
diff --git a/addons/point_of_sale/static/tests/tours/helpers/TicketScreenTourMethods.js b/addons/point_of_sale/static/tests/tours/helpers/TicketScreenTourMethods.js
index a678abb2166..d813b73aaab 100644
--- a/addons/point_of_sale/static/tests/tours/helpers/TicketScreenTourMethods.js
+++ b/addons/point_of_sale/static/tests/tours/helpers/TicketScreenTourMethods.js
@@ -32,7 +32,7 @@ class Do {
     selectOrder(orderName) {
         return [
             {
-                trigger: `.ticket-screen .order-row > .col:nth-child(2):contains("${orderName}")`,
+                trigger: `.ticket-screen .order-row > .col:contains("${orderName}")`,
             },
         ];
     }
@@ -51,11 +51,11 @@ class Do {
     deleteOrder(orderName) {
         return [
             {
-                trigger: `.ticket-screen .order-row > .col:nth-child(2):contains("${orderName}")`,
+                trigger: `.ticket-screen .order-row > .col:contains("${orderName}")`,
                 mobile: true,
             },
             {
-                trigger: `.ticket-screen .order-row:has(.col:nth-child(2):contains("${orderName}")) .delete-button`,
+                trigger: `.ticket-screen .order-row:has(.col:contains("${orderName}")) .delete-button`,
                 mobile: true,
             },
             {
@@ -168,12 +168,12 @@ class Check {
     checkStatus(orderName, status) {
         return [
             {
-                trigger: `.ticket-screen .order-row > .col:nth-child(2):contains("${orderName}") ~ .col:nth-child(6):contains(${status})`,
+                trigger: `.ticket-screen .order-row > .col:contains("${orderName}") ~ .col:nth-child(6):contains(${status})`,
                 run: () => {},
                 mobile: false,
             },
             {
-                trigger: `.ticket-screen .order-row .col:nth-child(2) div:contains("${orderName}") ~ div:contains(${status})`,
+                trigger: `.ticket-screen .order-row > .col:contains("${orderName}") ~ .col:nth-child(2):contains(${status})`,
                 run: () => {},
                 mobile: true,
             },
@@ -182,11 +182,13 @@ class Check {
     /**
      * Check if the nth row contains the given string.
      * Note that 1st row is the header-row.
+     * @param {boolean | undefined} viewMode true if in mobile view, false if in desktop, undefined if in both views.
      */
-    nthRowContains(n, string) {
+    nthRowContains(n, string, viewMode = undefined) {
         return [
             {
                 trigger: `.ticket-screen .orders > .order-row:nth-child(${n}):contains("${string}")`,
+                mobile: viewMode,
                 run: () => {},
             },
         ];
diff --git a/addons/pos_hr/static/tests/tours/PosHrTour.js b/addons/pos_hr/static/tests/tours/PosHrTour.js
index 0d7e6ab7456..21dee4dd2ea 100644
--- a/addons/pos_hr/static/tests/tours/PosHrTour.js
+++ b/addons/pos_hr/static/tests/tours/PosHrTour.js
@@ -10,89 +10,87 @@ import { SelectionPopup } from "@point_of_sale/../tests/tours/helpers/SelectionP
 import { getSteps, startSteps } from "@point_of_sale/../tests/tours/helpers/utils";
 import { registry } from "@web/core/registry";
 
-registry
-    .category("web_tour.tours")
-    .add("PosHrTour", { 
-        test: true, 
-        url: "/pos/ui", 
-        steps: () => {
-            startSteps();
-            
-            PosHr.check.loginScreenIsShown();
-            PosHr.do.clickLoginButton();
-            SelectionPopup.check.isShown();
-            SelectionPopup.check.hasSelectionItem("Pos Employee1");
-            SelectionPopup.check.hasSelectionItem("Pos Employee2");
-            SelectionPopup.check.hasSelectionItem("Mitchell Admin");
-            SelectionPopup.do.clickItem("Pos Employee1");
-            NumberPopup.check.isShown();
-            NumberPopup.do.enterValue("25");
-            NumberPopup.check.inputShownIs("••");
-            NumberPopup.do.pressNumpad("8 1");
-            NumberPopup.do.fillPopupValue("2581");
-            NumberPopup.check.inputShownIs("••••");
-            NumberPopup.do.clickConfirm();
-            ErrorPopup.check.isShown();
-            ErrorPopup.do.clickConfirm();
-            PosHr.do.clickLoginButton();
-            SelectionPopup.do.clickItem("Pos Employee1");
-            NumberPopup.check.isShown();
-            NumberPopup.do.enterValue("25");
-            NumberPopup.check.inputShownIs("••");
-            NumberPopup.do.pressNumpad("8 0");
-            NumberPopup.do.fillPopupValue("2580");
-            NumberPopup.check.inputShownIs("••••");
-            NumberPopup.do.clickConfirm();
-            ProductScreen.check.isShown();
-            ProductScreen.do.confirmOpeningPopup();
-            PosHr.check.cashierNameIs("Pos Employee1");
-            PosHr.do.clickCashierName();
-            SelectionPopup.do.clickItem("Mitchell Admin");
-            PosHr.check.cashierNameIs("Mitchell Admin");
-            Chrome.do.clickMenuButton();
-            PosHr.do.clickLockButton();
-            PosHr.do.clickLoginButton();
-            SelectionPopup.do.clickItem("Pos Employee2");
-            NumberPopup.do.enterValue("12");
-            NumberPopup.check.inputShownIs("••");
-            NumberPopup.do.pressNumpad("3 4");
-            NumberPopup.do.fillPopupValue("1234");
-            NumberPopup.check.inputShownIs("••••");
-            NumberPopup.do.clickConfirm();
-            ProductScreen.check.isShown();
-            ProductScreen.do.clickHomeCategory();
-            
-            // Create orders and check if the ticket list has the right employee for each order
-            // order for employee 2
-            ProductScreen.exec.addOrderline("Desk Pad", "1", "2");
-            ProductScreen.check.totalAmountIs("2.0");
-            Chrome.do.clickMenuButton();
-            Chrome.do.clickTicketButton();
-            TicketScreen.check.nthRowContains(2, "Pos Employee2");
-            
-            // order for employee 1
-            Chrome.do.clickMenuButton();
-            PosHr.do.clickLockButton();
-            PosHr.exec.login("Pos Employee1", "2580");
-            TicketScreen.do.clickNewTicket();
-            ProductScreen.exec.addOrderline("Desk Pad", "1", "4");
-            ProductScreen.check.totalAmountIs("4.0");
-            Chrome.do.clickMenuButton();
-            Chrome.do.clickTicketButton();
-            TicketScreen.check.nthRowContains(2, "Pos Employee2");
-            TicketScreen.check.nthRowContains(3, "Pos Employee1");
-            
-            // order for admin
-            PosHr.do.clickCashierName();
-            SelectionPopup.do.clickItem("Mitchell Admin");
-            PosHr.check.cashierNameIs("Mitchell Admin");
-            TicketScreen.do.clickNewTicket();
-            ProductScreen.exec.addOrderline("Desk Pad", "1", "8");
-            ProductScreen.check.totalAmountIs("8.0");
-            Chrome.do.clickMenuButton();
-            Chrome.do.clickTicketButton();
-            TicketScreen.check.nthRowContains(4, "Mitchell Admin");
+registry.category("web_tour.tours").add("PosHrTour", {
+    test: true,
+    url: "/pos/ui",
+    steps: () => {
+        startSteps();
 
-            return getSteps(); 
-        } 
-    });
+        PosHr.check.loginScreenIsShown();
+        PosHr.do.clickLoginButton();
+        SelectionPopup.check.isShown();
+        SelectionPopup.check.hasSelectionItem("Pos Employee1");
+        SelectionPopup.check.hasSelectionItem("Pos Employee2");
+        SelectionPopup.check.hasSelectionItem("Mitchell Admin");
+        SelectionPopup.do.clickItem("Pos Employee1");
+        NumberPopup.check.isShown();
+        NumberPopup.do.enterValue("25");
+        NumberPopup.check.inputShownIs("••");
+        NumberPopup.do.pressNumpad("8 1");
+        NumberPopup.do.fillPopupValue("2581");
+        NumberPopup.check.inputShownIs("••••");
+        NumberPopup.do.clickConfirm();
+        ErrorPopup.check.isShown();
+        ErrorPopup.do.clickConfirm();
+        PosHr.do.clickLoginButton();
+        SelectionPopup.do.clickItem("Pos Employee1");
+        NumberPopup.check.isShown();
+        NumberPopup.do.enterValue("25");
+        NumberPopup.check.inputShownIs("••");
+        NumberPopup.do.pressNumpad("8 0");
+        NumberPopup.do.fillPopupValue("2580");
+        NumberPopup.check.inputShownIs("••••");
+        NumberPopup.do.clickConfirm();
+        ProductScreen.check.isShown();
+        ProductScreen.do.confirmOpeningPopup();
+        PosHr.check.cashierNameIs("Pos Employee1");
+        PosHr.do.clickCashierName();
+        SelectionPopup.do.clickItem("Mitchell Admin");
+        PosHr.check.cashierNameIs("Mitchell Admin");
+        Chrome.do.clickMenuButton();
+        PosHr.do.clickLockButton();
+        PosHr.do.clickLoginButton();
+        SelectionPopup.do.clickItem("Pos Employee2");
+        NumberPopup.do.enterValue("12");
+        NumberPopup.check.inputShownIs("••");
+        NumberPopup.do.pressNumpad("3 4");
+        NumberPopup.do.fillPopupValue("1234");
+        NumberPopup.check.inputShownIs("••••");
+        NumberPopup.do.clickConfirm();
+        ProductScreen.check.isShown();
+        ProductScreen.do.clickHomeCategory();
+
+        // Create orders and check if the ticket list has the right employee for each order
+        // order for employee 2
+        ProductScreen.exec.addOrderline("Desk Pad", "1", "2");
+        ProductScreen.check.totalAmountIs("2.0");
+        Chrome.do.clickMenuButton();
+        Chrome.do.clickTicketButton();
+        TicketScreen.check.nthRowContains(2, "Pos Employee2", false);
+
+        // order for employee 1
+        Chrome.do.clickMenuButton();
+        PosHr.do.clickLockButton();
+        PosHr.exec.login("Pos Employee1", "2580");
+        TicketScreen.do.clickNewTicket();
+        ProductScreen.exec.addOrderline("Desk Pad", "1", "4");
+        ProductScreen.check.totalAmountIs("4.0");
+        Chrome.do.clickMenuButton();
+        Chrome.do.clickTicketButton();
+        TicketScreen.check.nthRowContains(2, "Pos Employee2", false);
+        TicketScreen.check.nthRowContains(3, "Pos Employee1", false);
+
+        // order for admin
+        PosHr.do.clickCashierName();
+        SelectionPopup.do.clickItem("Mitchell Admin");
+        PosHr.check.cashierNameIs("Mitchell Admin");
+        TicketScreen.do.clickNewTicket();
+        ProductScreen.exec.addOrderline("Desk Pad", "1", "8");
+        ProductScreen.check.totalAmountIs("8.0");
+        Chrome.do.clickMenuButton();
+        Chrome.do.clickTicketButton();
+        TicketScreen.check.nthRowContains(4, "Mitchell Admin", false);
+
+        return getSteps();
+    },
+});
diff --git a/addons/pos_restaurant/static/src/overrides/components/ticket_screen/ticket_screen.xml b/addons/pos_restaurant/static/src/overrides/components/ticket_screen/ticket_screen.xml
index 5bce5f3423a..5cee71814c8 100644
--- a/addons/pos_restaurant/static/src/overrides/components/ticket_screen/ticket_screen.xml
+++ b/addons/pos_restaurant/static/src/overrides/components/ticket_screen/ticket_screen.xml
@@ -18,6 +18,11 @@
                 <div><TipCell order="order" /></div>
             </div>
         </xpath>
+        <xpath expr="//div[hasclass('mobileOrderList')]//div[hasclass('orderStatus')]" position="before">
+            <t t-if="order.tableId">
+                <div><t t-esc="getTable(order)"></t></div>
+            </t>
+        </xpath>
         <xpath expr="//div[hasclass('buttons')]" position="inside">
             <button class="settle-tips btn btn-lg btn-primary" t-if="_state.ui.filter == 'TIPPING'" t-on-click="settleTips">Settle</button>
         </xpath>