Skip to content

Commit c7d282c

Browse files
vishesh92vishesh92
committed
Address comments
1 parent 10b60c2 commit c7d282c

File tree

9 files changed

+69
-34
lines changed

9 files changed

+69
-34
lines changed

‎ui/src/components/widgets/InfiniteScrollSelect.vue‎

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,10 @@
4141
- optionValueKey (String, optional): Property to use as the value for options (e.g., 'name'). Default is 'id'
4242
- optionLabelKey (String, optional): Property to use as the label for options (e.g., 'name'). Default is 'name'
4343
- defaultOption (Object, optional): Preselected object to include initially
44+
- allowClear (Boolean, optional): Whether to allow clearing the selection. Default is false
4445
- showIcon (Boolean, optional): Whether to show icon for the options. Default is true
4546
- defaultIcon (String, optional): Icon to be shown when there is no resource icon for the option. Default is 'cloud-outlined'
47+
- selectFirstOption (Boolean, optional): Whether to automatically select the first option when options are loaded. Default is false
4648
4749
Events:
4850
- @change-option-value (Function): Emits the selected option value(s) when value(s) changes. Do not use @change as it will give warnings and may not work
@@ -58,7 +60,7 @@
5860
:filter-option="false"
5961
:loading="loading"
6062
show-search
61-
allowClear
63+
:allowClear="allowClear"
6264
placeholder="Select"
6365
@search="onSearchTimed"
6466
@popupScroll="onScroll"
@@ -78,7 +80,7 @@
7880
</template>
7981
<a-select-option v-for="option in options" :key="option.id" :value="option[optionValueKey]">
8082
<span>
81-
<span v-if="showIcon">
83+
<span v-if="showIcon && option.id !== null && option.id !== undefined">
8284
<resource-icon v-if="option.icon && option.icon.base64image" :image="option.icon.base64image" size="1x" style="margin-right: 5px"/>
8385
<render-icon v-else :icon="defaultIcon" style="margin-right: 5px" />
8486
</span>
@@ -125,6 +127,10 @@ export default {
125127
type: Object,
126128
default: null
127129
},
130+
allowClear: {
131+
type: Boolean,
132+
default: false
133+
},
128134
showIcon: {
129135
type: Boolean,
130136
default: true
@@ -136,6 +142,10 @@ export default {
136142
pageSize: {
137143
type: Number,
138144
default: null
145+
},
146+
selectFirstOption: {
147+
type: Boolean,
148+
default: false
139149
}
140150
},
141151
data () {
@@ -148,7 +158,8 @@ export default {
148158
searchTimer: null,
149159
scrollHandlerAttached: false,
150160
preselectedOptionValue: null,
151-
successiveFetches: 0
161+
successiveFetches: 0,
162+
hasAutoSelectedFirst: false
152163
}
153164
},
154165
created () {
@@ -211,6 +222,7 @@ export default {
211222
}).finally(() => {
212223
if (this.successiveFetches === 0) {
213224
this.loading = false
225+
this.autoSelectFirstOptionIfNeeded()
214226
}
215227
})
216228
},
@@ -247,6 +259,36 @@ export default {
247259
this.preselectedOptionValue = null
248260
this.successiveFetches = 0
249261
},
262+
autoSelectFirstOptionIfNeeded () {
263+
if (!this.selectFirstOption || this.hasAutoSelectedFirst) {
264+
return
265+
}
266+
// Don't auto-select if there's a preselected value being fetched
267+
if (this.preselectedOptionValue) {
268+
return
269+
}
270+
const currentValue = this.$attrs.value
271+
if (currentValue !== undefined && currentValue !== null && currentValue !== '') {
272+
return
273+
}
274+
if (this.options.length === 0) {
275+
return
276+
}
277+
if (this.searchQuery && this.searchQuery.length > 0) {
278+
return
279+
}
280+
// Only auto-select after initial load is complete (no more successive fetches)
281+
if (this.successiveFetches > 0) {
282+
return
283+
}
284+
const firstOption = this.options[0]
285+
if (firstOption) {
286+
const firstValue = firstOption[this.optionValueKey]
287+
this.hasAutoSelectedFirst = true
288+
this.$emit('change-option-value', firstValue)
289+
this.$emit('change-option', firstOption)
290+
}
291+
},
250292
onSearchTimed (value) {
251293
clearTimeout(this.searchTimer)
252294
this.searchTimer = setTimeout(() => {

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

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -166,32 +166,16 @@ export default {
166166
167167
this.emitChangeEvent()
168168
},
169-
handleDomainOptionChange (option) {
170-
this.selectedDomainOption = option
171-
// Note: Override filtering is not implemented in InfiniteScrollSelect migration
172-
// If override.domains filtering is needed, it should be handled at a higher level
173-
// or by using a custom filtering mechanism
174-
},
175169
handleAccountChange (accountName) {
176170
this.selectedAccount = accountName
177171
this.selectedProject = null
178172
this.emitChangeEvent()
179173
},
180-
handleAccountOptionChange (option) {
181-
this.selectedAccountOption = option
182-
// Note: Override filtering is not implemented in InfiniteScrollSelect migration
183-
// If override.accounts filtering is needed, it should be handled at a higher level
184-
},
185174
handleProjectChange (projectId) {
186175
this.selectedProject = projectId
187176
this.selectedAccount = null
188177
this.emitChangeEvent()
189178
},
190-
handleProjectOptionChange (option) {
191-
this.selectedProjectOption = option
192-
// Note: Override filtering is not implemented in InfiniteScrollSelect migration
193-
// If override.projects filtering is needed, it should be handled at a higher level
194-
},
195179
emitChangeEvent () {
196180
this.$emit('fetch-owner', this)
197181
}

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@
9898
optionValueKey="id"
9999
optionLabelKey="path"
100100
defaultIcon="block-outlined"
101+
:selectFirstOption="true"
101102
:placeholder="apiParams.domainid.description"
102103
@change-option-value="handleDomainChange" />
103104
</a-form-item>
@@ -209,15 +210,9 @@ export default {
209210
}
210211
},
211212
accountsApiParams () {
212-
if (!this.form.domainid) {
213-
return {
214-
showicon: true,
215-
listall: true
216-
}
217-
}
218213
return {
219214
showicon: true,
220-
domainid: this.form.domainid
215+
domainid: this.form?.domainid || null
221216
}
222217
}
223218
},

‎ui/src/views/infra/UsageRecords.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,8 @@
130130
optionLabelKey="path"
131131
defaultIcon="block-outlined"
132132
:placeholder="$t('label.domain')"
133+
:defaultOption="{ id: null, path: ''}"
134+
:allowClear="true"
133135
style="width: 100%;"
134136
@change-option-value="handleDomainChange"
135137
@change-option="handleDomainOptionChange" />
@@ -163,6 +165,8 @@
163165
defaultIcon="team-outlined"
164166
:placeholder="$t('label.account')"
165167
:disabled="form.isRecursive"
168+
:defaultOption="{ id: null, name: ''}"
169+
allowClear="true"
166170
@change-option-value="selectAccount"
167171
@change-option="selectAccountOption" />
168172
</a-form-item>
@@ -455,7 +459,6 @@ export default {
455459
}
456460
}
457461
return {
458-
listall: true,
459462
domainid: this.form.domain
460463
}
461464
}

