Filter and paginate apps with AJAX requests

Filtering a list of apps should not need to reload the entire page if JavaScript is available.

This is how do handle both approaches (classic and AJAX) in one view class: https://docs.djangoproject.com/en/1.11/topics/class-based-views/generic-editing/#ajax-example

Related to #70 (closed)

mentioned in merge request !93 (merged)

mentioned in issue #101 (closed)

added dev label

@NicoAlt let's sketch out an implementation plan here, before actually starting the implementation.

@grote This is my proposal:

In AppAddView.post() we already distinguish between Ajax POSTs and form POSTs. If it's an AJAX request, it gets the apps to be added from the request body and adds them to the repo. If not, it just returns 404 because this is not used.

For this issue, I would use a modified version of the following code to register if the user scrolls near to the end of the page to imitate the behavior of the forum:

window.onscroll = function(ev) {
    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
        // at the end of the page
    }
}

In this function I make an Ajax request saying I need the next 15 apps. Django returns the apps JSON encoded. I use the data to imitate the behavior of Django's for loop in the template. This adds the apps to the page while scrolling. When the user comes close to the end of the page again, the described action chain starts again. If everything goes smooth, the user should not reach the end of the page until there are no more in the remote repo(s).

If JavaScript is enabled, the pagination element is hidden completely. I'm unsure at the moment whether I should add an element to the end of the pages saying there are now more apps or if I should leave that out.

The JavaScript request looks like the following:

request.open("POST", '')
request.setRequestHeader('RM-ACTION', 'LOAD_MORE')
request.send({appsStart: 15}) // First load
request.send({appsStart: 55}) // Fourth load

The Django post() looks something like this (semi-pseudo):

def post(self, request, *args, **kwargs):
  if request.is_ajax():
    if request.header.rm_action is 'ADD':
      # Current code
    if request.header.rm_action is 'LOAD_MORE':
      qs = self.get_queryset()
      qs = qs[request.appsStart : request.appsStart + 15]

Sounds good so far, thanks!

Do you have more details on how you want to add the apps to the page? Do you want to manually construct the HTML? Are there any libraries we could use for that task, maybe even re-use our app widget template?

When loading more, why not use the existing pagination methods to get the other apps instead of fiddling yourself with the query set and app numbers?

Please don't implement this for the remote repo app adding right away. Let's start with the repo index, because that is easier.

Do you have more details on how you want to add the apps to the page? Do you want to manually construct the HTML? Are there any libraries we could use for that task, maybe even re-use our app widget template?

I don't think we need a library here as it's a simple DOM manipulation:

document.querySelector('.rm-app-add-apps').innerHtml += appCard

maybe even re-use our app widget template?

I guess I can "copy" an existing app card and change the content of it.

When loading more, why not use the existing pagination methods to get the other apps instead of fiddling yourself with the query set and app numbers?

You mean POSTing to /repo/6/app/add/?page=103? That's a good idea, thanks!

Please don't implement this for the remote repo app adding right away. Let's start with the repo index, because that is easier.

OK, I would have started with remote add

Just to be clear: Loading on scroll like discussed in #70 (closed) can be part of this ticket as well. If that's too much for one MR, please just open a new ticket for it.

added Doing and removed ~2112488 labels

mentioned in merge request !127 (merged)

mentioned in merge request !128 (closed)

closed via merge request !127 (merged)