refactor: extract pagination macro to shared location
- Create reusable pagination macro in shared/macros/pagination.html - Update customers template to use shared pagination macro - Reduces code duplication across admin templates 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -3,6 +3,7 @@
|
||||
{% from 'shared/macros/headers.html' import 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_full %}
|
||||
|
||||
{% block title %}Customers{% endblock %}
|
||||
|
||||
@@ -235,55 +236,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Numbered Pagination -->
|
||||
<div x-show="total > limit" class="flex flex-col sm:flex-row items-center justify-between gap-4 px-4 py-3 border-t dark:border-gray-700">
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Showing <span x-text="skip + 1"></span>-<span x-text="Math.min(skip + limit, total)"></span> of <span x-text="total"></span> customers
|
||||
</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<button
|
||||
@click="page = 1; loadCustomers()"
|
||||
:disabled="page <= 1"
|
||||
class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title="First page"
|
||||
>
|
||||
<span x-html="$icon('chevron-double-left', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
<button
|
||||
@click="page--; loadCustomers()"
|
||||
:disabled="page <= 1"
|
||||
class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title="Previous page"
|
||||
>
|
||||
<span x-html="$icon('chevron-left', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
<template x-for="p in getPageNumbers()" :key="p">
|
||||
<button
|
||||
@click="goToPage(p)"
|
||||
class="px-3 py-1 text-sm font-medium rounded-md border transition-colors"
|
||||
:class="p === page
|
||||
? 'bg-purple-600 text-white border-purple-600 dark:bg-purple-500 dark:border-purple-500'
|
||||
: 'text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600'"
|
||||
x-text="p"
|
||||
></button>
|
||||
</template>
|
||||
<button
|
||||
@click="page++; loadCustomers()"
|
||||
:disabled="page >= totalPages"
|
||||
class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title="Next page"
|
||||
>
|
||||
<span x-html="$icon('chevron-right', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
<button
|
||||
@click="page = totalPages; loadCustomers()"
|
||||
:disabled="page >= totalPages"
|
||||
class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title="Last page"
|
||||
>
|
||||
<span x-html="$icon('chevron-double-right', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{{ pagination_full(load_fn="loadCustomers()", item_label="customers") }}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@@ -93,6 +93,86 @@
|
||||
{{ pagination_simple() }}
|
||||
#}
|
||||
|
||||
{#
|
||||
Pagination Full Macro (First/Prev/Numbers/Next/Last)
|
||||
=====================================================
|
||||
A full pagination component with first, previous, page numbers, next, and last buttons.
|
||||
|
||||
Usage:
|
||||
{% from 'shared/macros/pagination.html' import pagination_full %}
|
||||
{{ pagination_full() }}
|
||||
|
||||
Required Alpine.js data properties:
|
||||
- page: Current page number
|
||||
- total: Total number of items
|
||||
- limit: Items per page
|
||||
- skip: Current skip value (page - 1) * limit
|
||||
- totalPages: Computed total pages (Math.ceil(total / limit))
|
||||
|
||||
Required Alpine.js methods:
|
||||
- getPageNumbers(): Returns array of page numbers to display
|
||||
- goToPage(pageNum): Go to specific page
|
||||
- loadData(): Function to reload data (called internally as loadFn parameter)
|
||||
#}
|
||||
|
||||
{% macro pagination_full(show_condition="total > limit", load_fn="loadData()", item_label="items") %}
|
||||
<div x-show="{{ show_condition }}" class="flex flex-col sm:flex-row items-center justify-between gap-4 px-4 py-3 border-t dark:border-gray-700">
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Showing <span x-text="skip + 1"></span>-<span x-text="Math.min(skip + limit, total)"></span> of <span x-text="total"></span> {{ item_label }}
|
||||
</span>
|
||||
<div class="flex items-center gap-1">
|
||||
{# First Page #}
|
||||
<button
|
||||
@click="page = 1; {{ load_fn }}"
|
||||
:disabled="page <= 1"
|
||||
class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title="First page"
|
||||
>
|
||||
<span x-html="$icon('chevron-double-left', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
{# Previous Page #}
|
||||
<button
|
||||
@click="page--; {{ load_fn }}"
|
||||
:disabled="page <= 1"
|
||||
class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title="Previous page"
|
||||
>
|
||||
<span x-html="$icon('chevron-left', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
{# Page Numbers #}
|
||||
<template x-for="p in getPageNumbers()" :key="p">
|
||||
<button
|
||||
@click="goToPage(p)"
|
||||
class="px-3 py-1 text-sm font-medium rounded-md border transition-colors"
|
||||
:class="p === page
|
||||
? 'bg-purple-600 text-white border-purple-600 dark:bg-purple-500 dark:border-purple-500'
|
||||
: 'text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600'"
|
||||
x-text="p"
|
||||
></button>
|
||||
</template>
|
||||
{# Next Page #}
|
||||
<button
|
||||
@click="page++; {{ load_fn }}"
|
||||
:disabled="page >= totalPages"
|
||||
class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title="Next page"
|
||||
>
|
||||
<span x-html="$icon('chevron-right', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
{# Last Page #}
|
||||
<button
|
||||
@click="page = totalPages; {{ load_fn }}"
|
||||
:disabled="page >= totalPages"
|
||||
class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title="Last page"
|
||||
>
|
||||
<span x-html="$icon('chevron-double-right', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
{% macro pagination_simple(show_condition="true") %}
|
||||
<div x-show="{{ show_condition }}" class="flex items-center justify-between px-4 py-3 bg-white border-t border-gray-200 dark:border-gray-700 dark:bg-gray-800">
|
||||
<div class="flex items-center">
|
||||
|
||||
Reference in New Issue
Block a user