Skip to content

Commit 470ceb4

Browse files
davidjumanidavidjumani
authored
ui: Allow searching in dropdowns (#5395)
1 parent 931ba55 commit 470ceb4

File tree

73 files changed

+1012
-176
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+1012
-176
lines changed

‎ui/src/components/header/SamlDomainSwitcher.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@
2222
:loading="loading"
2323
:defaultValue="currentAccount"
2424
:value="currentAccount"
25+
showSearch
26+
optionFilterProp="children"
27+
:filterOption="(input, option) => {
28+
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
29+
}"
2530
@change="changeAccount"
2631
@focus="fetchData" >
2732

‎ui/src/components/view/DedicateDomain.vue‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,15 @@
2121
<a-spin :spinning="domainsLoading">
2222
<p class="form__label">{{ $t('label.domain') }}<span class="required">*</span></p>
2323
<p class="required required-label">{{ $t('label.required') }}</p>
24-
<a-select style="width: 100%" @change="handleChangeDomain" v-model="domainId">
24+
<a-select
25+
style="width: 100%"
26+
showSearch
27+
optionFilterProp="children"
28+
:filterOption="(input, option) => {
29+
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
30+
}"
31+
@change="handleChangeDomain"
32+
v-model="domainId">
2533
<a-select-option v-for="(domain, index) in domainsList" :value="domain.id" :key="index">
2634
{{ domain.path || domain.name || domain.description }}
2735
</a-select-option>
@@ -30,7 +38,14 @@
3038
</div>
3139
<div class="form__item" v-if="accountsList">
3240
<p class="form__label">{{ $t('label.account') }}</p>
33-
<a-select style="width: 100%" @change="handleChangeAccount">
41+
<a-select
42+
style="width: 100%"
43+
@change="handleChangeAccount"
44+
showSearch
45+
optionFilterProp="children"
46+
:filterOption="(input, option) => {
47+
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
48+
}" >
3449
<a-select-option v-for="(account, index) in accountsList" :value="account.name" :key="index">
3550
{{ account.name }}
3651
</a-select-option>

‎ui/src/components/view/FormView.vue‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,11 @@
5252
rules: [{ required: field.required, message: `${this.$t('message.error.select')}` }]
5353
}]"
5454
:placeholder="field.description"
55-
56-
>
55+
showSearch
56+
optionFilterProp="children"
57+
:filterOption="(input, option) => {
58+
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
59+
}" >
5760
<a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
5861
{{ opt.name || opt.description }}
5962
</a-select-option>

‎ui/src/components/view/SearchView.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,11 @@
5858
v-decorator="[field.name, {
5959
initialValue: fieldValues[field.name] || null
6060
}]"
61+
showSearch
62+
optionFilterProp="children"
63+
:filterOption="(input, option) => {
64+
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
65+
}"
6166
:loading="field.loading">
6267
<a-select-option
6368
v-for="(opt, idx) in field.opts"

‎ui/src/views/AutogenView.vue‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,12 @@
5050
['Admin', 'DomainAdmin'].includes($store.getters.userInfo.roletype) && ['vm', 'iso', 'template'].includes($route.name)
5151
? 'all' : ['guestnetwork'].includes($route.name) ? 'all' : 'self')"
5252
style="min-width: 100px; margin-left: 10px"
53-
@change="changeFilter">
53+
@change="changeFilter"
54+
showSearch
55+
optionFilterProp="children"
56+
:filterOption="(input, option) => {
57+
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
58+
}" >
5459
<a-icon slot="suffixIcon" type="filter" />
5560
<a-select-option v-if="['Admin', 'DomainAdmin'].includes($store.getters.userInfo.roletype) && ['vm', 'iso', 'template'].includes($route.name)" key="all">
5661
{{ $t('label.all') }}
@@ -215,6 +220,11 @@
215220
}]"
216221
:placeholder="field.description"
217222
:autoFocus="fieldIndex === firstIndex"
223+
showSearch
224+
optionFilterProp="children"
225+
:filterOption="(input, option) => {
226+
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
227+
}"
218228
>
219229
<a-select-option key="" >{{ }}</a-select-option>
220230
<a-select-option v-for="(opt, optIndex) in currentAction.mapping[field.name].options" :key="optIndex">
@@ -274,6 +284,11 @@
274284
}]"
275285
:placeholder="field.description"
276286
:autoFocus="fieldIndex === firstIndex"
287+
showSearch
288+
optionFilterProp="children"
289+
:filterOption="(input, option) => {
290+
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
291+
}"
277292
>
278293
<a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
279294
{{ opt.name && opt.type ? opt.name + ' (' + opt.type + ')' : opt.name || opt.description }}

