Samir Boulahtit
3bfe0ad3f8
- 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>
209 lines
10 KiB
HTML
209 lines
10 KiB
HTML
{#
|
|
Pagination Macro
|
|
================
|
|
A reusable pagination component for tables and lists.
|
|
|
|
Usage:
|
|
{% from 'shared/macros/pagination.html' import pagination %}
|
|
{{ pagination() }}
|
|
|
|
Required Alpine.js data properties:
|
|
- pagination.page: Current page number
|
|
- pagination.total: Total number of items
|
|
- startIndex: First item index on current page
|
|
- endIndex: Last item index on current page
|
|
- totalPages: Total number of pages
|
|
- pageNumbers: Array of page numbers with '...' for ellipsis
|
|
|
|
Required Alpine.js methods:
|
|
- previousPage(): Go to previous page
|
|
- nextPage(): Go to next page
|
|
- goToPage(pageNum): Go to specific page
|
|
#}
|
|
|
|
{% macro pagination(show_condition="true") %}
|
|
<div x-show="{{ show_condition }}" class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800">
|
|
{# Results Info #}
|
|
<span class="flex items-center col-span-3">
|
|
Showing <span class="mx-1 font-bold" x-text="startIndex"></span>-<span class="mx-1 font-bold" x-text="endIndex"></span> of <span class="mx-1 font-bold" x-text="pagination.total"></span>
|
|
</span>
|
|
<span class="col-span-2"></span>
|
|
|
|
{# Pagination Controls #}
|
|
<span class="flex col-span-4 mt-2 sm:mt-auto sm:justify-end">
|
|
<nav aria-label="Table navigation">
|
|
<ul class="inline-flex items-center">
|
|
{# Previous Button #}
|
|
<li>
|
|
<button
|
|
@click="previousPage()"
|
|
:disabled="pagination.page === 1"
|
|
class="px-3 py-1 rounded-md rounded-l-lg focus:outline-none focus:shadow-outline-purple"
|
|
:class="pagination.page === 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
|
|
aria-label="Previous"
|
|
>
|
|
<svg class="w-4 h-4 fill-current" aria-hidden="true" viewBox="0 0 20 20">
|
|
<path d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" fill-rule="evenodd"></path>
|
|
</svg>
|
|
</button>
|
|
</li>
|
|
|
|
{# Page Numbers #}
|
|
<template x-for="pageNum in pageNumbers" :key="pageNum">
|
|
<li>
|
|
<button
|
|
x-show="pageNum !== '...'"
|
|
@click="goToPage(pageNum)"
|
|
class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple"
|
|
:class="pagination.page === pageNum ? 'text-white bg-purple-600 border border-purple-600' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
|
|
x-text="pageNum"
|
|
></button>
|
|
<span x-show="pageNum === '...'" class="px-3 py-1">...</span>
|
|
</li>
|
|
</template>
|
|
|
|
{# Next Button #}
|
|
<li>
|
|
<button
|
|
@click="nextPage()"
|
|
:disabled="pagination.page === totalPages"
|
|
class="px-3 py-1 rounded-md rounded-r-lg focus:outline-none focus:shadow-outline-purple"
|
|
:class="pagination.page === totalPages ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
|
|
aria-label="Next"
|
|
>
|
|
<svg class="w-4 h-4 fill-current" aria-hidden="true" viewBox="0 0 20 20">
|
|
<path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" fill-rule="evenodd"></path>
|
|
</svg>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</span>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{#
|
|
Simple Pagination Macro (Prev/Next only)
|
|
========================================
|
|
A simpler pagination with just previous/next buttons.
|
|
|
|
Usage:
|
|
{% from 'shared/macros/pagination.html' import pagination_simple %}
|
|
{{ 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">
|
|
<span class="text-sm text-gray-700 dark:text-gray-400">
|
|
Showing <span class="font-semibold" x-text="startIndex"></span>-<span class="font-semibold" x-text="endIndex"></span>
|
|
of <span class="font-semibold" x-text="pagination.total"></span> results
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<button
|
|
@click="previousPage()"
|
|
:disabled="pagination.page === 1"
|
|
class="px-3 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 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
|
</svg>
|
|
</button>
|
|
<span class="text-sm text-gray-700 dark:text-gray-400">
|
|
Page <span x-text="pagination.page"></span> of <span x-text="totalPages"></span>
|
|
</span>
|
|
<button
|
|
@click="nextPage()"
|
|
:disabled="pagination.page === totalPages"
|
|
class="px-3 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 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|