From 3dc8760864d527681f77fad30360248c81c5bb39 Mon Sep 17 00:00:00 2001
From: Katrin Yordanova <katrin.yordanova@crust.tech>
Date: Wed, 5 Jul 2023 13:23:54 +0300
Subject: [PATCH] Show role members on initial fetch

---
 .../web/admin/src/components/CRolePicker.vue  | 14 ++++----
 .../components/Role/CRoleEditorMembers.vue    | 33 ++++++++-----------
 .../admin/src/views/System/Role/Editor.vue    |  3 +-
 3 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/client/web/admin/src/components/CRolePicker.vue b/client/web/admin/src/components/CRolePicker.vue
index d1cd3e2817..7f31f6e453 100644
--- a/client/web/admin/src/components/CRolePicker.vue
+++ b/client/web/admin/src/components/CRolePicker.vue
@@ -32,13 +32,11 @@
       >
         <b-col>{{ getRoleLabel(role) }}</b-col>
         <b-col class="text-right">
-          <b-button
+          <c-input-confirm
             data-test-id="button-remove-role"
-            variant="link"
-            @click="removeRole(role)"
-          >
-            <font-awesome-icon :icon="['far', 'trash-alt']" />
-          </b-button>
+            no-prompt
+            @confirmed="removeRole(role)"
+          />
         </b-col>
       </b-row>
     </b-container>
@@ -48,7 +46,8 @@
 <script>
 import { debounce } from 'lodash'
 import { VueSelect } from 'vue-select'
-
+import { components } from '@cortezaproject/corteza-vue/'
+const { CInputConfirm } = components
 function roleSorter (a, b) {
   return `${a.name} ${a.handle} ${a.roleID}`.localeCompare(`${b.name} ${b.handle} ${b.roleID}`)
 }
@@ -56,6 +55,7 @@ function roleSorter (a, b) {
 export default {
   components: {
     VueSelect,
+    CInputConfirm,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Role/CRoleEditorMembers.vue b/client/web/admin/src/components/Role/CRoleEditorMembers.vue
index 202cc5db5e..8a4e933a1c 100644
--- a/client/web/admin/src/components/Role/CRoleEditorMembers.vue
+++ b/client/web/admin/src/components/Role/CRoleEditorMembers.vue
@@ -36,14 +36,11 @@
             >
               <td>{{ getUserLabel(user) }}</td>
               <td class="text-right">
-                <b-button
+                <c-input-confirm
                   data-test-id="button-remove-member"
-                  variant="link"
-                  class="text-danger pr-0"
-                  @click="removeMember(user.userID)"
-                >
-                  {{ $t('remove') }}
-                </b-button>
+                  no-prompt
+                  @confirmed="removeMember(user.userID)"
+                />
               </td>
             </tr>
           </tbody>
@@ -72,6 +69,8 @@
 import { debounce } from 'lodash'
 import { VueSelect } from 'vue-select'
 import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
+import { components } from '@cortezaproject/corteza-vue/'
+const { CInputConfirm } = components
 
 export default {
   i18nOptions: {
@@ -82,6 +81,7 @@ export default {
   components: {
     CSubmitButton,
     VueSelect,
+    CInputConfirm,
   },
 
   props: {
@@ -132,7 +132,6 @@ export default {
 
   mounted () {
     this.fetchUsers()
-    this.fetchMembers()
   },
 
   methods: {
@@ -172,24 +171,18 @@ export default {
     },
 
     fetchUsers () {
-      this.$SystemAPI.userList({ query: this.filter })
+      this.$SystemAPI.userList({ query: this.filter, limit: 25 })
         .then(({ set: items = [] }) => {
           this.users = items
+
+          if (!this.filter) {
+            const userIDs = this.members.map(({ userID }) => userID)
+            this.memberUsers = items.filter(({ userID }) => userIDs.includes(userID))
+          }
         })
         .catch(this.toastErrorHandler(this.$t('notification:user.fetch.error')))
     },
 
-    fetchMembers () {
-      const userID = this.members.map(({ userID }) => userID)
-      if (userID.length > 0) {
-        this.$SystemAPI.userList({ query: this.filter, userID })
-          .then(({ set: items = [] }) => {
-            this.memberUsers = items
-          })
-          .catch(this.toastErrorHandler(this.$t('notification:user.fetch.error')))
-      }
-    },
-
     search: debounce(function (query = '') {
       if (query !== this.filter) {
         this.filter = query
diff --git a/client/web/admin/src/views/System/Role/Editor.vue b/client/web/admin/src/views/System/Role/Editor.vue
index 12b12b9446..77e930fa53 100644
--- a/client/web/admin/src/views/System/Role/Editor.vue
+++ b/client/web/admin/src/views/System/Role/Editor.vue
@@ -108,7 +108,7 @@ export default {
       initialRoleState: undefined,
       isContext: false,
 
-      roleMembers: [],
+      roleMembers: undefined,
 
       info: {
         processing: false,
@@ -166,6 +166,7 @@ export default {
           this.role = new system.Role()
           this.initialRoleState = this.role.clone()
           this.isContext = false
+          this.roleMembers = undefined
         }
       },
     },