From 8cd30a8227194b7c78b0847e31c0436b467908d0 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Tue, 29 Nov 2022 15:38:10 -0700
Subject: [PATCH] Fixed scrolling of member picker

---
 View/Elements/Components/subscriberList.ctp | 530 ++++++++++----------
 View/Elements/base-styles.ctp               |   9 +
 2 files changed, 284 insertions(+), 255 deletions(-)

diff --git a/View/Elements/Components/subscriberList.ctp b/View/Elements/Components/subscriberList.ctp
index e06de8c..9ea20b9 100644
--- a/View/Elements/Components/subscriberList.ctp
+++ b/View/Elements/Components/subscriberList.ctp
@@ -1,293 +1,313 @@
-<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">
-            <div class="modal-header">
-                <h3 class="modal-title h5" id="modal-title">
-                    <?php echo _txt('pl.grouperlite.group.info.members-heading'); ?>:
-                    <span id="model-title-group-name"></span>
-                </h3>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                    <span class="sr-only">Close</span>
-                </button>
-            </div>
-            <div class="modal-body loader text-center">
-                <svg id="grouper-loader" class="fade-out-half" role="status" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
-                    <circle r="20%" cx="15%" cy="50%" color="#000" />
-                    <circle r="20%" cx="50%" cy="50%" color="#000" />
-                    <circle r="20%" cx="85%" cy="50%" color="#000" />
-                </svg>
+<div id="subscriber-picker" class="ui-front">
 
-                <p class="sr-only">Loading...</p>
-            </div>
-            <div class="modal-body msg">
-                <p>You do not have access to view memberships.</p>
-            </div>
-            <div class="modal-body subs">
-                <?php if ($addSubscribers) : ?>
-                    <div class="d-flex mb-4">
-                        <?php echo $this->Form->create(false, array(
-                            'url' => array('controller' => 'grouper_groups', 'action' => 'groupSubscribers'),
-                            'class' => 'add-user-form w-100',
-                            'id' => 'add-user-form',
-                        )); ?>
-                        <label class="sr-only" for="addUser"><?php echo _txt('pl.grouperlite.search.tags.text'); ?></label>
-                        <div class="input-group">
-                            <?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 id="addUserbutton" class=" btn btn-grouper btn-primary px-4" type="submit" value="Submit">
-                                    <em class="material-icons lg" aria-hidden="true">add</em>
-                                    <span class="ml-2"><?php echo _txt('pl.grouperlite.action.add-user'); ?></span>
-                                </button>
-                            </div>
+    <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">
+                <div class="modal-header">
+                    <h3 class="modal-title h5" id="modal-title">
+                        <?php echo _txt('pl.grouperlite.group.info.members-heading'); ?>:
+                        <span id="model-title-group-name"></span>
+                    </h3>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                        <span class="sr-only">Close</span>
+                    </button>
+                </div>
+                <div class="modal-body loader text-center">
+                    <svg id="grouper-loader" class="fade-out-half" role="status" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
+                        <circle r="20%" cx="15%" cy="50%" color="#000" />
+                        <circle r="20%" cx="50%" cy="50%" color="#000" />
+                        <circle r="20%" cx="85%" cy="50%" color="#000" />
+                    </svg>
 
+                    <p class="sr-only">Loading...</p>
+                </div>
+                <div class="modal-body msg">
+                    <p>You do not have access to view memberships.</p>
+                </div>
+                <div class="modal-body subs">
+                    <?php if ($addSubscribers) : ?>
+                        <div class="d-flex mb-4">
+                            <?php echo $this->Form->create(false, array(
+                                'url' => array('controller' => 'grouper_groups', 'action' => 'groupSubscribers'),
+                                'class' => 'add-user-form w-100',
+                                'id' => 'add-user-form',
+                            )); ?>
+                            <label class="sr-only" for="addUser"><?php echo _txt('pl.grouperlite.search.tags.text'); ?></label>
+                            <div class="input-group">
+                                <?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 id="addUserbutton" class=" btn btn-grouper btn-primary px-4" type="submit" value="Submit">
+                                        <em class="material-icons lg" aria-hidden="true">add</em>
+                                        <span class="ml-2"><?php echo _txt('pl.grouperlite.action.add-user'); ?></span>
+                                    </button>
+                                </div>
+
+                            </div>
+                            <?php echo $this->Form->end(); ?>
                         </div>
