Disable buttons on ActAs mode

View/Elements/ActAsPeopleAutocomplete.ctp

@@ -165,7 +165,6 @@ $suffix = Configure::read('debug') > 0 ? '?time=' . time() : '';
       <Autocomplete v-if="!loading"
                     @callback="(item) => addUser(item)"
                     :action="action"
-                    :forceDisableBtn="loading"
                     icon=""/>
     `
   });

View/Elements/ActionSideBar.ctp

@@ -24,6 +24,7 @@
       <?= $this->element('ActAsPeopleAutocomplete',
                          compact('vv_config',
                                  'vv_coid',
+                                 'vv_act_as_people',
                                  'vv_is_user_owner',
                                  'htmlId')
       )?>

webroot/css/co-grouper-base.css

@@ -22,6 +22,16 @@
     font-size: 0.8rem;
 }
 
+button:disabled,
+input[type=button]:disabled,
+input[type=button][disabled],
+button[disabled]{
+    background:#999 !important;
+    color:#ffffff !important;
+    border: none !important;
+    cursor: not-allowed;
+}
+
 #content .material-icons.lg {
     font-size: 1.2rem;
 }

webroot/js/autocomplete.js

@@ -10,7 +10,7 @@ export default {
             type: String,
             default: 'add'
         },
-        forceDisableBtn: {
+        forceDisable: {
             type: Boolean,
             default: false
         },
@@ -23,7 +23,7 @@ export default {
             default: ''
         }
     },
-    inject: ['txt', 'api', 'all'],
+    inject: ['txt', 'api', 'other'],
     data() {
         return {
             search: '',
@@ -45,7 +45,7 @@ export default {
         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
+            return this.enableBtn && !this.forceDisable
         },
     },
     computed: {
@@ -62,6 +62,9 @@ export default {
         this.url = `${this.api.find}?co=${this.api.co}&mode=${this.api.mode}&page=${this.page}&limit=${this.limit}`
         input.autocomplete({
             source: ( request, response ) => {
+                if(this.forceDisable) {
+                    return ["Not allowed"]
+                }
                 $(`#autocomplete-search-container-${this.action} .co-loading-mini`).show();
                 $.ajax({
                     url: this.url,
@@ -117,6 +120,7 @@ export default {
                        name="display"
                        class="form-control"
                        v-model="search"
+                       :disabled="this.forceDisable"
                        :placeholder="txt.peoplePickerPlaceHolder"/>
                 <span class="co-loading-mini"><span></span><span></span><span></span></span>
             </span>

webroot/js/groups-table.js

@@ -11,6 +11,7 @@ export default {
             return status === 'T' ? 'Enabled' : 'Disabled'
         }
     },
+    inject: ['txt', 'api', 'other'],
     created() {},
     template: /*html*/`
         <table class="table w-100 mb-0" v-if="groups.length > 0">
@@ -38,7 +39,7 @@ export default {
                                     v-if="$attrs.onJoinGroup"
                                     @click="$emit('joinGroup', group)"
                                     class="btn btn-sm btn-block text-nowrap m-1 btn-success" type="button"
-                                    :disabled="group.loading">
+                                    :disabled="group.loading || this.other.hasActAs">
                                     {{ txt.join }}
                                     &nbsp;
                                     <em class="material-icons mt-0 ml-1" aria-hidden="true">{{ person }}</em>
@@ -47,7 +48,7 @@ export default {
                                     v-if="$attrs.onLeaveGroup"
                                     @click="$emit('leaveGroup', group)"
                                     class="btn btn-sm btn-block text-nowrap m-1 btn-danger" type="button"
-                                    :disabled="group.loading">
+                                    :disabled="group.loading || this.other.hasActAs">
                                     {{ txt.leave }}<em class="material-icons mt-0 ml-1" aria-hidden="true">{{ person_off }}</em>
                                 </button>
                             </template>
@@ -57,14 +58,15 @@ export default {
                                 class="btn btn-grouper btn-block btn-primary btn-sm m-1 text-nowrap members-btn"
                                 @click="$emit('showSubscribers', group)"
                                 :data-id="encodeURIComponent(group.name)"
+                                :disabled="this.other.hasActAs"
                                 :data-name="group.displayExtension">{{ txt.members }}<em class="material-icons mt-0 ml-1" aria-hidden="true">group</em>
                             </button>
                             <!-- Remove from Group i manage -->
                             <button 
                                 v-if="$attrs.onRemoveUser"
                                 class="btn btn-sm btn-block text-nowrap m-1 btn-danger" type="button"
                                 @click="$emit('removeUser', group)"
-                                :disabled="group.loading"
+                                :disabled="group.loading || this.other.hasActAs"
                                 :data-id="encodeURIComponent(group.name)"
                                 :data-name="group.displayExtension">
                                     {{ txt.remove }}<em class="material-icons mt-0 ml-1" aria-hidden="true">{{ person_off }}</em>

webroot/js/members.js

@@ -34,7 +34,7 @@ export default {
         remove: Boolean,
         default: false
     },
-    inject: ['txt', 'api'],
+    inject: ['txt', 'api', 'other'],
     components: {
         Loader,
         Autocomplete
@@ -163,7 +163,8 @@ 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)" :forceDisableBtn="loading"/>
+                                <autocomplete @callback="(item) => addSubscriber(item)"
+                                             :forceDisable="loading || this.other.hasActAs"/>
                             </form>
                         </div>
                     </div>
@@ -182,7 +183,9 @@ export default {
                                         {{ subscriber.id }}
                                     </td>
                                     <td v-if="remove">
-                                        <button :disabled="disabled.indexOf(subscriber.id) > -1" @click="removeSubscriber(group, subscriber)" class="btn btn-grouper btn-block btn-primary btn-sm m-1 text-nowrap member-del-btn">
+                                        <button :disabled="disabled.indexOf(subscriber.id) > -1 || this.other.hasActAs"
+                                                @click="removeSubscriber(group, subscriber)"
+                                                class="btn btn-grouper btn-block btn-danger btn-sm m-1 text-nowrap member-del-btn">
                                             {{ txt.remove }}
                                         </button>
                                     </td>

webroot/js/nested-table.js

@@ -39,7 +39,10 @@ export default {
                     <collapse :default="collapsed" v-slot="{toggle, show}">
                         <tr class="table-light collapse-wg-working-group-parent">
                             <td :colspan="columns.length - 2">
-                                <button @click="toggle" type="button" class="btn btn-link btn-text collapse-btn fw-bold m-0" role="button" :aria-expanded="show ? 'false' : 'true'">  
+                                <button @click="toggle"
+                                        type="button"
+                                        class="btn btn-link btn-text collapse-btn fw-bold m-0"
+                                        role="button" :aria-expanded="show ? 'false' : 'true'">  
                                     <span class="grpr-popover-toggle">
                                         {{ wggroup.WGShowName || "No Name" }}
                                         <em class="material-icons mt-0 ml-1 ml-1" aria-hidden="true">{{ show ? 'arrow_drop_down' : 'arrow_right' }}</em>