‎ui/src/views/storage/CreateTemplate.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@
8181
optionValueKey="id"
8282
optionLabelKey="path"
8383
defaultIcon="block-outlined"
84+
allowClear="true"
8485
:placeholder="apiParams.domainid.description"
8586
@change-option-value="handleDomainChange" />
8687
</a-form-item>
@@ -96,6 +97,7 @@
9697
optionValueKey="name"
9798
optionLabelKey="name"
9899
defaultIcon="team-outlined"
100+
allowClear="true"
99101
:placeholder="apiParams.account.description" />
100102
</a-form-item>
101103

‎ui/src/views/storage/UploadLocalVolume.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
optionValueKey="id"
6666
optionLabelKey="name"
6767
defaultIcon="global-outlined"
68+
selectFirstOption="true"
6869
@change-option-value="handleZoneChange" />
6970
</a-form-item>
7071
<a-form-item name="diskofferingid" ref="diskofferingid">
@@ -79,6 +80,8 @@
7980
optionValueKey="id"
8081
optionLabelKey="displaytext"
8182
defaultIcon="hdd-outlined"
83+
:defaultOption="{ id: null, displaytext: ''}"
84+
allowClear="true"
8285
:placeholder="apiParams.diskofferingid.description"
8386
@change-option="onChangeDiskOffering" />
8487
</a-form-item>
@@ -120,6 +123,7 @@
120123
optionLabelKey="path"
121124
defaultIcon="block-outlined"
122125
:placeholder="$t('label.domainid')"
126+
allowClear="true"
123127
@change-option-value="handleDomainChange" />
124128
</a-form-item>
125129
<a-form-item name="account" ref="account" v-if="'listDomains' in $store.getters.apis">
@@ -134,6 +138,7 @@
134138
optionValueKey="name"
135139
optionLabelKey="name"
136140
defaultIcon="team-outlined"
141+
allowClear="true"
137142
:placeholder="$t('label.account')"
138143
@change-option-value="handleAccountChange" />
139144
</a-form-item>

