Clean up autocomplete module.Fixed data object bindings on select.

internet2 · Feb 23, 2024 · 7459512 · 7459512
1 parent a411bfc
commit 7459512
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/webroot/js/autocomplete.js b/webroot/js/autocomplete.js
@@ -2,7 +2,10 @@
 
 export default {
     props: {
-        group: String
+        group: {
+            type: String,
+            default: ""
+        }
     },
     inject: ['txt', 'api'],
     data() {
@@ -13,7 +16,7 @@ export default {
         };
     },
     methods: {
-        addUser(search) {
+        addUser() {
             this.$emit('add', this.item);
         }
     },
@@ -22,48 +25,51 @@ export default {
         input.autocomplete({
             source: `${this.api.find}?co=${this.api.co}&mode=${this.api.mode}`,
             minLength: 3,
-            maxShowItems: 10,
-            focus: function( event, ui ) {
+            maxShowItems: 15,
+            focus: ( event, ui ) => {
                 $("#grouper-add-member-search-container .co-loading-mini").hide();
-                console.log('ui item', ui.item)
-                this.search = `${ui.item.label} (${ui.item.value})`;
-                this.val = ui.item.identifier;
-                this.item = ui.item;
                 return false;
             },
             open: function (event, ui) {
                 $("#grouper-add-member-search-container .co-loading-mini").hide();
             },
+            create: function (event, ui) {
+                $("#add-user-input").focus();
+            },
             close: function (event, ui) {
                 $("#grouper-add-member-search-container .co-loading-mini").hide();
             },
             search: function (event, ui) {
                 $("#grouper-add-member-search-container .co-loading-mini").show();
             },
-            select: function (event, ui) {
+            // XXX We need access to the parent data object.
+            //     As a result we have to use arrow function syntax (ES6)
+            select: (event, ui) => {
                 this.val = ui.item.identifier;
-                this.search = `${ui.item.label} (${ui.item.value})`;
                 this.item = ui.item;
+                this.search = `${ui.item.label} (${ui.item.value})`;
                 $("#addUserbutton").prop('disabled', false).focus();
                 return false;
             },
         }).autocomplete( "instance" )._renderItem = formatCoPersonAutoselectItem;
     },
     template: /*html*/`
         <div id="grouper-add-member-search-container" class="input-group">
-            <input id="add-user-value" type="hidden"  name="addUser" class="form-control" v-model="val" />
             <span class="co-loading-mini-input-container">
                 <input id="add-user-input"
                        type="text"
                        name="display"
-                       class="form-control" 
+                       class="form-control"
                        v-model="search"
-                       :placeholder="txt.peoplePickerPlaceHolder"
-                       autofocus/>
+                       :placeholder="txt.peoplePickerPlaceHolder"/>
                 <span class="co-loading-mini"><span></span><span></span><span></span></span>
             </span>
             <div class="input-group-append">
-                <button id="addUserbutton" class="btn btn-grouper btn-primary px-4 border-0" type="button" @click="addUser(val)" :disabled="!uten">
+                <button id="addUserbutton"
+                        class=" btn btn-grouper btn-primary px-4 border-0"
+                        type="button"
+                        @click="addUser()"
+                        :disabled="true">
                     <em class="material-icons lg" aria-hidden="true">add</em>
                     <span class="ml-2">{{ txt.addUser }}</span>
                 </button>

diff --git a/webroot/js/members.js b/webroot/js/members.js
@@ -157,7 +157,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 :group="encodeURIComponent(this.group.name)" @add="(item) => addSubscriber(item)" />
+                                <autocomplete @add="(item) => addSubscriber(item)" />
                             </form>
                         </div>
                     </div>