sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(loyalty): use shared pagination macro on card detail transactions
Some checks failed
CI / pytest (push) Has been cancelled
Details
CI / ruff (push) Successful in 14s
Details
CI / validate (push) Has been cancelled
Details
CI / dependency-scanning (push) Has been cancelled
Details
CI / docs (push) Has been cancelled
Details
CI / deploy (push) Has been cancelled
Details

Browse Source 
Replace custom pagination with the shared pagination_simple macro
to match the cards list page pattern. Always shows "Showing X-Y of Z"
with Previous/Next — no longer hidden when only 1 page. Uses standard
Alpine.js pagination interface (pagination.page, totalPages, startIndex,
endIndex, pageNumbers, previousPage, nextPage, goToPage).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2026-04-15 22:18:59 +02:00
parent 914967edcc
commit ca152cd544
2 changed files with 32 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
app/modules/loyalty/static/store/js/loyalty-card-detail.js
View File

@@ -11,7 +11,7 @@ function storeLoyaltyCardDetail() {
cardId: null,
card: null,
transactions: [],
txPagination: { page: 1, perPage: 20, total: 0, pages: 0 },
pagination: { page: 1, per_page: 20, total: 0 },
loading: false,
error: null,
@@ -42,7 +42,7 @@ function storeLoyaltyCardDetail() {
// Use platform pagination setting if available
if (window.PlatformSettings) {
try {
this.txPagination.perPage = await window.PlatformSettings.getRowsPerPage();
this.pagination.per_page = await window.PlatformSettings.getRowsPerPage();
} catch (e) { /* use default */ }
}
@@ -77,29 +77,46 @@ function storeLoyaltyCardDetail() {
async loadTransactions(page = 1) {
try {
const skip = (page - 1) * this.txPagination.perPage;
const skip = (page - 1) * this.pagination.per_page;
const response = await apiClient.get(
`/store/loyalty/cards/${this.cardId}/transactions?skip=${skip}&limit=${this.txPagination.perPage}`
`/store/loyalty/cards/${this.cardId}/transactions?skip=${skip}&limit=${this.pagination.per_page}`
);
if (response && response.transactions) {
this.transactions = response.transactions;
this.txPagination.total = response.total || 0;
this.txPagination.page = page;
this.txPagination.pages = Math.ceil(this.txPagination.total / this.txPagination.perPage);
loyaltyCardDetailLog.info(`Loaded ${this.transactions.length} of ${this.txPagination.total} transactions (page ${page})`);
this.pagination.total = response.total || 0;
this.pagination.page = page;
loyaltyCardDetailLog.info(`Loaded ${this.transactions.length} of ${this.pagination.total} transactions (page ${page})`);
}
} catch (error) {
loyaltyCardDetailLog.warn('Failed to load transactions:', error.message);
}
},
txPreviousPage() {
if (this.txPagination.page > 1) this.loadTransactions(this.txPagination.page - 1);
// Standard pagination interface (matches shared pagination macro)
get totalPages() {
return Math.max(1, Math.ceil(this.pagination.total / this.pagination.per_page));
},
txNextPage() {
if (this.txPagination.page < this.txPagination.pages) this.loadTransactions(this.txPagination.page + 1);
get startIndex() {
if (this.pagination.total === 0) return 0;
return (this.pagination.page - 1) * this.pagination.per_page + 1;
},
get endIndex() {
return Math.min(this.pagination.page * this.pagination.per_page, this.pagination.total);
},
get pageNumbers() {
const pages = [];
for (let i = 1; i <= this.totalPages; i++) {
if (i === 1 || i === this.totalPages || Math.abs(i - this.pagination.page) <= 1) {
pages.push(i);
} else if (pages[pages.length - 1] !== '...') {
pages.push('...');
}
}
return pages;
},
previousPage() { if (this.pagination.page > 1) this.loadTransactions(this.pagination.page - 1); },
nextPage() { if (this.pagination.page < this.totalPages) this.loadTransactions(this.pagination.page + 1); },
goToPage(p) { if (p >= 1 && p <= this.totalPages) this.loadTransactions(p); },
formatNumber(num) {
return num == null ? '0' : new Intl.NumberFormat('en-US').format(num);

18
app/modules/loyalty/templates/loyalty/store/card-detail.html
View File

@@ -3,6 +3,7 @@
{% from 'shared/macros/headers.html' import detail_page_header %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
{% from 'shared/macros/pagination.html' import pagination_simple %}
{% block title %}{{ _('loyalty.store.card_detail.title') }}{% endblock %}
@@ -152,22 +153,7 @@
</tbody>
{% endcall %}
<!-- Pagination -->
<div x-show="txPagination.pages > 1" class="px-4 py-3 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
<button @click="txPreviousPage()" :disabled="txPagination.page <= 1"
type="button"
class="px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50">
{{ _('loyalty.common.previous') }}
</button>
<span class="text-sm text-gray-500 dark:text-gray-400"
x-text="'{{ _('loyalty.store.card_detail.page_x_of_y') }}'.replace('{page}', txPagination.page).replace('{pages}', txPagination.pages)">
</span>
<button @click="txNextPage()" :disabled="txPagination.page >= txPagination.pages"
type="button"
class="px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50">
{{ _('loyalty.common.next') }}
</button>
</div>
{{ pagination_simple() }}
</div>
</div>
{% endblock %}