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

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

@ -2,44 +2,47 @@
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();
this.state = useState({ displayedCount: 20 }); // 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 });
}
onMounted(() => { // Use useEffect to handle dynamic mounting of the scrollable element
const scrollable = this.scrollableRef.el; useEffect(
if (!scrollable) { (scrollable) => {
return; if (!scrollable) {
} return;
this.onScroll = () => {
if (
scrollable.scrollTop + scrollable.clientHeight >=
scrollable.scrollHeight - 100
) {
if (this.state.displayedCount < this.comboSortedLines.length) {
this.state.displayedCount += 20;
}
} }
};
scrollable.addEventListener("scroll", this.onScroll);
// Ensure selected line is visible by expanding displayedCount if needed const onScroll = () => {
const selectedLineIndex = this.comboSortedLines.findIndex(l => l.selected); if (
if (selectedLineIndex >= this.state.displayedCount) { scrollable.scrollTop + scrollable.clientHeight >=
this.state.displayedCount = selectedLineIndex + 1; scrollable.scrollHeight - 100
} ) {
}); if (this.state.displayedCount < this.comboSortedLines.length) {
this.state.displayedCount += 20;
}
}
};
scrollable.addEventListener("scroll", onScroll);
onWillUnmount(() => { // Ensure selected line is visible by expanding displayedCount if needed
const el = this.scrollableRef.el; const selectedLineIndex = this.comboSortedLines.findIndex(l => l.selected);
if (el) { if (selectedLineIndex >= this.state.displayedCount) {
el.removeEventListener("scroll", this.onScroll); this.state.displayedCount = selectedLineIndex + 1;
} }
});
return () => scrollable.removeEventListener("scroll", onScroll);
},
() => [this.scrollableRef?.el]
);
}, },
get linesToDisplay() { get linesToDisplay() {