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

fix: implement handleSort method for sortable table headers

Browse Source 
- Update th_sortable macro to call handleSort(key) instead of inline logic
- Add handleSort method to subscriptions.js, subscription-tiers.js, billing-history.js
- Add sort_by and sort_order params to API calls in all three files
- Reset to page 1 when sort changes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2025-12-25 22:44:33 +01:00
parent abfd823ec8
commit dbcbe38217
4 changed files with 45 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/templates/shared/macros/tables.html
View File

@@ -77,8 +77,8 @@
Parameters:
- key: The data key/column name for sorting
- label: Display label for the column
- sort_func: Alpine.js function name to call on click (default: 'sortBy')
- sort_order_var: Alpine.js variable for current sort order (default: 'sortOrder')
- sort_key_var: Alpine.js variable for current sort key (default: 'sortBy')
- sort_order_var: Alpine.js variable for sort order (default: 'sortOrder')
Usage:
{% call table_header_custom() %}
@@ -97,27 +97,27 @@
this.sortBy = key;
this.sortOrder = 'asc';
}
this.loadData();
this.loadData(); // or loadSubscriptions(), etc.
}
#}
{% macro th_sortable(key, label, sort_func='sortBy', sort_order_var='sortOrder') %}
{% macro th_sortable(key, label, sort_key_var='sortBy', sort_order_var='sortOrder') %}
<th class="px-4 py-3">
<button
@click="{{ sort_func }} = '{{ key }}'; {{ sort_order_var }} = {{ sort_func }} === '{{ key }}' && {{ sort_order_var }} === 'asc' ? 'desc' : 'asc'; loadData()"
@click="handleSort('{{ key }}')"
class="flex items-center space-x-1 hover:text-gray-700 dark:hover:text-gray-200 transition-colors group"
>
<span>{{ label }}</span>
<span class="flex flex-col">
<svg
class="w-3 h-3 -mb-1 transition-colors"
:class="{{ sort_func }} === '{{ key }}' && {{ sort_order_var }} === 'asc' ? 'text-purple-600 dark:text-purple-400' : 'text-gray-300 dark:text-gray-600 group-hover:text-gray-400'"
:class="{{ sort_key_var }} === '{{ key }}' && {{ sort_order_var }} === 'asc' ? 'text-purple-600 dark:text-purple-400' : 'text-gray-300 dark:text-gray-600 group-hover:text-gray-400'"
fill="currentColor" viewBox="0 0 20 20"
>
<path d="M5 12l5-5 5 5H5z"/>
</svg>
<svg
class="w-3 h-3 -mt-1 transition-colors"
:class="{{ sort_func }} === '{{ key }}' && {{ sort_order_var }} === 'desc' ? 'text-purple-600 dark:text-purple-400' : 'text-gray-300 dark:text-gray-600 group-hover:text-gray-400'"
:class="{{ sort_key_var }} === '{{ key }}' && {{ sort_order_var }} === 'desc' ? 'text-purple-600 dark:text-purple-400' : 'text-gray-300 dark:text-gray-600 group-hover:text-gray-400'"
fill="currentColor" viewBox="0 0 20 20"
>
<path d="M15 8l-5 5-5-5h10z"/>

13
static/admin/js/billing-history.js
View File

@@ -136,6 +136,8 @@ function adminBillingHistory() {
params.append('per_page', this.pagination.per_page);
if (this.filters.vendor_id) params.append('vendor_id', this.filters.vendor_id);
if (this.filters.status) params.append('status', this.filters.status);
if (this.sortBy) params.append('sort_by', this.sortBy);
if (this.sortOrder) params.append('sort_order', this.sortOrder);
const data = await apiClient.get(`/admin/subscriptions/billing/history?${params}`);
this.invoices = data.invoices || [];
@@ -154,6 +156,17 @@ function adminBillingHistory() {
}
},
handleSort(key) {
if (this.sortBy === key) {
this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
} else {
this.sortBy = key;
this.sortOrder = 'asc';
}
this.pagination.page = 1;
this.loadInvoices();
},
updateStatusCounts() {
// Reset counts
this.statusCounts = {

12
static/admin/js/subscription-tiers.js
View File

@@ -74,6 +74,8 @@ function adminSubscriptionTiers() {
try {
const params = new URLSearchParams();
params.append('include_inactive', this.includeInactive);
if (this.sortBy) params.append('sort_by', this.sortBy);
if (this.sortOrder) params.append('sort_order', this.sortOrder);
const data = await apiClient.get(`/admin/subscriptions/tiers?${params}`);
this.tiers = data.tiers || [];
@@ -86,6 +88,16 @@ function adminSubscriptionTiers() {
}
},
handleSort(key) {
if (this.sortBy === key) {
this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
} else {
this.sortBy = key;
this.sortOrder = 'asc';
}
this.loadTiers();
},
async loadStats() {
try {
const data = await apiClient.get('/admin/subscriptions/stats');

13
static/admin/js/subscriptions.js
View File

@@ -144,6 +144,8 @@ function adminSubscriptions() {
if (this.filters.status) params.append('status', this.filters.status);
if (this.filters.tier) params.append('tier', this.filters.tier);
if (this.filters.search) params.append('search', this.filters.search);
if (this.sortBy) params.append('sort_by', this.sortBy);
if (this.sortOrder) params.append('sort_order', this.sortOrder);
const data = await apiClient.get(`/admin/subscriptions?${params}`);
this.subscriptions = data.subscriptions || [];
@@ -168,6 +170,17 @@ function adminSubscriptions() {
this.loadSubscriptions();
},
handleSort(key) {
if (this.sortBy === key) {
this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
} else {
this.sortBy = key;
this.sortOrder = 'asc';
}
this.pagination.page = 1;
this.loadSubscriptions();
},
previousPage() {
if (this.pagination.page > 1) {
this.pagination.page--;