From 3c6ecf227df612325e1bec1c8b7b758fd0f1d78d Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Mon, 15 May 2023 09:26:09 -0700
Subject: [PATCH] Implemented vue.js payout

---
 Controller/GrouperGroupsController.php |  24 ++-
 View/Elements/Components/vue-table.ctp |  17 ++
 View/GrouperGroups/groupmember.ctp     |   2 -
 View/GrouperGroups/index.ctp           | 149 ++++++++++++++
 webroot/css/co-grouper-plugin.css      |  43 ++--
 webroot/css/empty                      |   0
 webroot/files/groupmember.json         | 207 +++++++++++++++++++
 webroot/files/groupoptin.json          |  17 ++
 webroot/files/groupowner.json          |  29 +++
 webroot/js/grouper-groups-view.js      | 270 +++++++++++++++----------
 webroot/js/pagecount.js                |  23 +++
 webroot/js/pagination.js               |  60 ++++++
 webroot/js/search-groups.js            |  38 ++++
 webroot/js/search.js                   |  17 --
 14 files changed, 747 insertions(+), 149 deletions(-)
 create mode 100644 View/GrouperGroups/index.ctp
 delete mode 100644 webroot/css/empty
 create mode 100644 webroot/files/groupmember.json
 create mode 100644 webroot/files/groupoptin.json
 create mode 100644 webroot/files/groupowner.json
 create mode 100644 webroot/js/pagecount.js
 create mode 100644 webroot/js/pagination.js
 create mode 100644 webroot/js/search-groups.js
 delete mode 100644 webroot/js/search.js

diff --git a/Controller/GrouperGroupsController.php b/Controller/GrouperGroupsController.php
index b024ef6..301b045 100644
--- a/Controller/GrouperGroupsController.php
+++ b/Controller/GrouperGroupsController.php
@@ -120,9 +120,19 @@ private function setConnection()
    */
   public function index()
   {
-    return $this->redirect(
-      array('controller' => 'grouper_groups', 'action' => 'groupmember')
-    );
+    $this->set('title', _txt('pl.grouperlite.title.groupmember'));
+
+    $config = [
+      "grouperbaseurl"   => $this->Session->read('Plugin.Grouper.Api.grouperUrl'),
+      "isuserowner"      => $this->GrouperGroup->isUserOwner($this->userId),
+      "isTemplateUser"   => $this->GrouperGroup->isTemplateUser($this->userId),
+      "isGrouperVisible" => $this->GrouperGroup->isGrouperVisible($this->userId),
+      "defaultCollapse"  => CakeSession::read('Plugin.Grouper.Api.defaultCollapse'),
+      "adHocHeading"     => CakeSession::read('Plugin.Grouper.Api.adHocHeading'),
+      "wgHeading"        => CakeSession::read('Plugin.Grouper.Api.wgHeading'),
+      'co'               => CakeSession::read('Plugin.Grouper.Api.co')
+    ];
+    $this->set('config', $config);
   }
 
 
@@ -471,12 +481,12 @@ public function groupOwner()
     $this->set('config', $config);
   }
 
-
   /**
    * Returns all Groups that the User is a member of in Grouper
    * This includes self-joined Optin Groups, as well as required Groups User cannot leave
    *
    */
+
   public function groupMember()
   {
     $this->set('title', _txt('pl.grouperlite.title.groupmember'));
@@ -789,18 +799,16 @@ function isAuthorized()
 
     //TODO - This is needed for my dev enviro since I do not log in via I2 IdP
     // BEGIN ===============================================
-    /*
     if ($this->Session->check('Auth.User.username')) {
         $this->userId = $this->Session->read('Auth.User.username');
     }
-    */
     // END ===============================================
 
     //TODO - Need to make the following code configurable in getting the user ID. In this case the code is
     // specific to the needs of I2.
     // BEGIN ===============================================
     
-    
+    /*
     $uid=$this->Session->read('Auth.User.co_person_id');
     $username=$this->Session->read('Auth.User.username');
     error_log("HUBING ================ " . $username);
@@ -841,7 +849,7 @@ function isAuthorized()
       $this->Session->write('Plugin.Grouper.UserId', $this->userId);
     }
     // END ===============================================
-    
+    */
 
     // Determine what operations this user can perform
     // Construct the permission set for this user, which will also be passed to the view.
diff --git a/View/Elements/Components/vue-table.ctp b/View/Elements/Components/vue-table.ctp
index 957ae03..af8e203 100644
--- a/View/Elements/Components/vue-table.ctp
+++ b/View/Elements/Components/vue-table.ctp
@@ -51,6 +51,23 @@
                 add: "<?php echo $this->webroot ?>grouper_lite/grouper_groups/addSubscriber",
                 group: "<?php echo $this->webroot ?>grouper_lite/grouper_groups/groupSubscribers",
             },
