From 29196ea7786407407bd461a4f2a58bc073578645 Mon Sep 17 00:00:00 2001
From: Ioannis Igoumenos <ioigoume@gmail.com>
Date: Mon, 18 Mar 2024 20:50:23 +0200
Subject: [PATCH] Initiate searching for groups as soon as i select the user
 from the dropdown.Skip button click.

---
 webroot/js/autocomplete.js     | 23 ++++++++++++++++++++---
 webroot/js/page/UserManager.js |  9 ++++++++-
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/webroot/js/autocomplete.js b/webroot/js/autocomplete.js
index 52d81c7..368fec1 100644
--- a/webroot/js/autocomplete.js
+++ b/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"
diff --git a/webroot/js/page/UserManager.js b/webroot/js/page/UserManager.js
index 256f868..91c94b0 100644
--- a/webroot/js/page/UserManager.js
+++ b/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">