84 lines
4.8 KiB
HTML
84 lines
4.8 KiB
HTML
{% macro pagination_header(items, navigator, target_selector) %}
|
|
<div
|
|
class="flex flex-col gap-3 border-b border-amber-200/70 px-4 py-3 text-xs text-stone-600 sm:flex-row sm:items-center sm:justify-between"
|
|
>
|
|
<p>
|
|
Showing {{ items.start_index() }}–{{ items.end_index() }} of {{ items.total }}
|
|
results
|
|
</p>
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center gap-1 rounded-full border border-amber-400 px-3 py-1 font-semibold transition hover:border-amber-500 hover:text-amber-800 disabled:cursor-not-allowed disabled:border-amber-200 disabled:text-amber-300"
|
|
{% if items.has_previous() %}
|
|
data-on:click="history.pushState(null, '', '{{ navigator.page_href(items.previous_page().unwrap())|safe }}'); @get('{{ navigator.fragment_page_href(items.previous_page().unwrap())|safe }}', {responseOverrides: {selector: '{{ target_selector }}', mode: 'replace'}})"
|
|
{% else %}
|
|
disabled
|
|
{% endif %}
|
|
>
|
|
<span aria-hidden="true">←</span>
|
|
<span>Previous</span>
|
|
</button>
|
|
{% if items.is_showing_all() %}
|
|
<span class="font-semibold text-amber-800">Showing all results</span>
|
|
{% else %}
|
|
<span class="font-semibold text-amber-800"
|
|
>Page {{ items.page }} of {{ items.total_pages() }}</span
|
|
>
|
|
{% endif %}
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center gap-1 rounded-full border border-amber-400 px-3 py-1 font-semibold transition hover:border-amber-500 hover:text-amber-800 disabled:cursor-not-allowed disabled:border-amber-200 disabled:text-amber-300"
|
|
{% if items.has_next() %}
|
|
data-on:click="history.pushState(null, '', '{{ navigator.page_href(items.next_page().unwrap())|safe }}'); @get('{{ navigator.fragment_page_href(items.next_page().unwrap())|safe }}', {responseOverrides: {selector: '{{ target_selector }}', mode: 'replace'}})"
|
|
{% else %}
|
|
disabled
|
|
{% endif %}
|
|
>
|
|
<span>Next</span>
|
|
<span aria-hidden="true">→</span>
|
|
</button>
|
|
</div>
|
|
<label class="flex items-center gap-2 text-xs font-semibold text-stone-600">
|
|
<span>Rows</span>
|
|
<select
|
|
class="rounded-md border border-amber-300 bg-white px-2 py-1 text-xs font-semibold text-amber-800 transition hover:border-amber-400"
|
|
data-on:change="history.pushState(null, '', evt.target.selectedOptions[0].dataset.url); @get(evt.target.selectedOptions[0].dataset.href, {responseOverrides: {selector: '{{ target_selector }}', mode: 'replace'}})"
|
|
>
|
|
<option value="5" data-href="{{ navigator.fragment_rows_href("5")|safe }}" data-url="{{ navigator.rows_href("5")|safe }}" {% if items.is_page_size(5) %}selected{% endif %}>5</option>
|
|
<option value="10" data-href="{{ navigator.fragment_rows_href("10")|safe }}" data-url="{{ navigator.rows_href("10")|safe }}" {% if items.is_page_size(10) %}selected{% endif %}>10</option>
|
|
<option value="20" data-href="{{ navigator.fragment_rows_href("20")|safe }}" data-url="{{ navigator.rows_href("20")|safe }}" {% if items.is_page_size(20) %}selected{% endif %}>20</option>
|
|
<option value="50" data-href="{{ navigator.fragment_rows_href("50")|safe }}" data-url="{{ navigator.rows_href("50")|safe }}" {% if items.is_page_size(50) %}selected{% endif %}>50</option>
|
|
<option value="all" data-href="{{ navigator.fragment_rows_href("all")|safe }}" data-url="{{ navigator.rows_href("all")|safe }}" {% if items.is_showing_all() %}selected{% endif %}>All</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro sortable_header(label, key, navigator, target_selector) %}
|
|
{% set is_sorted = navigator.is_sorted_by(key) %}
|
|
<th
|
|
scope="col"
|
|
class="px-4 py-3"
|
|
aria-sort="{% if is_sorted %}{% if navigator.sort_direction() == "asc" %}ascending{% else %}descending{% endif %}{% else %}none{% endif %}"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="flex items-center gap-1 text-amber-900 hover:text-amber-700"
|
|
data-on:click="history.pushState(null, '', '{{ navigator.sort_href(key)|safe }}'); @get('{{ navigator.fragment_sort_href(key)|safe }}', {responseOverrides: {selector: '{{ target_selector }}', mode: 'replace'}})"
|
|
>
|
|
<span>{{ label }}</span>
|
|
{% if is_sorted %}
|
|
{% if navigator.sort_direction() == "asc" %}
|
|
<span aria-hidden="true">↑</span>
|
|
{% else %}
|
|
<span aria-hidden="true">↓</span>
|
|
{% endif %}
|
|
{% else %}
|
|
<span aria-hidden="true">↕</span>
|
|
{% endif %}
|
|
</button>
|
|
</th>
|
|
{% endmacro %}
|