+            tabs: [
+                {
+                    order: 1,
+                    label: "<?php echo _txt('pl.grouperlite.nav.memberships') ?>",
+                    id: 'memberships'
+                },
+                {
+                    order: 2,
+                    label: "<?php echo _txt('pl.grouperlite.nav.groups-can-join') ?>",
+                    id: 'join'
+                },
+                {
+                    order: 3,
+                    label: "<?php echo _txt('pl.grouperlite.nav.groups-presided') ?>",
+                    id: 'manage'
+                },
+            ]
         },
         mounted() {
             if (!this.owner) {
diff --git a/View/GrouperGroups/groupmember.ctp b/View/GrouperGroups/groupmember.ctp
index b12cdd4..7bbee89 100644
--- a/View/GrouperGroups/groupmember.ctp
+++ b/View/GrouperGroups/groupmember.ctp
@@ -1,8 +1,6 @@
 <!--nocache-->
 <?php $this->extend('/GrouperGroups/base'); ?>
 <?php $this->Html->addCrumb(_txt('pl.grouperlite.nav.memberships')); ?>
-<?php echo $this->element('GrouperLite.Components/navigation-groups', array('active' => 'groupmember')); ?>
-<?php echo $this->element('GrouperLite.Components/search', array('active' => 'groupmember')); ?>
 
 <?php echo $this->element('GrouperLite.Components/vue-table', array(
     'groupData' => json_encode(array(
diff --git a/View/GrouperGroups/index.ctp b/View/GrouperGroups/index.ctp
new file mode 100644
index 0000000..f521323
--- /dev/null
+++ b/View/GrouperGroups/index.ctp
@@ -0,0 +1,149 @@
+<!--nocache-->
+<?php $this->extend('/GrouperGroups/base'); ?>
+<?php $this->Html->addCrumb(_txt('pl.grouperlite.nav.memberships')); ?>
+<!--/nocache-->
+
+<script type="module">
+    <?php if(Configure::read('debug') > 0): ?>
+    import GrouperGroupsView from '<?php print $this->webroot ?>grouper_lite/js/grouper-groups-view.js?time=<?php print time()?>';
+    <?php else: ?>
+    import GrouperGroupsView from '<?php print $this->webroot ?>grouper_lite/js/grouper-groups-view.js';
+    <?php endif; ?>
+
+    const columns = <?php print_r(json_encode(array(
+        array('value' => 'name', 'label' => _txt('pl.grouperlite.table.name')),
+        array('value' => 'role', 'label' => _txt('pl.grouperlite.table.role')),
+        array('value' => 'description', 'label' => _txt('pl.grouperlite.table.description')),
+        array('value' => 'status', 'label' => _txt('pl.grouperlite.table.status')),
+        array('value' => 'action', 'label' => _txt('pl.grouperlite.table.action')),
+    ))) ?>
+
+
+    const app = Vue.createApp({
+        data() {
+            return {
+                config: {
+                    adhocHeading: "<?php echo $config['adHocHeading'] ? $config['adHocHeading'] : 'Ad-hoc groups' ; ?>",
+                    wgHeading: "<?php echo $config['wgHeading'] ? $config['wgHeading'] : 'Working groups' ; ?>",
+                    collapsed: <?php echo $config['defaultCollapse'] == 'collapsed' ? 'true' : 'false'; ?>,
+                    optAction: "<?php echo isset($optAction) ? $optAction : 'none'; ?>",
+                    members: <?php echo isset($members) && $members ? 'true' : 'false' ?>,
+                    add: <?php echo isset($addSubscribers) && $addSubscribers ? 'true' : 'false' ?>
+                },
+                owner: <?php echo $treatAsOwner ? 'true' : 'false'; ?>,
+                url: "<?php echo isset($actionUrl) ? $actionUrl : 'null'; ?>",
+            }
+        },
+        provide: {
+            txt: {
+                search: "<?php echo _txt('pl.grouperlite.title.search'); ?>",
+                searchForGroups: "<?php echo _txt('pl.grouperlite.action.search'); ?>",
+                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'); ?>",
+                leave: "<?php echo _txt('pl.grouperlite.action.leave') ?>",
+                zero: {
+                    description: "<?php echo _txt('pl.grouperlite.value.descr.zerostate') ?>",
+                },
+                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') ?>",
+                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') ?>",
+            },
+            columns,
+            api: {
+                co: <?php echo $config['co'] ?>,
+                mode: "<?php echo PeoplePickerModeEnum::All ?>",
+                base: "<?php echo $this->webroot ?>grouper_lite/grouper_groups",
+                find: "<?php echo $this->Html->url(
+                    array(
+                        'controller' => 'grouper_groups',
+                        'action' => 'findSubscriber'
+                    )
+                ); ?>",
+                remove: "<?php echo $this->webroot ?>grouper_lite/grouper_groups/removeSubscriber",
+                add: "<?php echo $this->webroot ?>grouper_lite/grouper_groups/addSubscriber",
+                group: "<?php echo $this->webroot ?>grouper_lite/grouper_groups/groupSubscribers",
+            },
+            tabs: [
+                {
+                    order: 1,
+                    label: "<?php echo _txt('pl.grouperlite.nav.memberships') ?>",
+                    id: 'memberships',
+                    api: "<?php echo $this->webroot ?>grouper_lite/files/groupmember.json?time=<?php print time()?>",
+                    columns: ['name', 'role', 'description', 'action'],
+                    members: true,
+                    action: 'leavegroup',
+                    addSubscribers: false
+                },
+                {
+                    order: 2,
+                    label: "<?php echo _txt('pl.grouperlite.nav.groups-can-join') ?>",
+                    id: 'join',
+                    api: "<?php echo $this->webroot ?>grouper_lite/files/groupoptin.json?time=<?php print time()?>",
+                    columns: ['name', 'description', 'action'],
+                    members: false,
+                    action: 'joingroup',
+                    addSubscribers: false
+                },
+                {
+                    order: 3,
+                    label: "<?php echo _txt('pl.grouperlite.nav.groups-presided') ?>",
+                    id: 'manage',
+                    api: "<?php echo $this->webroot ?>grouper_lite/files/groupowner.json?time=<?php print time()?>",
+                    columns: ['name', 'role', 'description', 'status', 'action'],
+                    members: true,
+                    addSubscribers: true
+                },
+            ]
+        },
+        components: {
+            GrouperGroupsView
+        }
+    }).mount('#grouper-lite-widget');
+</script>
+
+<style>
+.ui-autocomplete {
+    max-height: 240px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 20px;
+}
+</style>
+
+<div class="grouper-table">
+    <div id="grouper-lite-widget">
+        <grouper-groups-view
+            :config="config"
+            :owner="owner"
+            :action="config.optAction"
+            :url="url"
+            >
+            <template v-slot:actionform="actionform">
+                <?php echo $this->Form->create(false, array(
+                    'url' => array('controller' => 'grouper_groups', 'action' => isset($optAction) ? $optAction : ''),
+                    'class' => 'd-flex justify-content-center',
+                    'id' => 'group-action'
+                )); ?>
+                <input type="hidden" name="data[GroupName]" :value="actionform.groupname" />
+                <input type="hidden" name="data[GroupDisplayName]" :value="actionform.groupdisplayname" />
+                <button
+                    :class="actionform.actiontype"
+                    class="btn btn-sm btn-block text-nowrap m-1 btn-success" type="submit">
+                    {{ actionform.actionlabel }}
+                    &nbsp;
+                    <em class="material-icons mt-0" aria-hidden="true">{{ actionform.actionicon }}</em>
+                </button>
+                <?php echo $this->Form->end(null); ?>
+            </template>
+        </grouper-groups-view>
+    </div>
+</div>
diff --git a/webroot/css/co-grouper-plugin.css b/webroot/css/co-grouper-plugin.css
index b69165b..5a2586c 100644
--- a/webroot/css/co-grouper-plugin.css
+++ b/webroot/css/co-grouper-plugin.css
@@ -31,23 +31,23 @@ a {
     margin-right: 2px;
 }
 
-#grouper-plugin .nav.nav-tabs .nav-item a.nav-link {
+#grouper-plugin .nav.nav-tabs .nav-item .nav-link {
     padding: 0.75rem 2rem;
     transition: background-color .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1);
     border-radius: 0;
 }
 
-#grouper-plugin .nav.nav-tabs .nav-item a.nav-link:not(.active) {
+#grouper-plugin .nav.nav-tabs .nav-item .nav-link:not(.active) {
     color: white;
     background: var(--primary);
 }
 
-#grouper-plugin .nav.nav-tabs .nav-item a.nav-link:not(.active):hover {
+#grouper-plugin .nav.nav-tabs .nav-item .nav-link:not(.active):hover {
     border-color: black;
     background: black;
 }
 
-#grouper-plugin .nav.nav-tabs .nav-item a.nav-link:not(.active):focus {
+#grouper-plugin .nav.nav-tabs .nav-item .nav-link:not(.active):focus {
     border-color: transparent;
 }
 
