Implemented search and add user

internet2 · Jun 20, 2022 · ce80e9d · ce80e9d
1 parent d5a8488
commit ce80e9d
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 12 deletions.
diff --git a/Controller/GrouperGroupsController.php b/Controller/GrouperGroupsController.php
@@ -227,8 +227,8 @@ public function findSubscriber()
       $this->response->disableCache();
     }
 
-    $groupName = urldecode($this->request->query['group']);
-    $findUserId = urldecode($this->request->query['userId']);
+    // $groupName = urldecode($this->request->query['group']);
+    $findUserId = urldecode($this->request->query['term']);
     $co = urldecode($this->request->query['co']);
 
     $mode = urldecode($this->request->query['mode']);

diff --git a/View/Elements/Components/optAction.ctp b/View/Elements/Components/optAction.ctp
@@ -4,7 +4,7 @@
   'id' => 'join-group.' . $idx
 )); ?>
 <?php print $this->Form->hidden('GroupName', array('default' => $group, 'id' => 'groupName.' . $idx)); ?>
-<button class="btn btn-sm btn-<?php echo $member ? 'danger' : 'success'; ?> btn-block text-nowrap" type="submit">
+<button class="btn btn-sm btn-<?php echo $member ? 'danger' : 'success'; ?> btn-block text-nowrap m-1" type="submit">
   <?php echo $member ? _txt('pl.grouperlite.action.leave') : _txt('pl.grouperlite.action.join') ?> &nbsp;
   <i class="fa fa-<?php echo $member ? 'user-times' : 'users'; ?> fa-sm"></i>
 </button>

diff --git a/View/Elements/Components/subscriberList.ctp b/View/Elements/Components/subscriberList.ctp
@@ -28,23 +28,23 @@
                         <?php echo $this->Form->input("addUser", array('label' => false, 'class' => 'form-control', 'value' => isset($searchcriteria) ? $searchcriteria : '')) ?>
                         <!--<input type="text" name="search" class="form-control" value="<?php echo isset($searchcriteria) ? $searchcriteria : ''; ?>" /> -->
                         <div class="input-group-append">
-                            <button class="btn btn-grouper btn-primary px-4" type="submit" value="Submit">
-                                <i class="fa fa-plus"></i>
+                            <button id="addUserbutton" class=" btn btn-grouper btn-primary px-4" type="submit" value="Submit">
+                                <i id="btn-icon" class="fa fa-plus"></i>
                                 <span class="ml-2"><?php echo _txt('pl.grouperlite.action.add-user'); ?></span>
                             </button>
                         </div>
                     </div>
                     <?php echo $this->Form->end(); ?>
                 </div>
+                <div>
+                    <p class="alert alert-danger error"></p>
+                </div>
                 <table class="table table-striped">
                     <tbody id="sub-body"></tbody>
                 </table>
 
             </div>
-            <div class="modal-footer d-flex justify-content-between">
-                <div>
-                    <p class="alert alert-danger error"></p>
-                </div>
+            <div class="modal-footer d-flex justify-content-end">
                 <button type="button" class="btn btn-grouper btn-link" data-dismiss="modal"><?php echo _txt('pl.grouperlite.action.close'); ?></button>
             </div>
         </div>
@@ -73,7 +73,7 @@
                             array(
                                 'plugin' => "grouper_lite",
                                 'controller' => 'grouper_groups',
-                                'action' => 'findSubscriber'
+                                'action' => 'addSubscriber'
                             )
                         ); ?>';
         $('.members-btn').click(function(ev) {
@@ -88,8 +88,43 @@
 
             load = loadModalData(group);
             load();
+
+            attachAutoComplete();
         });
 
+        function attachAutoComplete() {
+            $("#addUser").autocomplete({
+                source: "<?php print $this->Html->url(
+                                array(
+                                    'controller' => 'grouper_groups',
+                                    'action' => 'findSubscriber',
+                                    '?' => array('co' => 1, 'mode' => PeoplePickerModeEnum::All)
+                                )
+                            ); ?>",
+                minLength: 3,
+                select: function(event, ui) {
+                    // $("#group-add-member").hide();
+                    // $("#group-add-member-name").text(ui.item.label).show();
+                    $("#addUser").val(ui.item.email);
+                    // $("#CoGroupMemberCoPersonLabel").val(ui.item.label);
+                    $("#addUserbutton").prop('disabled', false).focus();
+                    $("#group-add-member-clear-button").show();
+                    return false;
+                },
+                search: function(event, ui) {
+                    $("#group-add-member-search-container .co-loading-mini").show();
+                },
+                focus: function(event, ui) {
+                    event.preventDefault();
+                    $("#group-add-member-search-container .co-loading-mini").hide();
+                    $("#group-add-member").val(ui.item.label + " (" + ui.item.value + ")");
+                },
+                close: function(event, ui) {
+                    $("#group-add-member-search-container .co-loading-mini").hide();
+                }
+            }).autocomplete("instance")._renderItem = formatCoPersonAutoselectItem;
+        }
+
         function onAddUserSubmit(ev) {
             ev.preventDefault();
             ev.stopPropagation();
@@ -182,7 +217,7 @@
         }
 
         function onRemoveUser(user, group, button, data) {
-
+            $('#subscribers .error').hide();
             $.ajax({
                 method: 'DELETE',
                 url: removeUrl + '?group=' + group + '&userId=' + user,
@@ -199,14 +234,27 @@
             });
         }
 
+        function showButtonSpinner() {
+            $('#btn-icon').removeClass('fa-plus').addClass('fa-spinner fa-pulse');
+            $('#addUserbutton').attr('disabled', true);
+        }
+
+        function hideButtonSpinner() {
+            $('#btn-icon').removeClass('fa-spinner fa-pulse').addClass('fa-plus');
+            $('#addUserbutton').attr('disabled', false);
+        }
+
         function onAddUser(user, group, field, data) {
+            $('#subscribers .error').hide();
+            showButtonSpinner();
             $.ajax({
                 method: 'POST',
-                url: addUrl + '?co=1&mode=AL&group=' + group + '&userId=' + user,
+                url: addUrl + '?group=' + group + '&userId=' + user,
                 dataType: 'json',
                 data: data,
                 success: function(data) {
                     load();
+                    hideButtonSpinner();
                 },
                 error: function(ev) {
                     var msg = ev.status === 404 ?
@@ -217,6 +265,8 @@
 
                     var err = $('#subscribers .error');
                     err.text(msg).show();
+
+                    hideButtonSpinner();
                 }
             });
         }

diff --git a/View/Elements/base-styles.ctp b/View/Elements/base-styles.ctp
@@ -72,4 +72,8 @@
     #subscribers .msg {
         display: none;
     }
+
+    .modal-open .ui-menu {
+        z-index: 2000;
+    }
 </style>