Make autocomplete component fully dynamic

internet2 · Mar 7, 2024 · a3da55e · a3da55e
1 parent 70d4480
commit a3da55e
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 16 deletions.
diff --git a/webroot/js/autocomplete.js b/webroot/js/autocomplete.js
@@ -5,6 +5,14 @@ export default {
         group: {
             type: String,
             default: ""
+        },
+        action: {
+            type: String,
+            default: "addUser"
+        },
+        icon: {
+            type: String,
+            default: 'add'
         }
     },
     inject: ['txt', 'api'],
@@ -16,8 +24,18 @@ export default {
         };
     },
     methods: {
-        addUser() {
-            this.$emit('add', this.item);
+        performAction() {
+            this.$emit(this.action, this.item);
+        },
+        toKebabCase(str) {
+            console.log('to kebab')
+            console.log('str', str)
+            return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+        }
+    },
+    computed: {
+        btnTxt() {
+            return eval(`this.txt.${this.action}`)
         }
     },
     mounted(el) {
@@ -27,36 +45,37 @@ export default {
             minLength: 3,
             maxShowItems: 15,
             focus: ( event, ui ) => {
-                $("#grouper-add-member-search-container .co-loading-mini").hide();
+                $("#grouper-search-container .co-loading-mini").hide();
                 return false;
             },
             open: function (event, ui) {
-                $("#grouper-add-member-search-container .co-loading-mini").hide();
+                $("#grouper-search-container .co-loading-mini").hide();
             },
-            create: function (event, ui) {
-                $("#add-user-input").focus();
+            create: (event, ui) => {
+                // debugger
+                $(`#${this.toKebabCase(this.action)}-input`).focus();
             },
             close: function (event, ui) {
-                $("#grouper-add-member-search-container .co-loading-mini").hide();
+                $("#grouper-search-container .co-loading-mini").hide();
             },
             search: function (event, ui) {
-                $("#grouper-add-member-search-container .co-loading-mini").show();
+                $("#grouper-search-container .co-loading-mini").show();
             },
             // 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.item = ui.item;
                 this.search = `${ui.item.label} (${ui.item.value})`;
-                $("#addUserbutton").prop('disabled', false).focus();
+                $(`#${this.toKebabCase(this.action)}-btn`).prop('disabled', false).focus();
                 return false;
             },
         }).autocomplete( "instance" )._renderItem = formatCoPersonAutoselectItem;
     },
     template: /*html*/`
-        <div id="grouper-add-member-search-container" class="input-group">
+        <div id="grouper-search-container" class="input-group">
             <span class="co-loading-mini-input-container">
-                <input id="add-user-input"
+                <input :id="toKebabCase(action) + '-input'"
                        type="text"
                        name="display"
                        class="form-control"
@@ -65,13 +84,13 @@ export default {
                 <span class="co-loading-mini"><span></span><span></span><span></span></span>
             </span>
             <div class="input-group-append">
-                <button id="addUserbutton"
+                <button :id="toKebabCase(action) + '-btn'"
                         class=" btn btn-grouper btn-primary px-4 border-0"
                         type="button"
-                        @click="addUser()"
+                        @click="performAction()"
                         :disabled="true">
-                    <em class="material-icons lg" aria-hidden="true">add</em>
-                    <span class="ml-2">{{ txt.addUser }}</span>
+                    <em class="material-icons lg" aria-hidden="true">{{ this.icon }}</em>
+                    <span class="ml-2">{{ btnTxt }}</span>
                 </button>
             </div>
         </div>

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 @add="(item) => addSubscriber(item)" />
+                                <autocomplete @addUser="(item) => addSubscriber(item)" />
                             </form>
                         </div>
                     </div>