feat: add print checker button to POS portrait screen and update responsive styling

This commit is contained in:
Suherdy Yacob 2026-06-01 10:12:12 +07:00
parent 0c6410a221
commit ecb1a242f3
3 changed files with 43 additions and 14 deletions

View File

@ -29,18 +29,18 @@ A dedicated compact layout for portrait-orientation small screens. Designed for
#### Layout #### Layout
``` ```
┌──────────────────────────────┐ ┌──────────────────────────────────────
│ Navbar (compact) │ │ Navbar (compact) │
├──────────────────────────────┤ ├──────────────────────────────────────
│ │ │ │
│ Active tab pane: │ │ Active tab pane: │
│ Products / Cart / Numpad │ │ Products / Cart / Numpad │
│ │ │ │
├──────────────────────────────┤ ├──────────────────────────────────────
TOTAL: Rp X,XXX [Send][Pay]│ ← always visible │ TOTAL: Rp X,XX [Checker] [Send] [Pay]│ ← always visible
├──────────────────────────────┤ ├──────────────────────────────────────
│ [Products] [Cart] [Numpad]│ ← bottom tab bar │ [Products] [Cart] [Numpad] │ ← bottom tab bar
└──────────────────────────────┘ └──────────────────────────────────────
``` ```
#### Key Differences from Standard Mode #### Key Differences from Standard Mode
@ -51,9 +51,19 @@ A dedicated compact layout for portrait-orientation small screens. Designed for
| Product grid | `auto-fill minmax(115px)` | Fixed 2 columns | | Product grid | `auto-fill minmax(115px)` | Fixed 2 columns |
| Product images | Full aspect ratio | Capped at 90px height | | Product images | Full aspect ratio | Capped at 90px height |
| Numpad | Shown inline in left pane | Dedicated "Numpad" tab | | Numpad | Shown inline in left pane | Dedicated "Numpad" tab |
| Pay/Send | Inside left pane action pad | Always-visible bottom strip | | Actions (Pay/Send/Checker) | Inside left pane action pad | Always-visible bottom strip |
| Navbar | Full labels | Compact with smaller padding | | Navbar | Full labels | Compact with smaller padding |
#### Table Checker Button
The **Checker** button is available in the bottom pay strip in portrait mode. It allows waiters or cashiers to quickly print a basic table checker receipt.
The button is visible only when:
1. The `basic_receipt` option is enabled in POS settings.
2. The current cashier's role is either `waiter` or `cashier`.
The button is disabled when the current order is empty.
#### Auto-Activation #### 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`. 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`.

View File

@ -31,6 +31,20 @@
<strong class="portrait-total-amount text-truncate lh-1 mt-1" t-esc="currentOrder.isEmpty() ? '—' : total"/> <strong class="portrait-total-amount text-truncate lh-1 mt-1" t-esc="currentOrder.isEmpty() ? '—' : total"/>
</div> </div>
<!--
Table Checker button:
- Only displayed if basic_receipt is enabled.
- Cashier role must be 'waiter' or 'cashier'.
- Disabled when order is empty.
-->
<button
t-if="pos.config.basic_receipt and pos.cashier and (pos.cashier.pos_role == 'waiter' or pos.cashier.pos_role == 'cashier')"
class="btn btn-secondary portrait-print-btn"
t-att-disabled="currentOrder.isEmpty()"
t-on-click="() => this.pos.printReceipt({ order: this.currentOrder, basic: true, printBillActionTriggered: true })">
<i class="fa fa-print me-1"/>Checker
</button>
<!-- <!--
Send button logic mirrors pos_restaurant's swapButton: Send button logic mirrors pos_restaurant's swapButton:
swapButton = module_pos_restaurant AND preparationCategories.size > 0 swapButton = module_pos_restaurant AND preparationCategories.size > 0

View File

@ -187,7 +187,8 @@
} }
.portrait-pay-btn, .portrait-pay-btn,
.portrait-send-btn { .portrait-send-btn,
.portrait-print-btn {
border-radius: 10px; border-radius: 10px;
font-weight: 600; font-weight: 600;
font-size: 0.9rem; font-size: 0.9rem;
@ -201,6 +202,10 @@
.portrait-send-btn { .portrait-send-btn {
min-width: 80px; min-width: 80px;
} }
.portrait-print-btn {
min-width: 80px;
}
} }
/* ---- BOTTOM TAB BAR ---- */ /* ---- BOTTOM TAB BAR ---- */