README.md

@@ -1,12 +1,13 @@
 # POS UI Optimization
 
-This Odoo 17 module optimizes the Point of Sale (POS) user interface for low-RAM devices (e.g., Android tablets with 2GB RAM).
+This Odoo 19 module optimizes the Point of Sale (POS) user interface for low-RAM devices (e.g., Android tablets with 2GB RAM).
 
 ## Features
 
 - **Product List Incremental Loading**: Renders products in batches of 40 as you scroll, significantly reducing memory usage in categories with many products.
 - **Order Cart Incremental Loading**: Efficiently handles large orders by rendering order lines incrementally as you scroll through the cart.
 - **Improved Responsiveness**: Keeps the browser DOM light and prevents "white blank" screens caused by memory exhaustion.
+- **Legacy Browser Support**: Designed without modern ES2020 JavaScript syntax (like optional chaining `?.`) to ensure compatibility with older Android browser engines found on specific legacy POS hardware.
 
 ## Installation
 
@@ -20,7 +21,7 @@ This Odoo 17 module optimizes the Point of Sale (POS) user interface for low-RAM
 ## Technical Details
 
 This module uses Odoo's JavaScript patching mechanism (`patch` from `@web/core/utils/patch`) to extend the core POS components:
-- `ProductsWidget`: Adds `displayedCount` state and a scroll listener to the product container.
-- `OrderWidget`: Adds `displayedCount` state and a scroll listener to the order container.
+- `ProductScreen`: Adds `displayedProductsCount` state via `owl`'s `useEffect` and an overridden `onScroll` hook to the product container.
+- `OrderDisplay`: Adds `displayedCount` state and a scroll listener to the combo sorted order lines container.
 
 No core Odoo files are modified.

__init__.py

@@ -1,2 +0,0 @@
-# -*- coding: utf-8 -*-
-# Part of Odoo. See LICENSE file for full copyright and licensing details.

__manifest__.py

@@ -2,14 +2,16 @@
     'name': 'POS UI Optimization',
     'version': '1.0',
     'category': 'Sales/Point of Sale',
-    'summary': 'Optimize POS UI for low-RAM devices with incremental rendering.',
+    'summary': 'Optimize POS UI for low-RAM devices with incremental rendering (Odoo 19).',
+    'author': "Suherdy Yacob",
     'depends': ['point_of_sale'],
     'data': [],
     'assets': {
         'point_of_sale._assets_pos': [
-            'pos_ui_optimization/static/src/app/generic_components/order_widget/order_widget_patch.js',
-            'pos_ui_optimization/static/src/app/generic_components/order_widget/order_widget_patch.xml',
-            'pos_ui_optimization/static/src/app/screens/product_screen/product_list/product_list_patch.js',
+            'pos_ui_optimization/static/src/app/components/order_display/order_display_patch.js',
+            'pos_ui_optimization/static/src/app/components/order_display/order_display_patch.xml',
+            'pos_ui_optimization/static/src/app/screens/product_screen/product_screen_patch.js',
+            'pos_ui_optimization/static/src/app/screens/product_screen/product_screen_patch.xml',
         ],
     },
     'installable': True,

static/src/app/components/order_display/order_display_patch.js

@@ -1,34 +1,36 @@
 /** @odoo-module **/
 
-import { OrderWidget } from "@point_of_sale/app/generic_components/order_widget/order_widget";
+import { OrderDisplay } from "@point_of_sale/app/components/order_display/order_display";
 import { patch } from "@web/core/utils/patch";
 import { useState, onMounted, onWillUnmount } from "@odoo/owl";
 
