[Koha-bugs] [Bug 32474] Implement infinite scroll in vue-select

[bugzilla-daemon at bugs.koha-community.org]

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=32474

Jonathan Druart <jonathan.druart+koha at gmail.com> changed:

           What    |Removed                     |Added
----------------------------------------------------------------------------
 Attachment #150031|0                           |1
        is obsolete|                            |
 Attachment #150282|0                           |1
        is obsolete|                            |
 Attachment #150283|0                           |1
        is obsolete|                            |
 Attachment #150287|0                           |1
        is obsolete|                            |
 Attachment #150309|0                           |1
        is obsolete|                            |

--- Comment #29 from Jonathan Druart <jonathan.druart+koha at gmail.com> ---
Created attachment 153110
  -->
https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=153110&action=edit
Bug 32474: Infinite scroll v-selects

This patch is an example ajax based v-select. The v-select will load the first
20 items and then continue to load paginated sections of 20 items as the user
scrolls down. The v-select also offers ajax based searches (unpaginated) and
will return to 20 item pagination if the search is cleared.

Currently the pagination just works with an Intersection Observer based on
scrolling - the main issue with this is that the size of the v-select window
changes every time new data is added to the list and this causes the scrollbar
to jump before resetting at the correct size. This can be a bit annoying,
especially when scrolling quickly.

The only way round this will either be to paginate using buttons i.e.
(previous/next page) or to limit the data to 20 items at all times and
re-paginate when scrolling back up - interested to hear thoughts/suggestions on
this or whether anyone has a magic CSS fix that solves it ;)

The new v-select is only in one location so far as a test - Agreement Licenses

Test plan:
1) You will need to add multiple licenses in order to see the pagination,
attached is a script that will create 100 dummy licenses at a time if you wish
to use that
2) Once licenses are created, apply patch and run yarn build
3) Navigate to Agreements and click the New Agreement button
4) Scroll down to the Add new license option and click the button
5) The License select is the InfiniteScrollSelect and should display the
licenses you have added
6) Open the dropdown and 20 items will be listed
7) Scroll down and as you scroll, more items will be loaded (this can be seen
in the Network tab in developer tools)
8) Enter a search query and the results should reflect the search query
9) Delete the search query and the dropdown should return to the first 20
paginated items and pagination will work again when scrolling
10) Try submitting the form with paginate/searched options and the form should
still work as intended

-- 
You are receiving this mail because:
You are watching all bug changes.