Bugzilla – Attachment 156478 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: Fix duplicate API call
Bug-32474-Fix-duplicate-API-call.patch (text/plain), 5.90 KB, created by
Martin Renvoize (ashimema)
on 2023-10-03 07:14:09 UTC
(
hide
)
Description:
Bug 32474: Fix duplicate API call
Filename:
MIME Type:
Creator:
Martin Renvoize (ashimema)
Created:
2023-10-03 07:14:09 UTC
Size:
5.90 KB
patch
obsolete
>From 697ece6c0ec89de251fa4c0cc64095ee0290611e Mon Sep 17 00:00:00 2001 >From: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com> >Date: Thu, 27 Apr 2023 14:39:04 +0000 >Subject: [PATCH] Bug 32474: Fix duplicate API call > >This patch fixes a duplicate API call and fixes the "required" attribute > >Test plan as before > >Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org> >Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com> >--- > .../vue/components/InfiniteScrollSelect.vue | 86 +++++++++++-------- > 1 file changed, 51 insertions(+), 35 deletions(-) > >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/InfiniteScrollSelect.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/InfiniteScrollSelect.vue >index f44b8d29af6..2548f8fd8a6 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/InfiniteScrollSelect.vue >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/InfiniteScrollSelect.vue >@@ -1,14 +1,23 @@ > <template> > <v-select >- v-bind:id="id" >+ :id="id" > v-model="model" > :label="queryProperty" >- :options="search ? data : paginated" >+ :options="paginationRequired ? paginated : data" > :reduce="item => item[dataIdentifier]" > @open="onOpen" > @close="onClose" > @search="searchFilter($event)" >+ ref="select" > > >+ <template #search="{ attributes, events }"> >+ <input >+ :required="required" >+ class="vs__search" >+ v-bind="attributes" >+ v-on="events" >+ /> >+ </template> > <template #list-footer> > <li v-show="hasNextPage && !this.search" ref="load"> > {{ $__("Loading more options...") }} >@@ -22,7 +31,6 @@ import { APIClient } from "../fetch/api-client.js" > > export default { > created() { >- this.fetchInitialData(this.dataType) > switch (this.dataType) { > case "vendors": > this.dataIdentifier = "id" >@@ -60,6 +68,7 @@ export default { > search: "", > scrollPage: null, > data: [], >+ paginationRequired: true, > } > }, > computed: { >@@ -110,6 +119,7 @@ export default { > }, > async searchFilter(e) { > if (e) { >+ this.paginationRequired = false > this.observer.disconnect() > this.data = [] > this.search = e >@@ -123,16 +133,16 @@ export default { > }) > .then( > items => { >- this.data = items >+ this.data = [...items] > }, > error => {} > ) > } else { >- await this.fetchInitialData(this.dataType) >- await this.resetSelect() >+ this.resetSelect() > } > }, > async onOpen() { >+ this.paginationRequired = true > await this.fetchInitialData(this.dataType) > if (this.hasNextPage) { > await this.$nextTick() >@@ -141,39 +151,45 @@ export default { > }, > onClose() { > this.observer.disconnect() >- this.search = "" > }, > async infiniteScroll([{ isIntersecting, target }]) { >- if (isIntersecting) { >- const ul = target.offsetParent >- const scrollTop = target.offsetParent.scrollTop >- this.limit += 20 >- this.scrollPage++ >- await this.$nextTick() >- const client = APIClient.erm >- await client[this.dataType] >- .getAll( >- {}, >- { >- _page: this.scrollPage, >- _per_page: 20, >- _match: "contains", >- } >- ) >- .then( >- items => { >- const existingData = [...this.data] >- this.data = [...existingData, ...items] >- }, >- error => {} >- ) >- ul.scrollTop = scrollTop >- } >+ setTimeout(async () => { >+ if (isIntersecting) { >+ const ul = target.offsetParent >+ const scrollTop = target.offsetParent.scrollTop >+ this.limit += 20 >+ this.scrollPage++ >+ await this.$nextTick() >+ const client = APIClient.erm >+ await client[this.dataType] >+ .getAll( >+ {}, >+ { >+ _page: this.scrollPage, >+ _per_page: 20, >+ _match: "contains", >+ } >+ ) >+ .then( >+ items => { >+ const existingData = [...this.data] >+ this.data = [...existingData, ...items] >+ }, >+ error => {} >+ ) >+ ul.scrollTop = scrollTop >+ } >+ }, 250) > }, > async resetSelect() { >- if (this.hasNextPage) { >- await this.$nextTick() >- this.observer.observe(this.$refs.load) >+ if (this.$refs.select.open) { >+ await this.fetchInitialData(this.dataType) >+ if (this.hasNextPage) { >+ await this.$nextTick() >+ this.observer.observe(this.$refs.load) >+ } >+ } else { >+ this.paginationRequired = false > } > }, > }, >-- >2.41.0
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