moby/brewlog
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: push URL state when sorting/paging tables

Browse source
This commit is contained in:
Jon Seager 2025-11-26 15:24:33 +00:00
parent eabf69545f
commit 0e06d4c5dc
No known key found for this signature in database
2 changed files with 25 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
templates/partials/roast_list.html
View file

@ -20,7 +20,7 @@
type="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" 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 roasts.has_previous() %} {% if roasts.has_previous() %}
data-on:click="@get('{{ navigator.fragment_page_href(roasts.previous_page().unwrap()) }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})" data-on:click="history.pushState(null, '', '{{ navigator.page_href(roasts.previous_page().unwrap())|safe }}'); @get('{{ navigator.fragment_page_href(roasts.previous_page().unwrap())|safe }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
{% else %} {% else %}
disabled disabled
{% endif %} {% endif %}
@ -39,7 +39,7 @@
type="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" 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 roasts.has_next() %} {% if roasts.has_next() %}
data-on:click="@get('{{ navigator.fragment_page_href(roasts.next_page().unwrap()) }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})" data-on:click="history.pushState(null, '', '{{ navigator.page_href(roasts.next_page().unwrap())|safe }}'); @get('{{ navigator.fragment_page_href(roasts.next_page().unwrap())|safe }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
{% else %} {% else %}
disabled disabled
{% endif %} {% endif %}
@ -52,13 +52,13 @@
<span>Rows</span> <span>Rows</span>
<select <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" 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="@get(evt.target.selectedOptions[0].dataset.href, {responseOverrides: {selector: '#roast-list', mode: 'replace'}})" data-on:change="history.pushState(null, '', evt.target.selectedOptions[0].dataset.url); @get(evt.target.selectedOptions[0].dataset.href, {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
> >
<option value="5" data-href="{{ navigator.fragment_rows_href("5") }}" {% if roasts.is_page_size(5) %}selected{% endif %}>5</option> <option value="5" data-href="{{ navigator.fragment_rows_href("5")|safe }}" data-url="{{ navigator.rows_href("5")|safe }}" {% if roasts.is_page_size(5) %}selected{% endif %}>5</option>
<option value="10" data-href="{{ navigator.fragment_rows_href("10") }}" {% if roasts.is_page_size(10) %}selected{% endif %}>10</option> <option value="10" data-href="{{ navigator.fragment_rows_href("10")|safe }}" data-url="{{ navigator.rows_href("10")|safe }}" {% if roasts.is_page_size(10) %}selected{% endif %}>10</option>
<option value="20" data-href="{{ navigator.fragment_rows_href("20") }}" {% if roasts.is_page_size(20) %}selected{% endif %}>20</option> <option value="20" data-href="{{ navigator.fragment_rows_href("20")|safe }}" data-url="{{ navigator.rows_href("20")|safe }}" {% if roasts.is_page_size(20) %}selected{% endif %}>20</option>
<option value="50" data-href="{{ navigator.fragment_rows_href("50") }}" {% if roasts.is_page_size(50) %}selected{% endif %}>50</option> <option value="50" data-href="{{ navigator.fragment_rows_href("50")|safe }}" data-url="{{ navigator.rows_href("50")|safe }}" {% if roasts.is_page_size(50) %}selected{% endif %}>50</option>
<option value="all" data-href="{{ navigator.fragment_rows_href("all") }}" {% if roasts.is_showing_all() %}selected{% endif %}>All</option> <option value="all" data-href="{{ navigator.fragment_rows_href("all")|safe }}" data-url="{{ navigator.rows_href("all")|safe }}" {% if roasts.is_showing_all() %}selected{% endif %}>All</option>
</select> </select>
</label> </label>
</div> </div>
@ -76,7 +76,7 @@
<button <button
type="button" type="button"
class="flex items-center gap-1 text-amber-900 hover:text-amber-700" class="flex items-center gap-1 text-amber-900 hover:text-amber-700"
data-on:click="@get('{{ navigator.fragment_sort_href("created-at") }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})" data-on:click="history.pushState(null, '', '{{ navigator.sort_href("created-at")|safe }}'); @get('{{ navigator.fragment_sort_href("created-at")|safe }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
> >
<span>Added</span> <span>Added</span>
{% if created_sorted %} {% if created_sorted %}
@ -99,7 +99,7 @@
<button <button
type="button" type="button"
class="flex items-center gap-1 text-amber-900 hover:text-amber-700" class="flex items-center gap-1 text-amber-900 hover:text-amber-700"
data-on:click="@get('{{ navigator.fragment_sort_href("name") }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})" data-on:click="history.pushState(null, '', '{{ navigator.sort_href("name")|safe }}'); @get('{{ navigator.fragment_sort_href("name")|safe }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
> >
<span>Roast</span> <span>Roast</span>
{% if name_sorted %} {% if name_sorted %}
@ -122,7 +122,7 @@
<button <button
type="button" type="button"
class="flex items-center gap-1 text-amber-900 hover:text-amber-700" class="flex items-center gap-1 text-amber-900 hover:text-amber-700"
data-on:click="@get('{{ navigator.fragment_sort_href("roaster") }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})" data-on:click="history.pushState(null, '', '{{ navigator.sort_href("roaster")|safe }}'); @get('{{ navigator.fragment_sort_href("roaster")|safe }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
> >
<span>Roaster</span> <span>Roaster</span>
{% if roaster_sorted %} {% if roaster_sorted %}
@ -145,7 +145,7 @@
<button <button
type="button" type="button"
class="flex items-center gap-1 text-amber-900 hover:text-amber-700" class="flex items-center gap-1 text-amber-900 hover:text-amber-700"
data-on:click="@get('{{ navigator.fragment_sort_href("origin") }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})" data-on:click="history.pushState(null, '', '{{ navigator.sort_href("origin")|safe }}'); @get('{{ navigator.fragment_sort_href("origin")|safe }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
> >
<span>Origin</span> <span>Origin</span>
{% if origin_sorted %} {% if origin_sorted %}
@ -168,7 +168,7 @@
<button <button
type="button" type="button"
class="flex items-center gap-1 text-amber-900 hover:text-amber-700" class="flex items-center gap-1 text-amber-900 hover:text-amber-700"
data-on:click="@get('{{ navigator.fragment_sort_href("producer") }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})" data-on:click="history.pushState(null, '', '{{ navigator.sort_href("producer")|safe }}'); @get('{{ navigator.fragment_sort_href("producer")|safe }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
> >
<span>Producer</span> <span>Producer</span>
{% if producer_sorted %} {% if producer_sorted %}

24
templates/partials/roaster_list.html
View file

@ -22,7 +22,7 @@
type="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" 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 roasters.has_previous() %} {% if roasters.has_previous() %}
data-on:click="@get('{{ navigator.fragment_page_href(roasters.previous_page().unwrap()) }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})" data-on:click="history.pushState(null, '', '{{ navigator.page_href(roasters.previous_page().unwrap())|safe }}'); @get('{{ navigator.fragment_page_href(roasters.previous_page().unwrap())|safe }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
{% else %} {% else %}
disabled disabled
{% endif %} {% endif %}
@ -41,7 +41,7 @@
type="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" 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 roasters.has_next() %} {% if roasters.has_next() %}
data-on:click="@get('{{ navigator.fragment_page_href(roasters.next_page().unwrap()) }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})" data-on:click="history.pushState(null, '', '{{ navigator.page_href(roasters.next_page().unwrap())|safe }}'); @get('{{ navigator.fragment_page_href(roasters.next_page().unwrap())|safe }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
{% else %} {% else %}
disabled disabled
{% endif %} {% endif %}
@ -54,13 +54,13 @@
<span>Rows</span> <span>Rows</span>
<select <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" 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="@get(evt.target.selectedOptions[0].dataset.href, {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})" data-on:change="history.pushState(null, '', evt.target.selectedOptions[0].dataset.url); @get(evt.target.selectedOptions[0].dataset.href, {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
> >
<option value="5" data-href="{{ navigator.fragment_rows_href("5") }}" {% if roasters.is_page_size(5) %}selected{% endif %}>5</option> <option value="5" data-href="{{ navigator.fragment_rows_href("5")|safe }}" data-url="{{ navigator.rows_href("5")|safe }}" {% if roasters.is_page_size(5) %}selected{% endif %}>5</option>
<option value="10" data-href="{{ navigator.fragment_rows_href("10") }}" {% if roasters.is_page_size(10) %}selected{% endif %}>10</option> <option value="10" data-href="{{ navigator.fragment_rows_href("10")|safe }}" data-url="{{ navigator.rows_href("10")|safe }}" {% if roasters.is_page_size(10) %}selected{% endif %}>10</option>
<option value="20" data-href="{{ navigator.fragment_rows_href("20") }}" {% if roasters.is_page_size(20) %}selected{% endif %}>20</option> <option value="20" data-href="{{ navigator.fragment_rows_href("20")|safe }}" data-url="{{ navigator.rows_href("20")|safe }}" {% if roasters.is_page_size(20) %}selected{% endif %}>20</option>
<option value="50" data-href="{{ navigator.fragment_rows_href("50") }}" {% if roasters.is_page_size(50) %}selected{% endif %}>50</option> <option value="50" data-href="{{ navigator.fragment_rows_href("50")|safe }}" data-url="{{ navigator.rows_href("50")|safe }}" {% if roasters.is_page_size(50) %}selected{% endif %}>50</option>
<option value="all" data-href="{{ navigator.fragment_rows_href("all") }}" {% if roasters.is_showing_all() %}selected{% endif %}>All</option> <option value="all" data-href="{{ navigator.fragment_rows_href("all")|safe }}" data-url="{{ navigator.rows_href("all")|safe }}" {% if roasters.is_showing_all() %}selected{% endif %}>All</option>
</select> </select>
</label> </label>
</div> </div>
@ -78,7 +78,7 @@
<button <button
type="button" type="button"
class="flex items-center gap-1 text-amber-900 hover:text-amber-700" class="flex items-center gap-1 text-amber-900 hover:text-amber-700"
data-on:click="@get('{{ navigator.fragment_sort_href("created-at") }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})" data-on:click="history.pushState(null, '', '{{ navigator.sort_href("created-at")|safe }}'); @get('{{ navigator.fragment_sort_href("created-at")|safe }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
> >
<span>Added</span> <span>Added</span>
{% if created_sorted %} {% if created_sorted %}
@ -101,7 +101,7 @@
<button <button
type="button" type="button"
class="flex items-center gap-1 text-amber-900 hover:text-amber-700" class="flex items-center gap-1 text-amber-900 hover:text-amber-700"
data-on:click="@get('{{ navigator.fragment_sort_href("name") }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})" data-on:click="history.pushState(null, '', '{{ navigator.sort_href("name")|safe }}'); @get('{{ navigator.fragment_sort_href("name")|safe }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
> >
<span>Name</span> <span>Name</span>
{% if name_sorted %} {% if name_sorted %}
@ -124,7 +124,7 @@
<button <button
type="button" type="button"
class="flex items-center gap-1 text-amber-900 hover:text-amber-700" class="flex items-center gap-1 text-amber-900 hover:text-amber-700"
data-on:click="@get('{{ navigator.fragment_sort_href("country") }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})" data-on:click="history.pushState(null, '', '{{ navigator.sort_href("country")|safe }}'); @get('{{ navigator.fragment_sort_href("country")|safe }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
> >
<span>Country</span> <span>Country</span>
{% if country_sorted %} {% if country_sorted %}
@ -147,7 +147,7 @@
<button <button
type="button" type="button"
class="flex items-center gap-1 text-amber-900 hover:text-amber-700" class="flex items-center gap-1 text-amber-900 hover:text-amber-700"
data-on:click="@get('{{ navigator.fragment_sort_href("city") }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})" data-on:click="history.pushState(null, '', '{{ navigator.sort_href("city")|safe }}'); @get('{{ navigator.fragment_sort_href("city")|safe }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
> >
<span>City</span> <span>City</span>
{% if city_sorted %} {% if city_sorted %}