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"/>