@@ -225,6 +225,7 @@ a.list-group-item-action:hover .fa {
     background-color: var(--primary);
     color: white;
     padding: 2px;
+    border-radius: 0;
 }
 
 .grouper .counter {
@@ -232,25 +233,36 @@ a.list-group-item-action:hover .fa {
     font-size: 0.9rem;
 }
 
-.grouper .pagination a {
-    color: white;
+.grouper .pagination .pagination-item:not(:last-child) {
+    border-right: 1px solid rgba(255, 255, 255, 0.5);
 }
 
 .grouper .pagination .pagination-element:not(.pagination-numbers):not(.pagination-limit) {
-    padding: 0.5rem;
     margin-right: 0.5rem;
 }
 
-.grouper .pagination .pagination-element.pagination-limit {
-    padding: 0 1rem;
+.grouper .pagination .pagination-item-list {
+    display: flex;
 }
 
-.grouper .pagination .pagination-element.pagination-numbers {
-    margin-right: 1rem;
+.grouper .pagination .pagination-item .pagination-item-btn {
+    padding: 0.5rem 1rem;
+    color: white;
+    border: none;
+    background: none;
 }
 
-.grouper .pagination .pagination-element.pagination-numbers-link:not(:first-child) {
-    border-left: 1px solid rgba(255, 255, 255, 0.5);
+.grouper .pagination .pagination-item .pagination-item-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.grouper .pagination .pagination-item.pagination-item-list .pagination-item-btn.current {
+    background: white;
+    color: var(--primary);
+}
+
+.grouper .pagination .pagination-element.pagination-numbers {
+    margin-right: 1rem;
 }
 
 .grouper .pagination .pagination-element.pagination-numbers .pagination-numbers-list>span {
@@ -263,11 +275,6 @@ a.list-group-item-action:hover .fa {
     padding: 0.5rem 1rem;
 }
 
-.grouper .pagination .pagination-element.pagination-numbers .pagination-numbers-list .current.pagination-numbers-item {
-    background: white;
-    color: var(--primary);
-}
-
 .grouper .pagination .pagination-element.pagination-form * {
     margin: 0 0.5rem 0 0;
 }
diff --git a/webroot/css/empty b/webroot/css/empty
deleted file mode 100644
index e69de29..0000000
diff --git a/webroot/files/groupmember.json b/webroot/files/groupmember.json
new file mode 100644
index 0000000..2d50459
--- /dev/null
+++ b/webroot/files/groupmember.json
@@ -0,0 +1,207 @@
+{
+    "adhoc": [
+        {
+            "extension": "admins",
+            "displayName": "app:Confluence:UniconTestAxel123:admins",
+            "description": "Admins of confluence space for working group.  UniconTestAxel123",
+            "uuid": "1a0cc0cde33b4556b0565aa1f9c11f7a",
+            "enabled": "T",
+            "displayExtension": "admins",
+            "name": "app:Confluence:UniconTestAxel123:admins",
+            "typeOfGroup": "group",
+            "idIndex": "19473",
+            "optOut": false,
+            "friendlyName": "admins"
+        },
+        {
+            "extension": "subscribers",
+            "displayName": "app:sympa:incommon:AdminTestWG:AdminTest WG subscribers",
+            "description": "Subscribers list receives working group emails.  Test Create of a WG by an Admin",
+            "uuid": "2e421ab17fc94537a6efcdc38580a093",
+            "enabled": "T",
+            "displayExtension": "AdminTest WG subscribers",
+            "name": "app:sympa:incommon:AdminTestWG:subscribers",
+            "typeOfGroup": "group",
+            "idIndex": "19403",
+            "optOut": false,
+            "friendlyName": "AdminTest WG subscribers"
+        },
+        {
+            "extension": "subscribers",
+            "displayName": "app:sympa:incommon:Bills Group:subscribers",
+            "description": "Subscribers list receives working group emails.  Bills Working Group for testing and splunking",
+            "uuid": "a564f37496524696b486cffbddabd09d",
+            "enabled": "T",
+            "displayExtension": "subscribers",
+            "name": "app:sympa:incommon:BillsGroup:subscribers",
+            "typeOfGroup": "group",
+            "idIndex": "19123",
+            "optOut": false,
+            "friendlyName": "subscribers"
+        },
+        {
+            "extension": "subscribers",
+            "displayName": "app:sympa:incommon:incommon-comanage:subscribers",
+            "uuid": "108785997dd7427ca06d5cdb0991cbad",
+            "enabled": "T",
+            "displayExtension": "subscribers",
+            "name": "app:sympa:incommon:incommon-comanage:subscribers",
+            "typeOfGroup": "group",
+            "idIndex": "19995",
+            "optOut": false,
+            "friendlyName": "subscribers"
+        },
+        {
+            "extension": "subscriber",
+            "displayName": "app:sympa:internet2:d_iam_c:Drew's IAM Committee Subscriber",
+            "description": "Mailing List: Drew's IAM Committee",
+            "uuid": "3f4c50ee4ce542a6911dfd7cc4191799",
+            "enabled": "T",
+            "displayExtension": "Drew's IAM Committee Subscriber",
+            "name": "app:sympa:internet2:d_iam_c:subscriber",
+            "typeOfGroup": "group",
+            "idIndex": "21843",
+            "optOut": false,
+            "friendlyName": "Drew's IAM Committee Subscriber"
+        },
+        {
+            "extension": "users",
+            "displayName": "ref:InCommon-collab:AdminTestWG:AdminTestWG users",
+            "description": "This is the AdminTestWG user group",
+            "uuid": "f092236c89254dc6b7f180706a5c5ad3",
+            "enabled": "T",
+            "displayExtension": "AdminTestWG users",
+            "name": "ref:incommon-collab:AdminTestWG:users",
+            "typeOfGroup": "group",
+            "idIndex": "19400",
+            "optOut": true,
+            "friendlyName": "AdminTestWG users"
+        },
+        {
+            "extension": "users",
+            "displayName": "ref:InCommon-collab:BillsGroup:BillsGroupUsers",
+            "description": "Bills Group of Users",
+            "uuid": "215aead1b2a14464a65ce3723f326414",
+            "enabled": "T",
+            "displayExtension": "BillsGroupUsers",
+            "name": "ref:incommon-collab:BillsGroup:users",
+            "typeOfGroup": "group",
+            "idIndex": "20042",
+            "optOut": true,
+            "friendlyName": "BillsGroupUsers"
+        },
+        {
+            "extension": "COmanage-UsersGroup-Members",
+            "displayName": "ref:InCommon-collab:COmanage:COmanage-UsersGroup-Members",
+            "description": "COmanage Users Group Members",
+            "uuid": "3ce99f5fc09c42968fae4afe5e63831d",
+            "enabled": "T",
+            "displayExtension": "COmanage-UsersGroup-Members",
+            "name": "ref:incommon-collab:COmanage:COmanage-UsersGroup-Members",
+            "typeOfGroup": "group",
+            "idIndex": "19996",
+            "optOut": true,
+            "friendlyName": "COmanage-UsersGroup-Members"
+        },
+        {
+            "extension": "member",
+            "displayName": "ref:InCommon-collab:Drew's IAM Committee:Drew's IAM Committee Member",
+            "description": "Drew's IAM Committee member.",
+            "uuid": "1eafe705651c41fc8e6c50dc753c0891",
+            "enabled": "T",
+            "displayExtension": "Drew's IAM Committee Member",
+            "name": "ref:incommon-collab:d_iam_c:member",
+            "typeOfGroup": "group",
+            "idIndex": "20536",
+            "optOut": true,
+            "friendlyName": "Drew's IAM Committee Member"
+        },
+        {
+            "extension": "users",
+            "displayName": "ref:InCommon-collab:UniconTestAxel333:UniconTestAxel333 users",
+            "description": "Users role means members of the working group with access to collaboration tools.  UniconTestAxel333",
+            "uuid": "5b84ccacb8a940409f5e126ecabbb9e2",
+            "enabled": "T",
+            "displayExtension": "UniconTestAxel333 users",
+            "name": "ref:incommon-collab:UniconTestAxel333:users",
+            "typeOfGroup": "group",
+            "idIndex": "19481",
+            "optOut": true,
+            "friendlyName": "UniconTestAxel333 users"
+        },
+        {
+            "extension": "subscriber",
+            "displayName": "sandbox:sympa:service:mailing_list:internet2:IAM Fans:IAM Fans Subscriber",
+            "description": "Mailing list for people who are Identity and Access Mangement fanatics",
+            "alternateName": "sandbox:sympa:service:mailing_list:internet2:iam_fans:iam_fans_subscriber",
+            "uuid": "0b23539aa1954f3e8cdd619d3f9e02b6",
+            "enabled": "T",
+            "displayExtension": "IAM Fans Subscriber",
+            "name": "sandbox:sympa:service:mailing_list:internet2:iam_fans:subscriber",
+            "typeOfGroup": "group",
+            "idIndex": "19208",
+            "optOut": true,
+            "friendlyName": "IAM Fans Subscriber"
+        },
+        {
+            "extension": "user",
+            "displayName": "test:OptInOptOut:OptInOptOut User",
+            "description": "This group can be used in general to be provided privs for opting in and out just for folks in the group vs every entity",
+            "alternateName": "test:optinOptout",
+            "uuid": "13bed1e3e58148ec87400c43c9c3c824",
+            "enabled": "T",
+            "displayExtension": "OptInOptOut User",
+            "name": "test:optinoptout:user",
+            "typeOfGroup": "group",
+            "idIndex": "19109",
+            "optOut": true,
+            "friendlyName": "OptInOptOut User"
+        }
+    ],
+    "working": [
+        {
+            "WGName": "AdminTestWG",
+            "WGShowName": "AdminTestWG",
+            "Groups": [
+                {
+                    "extension": "users",
+                    "displayName": "app:Confluence:AdminTestWG:users",
+                    "description": "Users of confluence space for working group.  Test Create of a WG by an Admin",
+                    "uuid": "caf29f77fdb948eb90a43756f8b3434a",
+                    "enabled": "T",
+                    "displayExtension": "users",
+                    "name": "app:Confluence:AdminTestWG:users",
+                    "typeOfGroup": "group",
+                    "idIndex": "19405",
+                    "optOut": false,
+                    "WGName": "AdminTestWG",
+                    "WGShowName": "AdminTestWG",
+                    "WGRole": "users",
+                    "WGApp": "Confluence"
+                }
+            ]
+        },
+        {
+            "WGName": "BillsGroup",
+            "WGShowName": "Bills Group",
+            "Groups": [
+                {
+                    "extension": "users",
+                    "displayName": "app:Confluence:Bills Group:users",
+                    "description": "Users of confluence space for working group.  Bills Working Group for testing and splunking",
+                    "uuid": "d991a05d5e85494db17e09cc46af7274",
+                    "enabled": "T",
+                    "displayExtension": "users",
+                    "name": "app:Confluence:BillsGroup:users",
+                    "typeOfGroup": "group",
+                    "idIndex": "19125",
+                    "optOut": false,
+                    "WGName": "BillsGroup",
+                    "WGShowName": "Bills Group",
+                    "WGRole": "users",
+                    "WGApp": "Confluence"
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/webroot/files/groupoptin.json b/webroot/files/groupoptin.json
new file mode 100644
index 0000000..de7d1a9
--- /dev/null
+++ b/webroot/files/groupoptin.json
@@ -0,0 +1,17 @@
+{
+    "adhoc": [
+        {
+            "extension": "users",
+            "displayName": "ref:InCommon-collab:UniconTestAxel123:UniconTestAxel123 users",
+            "description": "Users role means members of the working group with access to collaboration tools.  UniconTestAxel123",
+            "uuid": "ac1641e827894283a8b7259a6549ce5c",
+            "enabled": "T",
+            "displayExtension": "UniconTestAxel123 users",
+            "name": "ref:incommon-collab:UniconTestAxel123:users",
+            "typeOfGroup": "group",
+            "idIndex": "19469",
+            "friendlyName": "UniconTestAxel123 users"
+        }
+    ],
+    "working": []
+}
\ No newline at end of file
diff --git a/webroot/files/groupowner.json b/webroot/files/groupowner.json
new file mode 100644
index 0000000..7292441
--- /dev/null
+++ b/webroot/files/groupowner.json
@@ -0,0 +1,29 @@
+{
+    "adhoc": [
+        {
+            "extension": "admins",
+            "displayName": "app:Confluence:UniconTestAxel123:admins",
+            "description": "Admins of confluence space for working group.  UniconTestAxel123",
+            "uuid": "1a0cc0cde33b4556b0565aa1f9c11f7a",
+            "enabled": "T",
+            "displayExtension": "admins",
+            "name": "app:Confluence:UniconTestAxel123:admins",
+            "typeOfGroup": "group",
+            "idIndex": "19473",
+            "friendlyName": "admins"
+        },
+        {
+            "extension": "users",
+            "displayName": "app:Confluence:UniconTestAxel123:users",
+            "description": "Users of confluence space for working group.  UniconTestAxel123",
+            "uuid": "43b9782ef93f47afa4d75d9911248720",
+            "enabled": "T",
+            "displayExtension": "users",
+            "name": "app:Confluence:UniconTestAxel123:users",
+            "typeOfGroup": "group",
+            "idIndex": "19474",
+            "friendlyName": "users"
+        }
+    ],
+    "working": []
+}
\ No newline at end of file
diff --git a/webroot/js/grouper-groups-view.js b/webroot/js/grouper-groups-view.js
index 15baf5b..d426943 100644
--- a/webroot/js/grouper-groups-view.js
+++ b/webroot/js/grouper-groups-view.js
@@ -1,28 +1,51 @@
 import Collapse from './collapse.js';
 import Popover from './popover.js';
 import Members from './members.js';
+import Search from './search-groups.js';
+import PageCount from './pagecount.js';
+import Pagination from './pagination.js';
 
 export default {
+    directives: {
+        Popover
+    },
     props: {
-      groups: Object,
-      columns: Object,
       config: Object,
       action: {
         type: String,
-        default: 'leave'
+        default: 'leavegroup'
       },
       url: String,
       owner: Boolean,
       grouper: String,
     },
-    inject: ['txt'],
+    inject: ['txt', 'tabs', 'columns'],
+    data() {
+        return {
+            active: 'memberships',
+            keyword: '',
+            loading: false,
+            error: null,
+            groups: {
+                adhoc: [],
+                working: []
+            }
+        }
+    },
     components: {
         Collapse,
-        Members
+        Members,
+        Search,
+        PageCount,
+        Pagination
     },
     computed: {
+        cols() {
+            const ids = (!this.owner) ? this.tab.columns.filter(c => c.value !== 'role') : this.tab.columns;
+            return this.columns.filter(c => ids.indexOf(c.value) > -1);
+        },
         numColumns() {
-            return this.columns.length;
+            return this.cols.length;
         },
         collapsed() {
             return this.config.collapsed;
@@ -32,131 +55,170 @@ export default {
         },
         status() {
             return this.columns.some(c => c.value === 'status');
+        },
+        tab() {
+            return this.tabs.find(t => t.id === this.active);
         }
     },
-    directives: {
-      Popover
+    watch: {
+        active(newActive) {
+            const { api } = this.tabs.find(t => t.id === newActive);
+            this.loadGroups(api);
+        }
     },
     methods: {
+        search(query) {
+            this.keyword = query;
+        },
         showSubscribers(group) {
             this.$refs.members.show(group);
         },
         showOptAction(group) {
-            if (this.config.optAction === 'leavegroup'){
+            if (this.tab.action === 'leavegroup'){
                 return group.optOut;
             } else {
-                return this.config.hasOwnProperty('optAction') && this.config.optAction !== 'none';
+                return this.tab.action && this.tab.action !== 'none';
             }
+        },
+        async loadGroups(api, keyword) {
+            this.loading = true;
+            this.error = null;
+            const resp = await fetch(`${api}?keyword=${keyword}`, {
+                headers: {
+                    "Accept": "application/json",
+                    // 'Content-Type': 'application/x-www-form-urlencoded',
+                },
+                method: "GET"
+            });
+            if (resp.ok) {
+                this.groups = await resp.json();
+            } else {
+                this.error = resp;
+            }
+            this.loading = false;
         }
     },
+    mounted() {
+        this.loadGroups(this.tab.api);
+    },
     template: /*html*/`
-      <members ref="members" :add="config.add"></members>
-      <table class="table w-100 mb-0">
+        <nav id="grouper-plugin-tabs" class="nav nav-tabs mb-4 justify-content-start">
+            <div class="d-flex nav-tab-group">
+                <div class="nav-item" v-for="tab in this.tabs">
+                    <button @click="active = tab.id" type="button" class="nav-link" :class="{'active': tab.id === active}">{{ tab.label }}</button>
+                </div>
+            </div>
+        </nav>
+        <search @search="search"></search>
+        <members ref="members" :add="config.add"></members>
+        <page-count :first="1" :last="20" :total="200"></page-count>
+        <table class="table w-100 mb-0">
             <thead>
                 <tr>
-                    <th v-for="column in this.columns" class="group" :class="[column.value, { 'text-center': column.value === 'action' }]">{{ column.label }}</th>
+                    <th v-for="column in this.cols" class="group" :class="[column.value, { 'text-center': column.value === 'action' }]">{{ column.label }}</th>
                 </tr>
             </thead>
             <tbody>
-            <collapse :default="config.collapsed" v-slot="{toggle, show}">
-                <tr class="table-secondary">
-                    <td :colspan="numColumns">
-                        <button type="button"
-                            class="btn btn-link btn-text collapse-btn fw-bold m-0"
-                            @click="toggle"
-                            role="button"
-                            :aria-expanded="[!show ? 'false' : 'true']">
-                            {{ config.adhocHeading }}
-                            <em class="material-icons mt-0" aria-hidden="true">{{ !show ? 'arrow_right' : 'arrow_drop_down' }}</em>
-                        </button>
-                    </td>
-                </tr>
-                <template v-if="show">
-                    <tr v-for="group in this.groups.adhoc" class="collapse-adhoc-group-parent">
-                        <td class="pl-3">
-                            <span v-popover="group.name" class="grpr-popover-toggle">
-                                {{ group.friendlyName || 'No Name' }}
-                            </span>
-                        </td>
-                        <td v-if="owner">&mdash;</td>
-                        <td>{{ group.description || txt.descrZeroState }}</td>
-                        <td v-if="status">{{ group.enabled && group.enabled === 'T' ? 'Enabled' : 'Disabled' }}</td>
-                        <td>
-                            <span class="d-flex flex-row justify-content-center align-items-center">
-                                <template v-if="showOptAction(group)">
-                                    <slot name="actionform"
-                                        :groupname="group.name"
-                                        :groupdisplayname="group.friendlyName"
-                                        :txt="txt"
-                                        :actionlabel="config.optAction === 'leavegroup' ? txt.leave : txt.join"
-                                        :actionicon="config.optAction === 'leavegroup' ? 'person_off' : 'person'"
-                                        :actiontype="config.optAction === 'leavegroup' ? 'btn-danger' : 'btn-success'"></slot>
-                                </template>
-                                <button 
-                                    v-if="config.members"
-                                    class="btn btn-grouper btn-block btn-primary btn-sm m-1 text-nowrap members-btn"
-                                    @click="showSubscribers(group)"
-                                    :data-id="encodeURIComponent(group.name)"
-                                    :data-name="group.friendlyName">{{ txt.members }}<em class="material-icons mt-0" aria-hidden="true">group</em>
-                                </button>
-                                <a v-if="grouper && owner" :href="grouper + group.uuid" class="btn btn-grouper btn-block btn-sm btn-success mt-0 text-nowrap" target="_blank" role="button">
-                                    {{ txt.grouper }} &nbsp;
-                                    <em class="material-icons mt-0" aria-hidden="true">link</em>
-                                </a>
-                            </span>
+                <collapse :default="config.collapsed" v-slot="{toggle, show}">
+                    <tr class="table-secondary">
+                        <td :colspan="numColumns">
+                            <button type="button"
+                                class="btn btn-link btn-text collapse-btn fw-bold m-0"
+                                @click="toggle"
+                                role="button"
+                                :aria-expanded="[!show ? 'false' : 'true']">
+                                {{ config.adhocHeading }}
+                                <em class="material-icons mt-0" aria-hidden="true">{{ !show ? 'arrow_right' : 'arrow_drop_down' }}</em>
+                            </button>
                         </td>
                     </tr>
-                </template>
-            </collapse>
-            </tbody>
-            <tbody v-if="groups?.working?.length">
-            <collapse :default="config.collapsed" v-slot="{toggle, show}">
-                <tr class="table-secondary">
-                    <td :colspan="numColumns">
-                        <button type="button" 
-                            @click="toggle"
-                            class="btn btn-link btn-text collapse-btn fw-bold m-0 work-group-heading-btn"
-                            role="button"
-                            :aria-expanded="!show ? 'false' : 'true'">
-                            {{ config.wgHeading || 'Working groups' }}
-                            <em class="material-icons mt-0" aria-hidden="true">{{ !show ? 'arrow_right' : 'arrow_drop_down'}}</em>
-                        </button>
-                    </td>
-                </tr>
-                <tr v-if="!groups?.working?.length" :class="collapsed ? 'collapse' : 'show'" class="table-light collapse-wg-working-group-parent">
-                    <td :colspan="numColumns" class="text-center">None</td>
-                </tr>
-                <template v-for="wggroup in groups?.working" v-if="show">
-                    <collapse :default="config.collapsed" v-slot="{toggle, show}">
-                        <tr class="table-light collapse-wg-working-group-parent">
-                            <td :colspan="numColumns - 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'">  
-                                    <span class="grpr-popover-toggle">
-                                        {{ wggroup.WGShowName || "No Name" }}
-                                        <em class="material-icons mt-0" aria-hidden="true">{{ show ? 'arrow_drop_down' : 'arrow_right' }}</em>
-                                    </span>
-                                </button>
+                    <template v-if="show">
+                        <tr v-for="group in this.groups.adhoc" class="collapse-adhoc-group-parent">
+                            <td class="pl-3" v-if="tab.columns.indexOf('name') > -1">
+                                <span v-popover="group.name" class="grpr-popover-toggle">
+                                    {{ group.friendlyName || 'No Name' }}
+                                </span>
                             </td>
-                            <td colspan="2">
-                                {{ wggroup.workingDesc || '' }}
+                            <td v-if="tab.columns.indexOf('role') > -1">&mdash;</td>
+                            <td v-if="tab.columns.indexOf('description') > -1">{{ group.description || txt.descrZeroState }}</td>
+                            <td v-if="tab.columns.indexOf('status') > -1">{{ group.enabled && group.enabled === 'T' ? 'Enabled' : 'Disabled' }}</td>
+                            <td>
+                                <span class="d-flex flex-row justify-content-center align-items-center">
+                                    <template v-if="showOptAction(group)">
+                                        <slot name="actionform"
+                                            :groupname="group.name"
+                                            :groupdisplayname="group.friendlyName"
+                                            :txt="txt"
+                                            :actionlabel="tab.action === 'leavegroup' ? txt.leave : txt.join"
+                                            :actionicon="tab.action === 'leavegroup' ? 'person_off' : 'person'"
+                                            :actiontype="tab.action === 'leavegroup' ? 'btn-danger' : 'btn-success'"></slot>
+                                    </template>
+                                    <button 
+                                        v-if="config.members"
+                                        class="btn btn-grouper btn-block btn-primary btn-sm m-1 text-nowrap members-btn"
+                                        @click="showSubscribers(group)"
+                                        :data-id="encodeURIComponent(group.name)"
+                                        :data-name="group.friendlyName">{{ txt.members }}<em class="material-icons mt-0" aria-hidden="true">group</em>
+                                    </button>
+                                    <a v-if="grouper && owner" :href="grouper + group.uuid" class="btn btn-grouper btn-block btn-sm btn-success mt-0 text-nowrap" target="_blank" role="button">
+                                        {{ txt.grouper }} &nbsp;
+                                        <em class="material-icons mt-0" aria-hidden="true">link</em>
+                                    </a>
+                                </span>
                             </td>
                         </tr>
-                        <template v-for="(group, key) in wggroup.Groups" v-if="show">
-                            <tr :class="['collapse-wg-' + wggroup.WGName]" class="collapse-wg-working-group" :id="'collapse-wg-' + wggroup.WGName + '-' + key">
-                                <td class="pl-3">
-                                    <span class="grpr-popover-toggle" v-popover="group.name">
-                                        {{ group.WGApp || "No Name" }}
-                                    </span>
+                    </template>
+                </collapse>
+            </tbody>
+            <tbody v-if="groups?.working?.length">
+                <collapse :default="config.collapsed" v-slot="{toggle, show}">
+                    <tr class="table-secondary">
+                        <td :colspan="numColumns">
+                            <button type="button" 
+                                @click="toggle"
+                                class="btn btn-link btn-text collapse-btn fw-bold m-0 work-group-heading-btn"
+                                role="button"
+                                :aria-expanded="!show ? 'false' : 'true'">
+                                {{ config.wgHeading || 'Working groups' }}
+                                <em class="material-icons mt-0" aria-hidden="true">{{ !show ? 'arrow_right' : 'arrow_drop_down'}}</em>
+                            </button>
+                        </td>
+                    </tr>
+                    <tr v-if="!groups?.working?.length" :class="collapsed ? 'collapse' : 'show'" class="table-light collapse-wg-working-group-parent">
+                        <td :colspan="numColumns" class="text-center">None</td>
+                    </tr>
+                    <template v-for="wggroup in groups?.working" v-if="show">
+                        <collapse :default="config.collapsed" v-slot="{toggle, show}">
+                            <tr class="table-light collapse-wg-working-group-parent">
+                                <td :colspan="numColumns - 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'">  
+                                        <span class="grpr-popover-toggle">
+                                            {{ wggroup.WGShowName || "No Name" }}
+                                            <em class="material-icons mt-0" aria-hidden="true">{{ show ? 'arrow_drop_down' : 'arrow_right' }}</em>
+                                        </span>
+                                    </button>
+                                </td>
+                                <td colspan="2">
+                                    {{ wggroup.workingDesc || '' }}
                                 </td>
-                                <td v-if="owner">{{ group.WGRole || txt.descrZeroState }}</td>
-                                <td v-if="group.WGApp.match('@lists')">{{ txt.email }}</td>
-                                <td v-else>{{ group.description || txt.descrZeroState }}</td>
                             </tr>
-                        </template>
-                    </collapse>
-                </template>
+                            <template v-for="(group, key) in wggroup.Groups" v-if="show">
+                                <tr :class="['collapse-wg-' + wggroup.WGName]" class="collapse-wg-working-group" :id="'collapse-wg-' + wggroup.WGName + '-' + key">
+                                    <td class="pl-3">
+                                        <span class="grpr-popover-toggle" v-popover="group.name">
+                                            {{ group.WGApp || "No Name" }}
+                                        </span>
+                                    </td>
+                                    <td v-if="owner">{{ group.WGRole || txt.descrZeroState }}</td>
+                                    <td v-if="group.WGApp.match('@lists')">{{ txt.email }}</td>
+                                    <td v-else>{{ group.description || txt.descrZeroState }}</td>
+                                </tr>
+                            </template>
+                        </collapse>
+                    </template>
                 </collapse>
             </tbody>
-      </table>
+        </table>
+        <pagination></pagination>
     `
   }
\ No newline at end of file
diff --git a/webroot/js/pagecount.js b/webroot/js/pagecount.js
new file mode 100644
index 0000000..f021ded
--- /dev/null
+++ b/webroot/js/pagecount.js
@@ -0,0 +1,23 @@
+export default {
+    props: {
+        first: {
+            type: Number,
+            default: 0
+        },
+        last: {
+            type: Number,
+            default: 10
+        },
+        total: {
+            type: Number,
+            default: 100
+        }
+    },
+    template: /*html*/`
+        <div class="counter d-flex justify-content-start align-items-center rounded-0">
+            <div class="pagination-element pagination-counter muted">
+                Viewing {{first}}-{{last}} of {{total}}
+            </div>
+        </div>
+    `
+}
diff --git a/webroot/js/pagination.js b/webroot/js/pagination.js
new file mode 100644
index 0000000..7f80259
--- /dev/null
+++ b/webroot/js/pagination.js
@@ -0,0 +1,60 @@
+export default {
+    props: {
+        current: {
+            type: Number,
+            default: 1
+        }
+    },
+    inject: ['txt'],
+    data() {
+      return {
+        query: ''
+      }
+    },
+    methods: {
+        change() {
+
+        }
+    },
+    computed: {
+        numbers() {
+            return 5;
+        }
+    },
+    mounted() { },
+    template: /*html*/`
+        <div class="pagination">
+            <div class="pagination-element d-flex align-items-center">
+                <div class="pagination-first pagination-item">
+                    <button class="pagination-item-btn">
+                        {{ txt.first }}
+                    </button>
+                </div>
+                <div class="pagination-prev pagination-item">
+                    <button class="pagination-item-btn">
+                        {{ txt.previous }}
+                    </button>
+                </div>
+                <div class="pagination-numbers-list pagination-item pagination-item-list">
+                    <div class="pagination-item" v-for="index in numbers" :key="index">
+                        <button :class="{'current': index === current}" class="pagination-item-btn">
+                            {{ index }}
+                        </button>
+                    </div>
+                </div>
+                <div class="pagination-next pagination-item">
+                    <button class="pagination-item-btn">
+                        {{ txt.next }}
+                    </button>
+                </div>
+                <div class="pagination-last pagination-item">
+                    <button class="pagination-item-btn">
+                        {{ txt.last }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    `
+}
+
+
diff --git a/webroot/js/search-groups.js b/webroot/js/search-groups.js
new file mode 100644
index 0000000..3485bef
--- /dev/null
+++ b/webroot/js/search-groups.js
@@ -0,0 +1,38 @@
+export default {
+    props: {
+      
+    },
+    inject: ['txt'],
+    data() {
+      return {
+        query: ''
+      }
+    },
+    methods: {
+        search(event, q) {
+            event.preventDefault();
+            this.$emit('search', q);
+        }
+    },
+    mounted() { },
+    template: /*html*/`
+        <form class="search mb-4" id="groupmemberForm" method="post" accept-charset="utf-8">
+            <div id="search-grouper-form">
+                <div class="d-flex">
+                    <label class="sr-only" for="search">{{ txt.search }}</label>
+                    <div class="input-group input-group-search">
+                        <div class="input text">
+                            <input name="search" class="form-control" :value="query" @input="event => query = event.target.value" type="text" id="search">
+                        </div>
+                        <div class="input-group-append">
+                            <button class="btn btn-grouper btn-primary px-4" type="submit" value="Submit" @click="event => search(event, query)">
+                                <em class="material-icons" aria-hidden="true">search</em>
+                                <span class="ml-2 text-sml">{{ txt.searchForGroups }}</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+    `
+}
\ No newline at end of file
diff --git a/webroot/js/search.js b/webroot/js/search.js
deleted file mode 100644
index c74ddc2..0000000
--- a/webroot/js/search.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export default {
-    props: {
-      
-    },
-    data() {
-      return {}
-    },
-    methods: {
-      
-    },
-    mounted() {
-      
-    },
-    template: /*html*/`
-      
-    `
-}
\ No newline at end of file