From 0bf1557b3bf8e6bf692ad1e1d3ad4ea3903642e7 Mon Sep 17 00:00:00 2001 From: Matt Blenkinsop Date: Mon, 9 Jan 2023 12:34:59 +0000 Subject: [PATCH] Bug 32474: Ajax based infinite scroll selects I have created a reuseable component called InfiniteScrollSelect which allows v-selects to load options in a paginated manner through Ajax requests rather than making expensive Ajax calls when the select box is first opened. All v-selects that are likely to need this functionality have been updated for Agreements, Licenses, Packages and Vendors. Test Plan: To test this requires adding enough dummy data to show the pagination fully. I have written a script that does this, please see the attachments if you wish to use this. 1) Navigate to a window that offers a dropdown menu for either Vendors, Agreements, Licenses, Packages. 2) Observe that all data is already pre-loaded into the options list and only one request is made for this data regardless of data size 3) Apply patch 4) Navigate to the same select box and observe that only the first 20 values are available with paginated Ajax requests being made as you scroll down Signed-off-by: Lucas Gass --- .../vue/components/ERM/AgreementLicenses.vue | 23 ++-- .../components/ERM/AgreementRelationships.vue | 29 ++-- .../vue/components/ERM/AgreementsFormAdd.vue | 14 +- .../ERM/EHoldingsLocalPackageAgreements.vue | 23 ++-- .../ERM/EHoldingsLocalPackagesFormAdd.vue | 13 +- .../EHoldingsLocalTitlesFormAddResources.vue | 32 ++--- .../ERM/EHoldingsLocalTitlesFormImport.vue | 17 +-- .../components/ERM/InfiniteScrollSelect.vue | 126 ++++++++++++++++++ .../js/vue/components/ERM/LicensesFormAdd.vue | 10 +- koha-tmpl/intranet-tmpl/prog/js/vue/fetch.js | 39 ++++-- 10 files changed, 215 insertions(+), 111 deletions(-) create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/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 46980679ae3..62fa048cb88 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,11 @@ - - - + :dataType="'licenses'" + /> {{ $__("Required") }}
  • @@ -102,6 +91,7 @@ diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementRelationships.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementRelationships.vue index 131f940caea..41888dc920d 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementRelationships.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementRelationships.vue @@ -19,22 +19,11 @@ - - - + :dataType="'agreements'" + /> {{ $__("Required") }}
  • @@ -85,7 +74,8 @@ diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesFormAdd.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesFormAdd.vue index 82d0eb96119..2783281b56b 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesFormAdd.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesFormAdd.vue @@ -25,12 +25,10 @@ -
  • @@ -87,20 +85,18 @@ diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesFormImport.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesFormImport.vue index 96684bf6db1..6ac35e72821 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesFormImport.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesFormImport.vue @@ -8,14 +8,11 @@
    {{ $__("To the following local package") }}: - - + :dataType="'localpackages'" + />
    @@ -27,6 +24,7 @@ import { setMessage, setError, setWarning } from "../../messages" import { createVNode, render } from "vue" import { useDataTable } from "../../composables/datatables" import { checkError, fetchLocalPackages } from "../../fetch.js" +import InfiniteScrollSelect from "./InfiniteScrollSelect.vue" export default { setup() { @@ -46,7 +44,7 @@ export default { } }, beforeCreate() { - fetchLocalPackages().then(packages => { + fetchLocalPackages(1).then(packages => { this.packages = packages if (this.packages.length) { this.package_id = packages[0].package_id @@ -151,6 +149,9 @@ export default { mounted() { this.build_datatable() }, + components: { + InfiniteScrollSelect + }, name: "EHoldingsLocalTitlesFormImport", } diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/InfiniteScrollSelect.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/InfiniteScrollSelect.vue new file mode 100644 index 00000000000..722bb476a65 --- /dev/null +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/InfiniteScrollSelect.vue @@ -0,0 +1,126 @@ + + + diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue index b5034591e24..453b73d8b0e 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue @@ -28,12 +28,10 @@ -
  • @@ -148,6 +146,7 @@ import { inject } from "vue" import flatPickr from "vue-flatpickr-component" import UserRoles from "./UserRoles.vue" +import InfiniteScrollSelect from "./InfiniteScrollSelect.vue" import Documents from "./Documents.vue" import { setMessage, setError, setWarning } from "../../messages" import { fetchLicense } from "../../fetch" @@ -290,6 +289,7 @@ export default { flatPickr, UserRoles, Documents, + InfiniteScrollSelect }, name: "LicensesFormAdd", } diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/fetch.js b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch.js index 1a31a2e9495..43ca90dd70d 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/fetch.js +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch.js @@ -1,5 +1,7 @@ import { setError } from "./messages"; +const returnedValuesPerPage = 20 + export const fetchAgreement = async function (agreement_id) { if (!agreement_id) return; const apiUrl = "/api/v1/erm/agreements/" + agreement_id; @@ -22,8 +24,11 @@ export const fetchAgreement = async function (agreement_id) { return agreement; }; -export const fetchAgreements = async function () { - const apiUrl = "/api/v1/erm/agreements?_per_page=-1"; +export const fetchAgreements = async function (page) { + const apiUrl = page ? + `/api/v1/erm/agreements?_page=${page}&_per_page=${returnedValuesPerPage}` + : + "/api/v1/erm/agreements?_per_page=-1" let agreements; await fetch(apiUrl) .then(checkError) @@ -59,8 +64,11 @@ export const fetchLicense = async function (license_id) { return license; }; -export const fetchLicenses = async function () { - const apiUrl = "/api/v1/erm/licenses?_per_page=-1"; +export const fetchLicenses = async function (page) { + const apiUrl = page ? + `/api/v1/erm/licenses?_page=${page}&_per_page=${returnedValuesPerPage}` + : + "/api/v1/erm/licenses?_per_page=-1"; let licenses; await fetch(apiUrl, { headers: { @@ -96,8 +104,11 @@ export const fetchPatron = async function (patron_id) { return patron; }; -export const fetchVendors = async function () { - const apiUrl = "/api/v1/acquisitions/vendors?_per_page=-1"; +export const fetchVendors = async function (page) { + const apiUrl = page ? + `/api/v1/acquisitions/vendors?_page=${page}&_per_page=${returnedValuesPerPage}` + : + "/api/v1/acquisitions/vendors?_per_page=-1"; let vendors; await fetch(apiUrl) .then(checkError) @@ -206,12 +217,20 @@ export const _fetchPackages = async function (apiUrl) { ); return packages; }; -export const fetchLocalPackages = function () { - const apiUrl = "/api/v1/erm/eholdings/local/packages?_per_page=-1"; +export const fetchLocalPackages = function (page) { + const apiUrl = page ? + `/api/v1/erm/eholdings/local/packages?_page=${page}&_per_page=${returnedValuesPerPage}` + : + "/api/v1/erm/eholdings/local/packages?_per_page=-1" + return _fetchPackages(apiUrl); }; -export const fetchEBSCOPackages = function () { - const apiUrl = "/api/v1/erm/eholdings/ebsco/packages"; +export const fetchEBSCOPackages = function (page) { + const apiUrl = page ? + `/api/v1/erm/eholdings/ebsco/packages?_page=${page}&_per_page=${returnedValuesPerPage}` + : + "/api/v1/erm/eholdings/ebsco/packages?_per_page=-1" + return _fetchPackages(apiUrl); }; -- 2.30.2