From 879ac69bbe018f7dd9b2052e82989e5aa99d553b Mon Sep 17 00:00:00 2001 From: Matt Blenkinsop Date: Fri, 21 Apr 2023 10:57:43 +0000 Subject: [PATCH] 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 Signed-off-by: Martin Renvoize --- .../vue/components/ERM/AgreementLicenses.vue | 22 +-- .../vue/components/InfiniteScrollSelect.vue | 167 ++++++++++++++++++ 2 files changed, 175 insertions(+), 14 deletions(-) create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/InfiniteScrollSelect.vue diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementLicenses.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementLicenses.vue index 665be1f2efa..a244ab14413 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementLicenses.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementLicenses.vue @@ -19,22 +19,12 @@ - - - + dataType="licenses" + :required="true" + /> {{ $__("Required") }}
  • @@ -102,6 +92,7 @@ diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/InfiniteScrollSelect.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/InfiniteScrollSelect.vue new file mode 100644 index 00000000000..83bd76cce51 --- /dev/null +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/InfiniteScrollSelect.vue @@ -0,0 +1,167 @@ + + + -- 2.41.0