Skip to content

Commit 121a72c

Browse files
author
Hoang Nguyen
authored
UI - Fixes search error in selectbox (#5472)
* fix search select options * fix error when selected zone * fix filterOptions of selecbox
1 parent 93150f4 commit 121a72c

37 files changed

Lines changed: 408 additions & 286 deletions

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,12 @@
3838
</span>
3939
</a-tooltip>
4040

41-
<a-select-option v-for="(project, index) in projects" :key="index">
42-
<resource-icon v-if="project.icon && project.icon.base64image" :image="project.icon.base64image" size="1x" style="margin-right: 5px"/>
43-
<a-icon v-else style="margin-right: 5px" type="project" />
44-
{{ project.displaytext || project.name }}
41+
<a-select-option v-for="(project, index) in projects" :key="index" :label="project.displaytext || project.name">
42+
<span>
43+
<resource-icon v-if="project.icon && project.icon.base64image" :image="project.icon.base64image" size="1x" style="margin-right: 5px"/>
44+
<a-icon v-else style="margin-right: 5px" type="project" />
45+
{{ project.displaytext || project.name }}
46+
</span>
4547
</a-select-option>
4648
</a-select>
4749
</span>
@@ -106,7 +108,7 @@ export default {
106108
}
107109
},
108110
filterProject (input, option) {
109-
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
111+
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
110112
}
111113
}
112114
}

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

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -61,26 +61,29 @@
6161
showSearch
6262
optionFilterProp="children"
6363
:filterOption="(input, option) => {
64-
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
64+
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
6565
}"
6666
:loading="field.loading">
6767
<a-select-option
6868
v-for="(opt, idx) in field.opts"
6969
:key="idx"
70-
:value="opt.id">
71-
<span v-if="(field.name.startsWith('zone'))">
72-
<span v-if="opt.icon">
73-
<resource-icon :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
70+
:value="opt.id"
71+
:label="$t(opt.name)">
72+
<div>
73+
<span v-if="(field.name.startsWith('zone'))">
74+
<span v-if="opt.icon">
75+
<resource-icon :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
76+
</span>
77+
<a-icon v-else type="global" style="margin-right: 5px" />
7478
</span>
75-
<a-icon v-else type="global" style="margin-right: 5px" />
76-
</span>
77-
<span v-if="(field.name.startsWith('domain'))">
78-
<span v-if="opt.icon">
79-
<resource-icon :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
79+
<span v-if="(field.name.startsWith('domain'))">
80+
<span v-if="opt.icon">
81+
<resource-icon :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
82+
</span>
83+
<a-icon v-else type="block" style="margin-right: 5px" />
8084
</span>
81-
<a-icon v-else type="block" style="margin-right: 5px" />
82-
</span>
83-
{{ $t(opt.name) }}
85+
{{ $t(opt.name) }}
86+
</div>
8487
</a-select-option>
8588
</a-select>
8689
<a-input

