1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
<script>
import _ from 'underscore';
import { GlLoadingIcon, GlButton } from '@gitlab/ui';
import { __ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
import api from '~/api.js';
/**
* Creates a searchable input.
*
* When given a value, it will render it as selected value
* Otherwise it will render a placeholder for the search
* input.
*
* When the user types, it will trigger an event to allow
* for API queries outside of the component.
*
* When results are returned, it renders a selectable
* list with the suggestions
*
* When no results are returned, it will render a
* button with a `Create` label. When clicked, it will
* emit an event to allow for the creation of a new
* record.
*
*/
export default {
name: 'SearchableInput',
components: {
GlButton,
GlLoadingIcon,
Icon,
},
props: {
value: {
type: String,
required: false,
default: '',
},
placeholder: {
type: String,
required: true,
},
createButtonLabel: {
type: String,
required: false,
default: __('Create'),
},
results: {
type: Array,
required: false,
default: () => [],
},
isLoading: {
type: Boolean,
required: true,
},
},
data() {
return {
filter: this.value || '',
};
},
watch: {
filter(newVal) {
if (!_.isEmpty(newVal)) {
this.$emit('search', newVal);
}
},
},
computed: {
composedCreateButtonLabel() {
return `${this.createButtonLabel} ${this.filter}`;
},
/**
* The list of suggestions should be open when
* loading is true
* user changed the filter value
* list of results is available
* @returns Boolean
*/
showSuggestions() {
console.log(!_.isEmpty(this.filter) || this.isLoading || this.results.length);
return !_.isEmpty(this.filter) || this.isLoading || this.results.length;
},
/**
* Create button is available when
* - loading is false, filter is set and no results are available
* @returns Boolean
*/
shouldRenderCreateButton() {
return !_.isEmpty(this.filter) && !this.isLoading && !this.results.length;
},
},
methods: {
clearSearch() {
this.filter = '';
},
},
};
</script>
<template>
<div>
<div class="input-group position-relative">
<icon name="search" class="seach-icon-input"/>
<input
type="text"
class="form-control pl-4"
:aria-label="placeholder"
v-model="filter"
:placeholder="placeholder"
>
<gl-button @click="clearSearch" class="btn-transparent clear-search-input">
<icon name="clear"/>
</gl-button>
</div>
<ul class="list-group" v-if="showSuggestions">
<li class="list-group-item" v-if="isLoading">
<gl-loading-icon />
</li>
<template v-else-if="results.length" >
<li v-for="(result, i) in results" :key="i" class="list-group-item" >
<slot name="result" :result="result">{{ result }}</slot>
</li>
</template>
<li v-else-if="shouldRenderCreateButton" class="list-group-item" >
<gl-button @click="$emit('createClicked', filter)">{{ composedCreateButtonLabel }}</gl-button>
</li>
</ul>
</div>
</template>
<style>
.seach-icon-input {
position: absolute;
z-index: 10;
left: 4px;
fill: #999999;
top: 10px;
}
.clear-search-input {
position: absolute;
z-index: 10;
fill: #999999;
top: 1px;
right: 0px;
}
</style>
|
