now with pagination
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user