Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-05 05:25:24 +02:00
Code Issues Releases Activity Actions
Maybe/app/views/transactions/_pagination.html.erb

58 lines
2.9 KiB
Text
Raw Normal View History

Implement basic transaction pagination (#531) * install pagy * add pagy to controller, display default pagy UI * display hardcoded custom UI to confirm styling * implement custom UI with pagy methods * move pagination into partial * use lucide icons * only display pagination if 2 or more pages are available * add mobile pagination placeholder * use link_to and display greyed out buttons when no prev or next needed * sort transactions by date so grouping works appropriately with pagination * add space between mobile view buttons * remove debugging
2024-03-08 15:11:58 -05:00
<!-- start mobile pagination -->
<div class="flex flex-1 justify-center md:hidden">
<% if pagy.prev %>
<%= link_to 'Previous', pagy_url_for(pagy, pagy.prev), class: "relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50" %>
<% else %>
<div class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-200" >Previous</div>
<% end %>
<% if pagy.next %>
<%= link_to 'Next', pagy_url_for(pagy, pagy.next), class: "relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50" %>
<% else %>
<div class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-200" >Next</div>
<% end %>
</div>
<!-- end mobile pagination -->
<!-- start desktop pagination -->
<div class="hidden md:-mt-px md:flex">
<div>
<% if pagy.prev %>
<%= link_to pagy_url_for(pagy, pagy.prev), class: "inline-flex items-center px-3 py-3 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" do %>
<%= lucide_icon("chevron-left", class: "w-5 h-5 text-gray-500") %>
<% end %>
<% else %>
<div class="inline-flex items-center px-3 py-3 text-sm font-medium hover:border-gray-300" >
<%= lucide_icon("chevron-left", class: "w-5 h-5 text-gray-200") %>
</div>
<% end %>
</div>
<div class="bg-gray-25 rounded-xl">
<% pagy.series.each do |series_item| %>
<% if series_item.is_a?(Integer) %>
<%= link_to pagy_url_for(pagy, series_item), class: "inline-flex items-center px-3 py-3 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" do %>
<%= series_item %>
<% end %>
<% elsif series_item.is_a?(String) %>
<%= link_to pagy_url_for(pagy, series_item), class: "shadow-lg ring-2 ring-inset ring-gray-200 rounded-xl bg-white inline-flex items-center m-1 px-4 py-2 text-sm font-medium text-gray-900" do %>
<%= series_item %>
<% end %>
<% elsif series_item == :gap %>
<span class="inline-flex items-center px-3 py-3 text-sm font-medium text-gray-500">...</span>
<% end %>
<% end %>
</div>
<div>
<% if pagy.next %>
<%= link_to pagy_url_for(pagy, pagy.next), class: "inline-flex items-center px-3 py-3 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" do %>
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-500") %>
<% end %>
<% else %>
<div class="inline-flex items-center px-3 py-3 text-sm font-medium hover:border-gray-300" >
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-200") %>
</div>
<% end %>
</div>
</div>
<!-- end desktop pagination -->
Copy permalink