changes for multi-select

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

Author: shwstppr

ui/src/components/widgets/InfiniteScrollSelect.vue

@@ -32,7 +32,7 @@
     resourceType="account"
     optionValueKey="name"
     optionLabelKey="name"
-    @change-option="handleAccountChange" />
+    @change-option-value="handleAccountNameChange" />
 
   Props:
   - api (String, required): API command name (e.g., 'listAccounts')
@@ -45,7 +45,8 @@
   - defaultIcon (String, optional): Icon to be shown when there is no resource icon for the option. Default is 'cloud-outlined'
 
   Events:
-  - @change-option (Function): Emits the selected option object when value changes. Do not use @change as it will give warnings and may not work
+  - @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
+  - @change-option (Function): Emits the selected option object when value changes. Works only when mode is not multiple
 
   Features:
   - Debounced remote filtering
@@ -168,7 +169,7 @@ export default {
       this.onSearch()
     }
   },
-  emits: ['change-option'],
+  emits: ['change-option-value', 'change-option'],
   methods: {
     async fetchItems () {
       if (this.successiveFetches === 0 && this.loading) return
@@ -199,19 +200,7 @@ export default {
           }
         })
         this.page++
-
-        if (this.preselectedOptionValue && this.successiveFetches < this.maxSuccessiveFetches) {
-          const match = this.options.find(entry => entry[this.optionValueKey] === this.preselectedOptionValue)
-          if (!match) {
-            this.successiveFetches++
-            this.fetchItems()
-          } else {
-            this.preselectedOptionValue = null
-            this.successiveFetches = 0
-          }
-        } else {
-          this.successiveFetches = 0
-        }
+        this.checkAndFetchPreselectedOption()
       }).catch(error => {
         this.$notifyError(error)
       }).finally(() => {
@@ -220,11 +209,35 @@ export default {
         }
       })
     },
+    checkAndFetchPreselectedOption () {
+      if (!this.preselectedOptionValue ||
+        (Array.isArray(this.preselectedOptionValue) && this.preselectedOptionValue.length === 0) ||
+        this.successiveFetches >= this.maxSuccessiveFetches) {
+        this.resetPreselectedOptionValue()
+        return
+      }
+      const matchValue = Array.isArray(this.preselectedOptionValue) ? this.preselectedOptionValue[0] : this.preselectedOptionValue
+      const match = this.options.find(entry => entry[this.optionValueKey] === matchValue)
+      if (!match) {
+        this.successiveFetches++
+        this.fetchItems()
+        return
+      }
+      if (Array.isArray(this.preselectedOptionValue) && this.preselectedOptionValue.length > 1) {
+        this.preselectedOptionValue = this.preselectedOptionValue.filter(o => o !== match)
+      } else {
+        this.resetPreselectedOptionValue()
+      }
+    },
     addDefaultOptionIfNeeded () {
       if (this.defaultOption) {
         this.options.push(this.defaultOption)
       }
     },
+    resetPreselectedOptionValue () {
+      this.preselectedOptionValue = null
+      this.successiveFetches = 0
+    },
     onSearch (value) {
       if (value && value.length > 0 && value.length < 3) {
         return
@@ -245,9 +258,17 @@ export default {
         this.fetchItems()
       }
     },
-    onChange (keyValue) {
-      this.preselectedOptionValue = null
-      const match = this.options.find(entry => entry[this.optionValueKey] === keyValue)
+    onChange (value) {
+      this.resetPreselectedOptionValue()
+      this.$emit('change-option-value', value)
+      if (Array.isArray(value)) {
+        return
+      }
+      if (value === undefined || value == null) {
+        this.$emit('change-option', undefined)
+        return
+      }
+      const match = this.options.find(entry => entry[this.optionValueKey] === value)
       if (match) {
         this.$emit('change-option', match)
       }