‎ui/src/views/AutogenView.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -265,13 +265,13 @@
265265
:loading="field.loading"
266266
:placeholder="field.description"
267267
:filterOption="(input, option) => {
268-
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
268+
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
269269
}"
270270
:autoFocus="fieldIndex === firstIndex"
271271
>
272272
<a-select-option key="">{{ }}</a-select-option>
273-
<a-select-option v-for="opt in field.opts" :key="opt.id">
274-
<span>
273+
<a-select-option v-for="opt in field.opts" :key="opt.id" :label="opt.name || opt.description || opt.traffictype || opt.publicip">
274+
<div>
275275
<span v-if="(field.name.startsWith('template') || field.name.startsWith('iso'))">
276276
<span v-if="opt.icon">
277277
<resource-icon :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
@@ -308,8 +308,8 @@
308308
</span>
309309
<a-icon v-else type="block" style="margin-right: 5px"/>
310310
</span>
311-
</span>
312-
{{ opt.name || opt.description || opt.traffictype || opt.publicip }}
311+
{{ opt.name || opt.description || opt.traffictype || opt.publicip }}
312+
</div>
313313
</a-select-option>
314314
</a-select>
315315
</span>

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

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,14 @@
5252
showSearch
5353
optionFilterProp="children"
5454
:filterOption="(input, option) => {
55-
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
55+
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
5656
}" >
57-
<a-select-option v-for="domain in domains" :key="domain.name" :value="domain.id">
58-
<resource-icon v-if="domain && domain.icon" :image="domain.icon.base64image" size="1x" style="margin-right: 5px"/>
59-
<a-icon v-else type="block" style="margin-right: 5px" />
60-
{{ domain.path || domain.name || domain.description }}
57+
<a-select-option v-for="domain in domains" :key="domain.name" :value="domain.id" :label="domain.path || domain.name || domain.description">
58+
<span>
59+
<resource-icon v-if="domain && domain.icon" :image="domain.icon.base64image" size="1x" style="margin-right: 5px"/>
60+
<a-icon v-else type="block" style="margin-right: 5px" />
61+
{{ domain.path || domain.name || domain.description }}
62+
</span>
6163
</a-select-option>
6264
</a-select>
6365
</div>
@@ -71,12 +73,14 @@
7173
showSearch
7274
optionFilterProp="children"
7375
:filterOption="(input, option) => {
74-
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
76+
return option.componentOptions.propsData.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
7577
}" >
7678
<a-select-option v-for="account in accounts" :key="account.name" :value="account.name">
77-
<resource-icon v-if="account && account.icon" :image="account.icon.base64image" size="1x" style="margin-right: 5px"/>
78-
<a-icon v-else type="team" style="margin-right: 5px" />
79-
{{ account.name }}
79+
<span>
80+
<resource-icon v-if="account && account.icon" :image="account.icon.base64image" size="1x" style="margin-right: 5px"/>
81+
<a-icon v-else type="team" style="margin-right: 5px" />
82+
{{ account.name }}
83+
</span>
8084
</a-select-option>
8185
</a-select>
8286
<span v-if="accountError" class="required">{{ $t('label.required') }}</span>
@@ -92,12 +96,14 @@
9296
showSearch
9397
optionFilterProp="children"
9498
:filterOption="(input, option) => {
95-
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
99+
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
96100
}" >
97-
<a-select-option v-for="project in projects" :key="project.id" :value="project.id">
98-
<resource-icon v-if="project && project.icon" :image="project.icon.base64image" size="1x" style="margin-right: 5px"/>
99-
<a-icon v-else type="project" style="margin-right: 5px" />
100-
{{ project.name }}
101+
<a-select-option v-for="project in projects" :key="project.id" :value="project.id" :label="project.name">
102+
<span>
103+
<resource-icon v-if="project && project.icon" :image="project.icon.base64image" size="1x" style="margin-right: 5px"/>
104+
<a-icon v-else type="project" style="margin-right: 5px" />
105+
{{ project.name }}
106+
</span>
101107
</a-select-option>
102108
</a-select>
103109
<span v-if="projectError" class="required">{{ $t('label.required') }}</span>
@@ -111,12 +117,14 @@
111117
showSearch
112118
optionFilterProp="children"
113119
:filterOption="(input, option) => {
114-
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
120+
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
115121
}" >
116-
<a-select-option v-for="network in networks" :key="network.id" :value="network.id">
117-
<resource-icon v-if="network && network.icon" :image="network.icon.base64image" size="1x" style="margin-right: 5px"/>
118-
<a-icon v-else type="apartment" style="margin-right: 5px" />
119-
{{ network.name ? network.name : '-' }}
122+
<a-select-option v-for="network in networks" :key="network.id" :value="network.id" :label="network.name ? network.name : '-'">
123+
<span>
124+
<resource-icon v-if="network && network.icon" :image="network.icon.base64image" size="1x" style="margin-right: 5px"/>
125+
<a-icon v-else type="apartment" style="margin-right: 5px" />
126+
{{ network.name ? network.name : '-' }}
127+
</span>
120128
</a-select-option>
121129
</a-select>
122130
</div>

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,15 +49,17 @@
4949
showSearch
5050
optionFilterProp="children"
5151
:filterOption="(input, option) => {
52-
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
52+
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
5353
}"
5454
:loading="zoneLoading"
5555
:placeholder="apiParams.zoneid.description"
5656
@change="val => { this.handleZoneChange(this.zones[val]) }">
57-
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
58-
<resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
59-
<a-icon v-else type="global" style="margin-right: 5px" />
60-
{{ opt.name || opt.description }}
57+
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex" :label="opt.name || opt.description">
58+
<span>
59+
<resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
60+
<a-icon v-else type="global" style="margin-right: 5px" />
61+
{{ opt.name || opt.description }}
62+
</span>
6163
</a-select-option>
6264
</a-select>
6365
</a-form-item>

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

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -68,15 +68,19 @@
6868
}]"
6969
showSearch
7070
optionFilterProp="children"
71-
:filterOption="filterOption"
71+
:filterOption="(input, option) => {
72+
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
73+
}"
7274
@change="onSelectZoneId"
7375
:loading="loading.zones"
7476
autoFocus
7577
>
76-
<a-select-option v-for="zone1 in zones" :key="zone1.id">
77-
<resource-icon v-if="zone1.icon && zone1.icon.base64image" :image="zone1.icon.base64image" size="1x" style="margin-right: 5px"/>
78-
<a-icon v-else style="margin-right: 5px" type="global" />
79-
{{ zone1.name }}
78+
<a-select-option v-for="zone1 in zones" :key="zone1.id" :label="zone1.name">
79+
<span>
80+
<resource-icon v-if="zone1.icon && zone1.icon.base64image" :image="zone1.icon.base64image" size="1x" style="margin-right: 5px"/>
81+
<a-icon v-else style="margin-right: 5px" type="global" />
82+
{{ zone1.name }}
83+
</span>
8084
</a-select-option>
8185
</a-select>
8286
</a-form-item>
@@ -1878,9 +1882,10 @@ export default {
18781882
})
18791883
},
18801884
filterOption (input, option) {
1881-
return (
1882-
option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
1883-
)
1885+
console.log(option)
1886+
// return (
1887+
// option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
1888+
// )
18841889
},
18851890
onSelectZoneId (value) {
18861891
this.dataPreFill = {}

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -165,15 +165,18 @@
165165
showSearch
166166
optionFilterProp="children"
167167
:filterOption="(input, option) => {
168-
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
168+
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
169169
}" >
170170
<a-select-option
171171
v-for="network in addNetworkData.allNetworks"
172172
:key="network.id"
173-
:value="network.id">
174-
<resource-icon v-if="network.icon" :image="network.icon.base64image" size="1x" style="margin-right: 5px"/>
175-
<a-icon v-else type="apartment" style="margin-right: 5px" />
176-
{{ network.name }}
173+
:value="network.id"
174+
:label="network.name">
175+
<span>
176+
<resource-icon v-if="network.icon" :image="network.icon.base64image" size="1x" style="margin-right: 5px"/>
177+
<a-icon v-else type="apartment" style="margin-right: 5px" />
178+
{{ network.name }}
179+
</span>
177180
</a-select-option>
178181
</a-select>
179182
<p class="modal-form__label">{{ $t('label.publicip') }}:</p>

