[IMP] point_of_sale,pos_*: top bar improvements and ticket list

The following changes are made in this task:

1. Remove order tabs and replace with ticket list.
2. Top bar color change.
3. Search bar in the product screen is moved in the top bar.
4. List of sub-categories are now in the same line as the category
breadcrumbs.

closes odoo/odoo#55100

Task-id: 2276678
Signed-off-by: pimodoo <pimodoo@users.noreply.github.com>

13 files changed, 162 insertions, 60 deletions

diff --git a/addons/pos_restaurant/static/src/js/ChromeWidgets/BackToFloorButton.js b/addons/pos_restaurant/static/src/js/ChromeWidgets/BackToFloorButton.js
index dbd21c5fd32..c2b623500c8 100644
--- a/addons/pos_restaurant/static/src/js/ChromeWidgets/BackToFloorButton.js
+++ b/addons/pos_restaurant/static/src/js/ChromeWidgets/BackToFloorButton.js
@@ -1,22 +1,28 @@
-odoo.define('pos_restaurant.BackToFloorButton', function(require) {
+odoo.define('pos_restaurant.BackToFloorButton', function (require) {
     'use strict';
 
     const PosComponent = require('point_of_sale.PosComponent');
-    const { useListener } = require('web.custom_hooks');
     const Registries = require('point_of_sale.Registries');
+    const { posbus } = require('point_of_sale.utils');
 
     class BackToFloorButton extends PosComponent {
-        constructor() {
-            super(...arguments);
-            useListener('click', this._backToFloorScreen);
+        mounted() {
+            posbus.on('table-set', this, this.render);
+        }
+        willUnmount() {
+            posbus.on('table-set', this);
         }
         get table() {
-            return this.props.table;
+            return (this.env.pos && this.env.pos.table) || null;
         }
         get floor() {
-            return this.props.table.floor;
+            const table = this.table;
+            return table ? table.floor : null;
+        }
+        get hasTable() {
+            return this.table !== null;
         }
-        async _backToFloorScreen() {
+        backToFloorScreen() {
             this.showScreen('FloorScreen', { floor: this.floor });
         }
     }
diff --git a/addons/pos_restaurant/static/src/js/ChromeWidgets/OrderSelector.js b/addons/pos_restaurant/static/src/js/ChromeWidgets/OrderSelector.js
deleted file mode 100644
index 255b84db073..00000000000
--- a/addons/pos_restaurant/static/src/js/ChromeWidgets/OrderSelector.js
+++ /dev/null
@@ -1,20 +0,0 @@
-odoo.define('pos_restaurant.OrderSelector', function(require) {
-    'use strict';
-
-    const OrderSelector = require('point_of_sale.OrderSelector');
-    const Registries = require('point_of_sale.Registries');
-
-    const PosResOrderSelector = OrderSelector =>
-        class extends OrderSelector {
-            get currentTable() {
-                return this.env.pos.table;
-            }
-            get backToFloorButtonIsShown() {
-                return this.env.pos.config.iface_floorplan && this.currentTable;
-            }
-        };
-
-    Registries.Component.extend(OrderSelector, PosResOrderSelector);
-
-    return OrderSelector;
-});
diff --git a/addons/pos_restaurant/static/src/js/ChromeWidgets/TicketButton.js b/addons/pos_restaurant/static/src/js/ChromeWidgets/TicketButton.js
new file mode 100644
index 00000000000..1e66bf91352
--- /dev/null
+++ b/addons/pos_restaurant/static/src/js/ChromeWidgets/TicketButton.js
@@ -0,0 +1,33 @@
+odoo.define('pos_restaurant.TicketButton', function (require) {
+    'use strict';
+
+    const TicketButton = require('point_of_sale.TicketButton');
+    const Registries = require('point_of_sale.Registries');
+    const { posbus } = require('point_of_sale.utils');
+
+    const PosResTicketButton = (TicketButton) =>
+        class extends TicketButton {
+            mounted() {
+                posbus.on('table-set', this, this.render);
+            }
+            willUnmount() {
+                posbus.off('table-set', this);
+            }
+            /**
+             * If no table is set to pos, which means the current main screen
+             * is floor screen, then the order count should be based on all the orders.
+             */
+            get count() {
+                if (!this.env.pos || !this.env.pos.config) return 0;
+                if (this.env.pos.config.iface_floorplan && !this.env.pos.table) {
+                    return this.env.pos.get('orders').models.length;
+                } else {
+                    return super.count;
+                }
+            }
+        };
+
+    Registries.Component.extend(TicketButton, PosResTicketButton);
+
+    return TicketButton;
+});
diff --git a/addons/pos_restaurant/static/src/js/Screens/FloorScreen/FloorScreen.js b/addons/pos_restaurant/static/src/js/Screens/FloorScreen/FloorScreen.js
index 276663cf57c..1bf06c838f5 100644
--- a/addons/pos_restaurant/static/src/js/Screens/FloorScreen/FloorScreen.js
+++ b/addons/pos_restaurant/static/src/js/Screens/FloorScreen/FloorScreen.js
@@ -171,12 +171,12 @@ odoo.define('pos_restaurant.FloorScreen', function (require) {
                 }
             }
         }
-        async _onSelectTable(event) {
+        _onSelectTable(event) {
             const table = event.detail;
             if (this.state.isEditMode) {
                 this.state.selectedTableId = table.id;
             } else {
-                await this.env.pos.set_table(table);
+                this.env.pos.set_table(table);
             }
         }
         _onDeselectTable() {
diff --git a/addons/pos_restaurant/static/src/js/Screens/OrderManagementScreen/OrderManagementScreen.js b/addons/pos_restaurant/static/src/js/Screens/OrderManagementScreen/OrderManagementScreen.js
index e2a1ce65dce..8753be25753 100644
--- a/addons/pos_restaurant/static/src/js/Screens/OrderManagementScreen/OrderManagementScreen.js
+++ b/addons/pos_restaurant/static/src/js/Screens/OrderManagementScreen/OrderManagementScreen.js
@@ -12,10 +12,9 @@ odoo.define('pos_restaurant.OrderManagementScreen', function (require) {
             _setOrder(order) {
                 if (this.env.pos.config.module_pos_restaurant) {
                     const currentOrder = this.env.pos.get_order();
+                    this.env.pos.set_table(order.table, order);
                     if (currentOrder && currentOrder.uid === order.uid) {
                         this.close();
-                    } else {
-                        this.env.pos.set_table(order.table, order);
                     }
                 } else {
                     super._setOrder(order);
diff --git a/addons/pos_restaurant/static/src/js/Screens/ReceiptScreen/ReceiptScreen.js b/addons/pos_restaurant/static/src/js/Screens/ReceiptScreen/ReceiptScreen.js
index 689c3bf40ca..5909292e0db 100644
--- a/addons/pos_restaurant/static/src/js/Screens/ReceiptScreen/ReceiptScreen.js
+++ b/addons/pos_restaurant/static/src/js/Screens/ReceiptScreen/ReceiptScreen.js
@@ -20,6 +20,18 @@ odoo.define('pos_restaurant.ReceiptScreen', function(require) {
                     return super.nextScreen;
                 }
             }
+            /**
+             * If this order is synced to/from the server, then the draft needs to be deleted
+             * after the order is paid and the receipt screen is exited via 'Next Order' button.
+             * Thus, we set this order to be removed from server. Note that only the draft version
+             * is deleted if we trace the algorithm.
+             */
+            orderDone() {
+                if (this.env.pos.config.iface_floorplan) {
+                    this.env.pos.db.set_order_to_remove_from_server(this.currentOrder);
+                }
+                super.orderDone();
+            }
         };
 
     Registries.Component.extend(ReceiptScreen, PosResReceiptScreen);
diff --git a/addons/pos_restaurant/static/src/js/Screens/SplitBillScreen/SplitBillScreen.js b/addons/pos_restaurant/static/src/js/Screens/SplitBillScreen/SplitBillScreen.js
index 2390e35f7c4..f44af5bff7a 100644
--- a/addons/pos_restaurant/static/src/js/Screens/SplitBillScreen/SplitBillScreen.js
+++ b/addons/pos_restaurant/static/src/js/Screens/SplitBillScreen/SplitBillScreen.js
@@ -55,7 +55,7 @@ odoo.define('pos_restaurant.SplitBillScreen', function(require) {
             } else {
                 this._setQuantityOnCurrentOrder();
 
-                this.newOrder.set_screen_data('screen', { name: 'PaymentScreen' });
+                this.newOrder.set_screen_data({ name: 'PaymentScreen' });
 
                 // for the kitchen printer we assume that everything
                 // has already been sent to the kitchen before splitting
@@ -72,7 +72,7 @@ odoo.define('pos_restaurant.SplitBillScreen', function(require) {
                 this.newOrder.set_customer_count(1);
                 const newCustomerCount = this.currentOrder.get_customer_count() - 1;
                 this.currentOrder.set_customer_count(newCustomerCount || 1);
-                this.currentOrder.set_screen_data('screen', { name: 'ProductScreen' });
+                this.currentOrder.set_screen_data({ name: 'ProductScreen' });
 
                 this.env.pos.get('orders').add(this.newOrder);
                 this.env.pos.set('selectedOrder', this.newOrder);
diff --git a/addons/pos_restaurant/static/src/js/Screens/TicketScreen.js b/addons/pos_restaurant/static/src/js/Screens/TicketScreen.js
new file mode 100644
index 00000000000..2d5c3e004b2
--- /dev/null
+++ b/addons/pos_restaurant/static/src/js/Screens/TicketScreen.js
@@ -0,0 +1,54 @@
+odoo.define('pos_restaurant.TicketScreen', function (require) {
+    'use strict';
+
+    const TicketScreen = require('point_of_sale.TicketScreen');
+    const Registries = require('point_of_sale.Registries');
+    const { posbus } = require('point_of_sale.utils');
+
+    const PosResTicketScreen = (TicketScreen) =>
+        class extends TicketScreen {
+            close() {
+                super.close();
+                if (!this.env.pos.config.iface_floorplan) {
+                    // Make sure the 'table-set' event is triggered
+                    // to properly rerender the components that listens to it.
+                    posbus.trigger('table-set');
+                }
+            }
+            getTable(order) {
+                return `${order.table.floor.name} (${order.table.name})`;
+            }
+            get _searchFields() {
+                if (!this.env.pos.config.iface_floorplan) {
+                    return super._searchFields;
+                }
+                return Object.assign({}, super._searchFields, {
+                    Table: (order) => `${order.table.floor.name} (${order.table.name})`,
+                });
+            }
+            _setOrder(order) {
+                if (!this.env.pos.config.iface_floorplan) {
+                    super._setOrder(order);
+                } else if (order !== this.env.pos.get_order()) {
+                    // Only call set_table if the order is not the same as the current order.
+                    // This is to prevent syncing to the server because syncing is only intended
+                    // when going back to the floorscreen or opening a table.
+                    this.env.pos.set_table(order.table, order);
+                }
+            }
+            get showNewTicketButton() {
+                return this.env.pos.config.iface_floorplan ? Boolean(this.env.pos.table) : super.showNewTicketButton;
+            }
+            get orderList() {
+                if (this.env.pos.table) {
+                    return super.orderList;
+                } else {
+                    return this.env.pos.get('orders').models;
+                }
+            }
+        };
+
+    Registries.Component.extend(TicketScreen, PosResTicketScreen);
+
+    return TicketScreen;
+});
diff --git a/addons/pos_restaurant/static/src/js/floors.js b/addons/pos_restaurant/static/src/js/floors.js
index b6614c07ebe..51ded242c63 100644
--- a/addons/pos_restaurant/static/src/js/floors.js
+++ b/addons/pos_restaurant/static/src/js/floors.js
@@ -2,6 +2,8 @@ odoo.define('pos_restaurant.floors', function (require) {
 "use strict";
 
 var models = require('point_of_sale.models');
+const { Gui } = require('point_of_sale.Gui');
+const { posbus } = require('point_of_sale.utils');
 
 // At POS Startup, load the floors, and add them to the pos model
 models.load_models({
@@ -213,7 +215,12 @@ models.PosModel = models.PosModel.extend({
         this._get_from_server(table.id).then(function (server_orders) {
             var orders = self.get_order_list();
             orders.forEach(function(order){
-                if (order.server_id){
+                const screen = order.get_screen_data();
+                // Only remove the 'Receipt' status order when 'Next Order'
+                // from the receipt screen is clicked. We are bypassing the
+                // removal of paid order here to make sure those orders are
+                // still in the tickets list.
+                if (order.server_id && screen.name !== 'ReceiptScreen'){
                     self.get("orders").remove(order);
                     order.destroy();
                 }
@@ -257,6 +264,7 @@ models.PosModel = models.PosModel.extend({
         if(!table){
             this.sync_from_server(table, this.get_order_list(), this.get_order_with_uid());
             this.set_order(null);
+            this.table = null;
         } else if (this.order_to_transfer_to_different_table) {
             var order_ids = this.get_order_with_uid();
 
@@ -269,6 +277,7 @@ models.PosModel = models.PosModel.extend({
             this.table = table;
             this.sync_to_server(table, order);
         }
+        posbus.trigger('table-set');
     },
 
     // if we have tables, we do not load a default order, as the default order will be
@@ -284,9 +293,12 @@ models.PosModel = models.PosModel.extend({
     add_new_order: function() {
         if (this.config.iface_floorplan) {
             if (this.table) {
-                return _super_posmodel.add_new_order.call(this);
+                return _super_posmodel.add_new_order.apply(this, arguments);
             } else {
-                console.warn("WARNING: orders cannot be created when there is no active table in restaurant mode");
+                Gui.showPopup('ConfirmPopup', {
+                    title: 'Unable to create order',
+                    body: 'Orders cannot be created when there is no active table in restaurant mode',
+                });
                 return undefined;
             }
         } else {
@@ -298,7 +310,7 @@ models.PosModel = models.PosModel.extend({
     // get the list of unpaid orders (associated to the current table)
     get_order_list: function() {
         var orders = _super_posmodel.get_order_list.call(this);
-        if (!this.config.iface_floorplan) {
+        if (!(this.config && this.config.iface_floorplan)) {
             return orders;
         } else if (!this.table) {
             return [];
@@ -345,7 +357,7 @@ models.PosModel = models.PosModel.extend({
                 this.db.set_order_to_remove_from_server(removed_order);
             }
             if( (reason === 'abandon' || removed_order.temporary) && order_list.length > 0){
-                this.set_order(order_list[index] || order_list[order_list.length -1]);
+                this.set_order(order_list[index] || order_list[order_list.length - 1], { silent: true });
             } else if (order_list.length === 0) {
                 this.set_order(null);
             }
diff --git a/addons/pos_restaurant/static/src/xml/Chrome.xml b/addons/pos_restaurant/static/src/xml/Chrome.xml
new file mode 100644
index 00000000000..86032c07017
--- /dev/null
+++ b/addons/pos_restaurant/static/src/xml/Chrome.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="Chrome" t-inherit="point_of_sale.Chrome" t-inherit-mode="extension" owl="1">
+        <xpath expr="//div[hasclass('search-bar-portal')]" position="before">
+            <BackToFloorButton />
+        </xpath>
+    </t>
+
+</templates>
diff --git a/addons/pos_restaurant/static/src/xml/ChromeWidgets/BackToFloorButton.xml b/addons/pos_restaurant/static/src/xml/ChromeWidgets/BackToFloorButton.xml
index 1f36d2763f3..2b5c865ca18 100644
--- a/addons/pos_restaurant/static/src/xml/ChromeWidgets/BackToFloorButton.xml
+++ b/addons/pos_restaurant/static/src/xml/ChromeWidgets/BackToFloorButton.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="BackToFloorButton" owl="1">
-        <span class="order-button floor-button">
+        <span t-if="hasTable" class="order-button floor-button" t-on-click="backToFloorScreen">
             <i class="fa fa-angle-double-left" role="img" aria-label="Back to floor" title="Back to floor" />
             <span> </span>
             <span t-esc="floor.name" />
@@ -13,6 +13,7 @@
                 <span> )</span>
             </span>
         </span>
+        <span t-else=""></span>
     </t>
 
 </templates>
diff --git a/addons/pos_restaurant/static/src/xml/ChromeWidgets/OrderSelector.xml b/addons/pos_restaurant/static/src/xml/ChromeWidgets/OrderSelector.xml
deleted file mode 100644
index 824ff26bcee..00000000000
--- a/addons/pos_restaurant/static/src/xml/ChromeWidgets/OrderSelector.xml
+++ /dev/null
@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<templates id="template" xml:space="preserve">
-
-    <t t-name="OrderSelector" t-inherit="point_of_sale.OrderSelector" t-inherit-mode="extension" owl="1">
-        <xpath expr="//div[hasclass('order-selector')]//span[hasclass('orders')]//t" position="before">
-            <BackToFloorButton t-if="backToFloorButtonIsShown" table="currentTable" />
-        </xpath>
-        <xpath expr="//span[hasclass('order-sequence')]" position="replace">
-            <span class="order-sequence">
-                <t t-if="order.server_id and env.pos.pos_session.login_number != order.uid.split('-')[1]">
-                    <t t-esc="order.uid.substring(order.uid.indexOf('-') +1)" />
-                </t>
-                <t t-else="">
-                    <t t-esc="order.sequence_number" />
-                </t>
-            </span>
-        </xpath>
-    </t>
-
-</templates>
diff --git a/addons/pos_restaurant/static/src/xml/Screens/TicketScreen.xml b/addons/pos_restaurant/static/src/xml/Screens/TicketScreen.xml
new file mode 100644
index 00000000000..7430ee1a6b7
--- /dev/null
+++ b/addons/pos_restaurant/static/src/xml/Screens/TicketScreen.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="TicketScreen" t-inherit="point_of_sale.TicketScreen" t-inherit-mode="extension" owl="1">
+        <xpath expr="//div[hasclass('header-row')]//div[@name='delete']" position="before">
+            <div t-if="env.pos.config.iface_floorplan" class="col start" name="table">Table</div>
+        </xpath>
+        <xpath expr="//div[hasclass('order-row')]//div[@name='delete']" position="before">
+            <div t-if="env.pos.config.iface_floorplan" class="col start" name="table">
+                <t t-esc="getTable(order)"></t>
+            </div>
+        </xpath>
+    </t>
+
+</templates>