Show role members on initial fetch

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,14 +46,16 @@
 <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}`)
 }
 
 export default {
   components: {
     VueSelect,
+    CInputConfirm,
   },
 
   props: {

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

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
         }
       },
     },