changes

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

Author: shwstppr

ui/src/components/header/ProjectMenu.vue

@@ -22,6 +22,7 @@
       v-model:value="selectedProjectId"
       class="project-select"
       api="listProjects"
+      :apiParams="apiParams"
       resourceType="project"
       :defaultOption="defaultOption"
       defaultIcon="project-outlined"
@@ -56,6 +57,11 @@ export default {
     },
     defaultOption () {
       return { id: 0, name: this.$t('label.default.view') }
+    },
+    apiParams () {
+      return {
+        listall: true
+      }
     }
   },
   methods: {

ui/src/components/widgets/InfiniteScrollSelect.vue

@@ -14,7 +14,44 @@
 // KIND, either express or implied.  See the License for the
 // specific language governing permissions and limitations
 // under the License.
+<!--
+  InfiniteScrollSelect.vue
 
+  A reusable select component that supports:
+  - Infinite scrolling with paginated API
+  - Dynamic search filtering. Needs minimum
+  - Deduplicated option loading
+  - Auto-fetching of preselected value if not present in the initial result
+
+  Usage Example:
+
+  <infinite-scroll-select
+    v-model:value="form.account"
+    api="listAccounts"
+    :apiParams="accountsApiParams"
+    resourceType="account"
+    optionValueKey="name"
+    optionLabelKey="name"
+    @change-option="handleAccountChange" />
+
+  Props:
+  - api (String, required): API command name (e.g., 'listAccounts')
+  - apiParams (Object, optional): Additional parameters passed to the API
+  - resourceType (String, required): The key in the API response containing the resource array (e.g., 'account')
+  - optionValueKey (String, optional): Property to use as the value for options (e.g., 'name'). Default is 'id'
+  - optionLabelKey (String, optional): Property to use as the label for options (e.g., 'name'). Default is 'name'
+  - defaultOption (Object, optional): Preselected object to include initially
+  - showIcon (Boolean, optional): Whether to show icon for the options. Default is true
+  - 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
+
+  Features:
+  - Debounced remote filtering
+  - Custom dropdown footer/header (e.g., clear search button)
+  - Handles preselection and fetches missing option automatically
+-->
 <template>
   <a-select
     :filter-option="false"
@@ -37,11 +74,13 @@
         </div>
       </div>
     </template>
-    <a-select-option v-for="option in options" :key="option.id" :value="option.id">
+    <a-select-option v-for="option in options" :key="option.id" :value="option[optionValueKey]">
       <span>
-        <resource-icon v-if="option.icon && option.icon.base64image" :option="option.icon.base64image" size="1x" style="margin-right: 5px"/>
-        <render-icon :icon="defaultIcon" style="margin-right: 5px" />
-        <span>{{ option.name }}</span>
+        <span v-if="showIcon">
+          <resource-icon v-if="option.icon && option.icon.base64image" :image="option.icon.base64image" size="1x" style="margin-right: 5px"/>
+          <render-icon v-else :icon="defaultIcon" style="margin-right: 5px" />
+        </span>
+        <span>{{ option[optionLabelKey] }}</span>
       </span>
     </a-select-option>
   </a-select>
@@ -64,14 +103,30 @@ export default {
       type: String,
       required: true
     },
+    apiParams: {
+      type: Object,
+      required: null
+    },
     resourceType: {
       type: String,
       required: true
     },
+    optionValueKey: {
+      type: String,
+      default: 'id'
+    },
+    optionLabelKey: {
+      type: String,
+      default: 'name'
+    },
     defaultOption: {
       type: Object,
       default: null
     },
+    showIcon: {
+      type: Boolean,
+      default: true
+    },
     defaultIcon: {
       type: String,
       default: 'cloud-outlined'
@@ -89,15 +144,15 @@ export default {
       loading: false,
       searchQuery: '',
       scrollHandlerAttached: false,
-      preselectedOptionId: null,
+      preselectedOptionValue: null,
       successiveFetches: 0
     }
   },
   created () {
     this.addDefaultOptionIfNeeded(true)
   },
   mounted () {
-    this.preselectedOptionId = this.$attrs.value
+    this.preselectedOptionValue = this.$attrs.value
     this.fetchItems()
   },
   computed: {
@@ -108,38 +163,50 @@ export default {
       return this.pageSize || this.$store.getters.defaultListViewPageSize
     }
   },
+  watch: {
+    apiParams () {
+      this.onSearch()
+    }
+  },
   emits: ['change-option'],
   methods: {
     async fetchItems () {
       if (this.successiveFetches === 0 && this.loading) return
       this.loading = true
       const params = {
         page: this.page,
-        pagesize: this.computedPageSize,
-        keyword: this.searchQuery,
-        listall: true
+        pagesize: this.computedPageSize
+      }
+      if (this.searchQuery && this.searchQuery.length > 0) {
+        params.keyword = this.searchQuery
+      }
+      if (this.apiParams) {
+        Object.assign(params, this.apiParams)
+      }
+      if (this.showIcon) {
+        params.showicon = true
       }
       api(this.api, params).then(json => {
         const response = json[this.api.toLowerCase() + 'response'] || {}
         if (this.totalCount === null) {
           this.totalCount = response.count || 0
         }
         const newOpts = response[this.resourceType] || []
-        const existingIds = new Set(this.options.map(o => o.id))
+        const existingOptions = new Set(this.options.map(o => o[this.optionValueKey]))
         newOpts.forEach(opt => {
-          if (!existingIds.has(opt.id)) {
+          if (!existingOptions.has(opt[this.optionValueKey])) {
             this.options.push(opt)
           }
         })
         this.page++
 
-        if (this.preselectedOptionId && this.successiveFetches < this.maxSuccessiveFetches) {
-          const match = this.options.find(entry => entry.id === this.preselectedOptionId)
+        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.preselectedOptionId = null
+            this.preselectedOptionValue = null
             this.successiveFetches = 0
           }
         } else {
@@ -159,6 +226,9 @@ export default {
       }
     },
     onSearch (value) {
+      if (value && value.length > 0 && value.length < 3) {
+        return
+      }
       this.searchQuery = value
       this.page = 1
       this.totalCount = null
@@ -175,9 +245,9 @@ export default {
         this.fetchItems()
       }
     },
-    onChange (id) {
-      this.preselectedOptionId = null
-      const match = this.options.find(entry => entry.id === id)
+    onChange (keyValue) {
+      this.preselectedOptionValue = null
+      const match = this.options.find(entry => entry[this.optionValueKey] === keyValue)
       if (match) {
         this.$emit('change-option', match)
       }