‎ui/src/views/auth/Login.vue‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,12 @@
4646
initialValue: (server.apiHost || '') + server.apiBase
4747
}
4848
]"
49-
@change="onChangeServer">
49+
@change="onChangeServer"
50+
showSearch
51+
optionFilterProp="children"
52+
:filterOption="(input, option) => {
53+
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
54+
}" >
5055
<a-select-option v-for="item in $config.servers" :key="(item.apiHost || '') + item.apiBase">
5156
<a-icon slot="prefix" type="database" :style="{ color: 'rgba(0,0,0,.25)' }"></a-icon>
5257
{{ item.name }}
@@ -113,15 +118,26 @@
113118
initialValue: (server.apiHost || '') + server.apiBase
114119
}
115120
]"
116-
@change="onChangeServer">
121+
@change="onChangeServer"
122+
showSearch
123+
optionFilterProp="children"
124+
:filterOption="(input, option) => {
125+
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
126+
}" >
117127
<a-select-option v-for="item in $config.servers" :key="(item.apiHost || '') + item.apiBase">
118128
<a-icon slot="prefix" type="database" :style="{ color: 'rgba(0,0,0,.25)' }"></a-icon>
119129
{{ item.name }}
120130
</a-select-option>
121131
</a-select>
122132
</a-form-item>
123133
<a-form-item>
124-
<a-select v-decorator="['idp', { initialValue: selectedIdp } ]">
134+
<a-select
135+
v-decorator="['idp', { initialValue: selectedIdp } ]"
136+
showSearch
137+
optionFilterProp="children"
138+
:filterOption="(input, option) => {
139+
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
140+
}" >
125141
<a-select-option v-for="(idp, idx) in idps" :key="idx" :value="idp.id">
126142
{{ idp.orgName }}
127143
</a-select-option>

‎ui/src/views/compute/AssignInstance.vue‎

Lines changed: 41 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,31 @@
2929

3030
<div class="form__item">
3131
<p class="form__label">{{ $t('label.accounttype') }}</p>
32-
<a-select v-model="selectedAccountType" defaultValue="account" autoFocus>
32+
<a-select
33+
v-model="selectedAccountType"
34+
defaultValue="account"
35+
autoFocus
36+
showSearch
37+
optionFilterProp="children"
38+
:filterOption="(input, option) => {
39+
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
40+
}" >
3341
<a-select-option :value="$t('label.account')">{{ $t('label.account') }}</a-select-option>
3442
<a-select-option :value="$t('label.project')">{{ $t('label.project') }}</a-select-option>
3543
</a-select>
3644
</div>
3745

3846
<div class="form__item">
3947
<p class="form__label"><span class="required">*</span>{{ $t('label.domain') }}</p>
40-
<a-select @change="changeDomain" v-model="selectedDomain" :defaultValue="selectedDomain">
48+
<a-select
49+
@change="changeDomain"
50+
v-model="selectedDomain"
51+
:defaultValue="selectedDomain"
52+
showSearch
53+
optionFilterProp="children"
54+
:filterOption="(input, option) => {
55+
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
56+
}" >
4157
<a-select-option v-for="domain in domains" :key="domain.name" :value="domain.id">
4258
{{ domain.path || domain.name || domain.description }}
4359
</a-select-option>
@@ -47,7 +63,14 @@
4763
<template v-if="selectedAccountType === 'Account'">
4864
<div class="form__item">
4965
<p class="form__label"><span class="required">*</span>{{ $t('label.account') }}</p>
50-
<a-select @change="changeAccount" v-model="selectedAccount">
66+
<a-select
67+
@change="changeAccount"
68+
v-model="selectedAccount"
69+
showSearch
70+
optionFilterProp="children"
71+
:filterOption="(input, option) => {
72+
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
73+
}" >
5174
<a-select-option v-for="account in accounts" :key="account.name" :value="account.name">
5275
{{ account.name }}
5376
</a-select-option>
@@ -59,7 +82,14 @@
5982
<template v-else>
6083
<div class="form__item">
6184
<p class="form__label"><span class="required">*</span>{{ $t('label.project') }}</p>
62-
<a-select @change="changeProject" v-model="selectedProject">
85+
<a-select
86+
@change="changeProject"
87+
v-model="selectedProject"
88+
showSearch
89+
optionFilterProp="children"
90+
:filterOption="(input, option) => {
91+
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
92+
}" >
6393
<a-select-option v-for="project in projects" :key="project.id" :value="project.id">
6494
{{ project.name }}
6595
</a-select-option>
@@ -70,7 +100,13 @@
70100

