autocomplete people picker improvements

internet2 · Mar 8, 2024 · cf20425 · cf20425
1 parent 83727b0
commit cf20425
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/webroot/js/autocomplete.js b/webroot/js/autocomplete.js
@@ -25,7 +25,7 @@ export default {
     },
     methods: {
         performAction() {
-            this.$emit(this.action, this.item);
+            this.$emit('callback', this.item);
         },
         toKebabCase(str) {
             return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
@@ -34,6 +34,11 @@ export default {
     computed: {
         btnTxt() {
             return eval(`this.txt.${this.action}`) ?? eval(`this.txt.${this.icon}`)
+        },
+        isBtnDisabled() {
+            // The minimum length that i start search is 3. So we only enable the button when
+            // the input text value has at least three characters
+            return this.activeBtn || (this.search.length < 3)
         }
     },
     mounted(el) {
@@ -86,7 +91,7 @@ export default {
                         class=" btn btn-grouper btn-primary px-4 border-0"
                         type="button"
                         @click="performAction()"
-                        :disabled="activeBtn">
+                        :disabled="isBtnDisabled">
                     <em class="material-icons lg" aria-hidden="true">{{ this.icon }}</em>
                     <span class="ml-2">{{ btnTxt }}</span>
                 </button>

diff --git a/webroot/js/members.js b/webroot/js/members.js
@@ -163,7 +163,7 @@ export default {
                         <div class="d-flex mb-4">
                             <form id="add-user-form" class="add-user-form w-100">
                                 <label class="sr-only" for="addUser">{{ txt.search }}</label>
-                                <autocomplete @addUser="(item) => addSubscriber(item)" :activeBtn="loading"/>
+                                <autocomplete @callback="(item) => addSubscriber(item)" :activeBtn="loading"/>
                             </form>
                         </div>
                     </div>

diff --git a/webroot/js/page/UserManager.js b/webroot/js/page/UserManager.js
@@ -46,7 +46,7 @@ export default {
         }
     },
     template: /*html*/`
-        <autocomplete @findManagedUsers="(item) => findManagedUsers(item)"
+        <autocomplete @callback="(item) => findManagedUsers(item)"
                       icon="search"
                       action="findManagedUsers"
                       :activeBtn="loading"