@@ -240,6 +297,25 @@ class OrdersCrud extends HTMLElement {
connectedCallback() {
this.shadowRoot.getElementById("btnRefresh").onclick = () => this.loadOrders();
+ // Paginación
+ this.shadowRoot.getElementById("limitSelect").onchange = (e) => {
+ this.limit = parseInt(e.target.value);
+ this.page = 1;
+ this.loadOrders();
+ };
+ this.shadowRoot.getElementById("btnPrev").onclick = () => {
+ if (this.page > 1) {
+ this.page--;
+ this.loadOrders();
+ }
+ };
+ this.shadowRoot.getElementById("btnNext").onclick = () => {
+ if (this.page < this.totalPages) {
+ this.page++;
+ this.loadOrders();
+ }
+ };
+
// Escuchar cambios de ruta para deep-linking
this._unsubRouter = on("router:viewChanged", ({ view, params }) => {
if (view === "orders" && params.id) {
@@ -248,7 +324,6 @@ class OrdersCrud extends HTMLElement {
});
// Escuchar nuevos pedidos para actualizar automáticamente
- // Usa retry con backoff porque WooCommerce puede tardar en devolver el pedido recién creado
this._unsubOrderCreated = on("order:created", ({ order_id }) => {
console.log("[orders-crud] order:created received, order_id:", order_id);
this.refreshWithRetry(order_id);
@@ -298,9 +373,17 @@ class OrdersCrud extends HTMLElement {
container.innerHTML = `
Cargando pedidos...
`;
try {
- const result = await api.listRecentOrders({ limit: 50 });
+ const result = await api.listOrders({ page: this.page, limit: this.limit });
this.orders = result.items || [];
+
+ // Actualizar paginación
+ if (result.pagination) {
+ this.totalPages = result.pagination.pages || 1;
+ this.totalOrders = result.pagination.total || 0;
+ }
+
this.renderTable();
+ this.updatePagination();
// Si hay un pedido pendiente de selección (deep-link), seleccionarlo
if (this._pendingOrderId) {
@@ -316,6 +399,22 @@ class OrdersCrud extends HTMLElement {
}
}
+ updatePagination() {
+ const pageInfo = this.shadowRoot.getElementById("pageInfo");
+ const totalInfo = this.shadowRoot.getElementById("totalInfo");
+ const btnPrev = this.shadowRoot.getElementById("btnPrev");
+ const btnNext = this.shadowRoot.getElementById("btnNext");
+ const limitSelect = this.shadowRoot.getElementById("limitSelect");
+
+ pageInfo.textContent = `Página ${this.page} de ${this.totalPages}`;
+ totalInfo.textContent = `${this.totalOrders.toLocaleString("es-AR")} pedidos`;
+
+ btnPrev.disabled = this.page <= 1;
+ btnNext.disabled = this.page >= this.totalPages;
+
+ limitSelect.value = String(this.limit);
+ }
+
renderTable() {
const container = this.shadowRoot.getElementById("ordersTable");
diff --git a/public/index.html b/public/index.html
index 163e23e..03cc8e9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,6 +7,7 @@
+