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

(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/InfiniteScrollSelect.vue (-36 / +51 lines)
Lines 1-14 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
    >
13
        <template #search="{ attributes, events }">
14
            <input
15
                :required="required"
16
                class="vs__search"
17
                v-bind="attributes"
18
                v-on="events"
19
            />
20
        </template>
12
        <template #list-footer>
21
        <template #list-footer>
13
            <li v-show="hasNextPage && !this.search" ref="load">
22
            <li v-show="hasNextPage && !this.search" ref="load">
14
                {{ $__("Loading more options...") }}
23
                {{ $__("Loading more options...") }}
Lines 22-28 import { APIClient } from "../fetch/api-client.js" Link Here
22
31
23
export default {
32
export default {
24
    created() {
33
    created() {
25
        this.fetchInitialData(this.dataType)
26
        switch (this.dataType) {
34
        switch (this.dataType) {
27
            case "vendors":
35
            case "vendors":
28
                this.dataIdentifier = "id"
36
                this.dataIdentifier = "id"
Lines 60-65 export default { Link Here
60
            search: "",
68
            search: "",
61
            scrollPage: null,
69
            scrollPage: null,
62
            data: [],
70
            data: [],
71
            paginationRequired: true,
63
        }
72
        }
64
    },
73
    },
65
    computed: {
74
    computed: {
Lines 110-115 export default { Link Here
110
        },
119
        },
111
        async searchFilter(e) {
120
        async searchFilter(e) {
112
            if (e) {
121
            if (e) {
122
                this.paginationRequired = false
113
                this.observer.disconnect()
123
                this.observer.disconnect()
114
                this.data = []
124
                this.data = []
115
                this.search = e
125
                this.search = e
Lines 123-138 export default { Link Here
123
                    })
133
                    })
124
                    .then(
134
                    .then(
125
                        items => {
135
                        items => {
126
                            this.data = items
136
                            this.data = [...items]
127
                        },
137
                        },
128
                        error => {}
138
                        error => {}
129
                    )
139
                    )
130
            } else {
140
            } else {
131
                await this.fetchInitialData(this.dataType)
141
                this.resetSelect()
132
                await this.resetSelect()
133
            }
142
            }
134
        },
143
        },
135
        async onOpen() {
144
        async onOpen() {
145
            this.paginationRequired = true
136
            await this.fetchInitialData(this.dataType)
146
            await this.fetchInitialData(this.dataType)
137
            if (this.hasNextPage) {
147
            if (this.hasNextPage) {
138
                await this.$nextTick()
148
                await this.$nextTick()
Lines 141-179 export default { Link Here
141
        },
151
        },
142
        onClose() {
152
        onClose() {
143
            this.observer.disconnect()
153
            this.observer.disconnect()
144
            this.search = ""
145
        },
154
        },
146
        async infiniteScroll([{ isIntersecting, target }]) {
155
        async infiniteScroll([{ isIntersecting, target }]) {
147
            if (isIntersecting) {
156
            setTimeout(async () => {
148
                const ul = target.offsetParent
157
                if (isIntersecting) {
149
                const scrollTop = target.offsetParent.scrollTop
158
                    const ul = target.offsetParent
150
                this.limit += 20
159
                    const scrollTop = target.offsetParent.scrollTop
151
                this.scrollPage++
160
                    this.limit += 20
152
                await this.$nextTick()
161
                    this.scrollPage++
153
                const client = APIClient.erm
162
                    await this.$nextTick()
154
                await client[this.dataType]
163
                    const client = APIClient.erm
155
                    .getAll(
164
                    await client[this.dataType]
156
                        {},
165
                        .getAll(
157
                        {
166
                            {},
158
                            _page: this.scrollPage,
167
                            {
159
                            _per_page: 20,
168
                                _page: this.scrollPage,
160
                            _match: "contains",
169
                                _per_page: 20,
161
                        }
170
                                _match: "contains",
162
                    )
171
                            }
163
                    .then(
172
                        )
164
                        items => {
173
                        .then(
165
                            const existingData = [...this.data]
174
                            items => {
166
                            this.data = [...existingData, ...items]
175
                                const existingData = [...this.data]
167
                        },
176
                                this.data = [...existingData, ...items]
168
                        error => {}
177
                            },
169
                    )
178
                            error => {}
170
                ul.scrollTop = scrollTop
179
                        )
171
            }
180
                    ul.scrollTop = scrollTop
181
                }
182
            }, 250)
172
        },
183
        },
173
        async resetSelect() {
184
        async resetSelect() {
174
            if (this.hasNextPage) {
185
            if (this.$refs.select.open) {
175
                await this.$nextTick()
186
                await this.fetchInitialData(this.dataType)
176
                this.observer.observe(this.$refs.load)
187
                if (this.hasNextPage) {
188
                    await this.$nextTick()
189
                    this.observer.observe(this.$refs.load)
190
                }
191
            } else {
192
                this.paginationRequired = false
177
            }
193
            }
178
        },
194
        },
179
    },
195
    },
180
- 

Return to bug 32474