From f4d7f5e4e19c23ec4de9fe59e96a9f1c4e7c0ca9 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 improves functionality Test plan as before --- .../vue/components/InfiniteScrollSelect.vue | 78 ++++++++++--------- 1 file changed, 43 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 f44b8d29af..12f588ecca 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/InfiniteScrollSelect.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/InfiniteScrollSelect.vue @@ -1,13 +1,14 @@ <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 #list-footer> <li v-show="hasNextPage && !this.search" ref="load"> @@ -22,7 +23,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 +60,7 @@ export default { search: "", scrollPage: null, data: [], + paginationRequired: true, } }, computed: { @@ -110,6 +111,7 @@ export default { }, async searchFilter(e) { if (e) { + this.paginationRequired = false this.observer.disconnect() this.data = [] this.search = e @@ -123,16 +125,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 +143,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 + } + }, 2000) }, 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.37.1 (Apple Git-137.1)