View | Details | Raw Unified | Return to bug 32474
Collapse All | Expand All

(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/InfiniteScrollSelect.vue (-36 / +43 lines)
Lines 1-13 Link Here
1
<template>
1
<template>
2
    <v-select
2
    <v-select
3
        v-bind:id="id"
3
        :id="id"
4
        v-model="model"
4
        v-model="model"
5
        :label="queryProperty"
5
        :label="queryProperty"
6
        :options="search ? data : paginated"
6
        :options="paginationRequired ? paginated : data"
7
        :reduce="item => item[dataIdentifier]"
7
        :reduce="item => item[dataIdentifier]"
8
        @open="onOpen"
8
        @open="onOpen"
9
        @close="onClose"
9
        @close="onClose"
10
        @search="searchFilter($event)"
10
        @search="searchFilter($event)"
11
        ref="select"
11
    >
12
    >
12
        <template #list-footer>
13
        <template #list-footer>
13
            <li v-show="hasNextPage && !this.search" ref="load">
14
            <li v-show="hasNextPage && !this.search" ref="load">
Lines 22-28 import { APIClient } from "../fetch/api-client.js" Link Here
22
23
23
export default {
24
export default {
24
    created() {
25
    created() {
25
        this.fetchInitialData(this.dataType)
26
        switch (this.dataType) {
26
        switch (this.dataType) {
27
            case "vendors":
27
            case "vendors":
28
                this.dataIdentifier = "id"
28
                this.dataIdentifier = "id"
Lines 60-65 export default { Link Here
60
            search: "",
60
            search: "",
61
            scrollPage: null,
61
            scrollPage: null,
62
            data: [],
62
            data: [],
63
            paginationRequired: true,
63
        }
64
        }
64
    },
65
    },
65
    computed: {
66
    computed: {
Lines 110-115 export default { Link Here
110
        },
111
        },
111
        async searchFilter(e) {
112
        async searchFilter(e) {
112
            if (e) {
113
            if (e) {
114
                this.paginationRequired = false
113
                this.observer.disconnect()
115
                this.observer.disconnect()
114
                this.data = []
116
                this.data = []
115
                this.search = e
117
                this.search = e
Lines 123-138 export default { Link Here
123
                    })
125
                    })
124
                    .then(
126
                    .then(
125
                        items => {
127
                        items => {
126
                            this.data = items
128
                            this.data = [...items]
127
                        },
129
                        },
128
                        error => {}
130
                        error => {}
129
                    )
131
                    )
130
            } else {
132
            } else {
131
                await this.fetchInitialData(this.dataType)
133
                this.resetSelect()
132
                await this.resetSelect()
133
            }
134
            }
134
        },
135
        },
135
        async onOpen() {
136
        async onOpen() {
137
            this.paginationRequired = true
136
            await this.fetchInitialData(this.dataType)
138
            await this.fetchInitialData(this.dataType)
137
            if (this.hasNextPage) {
139
            if (this.hasNextPage) {
138
                await this.$nextTick()
140
                await this.$nextTick()
Lines 141-179 export default { Link Here
141
        },
143
        },
142
        onClose() {
144
        onClose() {
143
            this.observer.disconnect()
145
            this.observer.disconnect()
144
            this.search = ""
145
        },
146
        },
146
        async infiniteScroll([{ isIntersecting, target }]) {
147
        async infiniteScroll([{ isIntersecting, target }]) {
147
            if (isIntersecting) {
148
            setTimeout(async () => {
148
                const ul = target.offsetParent
149
                if (isIntersecting) {
149
                const scrollTop = target.offsetParent.scrollTop
150
                    const ul = target.offsetParent
150
                this.limit += 20
151
                    const scrollTop = target.offsetParent.scrollTop
151
                this.scrollPage++
152
                    this.limit += 20
152
                await this.$nextTick()
153
                    this.scrollPage++
153
                const client = APIClient.erm
154
                    await this.$nextTick()
154
                await client[this.dataType]
155
                    const client = APIClient.erm
155
                    .getAll(
156
                    await client[this.dataType]
156
                        {},
157
                        .getAll(
157
                        {
158
                            {},
158
                            _page: this.scrollPage,
159
                            {
159
                            _per_page: 20,
160
                                _page: this.scrollPage,
160
                            _match: "contains",
161
                                _per_page: 20,
161
                        }
162
                                _match: "contains",
162
                    )
163
                            }
163
                    .then(
164
                        )
164
                        items => {
165
                        .then(
165
                            const existingData = [...this.data]
166
                            items => {
166
                            this.data = [...existingData, ...items]
167
                                const existingData = [...this.data]
167
                        },
168
                                this.data = [...existingData, ...items]
168
                        error => {}
169
                            },
169
                    )
170
                            error => {}
170
                ul.scrollTop = scrollTop
171
                        )
171
            }
172
                    ul.scrollTop = scrollTop
173
                }
174
            }, 2000)
172
        },
175
        },
173
        async resetSelect() {
176
        async resetSelect() {
174
            if (this.hasNextPage) {
177
            if (this.$refs.select.open) {
175
                await this.$nextTick()
178
                await this.fetchInitialData(this.dataType)
176
                this.observer.observe(this.$refs.load)
179
                if (this.hasNextPage) {
180
                    await this.$nextTick()
181
                    this.observer.observe(this.$refs.load)
182
                }
183
            } else {
184
                this.paginationRequired = false
177
            }
185
            }
178
        },
186
        },
179
    },
187
    },
180
- 

Return to bug 32474