-                        <?php echo $this->Form->end(); ?>
-                    </div>
-                    <div>
-                        <p class="alert alert-danger error"></p>
-                    </div>
-                <?php endif; ?>
-                <table class="table table-striped">
-                    <tbody id="sub-body"></tbody>
-                </table>
-            </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>
+                            <p class="alert alert-danger error"></p>
+                        </div>
+                    <?php endif; ?>
+                    <table class="table table-striped">
+                        <tbody id="sub-body"></tbody>
+                    </table>
+                </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>
         </div>
     </div>
-</div>
-<script>
-    (function($) {
-        var load, modal, group;
-        var loadUrl = '<?php print $this->Html->url(
-                            array(
-                                'plugin' => "grouper_lite",
-                                'controller' => 'grouper_groups',
-                                'action' => 'groupSubscribers'
-                            )
-                        ); ?>';
+    <script>
+        (function($) {
+
+            var test = [{
+                "value": "8",
+                "label": "Susan S. Singularity",
+                "email": "ssingularity@another.org 1",
+                "emailLabel": "Email (official): ",
+                "identifier": "",
+                "identifierLabel": ""
+            }, {
+                "value": "4",
+                "label": "Susan S. Susanity",
+                "email": "ssusanity@newbie.org 1",
+                "emailLabel": "Email (official): ",
+                "identifier": "",
+                "identifierLabel": ""
+            }];
 
-        var removeUrl = '<?php print $this->Html->url(
+            var load, modal, group;
+            var loadUrl = '<?php print $this->Html->url(
                                 array(
                                     'plugin' => "grouper_lite",
                                     'controller' => 'grouper_groups',
-                                    'action' => 'removeSubscriber'
+                                    'action' => 'groupSubscribers'
                                 )
                             ); ?>';
 
-        var addUrl = '<?php print $this->Html->url(
-                            array(
-                                'plugin' => "grouper_lite",
-                                'controller' => 'grouper_groups',
-                                'action' => 'addSubscriber'
-                            )
-                        ); ?>';
-        $('.members-btn').click(function(ev) {
-            var $this = $(this);
-            group = $this.data('id');
-            name = $this.data('name');
-            modal = $('#subscribers');
-            modal.modal('toggle').on('hide.bs.modal', function() {
-                modal.find('#add-user-form').off('submit', onAddUserSubmit);
-            });
-
-            modal.find('#add-user-form').on('submit', onAddUserSubmit);
-
-            load = loadModalData(group, name);
-            load();
+            var removeUrl = '<?php print $this->Html->url(
+                                    array(
+                                        'plugin' => "grouper_lite",
+                                        'controller' => 'grouper_groups',
+                                        'action' => 'removeSubscriber'
+                                    )
+                                ); ?>';
 
-            attachAutoComplete();
-        });
-
-        function attachAutoComplete() {
-            $("#addUser").autocomplete({
-                source: "<?php print $this->Html->url(
+            var addUrl = '<?php print $this->Html->url(
                                 array(
+                                    'plugin' => "grouper_lite",
                                     'controller' => 'grouper_groups',
-                                    'action' => 'findSubscriber',
-                                    '?' => array('co' => $config['co'])
+                                    'action' => 'addSubscriber'
                                 )
-                            ); ?>&mode=All",
-                minLength: 3,
-                select: function(event, ui) {
-                    // $("#group-add-member").hide();
-                    // $("#group-add-member-name").text(ui.item.label).show();
-                    $("#addUser").val(ui.item.identifier);
-                    // $("#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();
-            var form = $(ev.target);
-            var field = form.find('#addUser');
-            var user = field.val();
-            var token = form.find('[name="data[_Token][key]"]').val();
+                            ); ?>';
+            $('.members-btn').click(function(ev) {
+                var $this = $(this);
+                group = $this.data('id');
+                name = $this.data('name');
+                modal = $('#subscribers');
+                modal.modal('toggle').on('hide.bs.modal', function() {
+                    modal.find('#add-user-form').off('submit', onAddUserSubmit);
+                });
 
-            var data = form.serializeArray().reduce((o, kv) => ({
-                ...o,
-                [kv.name]: kv.value
-            }), {});
+                modal.find('#add-user-form').on('submit', onAddUserSubmit);
 
-            onAddUser(user, group, field, data);
-        }
+                load = loadModalData(group, name);
+                load();
 
-        function onRemoveUserSubmit(ev) {
-            ev.preventDefault();
-            ev.stopPropagation();
-            var form = $(ev.target);
-            var button = form.find('button');
-            var user = button.data('user');
-            var data = form.serializeArray().reduce((o, kv) => ({
-                ...o,
-                [kv.name]: kv.value
-            }), {});
-            onRemoveUser(user, group, button, data);
-        }
+                attachAutoComplete();
+            });
 
-        function loadModalData(id, name) {
-            $('#model-title-group-name').text(name);
-            modal.removeClass('error');
-            return function() {
-                modal.addClass('loading');
-                clean();
-                $.ajax({
-                    method: 'GET',
-                    url: loadUrl + '?groupname=' + id,
-                    dataType: 'json',
-                    success: function(data) {
-                        createModalContent(data);
+            function attachAutoComplete() {
+                $("#addUser").autocomplete({
+                    /*source: "< ?php print $this->Html->url(
+                                    array(
+                                        'controller' => 'grouper_groups',
+                                        'action' => 'findSubscriber',
+                                        '?' => array('co' => $config['co'])
+                                    )
+                                ); ?>&mode=All",*/
+                    source: [].concat(test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test),
+                    minLength: 3,
+                    select: function(event, ui) {
+                        // $("#group-add-member").hide();
+                        // $("#group-add-member-name").text(ui.item.label).show();
+                        $("#addUser").val(ui.item.identifier);
+                        // $("#CoGroupMemberCoPersonLabel").val(ui.item.label);
+                        $("#addUserbutton").prop('disabled', false).focus();
+                        $("#group-add-member-clear-button").show();
+                        return false;
                     },
-                    error: function(xhr) {
-                        if (xhr.status === 403) {
-                            $('#model-title-group-name').text(name + ' (no access)');
-                        }
-                        modal.addClass('error');
+                    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 + ")");
                     },
-                    complete: function() {
-                        modal.removeClass('loading');
+                    close: function(event, ui) {
+                        $("#group-add-member-search-container .co-loading-mini").hide();
                     }
-                });
+                }).autocomplete("instance")._renderItem = formatCoPersonAutoselectItem;
             }
-        }
 
-        function createModalContent(data) {
-            $('#sub-body').html(data.reduce(function(table, item) {
-                var row = [
-                    '<tr>',
-                    '<td>',
-                    item.name,
-                    '</td>',
-                    '<td>',
-                    item.id,
-                    '</td>',
-                    '<td>',
-                    '<?php echo $this->Form->create(false, array(
-                            "url" => array(
-                                "controller" => "grouper_groups",
-                                "action" => "removeSubscriber"
-                            ),
-                            "class" => "remove-user-form",
-                            "id" => "remove-user-form"
-                        )); ?>',
-                    <?php if ($addSubscribers) : ?>
-                    '<button data-user="' + item.id + '" class="btn btn-grouper btn-block btn-primary btn-sm m-1 text-nowrap member-del-btn">',
-                    '<?php echo _txt('pl.grouperlite.action.remove-user'); ?>',
-                    '</button>',
-                    <?php endif; ?>
-                    '<?php echo $this->Form->end(); ?>',
-                    '</td>',
-                    '</tr>'
-                ].join('');
+            function onAddUserSubmit(ev) {
+                ev.preventDefault();
+                ev.stopPropagation();
+                var form = $(ev.target);
+                var field = form.find('#addUser');
+                var user = field.val();
+                var token = form.find('[name="data[_Token][key]"]').val();
 
-                table += row;
-                return table;
-            }, ''));
+                var data = form.serializeArray().reduce((o, kv) => ({
+                    ...o,
+                    [kv.name]: kv.value
+                }), {});
 
-            $('.remove-user-form').on('submit', onRemoveUserSubmit);
-        }
+                onAddUser(user, group, field, data);
+            }
 
-        function clean() {
-            $('#subscribers .error').hide();
-            $('#add-user-form #addUser').val('');
-            $('.member-del-btn').off('click', onRemoveUser);
-            // $('#add-user-form').off('submit', onAddUserSubmit);
-        }
+            function onRemoveUserSubmit(ev) {
+                ev.preventDefault();
+                ev.stopPropagation();
+                var form = $(ev.target);
+                var button = form.find('button');
+                var user = button.data('user');
+                var data = form.serializeArray().reduce((o, kv) => ({
+                    ...o,
+                    [kv.name]: kv.value
+                }), {});
+                onRemoveUser(user, group, button, data);
+            }
 
-        function onRemoveUser(user, group, button, data) {
-            $('#subscribers .error').hide();
-            $.ajax({
-                method: 'DELETE',
-                url: removeUrl + '?group=' + group + '&userId=' + user,
-                dataType: 'json',
-                data: data,
-                success: function(data) {
-                    load();
-                },
-                error: function() {
-                    $(button).attr('disabled', 'disabled');
-                    var err = $('#subscribers .error');
-                    err.text('<?php echo _txt('pl.grouperlite.message.user-not-removed-error'); ?>').show();
+            function loadModalData(id, name) {
+                $('#model-title-group-name').text(name);
+                modal.removeClass('error');
+                return function() {
+                    modal.addClass('loading');
+                    clean();
+                    $.ajax({
+                        method: 'GET',
+                        url: loadUrl + '?groupname=' + id,
+                        dataType: 'json',
+                        success: function(data) {
+                            createModalContent(data);
+                        },
+                        error: function(xhr) {
+                            if (xhr.status === 403) {
+                                $('#model-title-group-name').text(name + ' (no access)');
+                            }
+                            modal.addClass('error');
+                        },
+                        complete: function() {
+                            modal.removeClass('loading');
+                        }
+                    });
                 }
-            });
-        }
+            }
 
-        function showButtonSpinner() {
-            $('#btn-icon').removeClass('fa-plus').addClass('fa-spinner fa-pulse');
-            $('#addUserbutton').attr('disabled', true);
-        }
+            function createModalContent(data) {
+                $('#sub-body').html(data.reduce(function(table, item) {
+                    var row = [
+                        '<tr>',
+                        '<td>',
+                        item.name,
+                        '</td>',
+                        '<td>',
+                        item.id,
+                        '</td>',
+                        '<td>',
+                        '<?php echo $this->Form->create(false, array(
+                                "url" => array(
+                                    "controller" => "grouper_groups",
+                                    "action" => "removeSubscriber"
+                                ),
+                                "class" => "remove-user-form",
+                                "id" => "remove-user-form"
+                            )); ?>',
+                        <?php if ($addSubscribers) : ?> '<button data-user="' + item.id + '" class="btn btn-grouper btn-block btn-primary btn-sm m-1 text-nowrap member-del-btn">',
+                            '<?php echo _txt('pl.grouperlite.action.remove-user'); ?>',
+                            '</button>',
+                        <?php endif; ?> '<?php echo $this->Form->end(); ?>',
+                        '</td>',
+                        '</tr>'
+                    ].join('');
 
-        function hideButtonSpinner() {
-            $('#btn-icon').removeClass('fa-spinner fa-pulse').addClass('fa-plus');
-            $('#addUserbutton').attr('disabled', false);
-        }
+                    table += row;
+                    return table;
+                }, ''));
 
-        function onAddUser(user, group, field, data) {
-            $('#subscribers .error').hide();
-            showButtonSpinner();
-            $.ajax({
-                method: 'POST',
-                url: addUrl + '?group=' + group + '&userId=' + user,
-                dataType: 'json',
-                data: data,
-                success: function(data) {
-                    load();
-                    hideButtonSpinner();
-                },
-                error: function(ev) {
-                    var msg = ev.status === 404 ?
-                        '<?php echo _txt('pl.grouperlite.message.user-not-found-error'); ?>' :
-                        ev.status === 401 ?
-                        '<?php echo _txt('pl.grouperlite.message.user-authorization-error'); ?>' :
-                        '<?php echo _txt('pl.grouperlite.message.user-not-added-error'); ?>';
+                $('.remove-user-form').on('submit', onRemoveUserSubmit);
+            }
 
-                    var err = $('#subscribers .error');
-                    err.text(msg).show();
+            function clean() {
+                $('#subscribers .error').hide();
+                $('#add-user-form #addUser').val('');
+                $('.member-del-btn').off('click', onRemoveUser);
+                // $('#add-user-form').off('submit', onAddUserSubmit);
+            }
 
-                    hideButtonSpinner();
-                }
-            });
-        }
+            function onRemoveUser(user, group, button, data) {
+                $('#subscribers .error').hide();
+                $.ajax({
+                    method: 'DELETE',
+                    url: removeUrl + '?group=' + group + '&userId=' + user,
+                    dataType: 'json',
+                    data: data,
+                    success: function(data) {
+                        load();
+                    },
+                    error: function() {
+                        $(button).attr('disabled', 'disabled');
+                        var err = $('#subscribers .error');
+                        err.text('<?php echo _txt('pl.grouperlite.message.user-not-removed-error'); ?>').show();
+                    }
+                });
+            }
+
+            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 + '?group=' + group + '&userId=' + user,
+                    dataType: 'json',
+                    data: data,
+                    success: function(data) {
+                        load();
+                        hideButtonSpinner();
+                    },
+                    error: function(ev) {
+                        var msg = ev.status === 404 ?
+                            '<?php echo _txt('pl.grouperlite.message.user-not-found-error'); ?>' :
+                            ev.status === 401 ?
+                            '<?php echo _txt('pl.grouperlite.message.user-authorization-error'); ?>' :
+                            '<?php echo _txt('pl.grouperlite.message.user-not-added-error'); ?>';
+
+                        var err = $('#subscribers .error');
+                        err.text(msg).show();
+
+                        hideButtonSpinner();
+                    }
+                });
+            }
 
-    })(jQuery);
-</script>
\ No newline at end of file
+        })(jQuery);
+    </script>
+</div>
\ No newline at end of file
diff --git a/View/Elements/base-styles.ctp b/View/Elements/base-styles.ctp
index 48ea5e2..4b53cf4 100644
--- a/View/Elements/base-styles.ctp
+++ b/View/Elements/base-styles.ctp
@@ -15,6 +15,15 @@
         --secondary: var(--darkteal)
     }
 
+    #subscriber-picker .ui-autocomplete {
+        max-height: 75vh;
+        overflow-y: auto;
+        /* prevent horizontal scrollbar */
+        overflow-x: hidden;
+        /* add padding to account for vertical scrollbar */
+        padding-right: 20px;
+    }
+
     .text-grouper {
         color: var(--primary);
     }