(cloudstack) branch main updated: UI: Improve filtering of VM and template settings (#9683)

[joao]

This is an automated email from the ASF dual-hosted git repository.

joao pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/cloudstack.git


The following commit(s) were added to refs/heads/main by this push:
     new 8a2c0f3f732 UI: Improve filtering of VM and template settings (#9683)
8a2c0f3f732 is described below

commit 8a2c0f3f732c39f222373f98e22f81d103f5b11f
Author: Bernardo De Marco Gonçalves <bernardomg2...@gmail.com>
AuthorDate: Tue Nov 19 08:36:22 2024 -0300

    UI: Improve filtering of VM and template settings (#9683)
    
    * improve VMs and templates settings filtering
    
    * fix incorrect prop passed in to the `a-auto-complete` component
---
 ui/src/components/view/DetailSettings.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/view/DetailSettings.vue 
b/ui/src/components/view/DetailSettings.vue
index 1581c2daef8..9f808b907c7 100644
--- a/ui/src/components/view/DetailSettings.vue
+++ b/ui/src/components/view/DetailSettings.vue
@@ -39,7 +39,7 @@
           <a-auto-complete
             class="detail-input"
             ref="keyElm"
-            :filterOption="filterOption"
+            :filterOption="(input, option) => filterOption(input, option, 
'key')"
             v-model:value="newKey"
             :options="detailKeys"
             :placeholder="$t('label.name')"
@@ -51,7 +51,7 @@
             disabled />
           <a-auto-complete
             class="detail-input"
-            :filterOption="filterOption"
+            :filterOption="(input, option) => filterOption(input, option, 
'value')"
             v-model:value="newValue"
             :options="detailValues"
             :placeholder="$t('label.value')"
@@ -176,7 +176,7 @@ export default {
         if (this.detailOptions[this.newKey]) {
           return { value: this.detailOptions[this.newKey] }
         } else {
-          return ''
+          return []
         }
       }
       return this.detailOptions[this.newKey].map(value => {
@@ -188,7 +188,12 @@ export default {
     this.updateResource(this.resource)
   },
   methods: {
-    filterOption (input, option) {
+    filterOption (input, option, filterType) {
+      if ((filterType === 'key' && !this.newKey) ||
+        (filterType === 'value' && !this.newValue)) {
+        return true
+      }
+
       return (
         option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0
       )