ui: add an infinite scroll select component (#10840)

Signed-off-by: Abhishek Kumar <[email protected]>

Author: shwstppr

ui/public/locales/en.json

@@ -1925,6 +1925,7 @@
 "label.sharedrouteripv6": "IPv6 address for the VR in this shared Network.",
 "label.sharewith": "Share with",
 "label.showing": "Showing",
+"label.showing.results.for": "Showing results for \"%x\"",
 "label.shrinkok": "Shrink OK",
 "label.shutdown": "Shutdown",
 "label.shutdown.provider": "Shutdown provider",

ui/src/components/header/ProjectMenu.vue

@@ -17,112 +17,75 @@
 
 <template>
   <span class="header-notice-opener">
-    <a-select
-      v-if="!isDisabled()"
+    <infinite-scroll-select
+      v-if="!isDisabled"
+      v-model:value="selectedProjectId"
       class="project-select"
-      :loading="loading"
-      v-model:value="projectSelected"
-      :filterOption="filterProject"
-      @change="changeProject"
-      @focus="fetchData"
-      showSearch>
-
-      <a-select-option
-        v-for="(project, index) in projects"
-        :key="index"
-        :label="project.displaytext || project.name">
-        <span>
-          <resource-icon v-if="project.icon && project.icon.base64image" :image="project.icon.base64image" size="1x" style="margin-right: 5px"/>
-          <project-outlined v-else style="margin-right: 5px" />
-          {{ project.displaytext || project.name }}
-        </span>
-      </a-select-option>
-    </a-select>
+      api="listProjects"
+      :apiParams="projectsApiParams"
+      resourceType="project"
+      :defaultOption="defaultOption"
+      defaultIcon="project-outlined"
+      :pageSize="100"
+      @change-option="changeProject" />
   </span>
 </template>
 
 <script>
-import store from '@/store'
-import { api } from '@/api'
-import _ from 'lodash'
-import ResourceIcon from '@/components/view/ResourceIcon'
+import InfiniteScrollSelect from '@/components/widgets/InfiniteScrollSelect'
 
 export default {
   name: 'ProjectMenu',
   components: {
-    ResourceIcon
+    InfiniteScrollSelect
   },
   data () {
     return {
-      projects: [],
+      selectedProjectId: null,
       loading: false
     }
   },
   created () {
-    this.fetchData()
+    this.selectedProjectId = this.$store.getters?.project?.id || this.defaultOption.id
+    this.$store.dispatch('ToggleTheme', this.selectedProjectId ? 'dark' : 'light')
   },
   computed: {
-    projectSelected () {
-      let projectIndex = 0
-      if (this.$store.getters?.project?.id) {
-        projectIndex = this.projects.findIndex(project => project.id === this.$store.getters.project.id)
-        this.$store.dispatch('ToggleTheme', projectIndex === undefined ? 'light' : 'dark')
+    isDisabled () {
+      return !('listProjects' in this.$store.getters.apis)
+    },
+    defaultOption () {
+      return { id: 0, name: this.$t('label.default.view') }
+    },
+    projectsApiParams () {
+      return {
+        details: 'min',
+        listall: true
       }
-
-      return projectIndex
     }
   },
-  methods: {
-    fetchData () {
-      if (this.isDisabled()) {
-        return
-      }
-      var page = 1
-      const projects = []
-      const getNextPage = () => {
-        this.loading = true
-        api('listProjects', { listAll: true, page: page, pageSize: 500, details: 'min', showIcon: true }).then(json => {
-          if (json?.listprojectsresponse?.project) {
-            projects.push(...json.listprojectsresponse.project)
-          }
-          if (projects.length < json.listprojectsresponse.count) {
-            page++
-            getNextPage()
-          }
-        }).finally(() => {
-          this.loading = false
-          this.$store.commit('RELOAD_ALL_PROJECTS', projects)
-        })
+  mounted () {
+    this.unwatchProject = this.$store.watch(
+      (state, getters) => getters.project?.id,
+      (newId) => {
+        this.selectedProjectId = newId
       }
-      getNextPage()
-    },
-    isDisabled () {
-      return !Object.prototype.hasOwnProperty.call(store.getters.apis, 'listProjects')
-    },
-    changeProject (index) {
-      const project = this.projects[index]
+    )
+  },
+  beforeUnmount () {
+    if (this.unwatchProject) {
+      this.unwatchProject()
+    }
+  },
+  methods: {
+    changeProject (project) {
       this.$store.dispatch('ProjectView', project.id)
       this.$store.dispatch('SetProject', project)
-      this.$store.dispatch('ToggleTheme', project.id === undefined ? 'light' : 'dark')
+      this.$store.dispatch('ToggleTheme', project.id ? 'dark' : 'light')
       this.$message.success(`${this.$t('message.switch.to')} "${project.displaytext || project.name}"`)
       if (this.$route.name !== 'dashboard') {
         this.$router.push({ name: 'dashboard' })
       }
-    },
-    filterProject (input, option) {
-      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
     }
-  },
-  mounted () {
-    this.$store.watch(
-      (state, getters) => getters.allProjects,
-      (newValue, oldValue) => {
-        if (oldValue !== newValue && newValue !== undefined) {
-          this.projects = _.orderBy(newValue, ['displaytext'], ['asc'])
-          this.projects.unshift({ name: this.$t('label.default.view') })
-        }
-      }
-    )
   }
 }
 </script>