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

(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/SearchSelect.vue (-1 / +92 lines)
Line 0 Link Here
0
- 
1
<template>
2
    <v-select
3
        :id="`search-select-${dataType}`"
4
        v-model="model"
5
        :label="label"
6
        :options="options"
7
        :reduce="item => item[dataIdentifier]"
8
        @search="searchFilter($event)"
9
        :required="required ? !modelValue : false"
10
    >
11
        <template v-if="searching" v-slot:no-options
12
            >{{ $__("Searching...") }}
13
        </template>
14
        <template v-else v-slot:no-options
15
            >{{ searchConducted ? $__(noResults) : $__(typeToSearch) }}
16
        </template>
17
        <template #search="{ attributes, events }">
18
            <input
19
                :required="required ? !modelValue : false"
20
                class="vs__search"
21
                v-bind="attributes"
22
                v-on="events"
23
            />
24
        </template>
25
    </v-select>
26
</template>
27
28
<script>
29
import { APIClient } from "../fetch/api-client.js"
30
31
export default {
32
    data() {
33
        return {
34
            options: [],
35
            searching: false,
36
            searchConducted: false,
37
            typeToSearch: `Type at least ${this.numberOfCharacters} character(s) to search`,
38
            noResults: "No results found",
39
        }
40
    },
41
    computed: {
42
        model: {
43
            get() {
44
                return this.modelValue
45
            },
46
            set(value) {
47
                this.$emit("update:modelValue", value)
48
            },
49
        },
50
    },
51
    methods: {
52
        async populateDropdown(query) {
53
            const client = APIClient[this.APIClientType]
54
            await client[this.dataType].getAll(query).then(
55
                response => {
56
                    if (response.length > 0) {
57
                        this.options = response
58
                        this.searching = false
59
                        this.searchConducted = false
60
                    } else {
61
                        this.searching = false
62
                    }
63
                },
64
                error => {}
65
            )
66
        },
67
        searchFilter(e) {
68
            if (e.length >= this.numberOfCharacters) {
69
                this.searching = true
70
                this.searchConducted = true
71
                const dataQueryObject = {}
72
                dataQueryObject[`me.${this.searchField}`] = { "-like": `${e}%` }
73
                this.populateDropdown(dataQueryObject)
74
            } else {
75
                this.searchConducted = false
76
            }
77
        },
78
    },
79
    props: {
80
        dataType: String,
81
        modelValue: Number,
82
        required: Boolean,
83
        dataIdentifier: String,
84
        label: String,
85
        numberOfCharacters: Number,
86
        searchField: String,
87
        APIClientType: String,
88
    },
89
    emits: ["update:modelValue"],
90
    name: "SearchSelect",
91
}
92
</script>

Return to bug 34762