KKlochko
/
decentralised_book_index
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update the pagination component to show itself if there's more than one page.
continuous-integration/drone/push Build is failing Details

Browse Source
dev
KKlochko 1 month ago
parent 54f15bead3
commit 3430693dac
1 changed files with 51 additions and 41 deletions
Show Stats Download Patch File Download Diff File

92
lib/decentralised_book_index_web/components/my_components/pagination.ex
Unescape View File

@ -11,48 +11,58 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.Pagination do
assigns = assign(assigns, :current_page_number, get_current_page(assigns.page)) assigns = assign(assigns, :current_page_number, get_current_page(assigns.page))
~H""" ~H"""
<nav aria-label="Page navigation example" class="flex justify-center"> <%= if AshPhoenix.LiveView.prev_page?(@page) or AshPhoenix.LiveView.next_page?(@page) do %>
<ul class="inline-flex -space-x-px text-base h-10 mx-auto"> <nav aria-label="Page navigation example" class="flex justify-center">
<li class="pl-auto"> <ul class="inline-flex -space-x-px text-base h-10 mx-auto">
<.button_link <li class="pl-auto">
data-role="previous-page" <.button_link
kind="primary" data-role="previous-page"
inverse kind="primary"
patch={"#{@endpoint}?#{page_params_which(@page, @params, "prev")}"} inverse
class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white" patch={"#{@endpoint}?#{page_params_which(@page, @params, "prev")}"}
disabled={!AshPhoenix.LiveView.prev_page?(@page)} class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
> disabled={!AshPhoenix.LiveView.prev_page?(@page)}
Previous >
</.button_link> Previous
</li> </.button_link>
<%= for number <- get_page_numbers(@page) do %> </li>
<%= if number == @current_page_number do %> <%= for number <- get_page_numbers(@page) do %>
<li> <%= if number == @current_page_number do %>
<a href={"#{@endpoint}?#{page_params_number(@page_params, @params, number)}"} <li>
aria-current="page" <a
class="flex items-center justify-center px-4 h-10 text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">{number}</a> href={"#{@endpoint}?#{page_params_number(@page_params, @params, number)}"}
</li> aria-current="page"
<% else %> class="flex items-center justify-center px-4 h-10 text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white"
<li> >
<a href={"#{@endpoint}?#{page_params_number(@page_params, @params, number)}"} {number}
class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{number}</a> </a>
</li> </li>
<% else %>
<li>
<a
href={"#{@endpoint}?#{page_params_number(@page_params, @params, number)}"}
class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
>
{number}
</a>
</li>
<% end %>
<% end %> <% end %>
<% end %> <li>
<li> <.button_link
<.button_link data-role="next-page"
data-role="next-page" kind="primary"
kind="primary" inverse
inverse patch={"#{@endpoint}?#{page_params_which(@page, @params, "next")}"}
patch={"#{@endpoint}?#{page_params_which(@page, @params, "next")}"} class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white" disabled={!AshPhoenix.LiveView.next_page?(@page)}
disabled={!AshPhoenix.LiveView.next_page?(@page)} >
> Next
Next </.button_link>
</.button_link> </li>
</li> </ul>
</ul> </nav>
</nav> <% end %>
""" """
end end

Write Preview
Loading…
Cancel
Save