commit 86d5512809f62d64346730f7b44322c5c321b476 Author: Suherdy Yacob Date: Mon Mar 16 08:51:54 2026 +0700 first commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ddcb816 --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +*.pyc +*~ +__pycache__/ +.DS_Store +.vscode/ +.idea/ diff --git a/README.md b/README.md new file mode 100644 index 0000000..2ff97c6 --- /dev/null +++ b/README.md @@ -0,0 +1,26 @@ +# 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). + +## 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. + +## Installation + +1. Place the `pos_ui_optimization` folder in your Odoo custom addons directory. +2. Restart your Odoo server. +3. In Odoo, activate **Developer Mode**. +4. Go to **Apps** -> **Update Apps List**. +5. Search for `POS UI Optimization`. +6. Click **Install**. + +## 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. + +No core Odoo files are modified. diff --git a/__manifest__.py b/__manifest__.py new file mode 100644 index 0000000..d70461f --- /dev/null +++ b/__manifest__.py @@ -0,0 +1,16 @@ +{ + 'name': 'POS UI Optimization', + 'version': '1.0', + 'category': 'Sales/Point of Sale', + 'summary': 'Optimize POS UI for low-RAM devices with incremental rendering.', + 'depends': ['point_of_sale'], + 'data': [], + 'assets': { + 'point_of_sale._assets_pos': [ + 'pos_ui_optimization/static/src/app/**/*', + ], + }, + 'installable': True, + 'application': False, + 'license': 'LGPL-3', +} diff --git a/static/src/app/generic_components/order_widget/order_widget_patch.js b/static/src/app/generic_components/order_widget/order_widget_patch.js new file mode 100644 index 0000000..57c2184 --- /dev/null +++ b/static/src/app/generic_components/order_widget/order_widget_patch.js @@ -0,0 +1,43 @@ +/** @odoo-module **/ + +import { OrderWidget } from "@point_of_sale/app/generic_components/order_widget/order_widget"; +import { patch } from "@web/core/utils/patch"; +import { useState, onMounted, onWillUnmount } from "@odoo/owl"; + +patch(OrderWidget.prototype, { + setup() { + super.setup(); + this.state = useState({ displayedCount: 20 }); + + onMounted(() => { + const scrollable = this.scrollableRef.el; + if (!scrollable) return; + + this.onScroll = () => { + if ( + scrollable.scrollTop + scrollable.clientHeight >= + scrollable.scrollHeight - 100 + ) { + if (this.state.displayedCount < this.props.lines.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; + } + }); + + onWillUnmount(() => { + this.scrollableRef.el?.removeEventListener("scroll", this.onScroll); + }); + }, + + get linesToDisplay() { + return this.props.lines.slice(0, this.state.displayedCount); + } +}); diff --git a/static/src/app/generic_components/order_widget/order_widget_patch.xml b/static/src/app/generic_components/order_widget/order_widget_patch.xml new file mode 100644 index 0000000..8e2bacc --- /dev/null +++ b/static/src/app/generic_components/order_widget/order_widget_patch.xml @@ -0,0 +1,8 @@ + + + + + linesToDisplay + + + diff --git a/static/src/app/screens/product_screen/product_list/product_list_patch.js b/static/src/app/screens/product_screen/product_list/product_list_patch.js new file mode 100644 index 0000000..c6b63f1 --- /dev/null +++ b/static/src/app/screens/product_screen/product_list/product_list_patch.js @@ -0,0 +1,58 @@ +/** @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; + } + } + }; + this.scrollContainer?.addEventListener("scroll", this.onScroll); + }); + + onWillUnmount(() => { + this.scrollContainer?.removeEventListener("scroll", this.onScroll); + }); + }, + + get selectedCategoryId() { + if (this._lastCategoryId !== this.pos.selectedCategoryId) { + this._lastCategoryId = this.pos.selectedCategoryId; + this.state.displayedCount = 40; + } + return super.selectedCategoryId; + }, + + get searchWord() { + const word = this.pos.searchProductWord.trim(); + if (this._lastSearchWord !== word) { + this._lastSearchWord = word; + this.state.displayedCount = 40; + } + return super.searchWord; + }, + + get productsToDisplay() { + const list = super.productsToDisplay; + // The core productsToDisplay returns the full list. + // We slice it here for rendering. + return list.slice(0, this.state.displayedCount); + } +});