admin.suherdy/pos_ui_optimization
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: replace lifecycle hooks with useEffect and improve state initialization in OrderDisplay to prevent patch conflicts

Browse Source
This commit is contained in:
Suherdy Yacob 2026-05-11 17:26:57 +07:00
parent c79145faa3
commit 43e908ce7d
1 changed files with 33 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
static/src/app/components/order_display/order_display_patch.js
View File

@ -2,20 +2,26 @@
import { OrderDisplay } from "@point_of_sale/app/components/order_display/order_display"; import { OrderDisplay } from "@point_of_sale/app/components/order_display/order_display";
import { patch } from "@web/core/utils/patch"; import { patch } from "@web/core/utils/patch";
import { useState, onMounted, onWillUnmount } from "@odoo/owl"; import { useState, useEffect } from "@odoo/owl";
patch(OrderDisplay.prototype, { patch(OrderDisplay.prototype, {
setup() { setup() {
super.setup(); super.setup();
// Use Object.assign to avoid overwriting state from other patches (e.g. pos_urban_piper)
if (this.state) {
Object.assign(this.state, { displayedCount: 20 });
} else {
this.state = useState({ displayedCount: 20 }); this.state = useState({ displayedCount: 20 });
}
onMounted(() => { // Use useEffect to handle dynamic mounting of the scrollable element
const scrollable = this.scrollableRef.el; useEffect(
(scrollable) => {
if (!scrollable) { if (!scrollable) {
return; return;
} }
this.onScroll = () => { const onScroll = () => {
if ( if (
scrollable.scrollTop + scrollable.clientHeight >= scrollable.scrollTop + scrollable.clientHeight >=
scrollable.scrollHeight - 100 scrollable.scrollHeight - 100
@ -25,21 +31,18 @@ patch(OrderDisplay.prototype, {
} }
} }
}; };
scrollable.addEventListener("scroll", this.onScroll); scrollable.addEventListener("scroll", onScroll);
// Ensure selected line is visible by expanding displayedCount if needed // Ensure selected line is visible by expanding displayedCount if needed
const selectedLineIndex = this.comboSortedLines.findIndex(l => l.selected); const selectedLineIndex = this.comboSortedLines.findIndex(l => l.selected);
if (selectedLineIndex >= this.state.displayedCount) { if (selectedLineIndex >= this.state.displayedCount) {
this.state.displayedCount = selectedLineIndex + 1; this.state.displayedCount = selectedLineIndex + 1;
} }
});
onWillUnmount(() => { return () => scrollable.removeEventListener("scroll", onScroll);
const el = this.scrollableRef.el; },
if (el) { () => [this.scrollableRef?.el]
el.removeEventListener("scroll", this.onScroll); );
}
});
}, },
get linesToDisplay() { get linesToDisplay() {