member management navigation

src/client/app/css/app.css

@@ -526,6 +526,21 @@ body.body-auth .action-button {
     padding-left: 0;
     padding-right: 0;
 }
+[data-id="member-header"] {
+    padding-bottom: 0;
+}
+[data-id="member-header"] .nav-tabs {
+    margin-bottom: -1px;
+}
+[data-id="member-header"] .nav-tabs .nav-link {
+    cursor: pointer;
+}
+.group-members-content {
+    display: none;
+}
+.group-members-content.active {
+    display: block;
+}
 
 ::-webkit-input-placeholder {
     font-style: italic;

src/client/app/js/app/state/GroupMemberManagement.js

@@ -20,7 +20,7 @@ app.state.GroupMemberManagement = function()
             membersNotApproved = [],
             groupId = p.groupId,
             memberId = p.hasOwnProperty( 'memberId' ) ? p.memberId : null,
-            activeTab = 'inactive';
+            activeTab = 'active';
 
         app.gui.PageLoader.show();
 
@@ -97,7 +97,14 @@ app.state.GroupMemberManagement = function()
                     var memberId = $(this).attr( 'data-member-id' );
                     app.core.Controller.redirect( '#/group/' + group.getId() + '/membermanagement/' + memberId );
                 });
-
+                $content.on( 'click', '[data-id="member-header"] .nav-tabs .nav-link', function()
+                {
+                    var content = $(this).data("content");
+                    $('[data-id="member-header"] .nav-tabs .nav-link').removeClass("active");
+                    $(".group-members-content").removeClass("active");
+                    $(this).addClass("active");
+                    $("#" + content).addClass("active");
+                });
 
                 if ( memberId )
                 {

src/client/app/tmpl/group-member-management.html

@@ -19,30 +19,32 @@
                     </div>
                 </div>
             </div>
-            <div class="card-body" data-id="member-container">
+            <div class="card-header" data-id="member-header">
                 <!-- tab bar -->
-                <ul class="nav nav-tabs page-nav <%= ( activeTab == 'active' ) ? 'active' : '' %>">
+                <ul class="nav nav-tabs page-nav">
                     <li class="nav-item">
-                        <a class="nav-link">
+                        <a class="nav-link <%= ( activeTab == 'active' ) ? 'active' : '' %>" data-content="group-members-active-content">
                             <i class="fas fa-users"></i>
                             <%= _lc( 'GROUP_MANAGEMENT_MEMBERS_ACTIVE' ) %> (<%= membersActive.length %>)
                         </a>
                     </li>
-                    <li class="nav-item <%= ( activeTab == 'inactive' ) ? 'active' : '' %>">
-                        <a class="nav-link">
+                    <li class="nav-item">
+                        <a class="nav-link <%= ( activeTab == 'inactive' ) ? 'active' : '' %>" data-content="group-members-inactive-content">
                             <i class="fas fa-users"></i>
                             <%= _lc( 'GROUP_MANAGEMENT_MEMBERS_INACTIVE' ) %> (<%= membersInactive.length %>)
                         </a>
                     </li>
-                    <li class="nav-item <%= ( activeTab == 'not_approved' ) ? 'active' : '' %>">
-                        <a class="nav-link">
+                    <li class="nav-item">
+                        <a class="nav-link <%= ( activeTab == 'not_approved' ) ? 'active' : '' %>" data-content="group-members-not-approved-content">
                             <i class="fas fa-users"></i>
                             <%= _lc( 'GROUP_MANAGEMENT_MEMBERS_NOT_APPROVED' ) %> (<%= membersNotApproved.length %>)
                         </a>
                     </li>
                 </ul>
+            </div>
+            <div class="card-body" data-id="member-container">
                 <!-- active members -->
-                <div class="group-members-active-content <%= ( activeTab == 'active' ) ? 'show' : 'hide' %>">
+                <div id="group-members-active-content" class="group-members-content <%= ( activeTab == 'active' ) ? 'active' : '' %>">
                     <div class="table-responsive">
                         <table class="table table-profiles">
                             <tbody>
@@ -54,7 +56,7 @@
                     </div>
                 </div>
                 <!-- inactive members -->
-                <div class="group-members-inactive-content <%= ( activeTab == 'inactive' ) ? 'show' : 'hide' %>">
+                <div id="group-members-inactive-content" class="group-members-content <%= ( activeTab == 'inactive' ) ? 'active' : '' %>">
                     <div class="table-responsive">
                         <table class="table table-profiles">
                             <tbody>
@@ -66,7 +68,7 @@
                     </div>
                 </div>
 
-                <div class="group-members-not-approved-content <%= ( activeTab == 'not_approved' ) ? 'show' : 'hide' %>">
+                <div id="group-members-not-approved-content" class="group-members-content <%= ( activeTab == 'not_approved' ) ? 'active' : '' %>">
                     <div class="table-responsive">
                         <table class="table table-profiles">
                             <tbody>