132 lines
4.6 KiB
Markdown
132 lines
4.6 KiB
Markdown
# POS UI Optimization
|
|
|
|
**Odoo 19 | Custom Addon**
|
|
|
|
Optimizes the Point of Sale UI for resource-constrained devices and adds a **switchable portrait display mode** designed for 6-inch touchscreen terminals.
|
|
|
|
---
|
|
|
|
## Features
|
|
|
|
### 1. Incremental Product Rendering
|
|
Prevents low-RAM devices from freezing when the product catalogue is large.
|
|
|
|
- Only **40 products** are rendered on initial load
|
|
- More products load automatically as the user scrolls down
|
|
- Resets the counter when the search word or category changes
|
|
|
|
### 2. Incremental Order Line Rendering
|
|
Same approach for the order/cart display.
|
|
|
|
- Only **20 order lines** rendered initially
|
|
- Scrolling loads more lines progressively
|
|
- Ensures the selected line is always visible (expands count if needed)
|
|
|
|
### 3. Portrait Mode (6-inch Display)
|
|
|
|
A dedicated compact layout for portrait-orientation small screens. Designed for devices like 6-inch Android POS terminals where the standard Odoo two-column layout clutters the screen.
|
|
|
|
#### Layout
|
|
|
|
```
|
|
┌──────────────────────────────┐
|
|
│ Navbar (compact) │
|
|
├──────────────────────────────┤
|
|
│ │
|
|
│ Active tab pane: │
|
|
│ Products / Cart / Numpad │
|
|
│ │
|
|
├──────────────────────────────┤
|
|
│ TOTAL: Rp X,XXX [Send][Pay]│ ← always visible
|
|
├──────────────────────────────┤
|
|
│ [Products] [Cart] [Numpad]│ ← bottom tab bar
|
|
└──────────────────────────────┘
|
|
```
|
|
|
|
#### Key Differences from Standard Mode
|
|
|
|
| Feature | Standard | Portrait |
|
|
|---|---|---|
|
|
| Layout | Two-column (order left, products right) | Single pane with bottom tabs |
|
|
| Product grid | `auto-fill minmax(115px)` | Fixed 2 columns |
|
|
| Product images | Full aspect ratio | Capped at 90px height |
|
|
| Numpad | Shown inline in left pane | Dedicated "Numpad" tab |
|
|
| Pay/Send | Inside left pane action pad | Always-visible bottom strip |
|
|
| Navbar | Full labels | Compact with smaller padding |
|
|
|
|
#### Auto-Activation
|
|
|
|
Portrait mode **auto-activates** when the browser viewport width is **< 400 px** on first load. A manual override is always available via the burger menu (☰ → Switch to Portrait/Standard Mode). The choice is saved to `localStorage`.
|
|
|
|
#### Send Button Behavior
|
|
|
|
The **Send** button appears only when:
|
|
1. The POS is in restaurant mode (`module_pos_restaurant = True`)
|
|
2. At least one **Preparation Category** is configured in POS → Kitchen Printers settings
|
|
3. The current order has unsent changes (`nbrOfChanges > 0`)
|
|
4. The order is not a direct sale / refund
|
|
|
|
This mirrors Odoo's standard restaurant `swapButton` logic exactly.
|
|
|
|
---
|
|
|
|
## Installation
|
|
|
|
1. Copy the `pos_ui_optimization` folder into your `customaddons` directory
|
|
2. Restart the Odoo server
|
|
3. Go to **Apps** → search for **POS UI Optimization** → Install
|
|
4. Reload your POS session
|
|
|
|
## Upgrade
|
|
|
|
```bash
|
|
./odoo-bin -u pos_ui_optimization -d <your_database>
|
|
```
|
|
|
|
---
|
|
|
|
## Compatibility
|
|
|
|
| Item | Value |
|
|
|---|---|
|
|
| Odoo version | 19.0 |
|
|
| Depends on | `point_of_sale` |
|
|
| Compatible with | `pos_restaurant`, `pos_custom_access`, `pos_kitchen_printer` |
|
|
| License | LGPL-3 |
|
|
|
|
---
|
|
|
|
## File Structure
|
|
|
|
```
|
|
pos_ui_optimization/
|
|
├── __manifest__.py
|
|
├── README.md
|
|
├── static/
|
|
│ └── src/
|
|
│ ├── app/
|
|
│ │ ├── components/
|
|
│ │ │ ├── navbar/
|
|
│ │ │ │ ├── navbar_patch.js # Display Mode toggle in burger menu
|
|
│ │ │ │ └── navbar_patch.xml
|
|
│ │ │ └── order_display/
|
|
│ │ │ ├── order_display_patch.js # Incremental order line rendering
|
|
│ │ │ └── order_display_patch.xml
|
|
│ │ ├── screens/
|
|
│ │ │ └── product_screen/
|
|
│ │ │ ├── portrait_mode_patch.js # Tab state (products/cart/numpad)
|
|
│ │ │ ├── portrait_screen.xml # Portrait layout XML patch
|
|
│ │ │ ├── product_screen_patch.js # Incremental product rendering
|
|
│ │ │ └── product_screen_patch.xml
|
|
│ │ └── services/
|
|
│ │ └── portrait_mode.js # Auto-detect + localStorage service
|
|
│ └── scss/
|
|
│ └── portrait.scss # All portrait CSS (scoped to .pos-portrait)
|
|
```
|
|
|
|
---
|
|
|
|
## Author
|
|
|
|
**Suherdy Yacob**
|