Bugzilla – Attachment 154094 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: TEST ONLY - DO NOT PUSH
Bug-32474-TEST-ONLY---DO-NOT-PUSH.patch (text/plain), 3.99 KB, created by
Matt Blenkinsop
on 2023-07-31 14:05:49 UTC
(
hide
)
Description:
Bug 32474: TEST ONLY - DO NOT PUSH
Filename:
MIME Type:
Creator:
Matt Blenkinsop
Created:
2023-07-31 14:05:49 UTC
Size:
3.99 KB
patch
obsolete
>From 0ef71c4c6caddc12b42c260fcfc91dfcdce32cd0 Mon Sep 17 00:00:00 2001 >From: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com> >Date: Mon, 31 Jul 2023 14:04:23 +0000 >Subject: [PATCH] Bug 32474: TEST ONLY - DO NOT PUSH > >This commit adds the example for inifinite scrolling for the vue-select as per the docs to check scroll behaviour >--- > .../vue/components/ERM/AgreementLicenses.vue | 3 + > .../prog/js/vue/components/TestScroll.vue | 80 +++++++++++++++++++ > 2 files changed, 83 insertions(+) > create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/TestScroll.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 cab8cb1927..16fed27135 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 >@@ -25,6 +25,7 @@ > dataType="licenses" > :required="true" > /> >+ <TestScroll /> > <span class="required">{{ $__("Required") }}</span> > </li> > <li> >@@ -93,6 +94,7 @@ > <script> > import { APIClient } from "../../fetch/api-client.js" > import InfiniteScrollSelect from "../InfiniteScrollSelect.vue" >+import TestScroll from "../TestScroll.vue" > > export default { > name: "AgreementLicenses", >@@ -132,6 +134,7 @@ export default { > }, > components: { > InfiniteScrollSelect, >+ TestScroll, > }, > } > </script> >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/TestScroll.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/TestScroll.vue >new file mode 100644 >index 0000000000..dc955df554 >--- /dev/null >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/TestScroll.vue >@@ -0,0 +1,80 @@ >+<template> >+ <v-select >+ :options="paginated" >+ :filterable="false" >+ @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> >+export default { >+ name: "InfiniteScroll", >+ data() { >+ const data = Array.apply(null, Array(200)).map((x, i) => { >+ return `Country ${i}` >+ }) >+ return { >+ observer: null, >+ limit: 10, >+ search: "", >+ countries: data, >+ } >+ }, >+ computed: { >+ filtered() { >+ return this.countries.filter(country => >+ country.includes(this.search) >+ ) >+ }, >+ paginated() { >+ return this.filtered.slice(0, this.limit) >+ }, >+ hasNextPage() { >+ return this.paginated.length < this.filtered.length >+ }, >+ }, >+ mounted() { >+ /** >+ * You could do this directly in data(), but since these docs >+ * are server side rendered, IntersectionObserver doesn't exist >+ * in that environment, so we need to do it in mounted() instead. >+ */ >+ 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 >+ await this.$nextTick() >+ ul.scrollTop = scrollTop >+ } >+ }, >+ }, >+} >+</script> >+ >+<style scoped> >+.loader { >+ text-align: center; >+ color: #bbbbbb; >+} >+</style> >-- >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