‎ui/src/views/compute/wizard/NetworkSelection.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -267,8 +267,11 @@ export default {
267267
this.form = this.$form.createForm(this)
268268
},
269269
created () {
270+
this.vpcs = []
271+
const projectId = store?.getters?.project?.id || null
272+
if (!projectId) return
270273
api('listVPCs', {
271-
projectid: store.getters.project.id
274+
projectid: projectId
272275
}).then((response) => {
273276
this.vpcs = _.get(response, 'listvpcsresponse.vpc')
274277
})

‎ui/src/views/dashboard/CapacityDashboard.vue‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,14 @@
2828
showSearch
2929
optionFilterProp="children"
3030
:filterOption="(input, option) => {
31-
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
31+
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
3232
}" >
33-
<a-select-option v-for="(zone, index) in zones" :key="index">
34-
<resource-icon v-if="zone.icon && zone.icon.base64image" :image="zone.icon.base64image" size="1x" style="margin-right: 5px"/>
35-
<a-icon v-else style="margin-right: 5px" type="global" />
36-
{{ zone.name }}
33+
<a-select-option v-for="(zone, index) in zones" :key="index" :label="zone.name">
34+
<span>
35+
<resource-icon v-if="zone.icon && zone.icon.base64image" :image="zone.icon.base64image" size="1x" style="margin-right: 5px"/>
36+
<a-icon v-else style="margin-right: 5px" type="global" />
37+
{{ zone.name }}
38+
</span>
3739
</a-select-option>
3840
</a-select>
3941
</div>

‎ui/src/views/iam/AddAccount.vue‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -112,12 +112,14 @@
112112
showSearch
113113
optionFilterProp="children"
114114
:filterOption="(input, option) => {
115-
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
115+
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
116116
}" >
117-
<a-select-option v-for="domain in domainsList" :key="domain.id">
118-
<resource-icon v-if="domain && domain.icon" :image="domain.icon.base64image" size="1x" style="margin-right: 5px"/>
119-
<a-icon v-else type="block" style="margin-right: 5px"/>
120-
{{ domain.path || domain.name || domain.description }}
117+
<a-select-option v-for="domain in domainsList" :key="domain.id" :label="domain.path || domain.name || domain.description">
118+
<span>
119+
<resource-icon v-if="domain && domain.icon" :image="domain.icon.base64image" size="1x" style="margin-right: 5px"/>
120+
<a-icon v-else type="block" style="margin-right: 5px"/>
121+
{{ domain.path || domain.name || domain.description }}
122+
</span>
121123
</a-select-option>
122124
</a-select>
123125
</a-form-item>

0 commit comments

Comments
 (0)