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

7 files changed, 153 insertions, 68 deletions

diff --git a/addons/point_of_sale/static/src/xml/Chrome.xml b/addons/point_of_sale/static/src/xml/Chrome.xml
index 39b267e9308..6c2d3c5f46d 100644
--- a/addons/point_of_sale/static/src/xml/Chrome.xml
+++ b/addons/point_of_sale/static/src/xml/Chrome.xml
@@ -4,15 +4,22 @@
     <t t-name="Chrome" owl="1">
         <div class="pos" t-att-class="{ 'big-scrollbars': state.uiState.hasBigScrollBars }">
             <div class="pos-receipt-print"></div>
+            <div class="pos-topheader" t-att-class="{ oe_hidden: state.uiState !== 'READY' }">
+                <div t-if="tempScreen.isShown" class="block-top-header" />
+                <div class="pos-branding" t-if= "!env.isMobile">
+                    <img class="pos-logo" t-on-click="trigger('toggle-debug-widget')"
+                         src="/point_of_sale/static/src/img/logo.png" alt="Logo" />
+                    <TicketButton isTicketScreenShown="isTicketScreenShown" />
+                </div>
+                <div class="pos-rightheader">
+                    <TicketButton isTicketScreenShown="isTicketScreenShown" t-if="env.isMobile" />
+                    <div class="search-bar-portal" />
+                    <div class="status-buttons-portal" />
+                </div>
+            </div>
             <t t-if="state.uiState === 'READY'">
-                <div class="pos-topheader">
-                    <div t-if="tempScreen.isShown" class="block-top-header" />
-                    <div class="pos-branding">
-                        <img t-if= "!env.isMobile" class="pos-logo" t-on-click="trigger('toggle-debug-widget')"
-                             src="/point_of_sale/static/src/img/logo.png" alt="Logo" />
-                    </div>
-                    <div class="pos-rightheader">
-                        <OrderSelector />
+                <Portal target="'.pos .status-buttons-portal'">
+                    <div class="status-buttons">
                         <t t-if="!env.isMobile">
                             <CashierName />
                         </t>
@@ -23,7 +30,7 @@
                         <SyncNotification />
                         <HeaderButton />
                     </div>
-                </div>
+                </Portal>
                 <div class="pos-content">
                     <div class="window">
                         <div class="subwindow">
diff --git a/addons/point_of_sale/static/src/xml/ChromeWidgets/OrderSelector.xml b/addons/point_of_sale/static/src/xml/ChromeWidgets/OrderSelector.xml
deleted file mode 100644
index 353ea5f93a4..00000000000
--- a/addons/point_of_sale/static/src/xml/ChromeWidgets/OrderSelector.xml
+++ /dev/null
@@ -1,34 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<templates id="template" xml:space="preserve">
-
-    <div class="order-selector" t-name="OrderSelector" owl="1">
-        <t t-if="chromeContext.showOrderSelector">
-            <span class="orders">
-                <t t-foreach="orderList" t-as="order" t-key="order.cid">
-                    <t t-if="order === env.pos.get_order()">
-                        <span class="order-button select-order selected">
-                            <span class="order-sequence">
-                                <t t-esc="order.sequence_number" />
-                            </span>
-                            <t t-esc="creationTime(order)" />
-                        </span>
-                    </t>
-                    <t t-else="">
-                        <span class="order-button select-order" t-on-click="selectOrder(order)">
-                            <span class="order-sequence">
-                                <t t-esc="order.sequence_number" />
-                            </span>
-                        </span>
-                    </t>
-                </t>
-            </span>
-            <span class="order-button square neworder-button" t-on-click="addNewOrder">
-                <i class="fa fa-plus" role="img" aria-label="New order" title="New order" />
-            </span>
-            <span class="order-button square deleteorder-button" t-on-click="deleteCurrentOrder">
-                <i class="fa fa-minus" role="img" aria-label="Delete order" title="Delete order" />
-            </span>
-        </t>
-    </div>
-
-</templates>
diff --git a/addons/point_of_sale/static/src/xml/ChromeWidgets/TicketButton.xml b/addons/point_of_sale/static/src/xml/ChromeWidgets/TicketButton.xml
new file mode 100644
index 00000000000..66d31dd5584
--- /dev/null
+++ b/addons/point_of_sale/static/src/xml/ChromeWidgets/TicketButton.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="TicketButton" owl="1">
+        <div class="ticket-button" t-att-class="{ highlight: props.isTicketScreenShown }" t-on-click="onClick">
+            <div class="with-badge" t-att-badge="count">
+                <i class="fa fa-ticket" aria-hidden="true"></i>
+            </div>
+            <div>Tickets</div>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/point_of_sale/static/src/xml/Misc/SearchBar.xml b/addons/point_of_sale/static/src/xml/Misc/SearchBar.xml
new file mode 100644
index 00000000000..a480f169520
--- /dev/null
+++ b/addons/point_of_sale/static/src/xml/Misc/SearchBar.xml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="point_of_sale.SearchBar" owl="1">
+        <div class="pos-search-bar">
+            <div class="search">
+                <span class="search-icon"><i class="fa fa-search"></i></span>
+                <input class="radius-left" t-att-class="{ 'radius-right': !props.config.filter.show }"
+                    t-model="state.searchInput" t-on-keydown="onKeydown" type="text" t-att-placeholder="placeholder" />
+                <ul t-if="state.showSearchFields and state.searchInput" class="fields">
+                    <t t-foreach="config.searchFields" t-as="value" t-key="value_index">
+                        <li t-att-class="{ highlight: value_index == state.selectedFieldId }"
+                            t-on-click="onClickSearchField(value_index)">
+                            <span class="field">
+                                <t t-esc="value"></t>
+                            </span>
+                            <span>: </span>
+                            <span class="term">
+                                <t t-esc="state.searchInput"></t>
+                            </span>
+                        </li>
+                    </t>
+                </ul>
+            </div>
+            <div t-if="props.config.filter.show" class="filter radius-right"
+                t-on-click.stop="state.showFilterOptions = !state.showFilterOptions">
+                <span class="down-icon">
+                    <i class="fa fa-chevron-down" aria-hidden="true"></i>
+                </span>
+                <span>
+                    <t t-esc="state.selectedFilter" />
+                </span>
+                <ul t-if="state.showFilterOptions" class="options">
+                    <t t-foreach="config.filter.options" t-as="option" t-key="option">
+                        <li t-on-click="selectFilter(option)">
+                            <t t-esc="option"></t>
+                        </li>
+                    </t>
+                </ul>
+            </div>
+        </div>
+    </t>
+
+</templates>
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>