‎ui/src/views/storage/UploadVolume.vue‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
optionValueKey="id"
5656
optionLabelKey="name"
5757
defaultIcon="global-outlined"
58+
selectFirstOption="true"
5859
@change-option-value="handleZoneChange" />
5960
</a-form-item>
6061
<a-form-item name="format" ref="format">
@@ -85,6 +86,8 @@
8586
optionValueKey="id"
8687
optionLabelKey="displaytext"
8788
defaultIcon="hdd-outlined"
89+
:defaultOption="{ id: null, displaytext: ''}"
90+
allowClear="true"
8891
@change-option="onChangeDiskOffering" />
8992
</a-form-item>
9093
<a-form-item name="checksum" ref="checksum">
@@ -108,6 +111,7 @@
108111
optionValueKey="id"
109112
optionLabelKey="path"
110113
defaultIcon="block-outlined"
114+
allowClear="true"
111115
:placeholder="$t('label.domainid')"
112116
@change-option-value="handleDomainChange" />
113117
</a-form-item>
@@ -124,6 +128,7 @@
124128
optionLabelKey="name"
125129
defaultIcon="team-outlined"
126130
:placeholder="$t('label.account')"
131+
allowClear="true"
127132
@change-option-value="handleAccountChange" />
128133
</a-form-item>
129134
<div :span="24" class="action-button">
@@ -190,14 +195,8 @@ export default {
190195
}
191196
},
192197
accountsApiParams () {
193-
if (!this.form.domainid) {
194-
return {
195-
listall: true,
196-
showicon: true
197-
}
198-
}
199198
return {
200-
domainid: this.form.domainid,
199+
domainid: this.form?.domainid || null,
201200
showicon: true
202201
}
203202
}

‎ui/src/views/tools/CreateWebhook.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,8 @@
7676
optionValueKey="id"
7777
optionLabelKey="path"
7878
defaultIcon="block-outlined"
79+
:defaultOption="{ id: null, path: ''}"
80+
allowClear="true"
7981
:placeholder="apiParams.domainid.description"
8082
@change-option-value="handleDomainChanged" />
8183
</a-form-item>

‎ui/src/views/tools/ManageVolumes.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -380,6 +380,7 @@
380380
optionValueKey="id"
381381
optionLabelKey="path"
382382
defaultIcon="block-outlined"
383+
allowClear="true"
383384
@change-option-value="changeDomain" />
384385
</a-form-item>
385386

@@ -396,6 +397,7 @@
396397
optionValueKey="name"
397398
optionLabelKey="name"
398399
defaultIcon="team-outlined"
400+
allowClear="true"
399401
@change-option-value="changeAccount" />
400402
<span v-if="importForm.accountError" class="required">{{ $t('label.required') }}</span>
401403
</a-form-item>
@@ -413,6 +415,7 @@
413415
optionValueKey="id"
414416
optionLabelKey="name"
415417
defaultIcon="project-outlined"
418+
allowClear="true"
416419
@change-option-value="changeProject" />
417420
<span v-if="importForm.projectError" class="required">{{ $t('label.required') }}</span>
418421
</a-form-item>

0 commit comments

Comments
 (0)