-patch(OrderWidget.prototype, {
+patch(OrderDisplay.prototype, {
     setup() {
         super.setup();
         this.state = useState({ displayedCount: 20 });
-        
+
         onMounted(() => {
             const scrollable = this.scrollableRef.el;
-            if (!scrollable) return;
+            if (!scrollable) {
+                return;
+            }
 
             this.onScroll = () => {
                 if (
                     scrollable.scrollTop + scrollable.clientHeight >=
                     scrollable.scrollHeight - 100
                 ) {
-                    if (this.state.displayedCount < this.props.lines.length) {
+                    if (this.state.displayedCount < this.comboSortedLines.length) {
                         this.state.displayedCount += 20;
                     }
                 }
             };
             scrollable.addEventListener("scroll", this.onScroll);
 
-            // Ensure selected line is visible
-            const selectedIndex = this.props.lines.findIndex(l => l.selected);
-            if (selectedIndex >= this.state.displayedCount) {
-                this.state.displayedCount = selectedIndex + 1;
+            // Ensure selected line is visible by expanding displayedCount if needed
+            const selectedLineIndex = this.comboSortedLines.findIndex(l => l.selected);
+            if (selectedLineIndex >= this.state.displayedCount) {
+                this.state.displayedCount = selectedLineIndex + 1;
             }
         });
 
@@ -41,6 +43,6 @@ patch(OrderWidget.prototype, {
     },
 
     get linesToDisplay() {
-        return this.props.lines.slice(0, this.state.displayedCount);
+        return this.comboSortedLines.slice(0, this.state.displayedCount);
     }
 });

static/src/app/components/order_display/order_display_patch.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+    <t t-inherit="point_of_sale.OrderDisplay" t-inherit-mode="extension">
+        <xpath expr="//t[@t-set='lines']" position="attributes">
+            <attribute name="t-value">linesToDisplay</attribute>
+        </xpath>
+    </t>
+</templates>

static/src/app/generic_components/order_widget/order_widget_patch.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<templates id="template" xml:space="preserve">
-    <t t-name="pos_ui_optimization.OrderWidgetPatch" t-inherit="point_of_sale.OrderWidget" t-inherit-mode="extension">
-        <xpath expr="//t[@t-foreach='props.lines']" position="attributes">
-            <attribute name="t-foreach">linesToDisplay</attribute>
-        </xpath>
-    </t>
-</templates>

static/src/app/screens/product_screen/product_list/product_list_patch.js

@@ -1,59 +0,0 @@
-/** @odoo-module **/
-
-import { ProductsWidget } from "@point_of_sale/app/screens/product_screen/product_list/product_list";
-import { patch } from "@web/core/utils/patch";
-import { useState, onMounted, onWillUnmount } from "@odoo/owl";
-
-patch(ProductsWidget.prototype, {
-    setup() {
-        super.setup();
-        this.state.displayedCount = 40;
-        
-        onMounted(() => {
-            const productsWidget = this.productsWidgetRef.el;
-            if (!productsWidget) return;
-            
-            this.scrollContainer = productsWidget.querySelector(".product-list-container");
-            this.onScroll = () => {
-                if (
-                    this.scrollContainer.scrollTop + this.scrollContainer.clientHeight >=
-                    this.scrollContainer.scrollHeight - 200
-                ) {
-                    if (this.state.displayedCount < this.productsToDisplay.length) {
-                        this.state.displayedCount += 40;
-                    }
-                }
-            };
-            if (this.scrollContainer) {
-                this.scrollContainer.addEventListener("scroll", this.onScroll);
-            }
-        });
-
-        onWillUnmount(() => {
-            if (this.scrollContainer) {
-                this.scrollContainer.removeEventListener("scroll", this.onScroll);
-            }
-        });
-    },
-
-    get productsToDisplay() {
-        const list = super.productsToDisplay;
-        // The core productsToDisplay returns the full list.
-        // We slice it here for rendering.
-        
-        // React to category or search word changes to reset the count
-        const currentCategory = this.selectedCategoryId;
-        if (this._lastCategoryId !== currentCategory) {
-            this._lastCategoryId = currentCategory;
-            this.state.displayedCount = 40;
-        }
-
-        const currentSearch = this.searchWord;
-        if (this._lastSearchWord !== currentSearch) {
-            this._lastSearchWord = currentSearch;
-            this.state.displayedCount = 40;
-        }
-
-        return list.slice(0, this.state.displayedCount);
-    }
-});

static/src/app/screens/product_screen/product_screen_patch.js

@@ -0,0 +1,54 @@
+/** @odoo-module **/
+
+import { ProductScreen } from "@point_of_sale/app/screens/product_screen/product_screen";
+import { patch } from "@web/core/utils/patch";
+import { useEffect } from "@odoo/owl";
+
+patch(ProductScreen.prototype, {
+    setup() {
+        super.setup();
+        this.state.displayedProductsCount = 40;
+
+        const originalOnScroll = this.onScroll;
+        this.onScroll = (ev) => {
+            if (originalOnScroll) {
+                originalOnScroll(ev);
+            }
+            const el = ev.target;
+            if (el && el.scrollTop + el.clientHeight >= el.scrollHeight - 200) {
+                const totalCount = this.pos.productToDisplayByCateg.reduce((acc, cat) => acc + cat[1].length, 0);
+                if (this.state.displayedProductsCount < totalCount) {
+                    this.state.displayedProductsCount += 40;
+                }
+            }
+        };
+
+        useEffect(
+            () => {
+                this.state.displayedProductsCount = 40;
+            },
+            () => [this.pos.searchProductWord, this.pos.selectedCategory]
+        );
+    },
+
+    get productToDisplayByCategLimited() {
+        const fullList = this.pos.productToDisplayByCateg;
+        let count = 0;
+        const limitedList = [];
+        for (const [categ, products] of fullList) {
+            const remaining = this.state.displayedProductsCount - count;
+            if (remaining <= 0) {
+                break;
+            }
+            if (products.length <= remaining) {
+                limitedList.push([categ, products]);
+                count += products.length;
+            } else {
+                limitedList.push([categ, products.slice(0, remaining)]);
+                count += remaining;
+                break;
+            }
+        }
+        return limitedList;
+    }
+});

static/src/app/screens/product_screen/product_screen_patch.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+    <t t-inherit="point_of_sale.ProductScreen" t-inherit-mode="extension" owl="1">
+        <xpath expr="//div[@t-foreach='pos.productToDisplayByCateg']" position="attributes">
+            <attribute name="t-foreach">productToDisplayByCategLimited</attribute>
+        </xpath>
+    </t>
+</templates>