[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

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);
+        });
+    }
+}

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>

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) {

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(() => {

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) {

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>

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,
     };
 

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

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;