now with pagination

This commit is contained in:
Gavin McDonald
2025-12-16 18:27:39 -05:00
parent 4a7e966744
commit e78ec9fee4
5 changed files with 122 additions and 8 deletions

View File

@@ -4,7 +4,7 @@
<a href={~p"/"} class="text-primary hover:underline">← Back to Home</a>
</div>
<%= if Enum.empty?(@labels) do %>
<%= if @total_count == 0 do %>
<div class="text-center py-12">
<p class="text-xl text-gray-600 dark:text-gray-400 mb-4">
No labels generated yet.
@@ -17,8 +17,15 @@
</a>
</div>
<% else %>
<div class="mb-4 text-gray-600 dark:text-gray-400">
Total labels: <%= length(@labels) %>
<div class="mb-4 flex justify-between items-center">
<div class="text-gray-600 dark:text-gray-400">
Showing <%= (@page - 1) * @per_page + 1 %>-<%= min(@page * @per_page, @total_count) %> of <%= @total_count %> labels
</div>
<%= if @total_pages > 1 do %>
<div class="text-sm text-gray-600 dark:text-gray-400">
Page <%= @page %> of <%= @total_pages %>
</div>
<% end %>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -70,5 +77,58 @@
</div>
<% end %>
</div>
<%= if @total_pages > 1 do %>
<div class="mt-8 flex justify-center items-center gap-2">
<%= if @page > 1 do %>
<a
href={~p"/labels?page=#{@page - 1}"}
class="px-4 py-2 bg-secondary-light dark:bg-secondary-dark border border-gray-300 dark:border-gray-600 rounded text-fg-light dark:text-fg-dark hover:bg-primary hover:text-white transition"
>
← Previous
</a>
<% else %>
<span class="px-4 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded text-gray-400 dark:text-gray-600 cursor-not-allowed">
← Previous
</span>
<% end %>
<div class="flex gap-1">
<%= for page_num <- pagination_range(@page, @total_pages) do %>
<%= if page_num == :ellipsis do %>
<span class="px-3 py-2 text-gray-400 dark:text-gray-600">
...
</span>
<% else %>
<%= if page_num == @page do %>
<span class="px-3 py-2 bg-primary text-white rounded font-bold">
<%= page_num %>
</span>
<% else %>
<a
href={~p"/labels?page=#{page_num}"}
class="px-3 py-2 bg-secondary-light dark:bg-secondary-dark border border-gray-300 dark:border-gray-600 rounded text-fg-light dark:text-fg-dark hover:bg-primary hover:text-white transition"
>
<%= page_num %>
</a>
<% end %>
<% end %>
<% end %>
</div>
<%= if @page < @total_pages do %>
<a
href={~p"/labels?page=#{@page + 1}"}
class="px-4 py-2 bg-secondary-light dark:bg-secondary-dark border border-gray-300 dark:border-gray-600 rounded text-fg-light dark:text-fg-dark hover:bg-primary hover:text-white transition"
>
Next →
</a>
<% else %>
<span class="px-4 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded text-gray-400 dark:text-gray-600 cursor-not-allowed">
Next →
</span>
<% end %>
</div>
<% end %>
<% end %>
</div>