action act as ui improvements

internet2 · Apr 2, 2024 · 6c86851 · 6c86851
1 parent 2a69807
commit 6c86851
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 5 deletions.
diff --git a/Lib/lang.php b/Lib/lang.php
@@ -127,6 +127,7 @@
   'pl.grouperlite.action.clear' => 'Clear',
   'pl.grouperlite.action.add-user' => 'Add',
   'pl.grouperlite.action.remove-user' => 'Remove',
+  'pl.grouperlite.action.enable-act-as' => 'Enable',
   'pl.grouperlite.message.user-not-found-error' => 'Error: User not found.',
   'pl.grouperlite.message.user-not-added-error' => 'Error: Unable to add user.',
   'pl.grouperlite.message.user-not-removed-error' => 'Error: Unable to remove user.',

diff --git a/View/Elements/actAsPeopleAutocomplete.ctp b/View/Elements/actAsPeopleAutocomplete.ctp
@@ -42,6 +42,7 @@ $suffix = Configure::read('debug') > 0 ? '?time=' . time() : '';
       },
       members: "<?= _txt('pl.grouperlite.action.members') ?>",
       email: "<?= _txt('pl.grouperlite.value.email') ?>",
+      enableActAs: "<?= _txt('pl.grouperlite.action.enable-act-as') ?>",
       close: "<?= _txt('pl.grouperlite.action.close') ?>",
       remove: "<?= _txt('pl.grouperlite.action.remove-user') ?>",
       addUser: "<?= _txt('pl.grouperlite.action.add-user') ?>",
@@ -122,6 +123,7 @@ $suffix = Configure::read('debug') > 0 ? '?time=' . time() : '';
 
 <div id="<?= $htmlId ?>-container" class="cm-autocomplete-container">
   <Autocomplete @callback="(item) => addUser(item)"
-                icon="add"/>
+                action="enableActAs"
+                icon=""/>
   <Loader :active="loading"/>
 </div>
diff --git a/View/GrouperGroups/index.ctp b/View/GrouperGroups/index.ctp
@@ -62,6 +62,7 @@ $suffix = Configure::read('debug') > 0 ? '?time=' . time() : '';
         routes,
     })
 
+    // TODO: Create the provides only once
     const app = Vue.createApp({
         provide: {
             collapsed: <?= $vv_config['CoGrouperLiteWidget']['default_collapse'] == 'collapsed' ? 'true' : 'false' ?>,
@@ -168,10 +169,44 @@ $suffix = Configure::read('debug') > 0 ? '?time=' . time() : '';
             <span class="ui-icon ui-icon-search"></span>Find
           </a>
         </div>
-        <div class="collapse" id="people-picker-container">
-          <div id="auto-complete-form">test</div>
+        <div class="collapse mb-1 mt-2" id="people-picker-container">
+          <?= $this->element('actAsPeopleAutocomplete',
+                             compact('vv_config',
+                                     'vv_coid',
+                                     'vv_is_user_owner',
+                                     'htmlId')
+          )?>
+          <hr style="border-top: dotted 1px;" />
+        </div>
+        <!--    Current choices we got from the database    -->
+        <!--   TODO: Move to element     -->
+        <div class="d-inline-flex w-100 justify-content-between align-items-center">
+          <div class="cm-ac-item-wrapper w-75">
+            <div class="cm-ac-name">
+              <a href="<?= $this->webroot ?>co_people/canvas/3054"  class="spin ignore-invalid">John Doe</a>
+            </div>
+            <div class="cm-ac-subitem cm-ac-email">
+              <span class="cm-ac-label">Email (official): </span>nmastoris@admin.grnet.gr
+            </div>
+            <div class="cm-ac-subitem cm-ac-id">
+              <span class="cm-ac-label">Identifier (I2CollabPN): </span>nickmastoris.mastoris@at.in...
+            </div>
+          </div>
+          <button class="btn
+                         btn-grouper
+                         w-25
+                         btn-fit
+                         btn-block
+                         btn-danger
+                         btn-sm
+                         m-1
+                         text-nowrap
+                         member-del-btn"
+                  data-personid="1"
+                  onclick="javascript:void"
+          >Disable</button>
+
         </div>
-        <a href="<?= $this->webroot ?>co_people/canvas/3054"  class="spin ignore-invalid">John Doe</a>
         <hr>
       </div>
     </div>

diff --git a/webroot/css/co-grouper-plugin.css b/webroot/css/co-grouper-plugin.css
@@ -14,6 +14,10 @@
     border-radius: .2rem;
 }
 
+.btn-fit {
+    height: fit-content;
+}
+
 a {
     color: var(--primary);
 }

diff --git a/webroot/js/autocomplete.js b/webroot/js/autocomplete.js
@@ -120,7 +120,7 @@ export default {
                         type="button"
                         @click="performAction()"
                         :disabled="isBtnDisabled">
-                    <em class="material-icons lg" aria-hidden="true">{{ this.icon }}</em>
+                    <em v-if="icon != ''" class="material-icons lg" aria-hidden="true">{{ this.icon }}</em>
                     <span class="ml-2">{{ btnTxt }}</span>
                 </button>
             </div>