From db68ab34188bc47c10b069a9afe9af0746b28b7a Mon Sep 17 00:00:00 2001
From: Vishesh <vishesh92@gmail.com>
Date: Fri, 10 May 2024 13:14:55 +0530
Subject: [PATCH] UI: Update AddAccountOrUserToProject to show a drop down for
 account & user

---
 .../project/AddAccountOrUserToProject.vue     | 70 +++++++++++++++----
 1 file changed, 56 insertions(+), 14 deletions(-)

diff --git a/ui/src/views/project/AddAccountOrUserToProject.vue b/ui/src/views/project/AddAccountOrUserToProject.vue
index e65c6a7492db..d85dc7857293 100644
--- a/ui/src/views/project/AddAccountOrUserToProject.vue
+++ b/ui/src/views/project/AddAccountOrUserToProject.vue
@@ -31,10 +31,27 @@
             <template #label>
               <tooltip-label :title="$t('label.account')" :tooltip="apiParams.addAccountToProject.account.description"/>
             </template>
-            <a-input
-              v-model:value="form.account"
-              :placeholder="apiParams.addAccountToProject.account.description"
-              v-focus="true" />
+            <a-select
+                show-search
+                v-model:value="form.account"
+                :placeholder="apiParams.addAccountToProject.account.description"
+                v-focus="true"
+                :filterOption="false"
+                @search="fetchAccounts"
+              >
+                <template v-if="load.accounts" #notFoundContent>
+                  <a-spin size="small" />
+                </template>
+                <template v-if="!load.accounts">
+                  <a-select-option v-for="account in accounts" :key="account.name" :value="account.name">
+                    <span v-if="account.icon">
+                      <resource-icon :image="account.icon.base64image" size="1x" style="margin-right: 5px"/>
+                    </span>
+                    <block-outlined v-else style="margin-right: 5px" />
+                    {{ account.name }}
+                  </a-select-option>
+                </template>
+              </a-select>
           </a-form-item>
           <a-form-item name="email" ref="email">
             <template #label>
@@ -104,10 +121,27 @@
             <template #label>
               <tooltip-label :title="$t('label.name')" :tooltip="apiParams.addUserToProject.username.description"/>
             </template>
-            <a-input
-              v-model:value="form.username"
-              :placeholder="apiParams.addUserToProject.username.description"
-              v-focus="true" />
+              <a-select
+                show-search
+                v-model:value="form.username"
+                :placeholder="apiParams.addUserToProject.username.description"
+                v-focus="true"
+                :filterOption="false"
+                @search="fetchUsers"
+              >
+                <template v-if="load.users" #notFoundContent>
+                  <a-spin size="small" />
+                </template>
+                <template v-if="!load.users">
+                  <a-select-option v-for="user in users" :key="user.username" :value="user.username">
+                    <span v-if="user.icon">
+                      <resource-icon :image="user.icon.base64image" size="1x" style="margin-right: 5px"/>
+                    </span>
+                    <block-outlined v-else style="margin-right: 5px" />
+                    {{ user.firstname + ' ' + user.lastname + " (" + user.username + ")" }}
+                  </a-select-option>
+                </template>
+              </a-select>
           </a-form-item>
           <a-form-item name="email" ref="email">
             <template #label>
@@ -163,11 +197,13 @@
 <script>
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
+import ResourceIcon from '@/components/view/ResourceIcon'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'AddAccountOrUserToProject',
   components: {
+    ResourceIcon,
     TooltipLabel
   },
   props: {
@@ -218,9 +254,13 @@ export default {
         this.fetchProjectRoles()
       }
     },
-    fetchUsers () {
+    fetchUsers (keyword) {
       this.load.users = true
-      api('listUsers', { listall: true }).then(response => {
+      const params = { listall: true, showicon: true }
+      if (keyword) {
+        params.keyword = keyword
+      }
+      api('listUsers', params).then(response => {
         this.users = response.listusersresponse.user ? response.listusersresponse.user : []
       }).catch(error => {
         this.$notifyError(error)
@@ -228,11 +268,13 @@ export default {
         this.load.users = false
       })
     },
-    fetchAccounts () {
+    fetchAccounts (keyword) {
       this.load.accounts = true
-      api('listAccounts', {
-        domainid: this.resource.domainid
-      }).then(response => {
+      const params = { domainid: this.resource.domainid, showicon: true }
+      if (keyword) {
+        params.keyword = keyword
+      }
+      api('listAccounts', params).then(response => {
         this.accounts = response.listaccountsresponse.account || []
       }).catch(error => {
         this.$notifyError(error)