[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>

3 files changed, 80 insertions, 25 deletions

diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidget.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidget.xml
index c0a49a555b2..6b3f04bb320 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidget.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidget.xml
@@ -3,9 +3,9 @@
 
     <t t-name="ProductsWidget" owl="1">
       <div class="products-widget">
-          <ProductsWidgetControlPanel breadcrumbs="breadcrumbs"
-                                 subcategories="subcategories" />
-
+            <t t-if="!hasNoCategories">
+                <ProductsWidgetControlPanel breadcrumbs="breadcrumbs" subcategories="subcategories" />
+            </t>
             <ProductList products="productsToDisplay" searchWord="searchWord" />
         </div>
     </t>
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml
index c80a2a6d1ef..09c17501d52 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml
@@ -3,7 +3,10 @@
 
     <t t-name="ProductsWidgetControlPanel" owl="1">
         <div class="products-widget-control">
-            <div class="rightpane-header">
+            <div class="rightpane-header" t-att-class="{
+                'green-border-bottom': !env.pos.config.iface_display_categ_images,
+                'grey-border-bottom': env.pos.config.iface_display_categ_images,
+            }">
                 <!-- Breadcrumbs -->
                 <div class="breadcrumbs">
                     <HomeCategoryBreadcrumb subcategories="props.subcategories" currentCat="props.breadcrumbs[props.breadcrumbs.length - 1]"/>
@@ -13,36 +16,33 @@
                         </t>
                     </t>
                 </div>
-                <!-- Searchbox -->
-                <div class="searchbox">
-                    <input t-ref="search-word-input" placeholder="Search Products"
-                           t-on-keyup="updateSearch" />
-                    <span class="search-clear left">
-                        <i class="fa fa-search" />
-                    </span>
-                    <span class="search-clear right" t-on-click="clearSearch">
-                        <i class="fa fa-remove" />
-                    </span>
-                </div>
+                <!-- Subcategories -->
+                <t t-if="props.subcategories.length > 0 and !env.pos.config.iface_display_categ_images and !env.isMobile">
+                    <t t-foreach="props.subcategories" t-as="category" t-key="category.id">
+                        <CategorySimpleButton category="category" />
+                    </t>
+                </t>
             </div>
-            <!-- Subcategories -->
-            <t t-if="props.subcategories.length > 0 &amp;&amp; !env.isMobile">
+            <t t-if="props.subcategories.length > 0 and env.pos.config.iface_display_categ_images and !env.isMobile">
                 <div class="categories">
                     <div class="category-list-scroller">
-                        <div class="category-list"
-                             t-att-class="{simple: !env.pos.config.iface_display_categ_images}">
+                        <div class="category-list">
                             <t t-foreach="props.subcategories" t-as="category" t-key="category.id">
-                                <t t-if="env.pos.config.iface_display_categ_images">
-                                    <CategoryButton category="category" />
-                                </t>
-                                <t t-else="">
-                                    <CategorySimpleButton category="category" />
-                                </t>
+                                <CategoryButton category="category" />
                             </t>
                         </div>
                     </div>
                 </div>
             </t>
+            <Portal target="'.pos .search-bar-portal'">
+                <div class="search-box">
+                    <span class="icon"><i class="fa fa-search"></i></span>
+                    <span t-on-click="clearSearch" class="clear-icon">
+                        <i class="fa fa-times" aria-hidden="true"></i>
+                    </span>
+                    <input t-ref="search-word-input" type="text" placeholder="Search Products..." t-on-keyup="updateSearch" />
+                </div>
+            </Portal>
         </div>
     </t>
 
diff --git a/addons/point_of_sale/static/src/xml/Screens/TicketScreen/TicketScreen.xml b/addons/point_of_sale/static/src/xml/Screens/TicketScreen/TicketScreen.xml
new file mode 100644
index 00000000000..2aa890e029d
--- /dev/null
+++ b/addons/point_of_sale/static/src/xml/Screens/TicketScreen/TicketScreen.xml
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="TicketScreen" owl="1">
+        <div class="ticket-screen screen">
+            <div class="screen-content">
+                <div class="controls">
+                    <div class="buttons">
+                        <button t-if="showNewTicketButton" class="highlight" t-on-click="createNewOrder">New Ticket</button>
+                        <button class="discard" t-on-click="trigger('close-screen')">Discard</button>
+                    </div>
+                    <SearchBar config="searchBarConfig" placeholder="'Search Tickets...'" />
+                </div>
+                <div class="orders">
+                    <div class="header-row">
+                        <div class="col start wide">Date</div>
+                        <div class="col start wide">Receipt Number</div>
+                        <div class="col start">Customer</div>
+                        <div class="col start">Employee</div>
+                        <div class="col end">Total</div>
+                        <div class="col start narrow">Status</div>
+                        <div class="col center very-narrow" name="delete"></div>
+                    </div>
+                    <t t-foreach="filteredOrderList" t-as="order" t-key="order.cid">
+                        <div class="order-row pointer" t-on-click="selectOrder(order)">
+                            <div class="col start wide">
+                                <t t-esc="getDate(order)"></t>
+                            </div>
+                            <div class="col start wide">
+                                <t t-esc="order.name"></t>
+                            </div>
+                            <div class="col start">
+                                <t t-esc="getCustomer(order)"></t>
+                            </div>
+                            <div class="col start">
+                                <t t-esc="getEmployee(order)"></t>
+                            </div>
+                            <div class="col end">
+                                <t t-esc="getTotal(order)"></t>
+                            </div>
+                            <div class="col start narrow">
+                                <t t-esc="getStatus(order)"></t>
+                            </div>
+                            <div t-if="!hideDeleteButton(order)" class="col center very-narrow delete-button" name="delete" t-on-click.stop="deleteOrder(order)">
+                                <i class="fa fa-trash" aria-hidden="true"></i>
+                            </div>
+                            <div t-else="" class="col center very-narrow delete-button"></div>
+                        </div>
+                    </t>
+                </div>
+            </div>
+        </div>
+    </t>
+
+</templates>