From dd93bb11f4432db9872c9b541ebb143940d2da38 Mon Sep 17 00:00:00 2001 From: Matt Blenkinsop Date: Mon, 19 Dec 2022 16:47:18 +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 --- .../vue/components/ERM/AgreementLicenses.vue | 25 ++-- .../components/ERM/AgreementRelationships.vue | 29 ++-- .../vue/components/ERM/AgreementsFormAdd.vue | 63 +-------- .../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, 217 insertions(+), 160 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 46980679ae..ef264ef5ca 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,11 +91,12 @@ 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 131f940cae..c6877fa04e 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 82d0eb9611..b49263bd9d 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 96684bf6db..68401fd749 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 0000000000..c95d9558d2 --- /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 b5034591e2..d5c644051c 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 39ff7c9f7e..a203499874 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.37.1 (Apple Git-137.1)