From 1faba17ad996d397e37d5e2c02833d2d0a2febc0 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 --- .../vue/components/ERM/AgreementLicenses.vue | 25 ++-- .../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, 216 insertions(+), 112 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..ef264ef5caf 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 131f940caea..c6877fa04e5 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..b49263bd9dc 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..68401fd7498 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..c95d9558d26 --- /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..d5c644051cb 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..a5e98e5c0ed 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)