Fetch_members_on_user_selection

webroot/js/autocomplete.js

@@ -13,6 +13,14 @@ export default {
         activeBtn: {
             type: Boolean,
             default: true
+        },
+        renderBtn: {
+            type: Boolean,
+            default: true
+        },
+        preInfo: {
+            type: String,
+            default: ''
         }
     },
     inject: ['txt', 'api'],
@@ -82,13 +90,22 @@ export default {
                 this.val = ui.item.identifier;
                 this.item = ui.item;
                 this.search = `${ui.item.label} (${ui.item.value})`;
-                $(`#${this.toKebabCase(this.action)}-btn`).prop('disabled', false).focus();
-                return false;
+                if(this.renderBtn) {
+                    $(`#${this.toKebabCase(this.action)}-btn`).prop('disabled', false).focus();
+                } else {
+                    // Since we are not rendering any button we will trigger the search
+                    this.performAction()
+                }
             },
         })
     },
     template: /*html*/`
         <div id="grouper-search-container" class="input-group">
+            <div v-if="preInfo != ''" class="input-group-prepend">
+              <span class="input-group-text" id="basic-addon1">
+                <span v-html="preInfo"></span>
+              </span>
+            </div>
             <span class="co-loading-mini-input-container">
                 <input :id="toKebabCase(action) + '-input'"
                        type="text"
@@ -98,7 +115,7 @@ export default {
                        :placeholder="txt.peoplePickerPlaceHolder"/>
                 <span class="co-loading-mini"><span></span><span></span><span></span></span>
             </span>
-            <div class="input-group-append">
+            <div v-if="renderBtn" class="input-group-append">
                 <button :id="toKebabCase(action) + '-btn'"
                         class=" btn btn-grouper btn-primary px-4 border-0"
                         type="button"

webroot/js/page/UserManager.js

@@ -24,6 +24,11 @@ export default {
       }
     },
     inject: ['api', 'txt'],
+    computed: {
+      preInfoTxt() {
+          return '<em class="material-icons lg" aria-hidden="true">search</em><span class="ml-1">' + this.txt.search + ':</span>'
+      }
+    },
     methods: {
         reset() {
             this.searched = false
@@ -55,6 +60,7 @@ export default {
                 let errorResponse = await resp.json();
                 generateFlash(`${errorResponse.message}`, 'error');
             }
+            this.rowLoading = false;
         },
         async findGroupsForManagedUser(user) {
             this.user = user
@@ -84,7 +90,8 @@ export default {
         <autocomplete @callback="(item) => findGroupsForManagedUser(item)"
                       icon="search"
                       action="findGroupsForManagedUser"
-                      :activeBtn="loading"
+                      :renderBtn="false"
+                      :preInfo="this.preInfoTxt"
                       />
         <loader :active="loading"></loader>
         <pagination :records="results">