show spinner on act as user add.

internet2 · Apr 3, 2024 · 29082fe · 29082fe
1 parent 8e98e52
commit 29082fe
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 29 deletions.
diff --git a/View/Elements/ActAsPeopleAutocomplete.ctp b/View/Elements/ActAsPeopleAutocomplete.ctp
@@ -101,7 +101,8 @@ $suffix = Configure::read('debug') > 0 ? '?time=' . time() : '';
     data() {
       return {
         loading: false,
-        rawData: []
+        rawData: [],
+        action: "enableActAs"
         }
     },
     components: {
@@ -112,7 +113,7 @@ $suffix = Configure::read('debug') > 0 ? '?time=' . time() : '';
     methods: {
       async addUser(user) {
         const { identifier: ident, label, value: id } = user;
-        this.loading = true;
+        this.loading = true
 
         // Create form
         const formData = new FormData();
@@ -141,17 +142,25 @@ $suffix = Configure::read('debug') > 0 ? '?time=' . time() : '';
         if (!resp.ok) {
           generateFlash('Enabling ActAs User failed', 'error');
           let errorResponse = await resp.json();
+          this.loading = false
           generateFlash(`${errorResponse.message}`, 'error');
-          this.loading = false;
           return
         }
         this.rawData = await resp.json();
-        console.log(this.rawData)
         this.loading = false
+
         // Force reload here
         window.location.reload();
       },
-    }
+    },
+    template: `
+      <Loader :active="loading"/>
+      <Autocomplete v-if="!loading"
+                    @callback="(item) => addUser(item)"
+                    :action="action"
+                    :forceDisableBtn="loading"
+                    icon=""/>
+    `
   });
 
 
@@ -164,10 +173,5 @@ $suffix = Configure::read('debug') > 0 ? '?time=' . time() : '';
   app.mount("#<?= $htmlId ?>-container");
 </script>
 
-<div id="<?= $htmlId ?>-container" class="cm-autocomplete-container">
-  <Autocomplete @callback="(item) => addUser(item)"
-                action="enableActAs"
-                :activeBtn="loading"
-                icon=""/>
-  <Loader :active="loading"/>
-</div>
+<!-- Element to host the app -->
+<div id="<?= $htmlId ?>-container" class="cm-autocomplete-container"></div>
diff --git a/View/Elements/ActionItem.ctp b/View/Elements/ActionItem.ctp
@@ -4,7 +4,7 @@ $vv_act_as_people = $vv_act_as_people ?? [];
 ?>
 
 <script type="text/javascript">
-  function handleDisable(event) {
+  function handleActionRedirect(event) {
     event.preventDefault();
     const input = event.target
     input.setAttribute('disabled', '')
@@ -53,7 +53,7 @@ $vv_act_as_people = $vv_act_as_people ?? [];
   ]);
   $options = [
     'label' => 'Disable',
-    'onclick' => 'javascript:handleDisable(event)',
+    'onclick' => 'javascript:handleActionRedirect(event)',
     'class' => 'btn btn-grouper btn-fit btn-block btn-danger btn-sm m-1 text-nowrap member-del-btn',
   ];
   echo $this->Form->end($options);

diff --git a/webroot/js/autocomplete.js b/webroot/js/autocomplete.js
@@ -10,9 +10,9 @@ export default {
             type: String,
             default: 'add'
         },
-        activeBtn: {
+        forceDisableBtn: {
             type: Boolean,
-            default: true
+            default: false
         },
         renderBtn: {
             type: Boolean,
@@ -27,6 +27,7 @@ export default {
     data() {
         return {
             search: '',
+            enableBtn: false,
             val: '',
             item: null,
             limit: 15,
@@ -40,19 +41,17 @@ export default {
         },
         toKebabCase(str) {
             return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-        }
+        },
+        enableBtnFunc() {
+            // 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.enableBtn && !this.forceDisableBtn
+        },
     },
     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
-            // debugger
-            console.log('is disabled', (this.activeBtn && (this.search.length < 3)).toString())
-            return this.activeBtn && (this.search.length < 3)
-        },
         autcompleteId() {
             return `autocomplete-search-container-${this.action}`
         }
@@ -96,9 +95,10 @@ export default {
                 this.item = ui.item;
                 this.search = `${ui.item.label} (${ui.item.value})`;
                 if(this.renderBtn) {
-                    $(`#${this.toKebabCase(this.action)}-btn`).prop('disabled', false).focus();
+                    this.enableBtn = true;
+                    $(`#${this.toKebabCase(this.action)}-btn`).focus();
                 } else {
-                    // Since we are not rendering any button we will trigger the search
+                    // Since we are not rendering any button, we will trigger the search
                     this.performAction()
                 }
             },
@@ -125,7 +125,7 @@ export default {
                         class=" btn btn-grouper btn-primary px-4 border-0"
                         type="button"
                         @click="performAction()"
-                        :disabled="isBtnDisabled">
+                        :disabled="!enableBtnFunc()">
                     <em v-if="icon != ''" class="material-icons lg" aria-hidden="true">{{ this.icon }}</em>
                     <span class="ml-2">{{ btnTxt }}</span>
                 </button>

diff --git a/webroot/js/groups-table.js b/webroot/js/groups-table.js
@@ -30,7 +30,8 @@ export default {
                     <td v-if="columns.indexOf('description') > -1">{{ group.description || txt.descrZeroState }}</td>
                     <td v-if="columns.indexOf('status') > -1">{{ groupStatus(group?.enabled) }}</td>
                     <td>
-                        <span class="d-flex flex-row justify-content-center align-items-center" v-if="!group.loading">
+                        <span v-if="!group.loading"
+                              class="d-flex flex-row justify-content-center align-items-center">
                             <!-- My memberships view(Join or leave Group) -->
                             <template v-if="showOptAction(group)">
                                 <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 @callback="(item) => addSubscriber(item)" :activeBtn="loading"/>
+                                <autocomplete @callback="(item) => addSubscriber(item)" :forceDisableBtn="loading"/>
                             </form>
                         </div>
                     </div>