From e3e9ca1933006ca273b5049aa1c02f2ac1ecad1e Mon Sep 17 00:00:00 2001
From: "David Monnom (moda)" <moda@odoo.com>
Date: Fri, 3 Nov 2023 09:38:06 +0100
Subject: [PATCH] [IMP] pos_self_order: improve self with large-test feedback

- Add loading when rpc in progress.
- Auto focus input search when button clicked

Part-of: odoo/odoo#140870
---
 .../loading_overlay/loading_overlay.js        | 22 +++++++++++++++++++
 .../loading_overlay/loading_overlay.xml       |  8 +++++++
 .../src/app/pages/cart_page/cart_page.js      |  6 ++---
 .../app/pages/landing_page/landing_page.js    |  1 +
 .../product_list_page/product_list_page.js    | 10 +++++++++
 .../product_list_page/product_list_page.xml   |  5 +++--
 .../static/src/app/self_order_index.js        |  2 ++
 .../static/src/app/self_order_index.xml       |  3 +++
 .../static/src/app/self_order_service.js      |  1 +
 9 files changed, 53 insertions(+), 5 deletions(-)
 create mode 100644 addons/pos_self_order/static/src/app/components/loading_overlay/loading_overlay.js
 create mode 100644 addons/pos_self_order/static/src/app/components/loading_overlay/loading_overlay.xml