71101
<div class="form__item">
72102
<p class="form__label">{{ $t('label.network') }}</p>
73-
<a-select v-model="selectedNetwork">
103+
<a-select
104+
v-model="selectedNetwork"
105+
showSearch
106+
optionFilterProp="children"
107+
:filterOption="(input, option) => {
108+
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
109+
}" >
74110
<a-select-option v-for="network in networks" :key="network.id" :value="network.id">
75111
{{ network.name ? network.name : '-' }}
76112
</a-select-option>

‎ui/src/views/compute/AttachIso.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,12 @@
2828
initialValue: this.selectedIso,
2929
rules: [{ required: true, message: `${this.$t('label.required')}`}]
3030
}]"
31-
autoFocus>
31+
autoFocus
32+
showSearch
33+
optionFilterProp="children"
34+
:filterOption="(input, option) => {
35+
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
36+
}" >
3237
<a-select-option v-for="iso in isos" :key="iso.id">
3338
{{ iso.displaytext || iso.name }}
3439
</a-select-option>

‎ui/src/views/compute/CreateSnapshotWizard.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,18 @@
2525
<a-form-item>
2626
<tooltip-label slot="label" :title="$t('label.volumeid')" :tooltip="apiParams.volumeid.description"/>
2727
<a-select
28-
showSearch
2928
allowClear
3029
v-decorator="['volumeid', {
3130
rules: [{ required: true, message: $t('message.error.select') }]
3231
}]"
3332
@change="onChangeVolume"
3433
:placeholder="apiParams.volumeid.description"
35-
autoFocus>
34+
autoFocus
35+
showSearch
36+
optionFilterProp="children"
37+
:filterOption="(input, option) => {
38+
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
39+
}" >
3640
<a-select-option
3741
v-for="volume in listVolumes"
3842
:key="volume.id">

‎ui/src/views/compute/DeployVM.vue‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,10 @@
142142
rules: [{ required: true, message: `${this.$t('message.error.select')}` }]
143143
}]"
144144
:options="hypervisorSelectOptions"
145-
@change="value => this.hypervisor = value" />
145+
@change="value => this.hypervisor = value"
146+
showSearch
147+
optionFilterProp="children"
148+
:filterOption="filterOption" />
146149
</a-form-item>
147150
</p>
148151
</a-card>
@@ -481,15 +484,21 @@
481484
<a-form-item :label="$t('label.boottype')">
482485
<a-select
483486
v-decorator="['boottype', { initialValue: options.bootTypes && options.bootTypes.length > 0 ? options.bootTypes[0].id : undefined }]"
484-
@change="onBootTypeChange">
487+
@change="fetchBootModes"
488+
showSearch
489+
optionFilterProp="children"
490+
:filterOption="filterOption" >
485491
<a-select-option v-for="bootType in options.bootTypes" :key="bootType.id">
486492
{{ bootType.description }}
487493
</a-select-option>
488494
</a-select>
489495
</a-form-item>
490496
<a-form-item :label="$t('label.bootmode')">
491497
<a-select
492-
v-decorator="['bootmode', { initialValue: options.bootModes && options.bootModes.length > 0 ? options.bootModes[0].id : undefined }]">
498+
v-decorator="['bootmode', { initialValue: options.bootModes && options.bootModes.length > 0 ? options.bootModes[0].id : undefined }]"
499+
showSearch
500+
optionFilterProp="children"
501+
:filterOption="filterOption" >
493502
<a-select-option v-for="bootMode in options.bootModes" :key="bootMode.id">
494503
{{ bootMode.description }}
495504
</a-select-option>
@@ -553,6 +562,9 @@
553562
<a-select
554563
v-decorator="['keyboard']"
555564
:options="keyboardSelectOptions"
565+
showSearch
566+
optionFilterProp="children"
567+
:filterOption="filterOption"
556568
></a-select>
557569
</a-form-item>
558570
<a-form-item :label="$t('label.action.start.instance')">

0 commit comments

Comments
 (0)