Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Display Pagination Links #153

Open
ghost opened this issue Aug 25, 2020 · 5 comments
Open

Display Pagination Links #153

ghost opened this issue Aug 25, 2020 · 5 comments
Labels
enhancement A feature that exists, works as intended but needs to be improved feature request A feature that does not yet exist but will be a good addition to the library medium These issues are geared for people who have contributed to the project before

Comments

@ghost
Copy link

ghost commented Aug 25, 2020

One of the most important parts of any framework is pagination. Masonite seems to be very much inspired by the Laravel Framework. So I did try to display pagination with {{ collection.links() }}, sadly this does not work.

Am I missing something or this feature has not been added yet?

@josephmancuso
Copy link
Member

This feature has not been added yet. I will move this over to the ORM repo and see if we can add it there

@josephmancuso josephmancuso transferred this issue from MasoniteFramework/masonite Sep 9, 2020
@josephmancuso josephmancuso added enhancement A feature that exists, works as intended but needs to be improved feature request A feature that does not yet exist but will be a good addition to the library labels Sep 21, 2020
@josephmancuso josephmancuso mentioned this issue Oct 25, 2020
3 tasks
@josephmancuso
Copy link
Member

Pagination is done but we still need to add links. I'm not sure how this should be done yet. We might have to extend this in Masonite itself. The way Laravel does it is it actually returns the contents of a view instead of HTML.

@girardinsamuel
Copy link
Contributor

Yes I have looked into this and we need to add stuff in Masonite itself, I could try to do it 😉

@josephmancuso josephmancuso changed the title Display Pagination Display Pagination Links Oct 29, 2020
@josephmancuso
Copy link
Member

This should used predefined snippets as well as be able to register a new HTML snippet:

This is for bootstrap:

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

And tailwind:

<nav class="relative z-0 inline-flex shadow-sm -space-x-px" aria-label="Pagination">
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
          <span class="sr-only">Previous</span>
          <!-- Heroicon name: chevron-left -->
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
          1
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
          2
        </a>
        <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
          3
        </a>
        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
          ...
        </span>
        <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
          8
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
          9
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
          10
        </a>
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
          <span class="sr-only">Next</span>
          <!-- Heroicon name: chevron-right -->
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
      </nav>

We should also be able to register a new snippet from view in Masonite.

Something like:

Pagination.register_links('bulma', view.render('custom-pagination-links'))

@josephmancuso josephmancuso added the medium These issues are geared for people who have contributed to the project before label Jan 18, 2021
@josephmancuso
Copy link
Member

josephmancuso commented Jun 25, 2022

This could also be done possibly on the connection resolver class. Something like:

self.application.make("resolver").register_links(
    bulma, 
    lambda collection: vendor.render('custom-pagination-links', collection)
)

I think we would have to specify a function or something so it will be called when you call the links on the collection so it will render in real time

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement A feature that exists, works as intended but needs to be improved feature request A feature that does not yet exist but will be a good addition to the library medium These issues are geared for people who have contributed to the project before
Projects
None yet
Development

No branches or pull requests

2 participants