From c872524f43e6829d5bfb913a360d36369bd1e4f1 Mon Sep 17 00:00:00 2001 From: Matt Blenkinsop Date: Thu, 15 Dec 2022 12:57:37 +0000 Subject: [PATCH] Bug 32474: Infinite scrolling of selects Investigation of this shows that the data is loaded on first mount of the ERMMain.vue component and then cached in a Pinia store. This commit shows an example of an infinite scroll without the need for Ajax based scrolling as the data is already available and injected into AgreementsFormAdd.vue. I don't think we need Ajax based scrolling on these vendor selects as the data is front-loaded and cached. Based on that we would have two options: 1) Keep the selects as they are currently with all data available as per Jonathan's patch in bug 32468 2) Use the infinite scrolling as per this commit and extract that logic into a new component that we can plug in to all the components that use a select for vendors Let me know your thoughts, if you think option 2 is better then I am happy to pull that together Test plan for this commit: 1) Create more than 20 new vendors, the more you create the more obvious the infinite scroll 2) Add a new agreement and observe that the vendor select limits the selection to 20 vendors 3) Apply patch 4) Add a new agreement and observe that the vendor select now loads more options as you scroll --- .../vue/components/ERM/AgreementsFormAdd.vue | 51 +- .../intranet-tmpl/prog/js/vue/dist/main.js | 3677 ++++++++++++++++- koha-tmpl/intranet-tmpl/prog/js/vue/fetch.js | 8 +- 3 files changed, 3728 insertions(+), 8 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue index b21340f562..9dcdfde3dc 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue @@ -33,8 +33,17 @@ v-model="agreement.vendor_id" label="name" :reduce="vendor => vendor.id" - :options="vendors" - /> + :options="paginated" + @open="onOpen" + @close="onClose" + @search="(query) => (search = query)" + > + +