Bugzilla – Attachment 145143 Details for
Bug 32474
Implement infinite scroll in vue-select
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 32474: Ajax based infinite scroll selects
Bug-32474-Ajax-based-infinite-scroll-selects.patch (text/plain), 28.69 KB, created by
Matt Blenkinsop
on 2023-01-09 12:11:57 UTC
(
hide
)
Description:
Bug 32474: Ajax based infinite scroll selects
Filename:
MIME Type:
Creator:
Matt Blenkinsop
Created:
2023-01-09 12:11:57 UTC
Size:
28.69 KB
patch
obsolete
>From 930662b123cf27317678540394045e9a9f1f5af2 Mon Sep 17 00:00:00 2001 >From: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com> >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 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 @@ > <label :for="`license_id_${counter}`" > >{{ $__("License") }}:</label > > >- <v-select >+ <InfiniteScrollSelect > :id="`license_id_${counter}`" > v-model="agreement_license.license_id" >- label="name" >- :reduce="l => l.license_id" >- :options="licenses" >- > >- <template #search="{ attributes, events }"> >- <input >- :required="!agreement_license.license_id" >- class="vs__search" >- v-bind="attributes" >- v-on="events" >- /> >- </template> >- </v-select> >+ :dataType="'licenses'" >+ /> > <span class="required">{{ $__("Required") }}</span> > </li> > <li> >@@ -102,11 +91,12 @@ > > <script> > import { fetchLicenses } from "../../fetch" >+import InfiniteScrollSelect from "./InfiniteScrollSelect.vue" > export default { > name: "AgreementLicenses", > data() { > return { >- licenses: [], >+ licenses: [], > } > }, > props: { >@@ -115,7 +105,7 @@ export default { > agreement_licenses: Array, > }, > beforeCreate() { >- fetchLicenses().then(licenses => (this.licenses = licenses)) >+ fetchLicenses(1).then(licenses => (this.licenses = licenses)) > }, > methods: { > addLicense() { >@@ -131,5 +121,8 @@ export default { > this.agreement_licenses.splice(counter, 1) > }, > }, >+ components: { >+ InfiniteScrollSelect >+ }, > } > </script> >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 @@ > <label :for="`related_agreement_id_${counter}`" > >{{ $__("Related agreement") }}: > </label> >- <v-select >+ <InfiniteScrollSelect > :id="`related_agreement_id_${counter}`" > v-model="relationship.related_agreement_id" >- label="name" >- :reduce="a => a.agreement_id" >- :options="agreements" >- > >- <template #search="{ attributes, events }"> >- <input >- :required="!relationship.related_agreement_id" >- class="vs__search" >- v-bind="attributes" >- v-on="events" >- /> >- </template> >- </v-select> >+ :dataType="'agreements'" >+ /> > <span class="required">{{ $__("Required") }}</span> > </li> > <li> >@@ -85,7 +74,8 @@ > </template> > > <script> >-import { fetchAgreements } from "../../fetch" >+import { fetchAgreements } from '../../fetch' >+import InfiniteScrollSelect from "./InfiniteScrollSelect.vue" > > export default { > data() { >@@ -94,11 +84,7 @@ export default { > } > }, > beforeCreate() { >- fetchAgreements().then(agreements => { >- this.agreements = agreements.filter( >- agreement => agreement.agreement_id !== this.agreement_id >- ) >- }) >+ fetchAgreements(1).then(agreements => (this.agreements = agreements)) > }, > methods: { > addRelationship() { >@@ -112,6 +98,9 @@ export default { > this.relationships.splice(counter, 1) > }, > }, >+ components: { >+ InfiniteScrollSelect >+ }, > props: { > agreement_id: Number, > av_agreement_relationships: Array, >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 9dcdfde3dcd..203f9da2e70 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 >@@ -28,22 +28,11 @@ > <label for="agreement_vendor_id" > >{{ $__("Vendor") }}:</label > > >- <v-select >- id="agreement_vendor_id" >+ <InfiniteScrollSelect >+ :id="'agreement_vendor_id'" > v-model="agreement.vendor_id" >- label="name" >- :reduce="vendor => vendor.id" >- :options="paginated" >- @open="onOpen" >- @close="onClose" >- @search="(query) => (search = query)" >- > >- <template #list-footer> >- <li v-show="hasNextPage" ref="load" class="loader"> >- {{ $__("Loading more options...") }} >- </li> >- </template> >- </v-select> >+ :dataType="'vendors'" >+ /> > </li> > <li> > <label for="agreement_description" >@@ -198,15 +187,13 @@ import UserRoles from "./UserRoles.vue" > import AgreementLicenses from "./AgreementLicenses.vue" > import AgreementRelationships from "./AgreementRelationships.vue" > import Documents from "./Documents.vue" >+import InfiniteScrollSelect from "./InfiniteScrollSelect.vue" > import { setMessage, setError, setWarning } from "../../messages" > import { fetchAgreement } from "../../fetch" > import { storeToRefs } from "pinia" > > export default { > setup() { >- const vendorStore = inject("vendorStore") >- const { vendors } = storeToRefs(vendorStore) >- > const AVStore = inject("AVStore") > const { > av_agreement_statuses, >@@ -219,7 +206,6 @@ export default { > } = storeToRefs(AVStore) > > return { >- vendors, > av_agreement_statuses, > av_agreement_closure_reasons, > av_agreement_renewal_priorities, >@@ -249,28 +235,8 @@ export default { > documents: [], > }, > initialized: false, >- observer: null, >- limit: 20, >- search: '' > } > }, >- computed: { >- filtered() { >- if(this.vendors){ >- return this.vendors.filter((vendor) => vendor.name.includes(this.search)) >- } >- filtered() >- }, >- paginated() { >- return this.filtered.slice(0, this.limit) >- }, >- hasNextPage() { >- return this.paginated.length < this.filtered.length >- }, >- }, >- mounted() { >- this.observer = new IntersectionObserver(this.infiniteScroll) >- }, > beforeRouteEnter(to, from, next) { > next(vm => { > if (to.params.agreement_id) { >@@ -433,24 +399,6 @@ export default { > this.agreement.closure_reason = "" > } > }, >- async onOpen() { >- if (this.hasNextPage) { >- await this.$nextTick() >- this.observer.observe(this.$refs.load) >- } >- }, >- onClose() { >- this.observer.disconnect() >- }, >- async infiniteScroll([{ isIntersecting, target }]) { >- if (isIntersecting) { >- const ul = target.offsetParent >- const scrollTop = target.offsetParent.scrollTop >- this.limit += 10 >- await this.$nextTick() >- ul.scrollTop = scrollTop >- } >- }, > }, > components: { > AgreementPeriods, >@@ -458,6 +406,7 @@ export default { > AgreementLicenses, > AgreementRelationships, > Documents, >+ InfiniteScrollSelect > }, > name: "AgreementsFormAdd", > } >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackageAgreements.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackageAgreements.vue >index 29dcd846cc1..5deaef646da 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackageAgreements.vue >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackageAgreements.vue >@@ -22,22 +22,11 @@ > <label :for="`agreement_id_${counter}`" class="required" > >{{ $__("Agreement") }}: > </label> >- <v-select >+ <InfiniteScrollSelect > :id="`agreement_id_${counter}`" > v-model="package_agreement.agreement_id" >- label="name" >- :reduce="a => a.agreement_id" >- :options="agreements" >- > >- <template #search="{ attributes, events }"> >- <input >- :required="!package_agreement.agreement_id" >- class="vs__search" >- v-bind="attributes" >- v-on="events" >- /> >- </template> >- </v-select> >+ :dataType="'agreements'" >+ /> > <span class="required">{{ $__("Required") }}</span> > </li> > </ol> >@@ -56,6 +45,7 @@ > > <script> > import { fetchAgreements } from "../../fetch" >+import InfiniteScrollSelect from "./InfiniteScrollSelect.vue" > > export default { > data() { >@@ -65,7 +55,7 @@ export default { > } > }, > beforeCreate() { >- fetchAgreements().then(agreements => { >+ fetchAgreements(1).then(agreements => { > this.agreements = agreements > this.initialized = true > }) >@@ -83,6 +73,9 @@ export default { > props: { > package_agreements: Array, > }, >+ components: { >+ InfiniteScrollSelect >+ }, > name: "EHoldingsLocalPackageAgreements", > } > </script> >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 @@ > <label for="package_vendor_id" > >{{ $__("Vendor") }}:</label > > >- <v-select >- id="package_vendor_id" >+ <InfiniteScrollSelect >+ :id="'package_vendor_id'" > v-model="erm_package.vendor_id" >- label="name" >- :reduce="vendor => vendor.id" >- :options="vendors" >+ :dataType="'vendors'" > /> > </li> > <li> >@@ -87,20 +85,18 @@ > <script> > import { inject } from "vue" > import EHoldingsPackageAgreements from "./EHoldingsLocalPackageAgreements.vue" >+import InfiniteScrollSelect from "./InfiniteScrollSelect.vue" > import { setMessage, setError, setWarning } from "../../messages" > import { fetchLocalPackage, createPackage, editPackage } from "../../fetch" > import { storeToRefs } from "pinia" > > export default { > setup() { >- const vendorStore = inject("vendorStore") >- const { vendors } = storeToRefs(vendorStore) > const AVStore = inject("AVStore") > const { av_package_types, av_package_content_types } = > storeToRefs(AVStore) > > return { >- vendors, > av_package_types, > av_package_content_types, > } >@@ -190,6 +186,7 @@ export default { > }, > components: { > EHoldingsPackageAgreements, >+ InfiniteScrollSelect > }, > name: "EHoldingsEBSCOPackagesFormAdd", > } >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesFormAddResources.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesFormAddResources.vue >index a4d954baa1a..c73ec751fb9 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesFormAddResources.vue >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesFormAddResources.vue >@@ -20,35 +20,21 @@ > class="required" > >{{ $__("Package") }}: > </label> >- <!-- Parse to integer, resource.package_id is an integer, but GET /packages return package_id as string --> >- <v-select >+ <InfiniteScrollSelect > :id="`resource_package_id_${counter}`" > v-model="resource.package_id" >- label="name" >- :reduce="p => parseInt(p.package_id)" >- :options="packages" >- > >- <template #search="{ attributes, events }"> >- <input >- :required="!resource.package_id" >- class="vs__search" >- v-bind="attributes" >- v-on="events" >- /> >- </template> >- </v-select> >+ :dataType="'localpackages'" >+ /> > <span class="required">{{ $__("Required") }}</span> > </li> > <li> > <label :for="`resource_vendor_id_${counter}`" > >{{ $__("Vendor") }}:</label > > >- <v-select >+ <InfiniteScrollSelect > :id="`resource_vendor_id_${counter}`" > v-model="resource.vendor_id" >- label="name" >- :reduce="vendor => vendor.id" >- :options="vendors" >+ :dataType="'vendors'" > /> > </li> > >@@ -96,6 +82,7 @@ import { inject } from "vue" > import flatPickr from "vue-flatpickr-component" > import { storeToRefs } from "pinia" > import { fetchLocalPackages } from "../../fetch" >+import InfiniteScrollSelect from "./InfiniteScrollSelect.vue" > > export default { > setup() { >@@ -110,7 +97,7 @@ export default { > } > }, > beforeCreate() { >- fetchLocalPackages().then(packages => (this.packages = packages)) >+ fetchLocalPackages(1).then(packages => (this.packages = packages)) > }, > methods: { > addPackage() { >@@ -129,7 +116,10 @@ export default { > props: { > resources: Array, > }, >- components: { flatPickr }, >+ components: { >+ flatPickr, >+ InfiniteScrollSelect >+ }, > name: "EHoldingsLocalTitlesFormAddResources", > } > </script> >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 @@ > </div> > <fieldset id="package_list" class="rows"> > {{ $__("To the following local package") }}: >- <v-select >+ <InfiniteScrollSelect >+ :id="''" > v-model="package_id" >- label="name" >- :reduce="p => p.package_id" >- :options="packages" >- :clearable="false" >- > >- </v-select> >+ :dataType="'localpackages'" >+ /> > </fieldset> > <div id="import_list_result" class="page-section"> > <table :id="table_id"></table> >@@ -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", > } > </script> >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 @@ >+<template> >+ <v-select >+ v-bind:id="id" >+ v-bind="$attrs" >+ v-model="model" >+ label="name" >+ :reduce="item => item[this.dataIdentifier]" >+ :options="paginated" >+ @open="onOpen" >+ @close="onClose" >+ @search="(query) => (search = query)" >+ > >+ <template #list-footer> >+ <li v-show="hasNextPage" ref="load" class="loader"> >+ {{ $__("Loading more options...") }} >+ </li> >+ </template> >+ </v-select> >+</template> >+ >+<script> >+import { >+ fetchVendors, >+ fetchAgreements, >+ fetchLicenses, >+ fetchLocalPackages >+} from "../../fetch" >+ >+export default { >+ beforeCreate() { >+ switch (this.dataType) { >+ case 'vendors': >+ fetchVendors(1).then(items => (this.data = items)) >+ this.dataIdentifier = 'id' >+ break; >+ case 'agreements': >+ fetchAgreements(1).then(items => (this.data = items)) >+ this.dataIdentifier = 'agreement_id' >+ break; >+ case 'licenses': >+ fetchLicenses(1).then(items => (this.data = items)) >+ this.dataIdentifier = 'license_id' >+ break; >+ case 'localpackages': >+ fetchLocalPackages(1).then(items => (this.data = items)) >+ this.dataIdentifier = 'package_id' >+ break; >+ default: >+ break; >+ } >+ }, >+ props: { >+ id: String, >+ dataType: String, >+ }, >+ data() { >+ return { >+ observer: null, >+ limit: 10, >+ search: '', >+ scrollPage: 1, >+ data:[], >+ } >+ }, >+ computed: { >+ model: { >+ get() { >+ return this.$attrs.value >+ }, >+ set(val) { >+ this.$emit('input', val) >+ } >+ }, >+ filtered() { >+ return this.data.filter((item) => item.name.includes(this.search)) >+ }, >+ paginated() { >+ return this.filtered.slice(0, this.limit) >+ }, >+ hasNextPage() { >+ return this.paginated.length < this.filtered.length >+ }, >+ }, >+ mounted() { >+ this.observer = new IntersectionObserver(this.infiniteScroll) >+ }, >+ methods: { >+ async onOpen() { >+ if (this.hasNextPage) { >+ await this.$nextTick() >+ this.observer.observe(this.$refs.load) >+ } >+ }, >+ onClose() { >+ this.observer.disconnect() >+ }, >+ async infiniteScroll([{ isIntersecting, target }]) { >+ if (isIntersecting) { >+ const ul = target.offsetParent >+ const scrollTop = target.offsetParent.scrollTop >+ this.limit += 10 >+ this.scrollPage++ >+ await this.$nextTick() >+ switch (this.dataType) { >+ case 'vendors': >+ fetchVendors(this.scrollPage).then(items => (this.data.push(...items))) >+ break; >+ case 'agreements': >+ fetchAgreements(this.scrollPage).then(items => (this.data.push(...items))) >+ break; >+ case 'licenses': >+ fetchLicenses(this.scrollPage).then(items => (this.data.push(...items))) >+ break; >+ case 'localpackages': >+ fetchLocalPackages(this.scrollPage).then(items => (this.data.push(...items))) >+ break; >+ default: >+ break; >+ } >+ ul.scrollTop = scrollTop >+ } >+ }, >+ }, >+ name: "InfiniteScrollSelect" >+} >+</script> >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 @@ > <label for="license_vendor_id" > >{{ $__("Vendor") }}:</label > > >- <v-select >- id="license_vendor_id" >+ <InfiniteScrollSelect >+ :id="'license_vendor_id'" > v-model="license.vendor_id" >- label="name" >- :reduce="vendor => vendor.id" >- :options="vendors" >+ :dataType="'vendors'" > /> > </li> > <li> >@@ -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)
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 32474
:
144614
|
144719
|
144720
|
145143
|
145144
|
145154
|
150030
|
150031
|
150282
|
150283
|
150284
|
150287
|
150305
|
150308
|
150309
|
153110
|
153111
|
153112
|
153113
|
154094
|
156410
|
156470
|
156471
|
156472
|
156473
|
156474
|
156475
|
156476
|
156477
|
156478
|
156479
|
156481
|
156482
|
156483
|
156504
|
156505
|
159327
|
159328
|
159329
|
159330
|
159340
|
159343
|
159386
|
159389
|
159395
|
159397
|
159398
|
159399
|
159400
|
159401
|
159402
|
159403
|
159404
|
159405
|
159406
|
159407
|
161724