From ee6bc31de863fa693ffede69cebec4a97603404d Mon Sep 17 00:00:00 2001
From: Ioannis Igoumenos <ioigoume@gmail.com>
Date: Thu, 22 Feb 2024 21:55:01 +0200
Subject: [PATCH] Add people picker spinner. Fix people picker add button
 alignment.

---
 Controller/GrouperGroupsController.php      |  1 -
 Model/GrouperGroup.php                      | 10 +--
 View/Elements/Components/subscriberList.ctp |  2 -
 View/GrouperGroups/base.ctp                 |  2 +-
 View/GrouperGroups/index.ctp                | 91 +++++++++++----------
 webroot/css/co-grouper-plugin.css           | 12 +++
 webroot/js/autocomplete.js                  | 32 ++++++--
 7 files changed, 88 insertions(+), 62 deletions(-)

diff --git a/Controller/GrouperGroupsController.php b/Controller/GrouperGroupsController.php
index aab184b..659496b 100644
--- a/Controller/GrouperGroupsController.php
+++ b/Controller/GrouperGroupsController.php
@@ -221,7 +221,6 @@ public function addSubscriber(): void
 
   public function findSubscriber(): void
   {
-    $this->autoRender = false;
     $this->request->allowMethod('ajax');
     $this->layout = 'ajax';
 
diff --git a/Model/GrouperGroup.php b/Model/GrouperGroup.php
index d3f891a..2b52896 100644
--- a/Model/GrouperGroup.php
+++ b/Model/GrouperGroup.php
@@ -217,15 +217,11 @@ public function findForPicker(int $coId, string $mode, ?string $term): array
 
         // Iterate over the email array
         if(!empty($emailArr) && !empty($pickerEmailType)) {
-          if(!empty($pickerDisplayTypes)) {
-            $emailLabel = _txt('fd.extended_type.generic.label', array(_txt('fd.email_address.mail'), $pickerEmailType));
-          }
-          else {
-            $emailLabel = _txt('fd.email_address.mail') . ': ';
-          }
+          $emailLabel = !empty($pickerDisplayTypes) ? _txt('fd.extended_type.generic.label', array(_txt('fd.email_address.mail'), $pickerEmailType))
+                                                    : _txt('fd.email_address.mail') . ': ';
           foreach($emailArr as $e) {
             if($e['type'] == $pickerEmailType) {
-              $email = $e['mail'] . ' ' . $pickerDisplayTypes;
+              $email = $e['mail'];
               break;
             }
           }
diff --git a/View/Elements/Components/subscriberList.ctp b/View/Elements/Components/subscriberList.ctp
index 909c0ca..eb50440 100644
--- a/View/Elements/Components/subscriberList.ctp
+++ b/View/Elements/Components/subscriberList.ctp
@@ -1,6 +1,4 @@
 <div id="subscriber-picker" class="ui-front">
-
-
     <div class="modal modal-members modal-primary fade" tabindex="-1" id="subscribers" aria-labelledby="modal-title">
         <div class="modal-dialog modal-dialog-scrollable modal-lg">
             <div class="modal-content">
diff --git a/View/GrouperGroups/base.ctp b/View/GrouperGroups/base.ctp
index ab6e5ce..8301abc 100644
--- a/View/GrouperGroups/base.ctp
+++ b/View/GrouperGroups/base.ctp
@@ -17,7 +17,7 @@ echo $this->Html->meta(
 );
 
 print $this->element('GrouperLiteWidget.base-styles');
-print $this->Html->css('GrouperLiteWidget.co-grouper-plugin') . "\n    ";
+print $this->Html->css('GrouperLiteWidget.co-grouper-plugin') . PHP_EOL;
 
 
 ?>
diff --git a/View/GrouperGroups/index.ctp b/View/GrouperGroups/index.ctp
index 8d076f1..822086c 100644
--- a/View/GrouperGroups/index.ctp
+++ b/View/GrouperGroups/index.ctp
@@ -6,7 +6,7 @@
 <!--/nocache-->
 <div class="d-flex align-items-center mb-4">
     <?php print $this->Html->image('GrouperLiteWidget.Grouper.jpg', array('class' => 'img-fluid mr-2', 'style' => 'height: 50px')); ?>
-    <h1 class="h2"><?php echo $title; ?></h1>
+    <h1 class="h2"><?= $title; ?></h1>
 </div>
 
 <script type="module">
@@ -47,60 +47,61 @@
     ];
 
     const router = VueRouter.createRouter({
-        history: VueRouter.createWebHistory("<?php echo $this->webroot ?>grouper_lite_widget/grouper_groups"),
+        history: VueRouter.createWebHistory("<?= $this->webroot ?>grouper_lite_widget/grouper_groups"),
         routes,
     })
     
 
     const app = Vue.createApp({
         provide: {
-            collapsed: <?php echo $vv_config['CoGrouperLiteWidget']['default_collapse'] == 'collapsed' ? 'true' : 'false'; ?>,
-            optAction: "<?php echo isset($optAction) ? $optAction : 'none'; ?>",
-            owner: <?php echo $treatAsOwner ? 'true' : 'false'; ?>,
-            url: "<?php echo isset($actionUrl) ? $actionUrl : 'null'; ?>",
-            grouperUrl: "<?php echo $grouperUrlBase ?>",
-            view: "<?php echo $this->action; ?>",
+            collapsed: <?= $vv_config['CoGrouperLiteWidget']['default_collapse'] == 'collapsed' ? 'true' : 'false' ?>,
+            optAction: "<?= $optAction ?? 'none' ?>",
+            owner: <?= $treatAsOwner ? 'true' : 'false' ?>,
+            url: "<?= $actionUrl ?? 'null' ?>",
+            grouperUrl: "<?= $grouperUrlBase ?>",
+            view: "<?= $this->action; ?>",
             txt: {
-                adhocHeading: "<?php echo $vv_config['CoGrouperLiteWidget']['adhoc_heading'] ?? 'Ad-hoc groups' ; ?>",
-                wgHeading: "<?php echo $vv_config['CoGrouperLiteWidget']['wg_heading'] ?? 'Working groups' ; ?>",
-                search: "<?php echo _txt('pl.grouperlite.title.search'); ?>",
-                searchForGroups: "<?php echo _txt('pl.grouperlite.action.search'); ?>",
-                display: "<?php echo _txt('fd.page.limit.display'); ?>",
-                records: "<?php echo _txt('fd.page.limit.records'); ?>",
-                first: "<?php echo _txt('op.first'); ?>",
-                last: "<?php echo _txt('op.last'); ?>",
-                previous: "<?php echo _txt('op.previous'); ?>",
-                next: "<?php echo _txt('op.next'); ?>",
-                groups: "<?php echo _txt('pl.grouperlite.dashboard.heading.groups'); ?>",
-                grouper: "<?php echo _txt('pl.grouperlite.action.grouper'); ?>",
-                leave: "<?php echo _txt('pl.grouperlite.action.leave') ?>",
+                adhocHeading: "<?= $vv_config['CoGrouperLiteWidget']['adhoc_heading'] ?? 'Ad-hoc groups' ?>",
+                wgHeading: "<?= $vv_config['CoGrouperLiteWidget']['wg_heading'] ?? 'Working groups' ?>",
+                search: "<?= _txt('pl.grouperlite.title.search') ?>",
+                searchForGroups: "<?= _txt('pl.grouperlite.action.search') ?>",
+                display: "<?= _txt('fd.page.limit.display') ?>",
+                records: "<?= _txt('fd.page.limit.records') ?>",
+                first: "<?= _txt('op.first') ?>",
+                last: "<?= _txt('op.last') ?>",
+                previous: "<?= _txt('op.previous') ?>",
+                next: "<?= _txt('op.next') ?>",
+                groups: "<?= _txt('pl.grouperlite.dashboard.heading.groups') ?>",
+                grouper: "<?= _txt('pl.grouperlite.action.grouper') ?>",
+                leave: "<?= _txt('pl.grouperlite.action.leave') ?>",
                 zero: {
-                    description: "<?php echo _txt('pl.grouperlite.value.descr.zerostate') ?>",
-                    records: "<?php echo _txt('pl.grouperlite.groups.zero-state'); ?>"
+                    description: "<?= _txt('pl.grouperlite.value.descr.zerostate') ?>",
+                    records: "<?= _txt('pl.grouperlite.groups.zero-state') ?>"
                 },
-                members: "<?php echo _txt('pl.grouperlite.action.members') ?>",
-                email: "<?php echo _txt('pl.grouperlite.value.email') ?>",
-                close: "<?php echo _txt('pl.grouperlite.action.close') ?>",
-                remove: "<?php echo _txt('pl.grouperlite.action.remove-user') ?>",
-                addUser: "<?php echo _txt('pl.grouperlite.action.add-user') ?>",
-                addSubscriberError: "<?php echo _txt('pl.grouperlite.message.flash.add-subscriber-failed') ?>",
-                addSubscriberSuccess: "<?php echo _txt('pl.grouperlite.message.flash.add-subscriber-success') ?>",
-                removeSubscriberError: "<?php echo _txt('pl.grouperlite.message.flash.remove-subscriber-failed') ?>",
-                removeSubscriberSuccess: "<?php echo _txt('pl.grouperlite.message.flash.remove-subscriber-success') ?>",
-                search: "<?php echo _txt('pl.grouperlite.search.tags.text') ?>",
-                noaccess: "<?php echo _txt('pl.grouperlite.members.noaccess') ?>",
-                empty: "<?php echo _txt('pl.grouperlite.members.empty') ?>",
-                join: "<?php echo _txt('pl.grouperlite.action.join') ?>",
-                joinSuccess: "<?php echo _txt('pl.grouperlite.message.flash.join-group-success'); ?>",
-                joinFailure: "<?php echo _txt('pl.grouperlite.message.flash.join-group-failed'); ?>",
-                joinError: "<?php echo _txt('pl.grouperlite.message.flash.join-group-error'); ?>",
-                leaveSuccess: "<?php echo _txt('pl.grouperlite.message.flash.leave-group-success'); ?>",
-                leaveFailure: "<?php echo _txt('pl.grouperlite.message.flash.leave-group-failure'); ?>",
-                leaveError: "<?php echo _txt('pl.grouperlite.message.flash.leave-group-error'); ?>",
+                members: "<?= _txt('pl.grouperlite.action.members') ?>",
+                email: "<?= _txt('pl.grouperlite.value.email') ?>",
+                close: "<?= _txt('pl.grouperlite.action.close') ?>",
+                remove: "<?= _txt('pl.grouperlite.action.remove-user') ?>",
+                addUser: "<?= _txt('pl.grouperlite.action.add-user') ?>",
+                addSubscriberError: "<?= _txt('pl.grouperlite.message.flash.add-subscriber-failed') ?>",
+                addSubscriberSuccess: "<?= _txt('pl.grouperlite.message.flash.add-subscriber-success') ?>",
+                removeSubscriberError: "<?= _txt('pl.grouperlite.message.flash.remove-subscriber-failed') ?>",
+                removeSubscriberSuccess: "<?= _txt('pl.grouperlite.message.flash.remove-subscriber-success') ?>",
+                searchTag: "<?= _txt('pl.grouperlite.search.tags.text') ?>",
+                peoplePickerPlaceHolder: "<?= _txt('op.grm.add.placeholder') ?>",
+                noaccess: "<?= _txt('pl.grouperlite.members.noaccess') ?>",
+                empty: "<?= _txt('pl.grouperlite.members.empty') ?>",
+                join: "<?= _txt('pl.grouperlite.action.join') ?>",
+                joinSuccess: "<?= _txt('pl.grouperlite.message.flash.join-group-success') ?>",
+                joinFailure: "<?= _txt('pl.grouperlite.message.flash.join-group-failed') ?>",
+                joinError: "<?= _txt('pl.grouperlite.message.flash.join-group-error') ?>",
+                leaveSuccess: "<?= _txt('pl.grouperlite.message.flash.leave-group-success') ?>",
+                leaveFailure: "<?= _txt('pl.grouperlite.message.flash.leave-group-failure') ?>",
+                leaveError: "<?= _txt('pl.grouperlite.message.flash.leave-group-error') ?>",
                 tabs: {
-                    memberships: "<?php echo _txt('pl.grouperlite.nav.memberships') ?>",
-                    optin: "<?php echo _txt('pl.grouperlite.nav.groups-can-join') ?>",
-                    owner: "<?php echo _txt('pl.grouperlite.nav.groups-presided') ?>",
+                    memberships: "<?= _txt('pl.grouperlite.nav.memberships') ?>",
+                    optin: "<?= _txt('pl.grouperlite.nav.groups-can-join') ?>",
+                    owner: "<?= _txt('pl.grouperlite.nav.groups-presided') ?>",
                 },
                 columns: <?php print_r(json_encode(array(
                     'name' => _txt('pl.grouperlite.table.name'),
diff --git a/webroot/css/co-grouper-plugin.css b/webroot/css/co-grouper-plugin.css
index bdc2c78..4d6ff8c 100644
--- a/webroot/css/co-grouper-plugin.css
+++ b/webroot/css/co-grouper-plugin.css
@@ -315,4 +315,16 @@ a.list-group-item-action:hover .fa {
     background-color: #ececec;
     border-bottom: 1px solid #FFF !important;
     margin-bottom: 1px;
+}
+
+.co-loading-mini-input-container {
+    flex-grow: 1;
+}
+
+.co-loading-mini-input-container .co-loading-mini {
+    display: none;
+    position: absolute;
+    right: 38px;
+    bottom: 10px;
+    margin-right: -26px;
 }
\ No newline at end of file
diff --git a/webroot/js/autocomplete.js b/webroot/js/autocomplete.js
index 5e24fe5..92f7cc4 100644
--- a/webroot/js/autocomplete.js
+++ b/webroot/js/autocomplete.js
@@ -24,14 +24,25 @@ export default {
             minLength: 3,
             maxShowItems: 10,
             focus: function( event, ui ) {
-                this.search = ui.item.label;
+                $("#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;
             },
-            select: (event, ui) => {
+            open: function (event, ui) {
+                $("#grouper-add-member-search-container .co-loading-mini").hide();
+            },
+            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) {
                 this.val = ui.item.identifier;
-                this.search = ui.item.label;
+                this.search = `${ui.item.label} (${ui.item.value})`;
                 this.item = ui.item;
                 $("#addUserbutton").prop('disabled', false).focus();
                 return false;
@@ -39,11 +50,20 @@ export default {
         }).autocomplete( "instance" )._renderItem = formatCoPersonAutoselectItem;
     },
     template: /*html*/`
-        <div class="input-group">
+        <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" />
-            <input id="add-user-input" type="text"  name="display" class="form-control" v-model="search" />
+            <span class="co-loading-mini-input-container">
+                <input id="add-user-input"
+                       type="text"
+                       name="display"
+                       class="form-control" 
+                       v-model="search"
+                       :placeholder="[[ txt.peoplePickerPlaceHolder ]]"
+                       autofocus/>
+                <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" type="button" @click="addUser(val)" :disabled="!uten">
+                <button id="addUserbutton" class="btn btn-grouper btn-primary px-4 border-0" type="button" @click="addUser(val)" :disabled="!uten">
                     <em class="material-icons lg" aria-hidden="true">add</em>
                     <span class="ml-2">{{ txt.addUser }}</span>
                 </button>