diff --git a/addons/pos_self_order/static/src/app/components/loading_overlay/loading_overlay.js b/addons/pos_self_order/static/src/app/components/loading_overlay/loading_overlay.js
new file mode 100644
index 00000000000..594f5ddce55
--- /dev/null
+++ b/addons/pos_self_order/static/src/app/components/loading_overlay/loading_overlay.js
@@ -0,0 +1,22 @@
+/** @odoo-module */
+
+import { Component, onWillStart, useState } from "@odoo/owl";
+import { useSelfOrder } from "@pos_self_order/app/self_order_service";
+
+export class LoadingOverlay extends Component {
+    static template = "pos_self_order.LoadingOverlay";
+    static props = ["action", "removeTopClasses?"];
+
+    setup() {
+        this.selfOrder = useSelfOrder();
+        this.state = useState({
+            loading: false,
+        });
+
+        onWillStart(() => {
+            setTimeout(() => {
+                this.state.loading = true;
+            }, 200);
+        });
+    }
+}
diff --git a/addons/pos_self_order/static/src/app/components/loading_overlay/loading_overlay.xml b/addons/pos_self_order/static/src/app/components/loading_overlay/loading_overlay.xml
new file mode 100644
index 00000000000..f6b3d3c5838
--- /dev/null
+++ b/addons/pos_self_order/static/src/app/components/loading_overlay/loading_overlay.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+    <t t-name="pos_self_order.LoadingOverlay">
+        <div t-if="state.loading" class="position-absolute top-0 w-100 min-vh-100 d-flex justify-content-center align-items-center bg-black opacity-50" style="z-index: 1000;">
+            <span class="spinner-border" />
+        </div>
+    </t>
+</templates>
diff --git a/addons/pos_self_order/static/src/app/pages/cart_page/cart_page.js b/addons/pos_self_order/static/src/app/pages/cart_page/cart_page.js
index be9dcd5b387..a6eb81be2d6 100644
--- a/addons/pos_self_order/static/src/app/pages/cart_page/cart_page.js
+++ b/addons/pos_self_order/static/src/app/pages/cart_page/cart_page.js
@@ -52,7 +52,7 @@ export class CartPage extends Component {
         const type = this.selfOrder.config.self_ordering_mode;
         const takeAway = this.selfOrder.currentOrder.take_away;
 
-        if (this.sendInProgress || !this.selfOrder.verifyCart()) {
+        if (this.selfOrder.rpcLoading || !this.selfOrder.verifyCart()) {
             return;
         }
 
@@ -61,9 +61,9 @@ export class CartPage extends Component {
             return;
         }
 
-        this.sendInProgress = true;
+        this.selfOrder.rpcLoading = true;
         await this.selfOrder.confirmOrder();
-        this.sendInProgress = false;
+        this.selfOrder.rpcLoading = false;
     }
 
     selectTable(table) {
diff --git a/addons/pos_self_order/static/src/app/pages/landing_page/landing_page.js b/addons/pos_self_order/static/src/app/pages/landing_page/landing_page.js
index 68d8129167a..8b23cdbf429 100644
--- a/addons/pos_self_order/static/src/app/pages/landing_page/landing_page.js
+++ b/addons/pos_self_order/static/src/app/pages/landing_page/landing_page.js
@@ -22,6 +22,7 @@ export class LandingPage extends Component {
                 this.selfOrder.orders = [];
                 this.selfOrder.editedOrder = null;
             }
+            this.selfOrder.rpcLoading = false;
         });
 
         onMounted(() => {
diff --git a/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.js b/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.js
index d9dc93b93d9..efcdb90087c 100644
--- a/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.js
+++ b/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.js
@@ -19,6 +19,7 @@ export class ProductListPage extends Component {
         this.router = useService("router");
         this.productsList = useRef("productsList");
         this.categoryList = useRef("categoryList");
+        this.searchInput = useRef("searchInput");
         this.currentProductCard = useChildRef();
         this.state = useState({
             search: false,
@@ -30,6 +31,15 @@ export class ProductListPage extends Component {
             })
         );
 
+        useEffect(
+            () => {
+                if (this.state.search) {
+                    this.searchInput.el.focus();
+                }
+            },
+            () => [this.state.search]
+        );
+
         useEffect(
             () => {
                 if (this.selfOrder.lastEditedProductId) {
diff --git a/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.xml b/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.xml
index 4b24faf6294..be72e08c0eb 100644
--- a/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.xml
+++ b/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.xml
@@ -32,11 +32,12 @@
                     <i class="oi oi-search"/>
                 </button>
 
-                <div t-if="this.state.search" t-attf-class="position-absolute top-0 start-0 w-100 h-100 px-3 pe-4 d-flex align-items-center bg-view">
+                <div t-att-class="{ 'd-none': !this.state.search }" t-attf-class="position-absolute top-0 start-0 w-100 h-100 px-3 pe-4 d-flex align-items-center bg-view">
                     <input type="text"
+                        t-ref="searchInput"
                         class="form-control py-3 ps-0 border-0 shadow-none"
                         placeholder="Search product"
-                        t-model="state.searchInput"/>
+                        t-model="state.searchInput" />
                     <button class="btn-close" t-on-click="focusSearch"/>
                 </div>
             </div>
diff --git a/addons/pos_self_order/static/src/app/self_order_index.js b/addons/pos_self_order/static/src/app/self_order_index.js
index ee043df3bd9..288f9c98ea8 100644
--- a/addons/pos_self_order/static/src/app/self_order_index.js
+++ b/addons/pos_self_order/static/src/app/self_order_index.js
@@ -16,6 +16,7 @@ import { ConfirmationPage } from "@pos_self_order/app/pages/confirmation_page/co
 import { EatingLocationPage } from "@pos_self_order/app/pages/eating_location_page/eating_location_page";
 import { StandNumberPage } from "@pos_self_order/app/pages/stand_number_page/stand_number_page";
 import { OrdersHistoryPage } from "@pos_self_order/app/pages/order_history_page/order_history_page";
+import { LoadingOverlay } from "@pos_self_order/app/components/loading_overlay/loading_overlay";
 
 class selfOrderIndex extends Component {
     static template = "pos_self_order.selfOrderIndex";
@@ -32,6 +33,7 @@ class selfOrderIndex extends Component {
         EatingLocationPage,
         StandNumberPage,
         LandingPage,
+        LoadingOverlay,
         MainComponentsContainer,
     };
 
diff --git a/addons/pos_self_order/static/src/app/self_order_index.xml b/addons/pos_self_order/static/src/app/self_order_index.xml
index e81887baaed..477acd2dc09 100644
--- a/addons/pos_self_order/static/src/app/self_order_index.xml
+++ b/addons/pos_self_order/static/src/app/self_order_index.xml
@@ -4,6 +4,9 @@
         <div t-if="!selfOrder.ordering" class="o-self-closed w-100 m-0 text-center bg-black text-white">
             <p>We're currently closed.</p>
         </div>
+        <div t-if="selfOrder.rpcLoading">
+            <LoadingOverlay />
+        </div>
         <Router t-if="selfIsReady" pos_config_id="selfOrder.pos_config_id">
             <t t-set-slot="default" route="`/pos-self/${selfOrder.pos_config_id}`">
                 <LandingPage />
diff --git a/addons/pos_self_order/static/src/app/self_order_service.js b/addons/pos_self_order/static/src/app/self_order_service.js
index dce0d718e84..e267e28a3f6 100644
--- a/addons/pos_self_order/static/src/app/self_order_service.js
+++ b/addons/pos_self_order/static/src/app/self_order_service.js
@@ -45,6 +45,7 @@ export class SelfOrder extends Reactive {
         this.currentProduct = 0;
         this.attributeById = {};
         this.priceLoading = false;
+        this.rpcLoading = false;
         this.productByIds = {};
         this.paymentError = false;
         this.editedOrder = null;