]> git.koha-community.org Git - koha.git/commit
Bug 32474: Infinite scroll v-selects
authorMatt Blenkinsop <matt.blenkinsop@ptfs-europe.com>
Fri, 21 Apr 2023 10:57:43 +0000 (10:57 +0000)
committerKatrin Fischer <katrin.fischer@bsz-bw.de>
Tue, 30 Jan 2024 16:48:44 +0000 (17:48 +0100)
commit28078a6e25673a911cd673c547cb06d3047422b0
tree5e6db9737fee4c1cb5034c2d9bcd69b7c979efa2
parent5fbdc2d7d36a2a02dca145e3def584707b61ad5a
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

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementLicenses.vue
koha-tmpl/intranet-tmpl/prog/js/vue/components/InfiniteScrollSelect.vue [new file with mode: 0644]