feat: Groups Team page: add sub page for permissions

app/router.js

@@ -181,7 +181,9 @@ Router.map(function() {
   });
   this.route('groups', function() {
     this.route('create');
-    this.route('team', { path: '/:group_id/team' });
+    this.route('team', { path: '/:group_id/team' }, function() {
+      this.route('permissions');
+    });
     this.route('edit', { path: '/edit' }, function() {
       this.route('events', { path: '/:group_id/events' });
       this.route('settings', { path: '/:group_id/settings' });

app/routes/groups/team/permissions.ts

@@ -0,0 +1,93 @@
+import Route from '@ember/routing/route';
+
+export default class GroupsTeamPermissions extends Route.extend({
+  // anything which *must* be merged to prototype here
+}) {
+  // normal class body definition here
+  titleToken(): string {
+    return this.l10n.t('Permissions');
+  }
+
+  model() { // eslint-disable-line @typescript-eslint/explicit-module-boundary-types
+    return {
+      permissions: [
+        {
+          title  : this.l10n.t('Events Page'),
+          header : true
+        },
+        {
+          title     : this.l10n.t('Add event to group events page'),
+          owner     : true,
+          organizer : true
+        },
+        {
+          title     : this.l10n.t('Remove event from group events page'),
+          owner     : true,
+          organizer : true
+        },
+        {
+          title  : this.l10n.t('Followers'),
+          header : true
+        },
+        {
+          title     : this.l10n.t('View Followers List'),
+          owner     : true,
+          organizer : true
+        },
+        {
+          title     : this.l10n.t('Export list as CSV'),
+          owner     : true,
+          organizer : true
+        },
+        {
+          title  : this.l10n.t('Team'),
+          header : true
+        },
+        {
+          title     : this.l10n.t('View team members'),
+          owner     : true,
+          organizer : true
+        },
+        {
+          title     : this.l10n.t('Invite team members'),
+          owner     : true,
+          organizer : true
+        },
+        {
+          title     : this.l10n.t('Cancel invitations'),
+          owner     : true,
+          organizer : true
+        },
+        {
+          title     : this.l10n.t('Delete team members'),
+          owner     : true,
+          organizer : false
+        },
+        {
+          title     : this.l10n.t('Manage roles'),
+          owner     : true,
+          organizer : false
+        },
+        {
+          title  : this.l10n.t('Settings'),
+          header : true
+        },
+        {
+          title     : this.l10n.t('View/Change Group Settings'),
+          owner     : true,
+          organizer : true
+        },
+        {
+          title     : this.l10n.t('Delete Group'),
+          owner     : true,
+          organizer : false
+        },
+        {
+          title     : this.l10n.t('Restore Group'),
+          owner     : true,
+          organizer : false
+        }
+      ]
+    };
+  }
+}

app/templates/groups/team.hbs

@@ -1,33 +1,52 @@
 <GroupNav @team={{true}} @group={{this.model.group}} />
-<div class="ui sixteen wide column container">
-<div class="content d-flex" style="align-items: center;">
-  <h2 class="header">{{t 'Team Members'}}</h2>
-  <button class="ui blue button ml-auto" {{action 'openAddUserRoleModal'}}>{{t 'Add People'}}</button>
-</div>
+<div class="ui grid" style="width: -webkit-fill-available;">
+  <div class="row">
+    <div class="{{if this.device.isMobile 'sixteen' 'three'}} wide column">
+      <TabbedNavigation @isVertical={{true}}>
+        <LinkTo @route="groups.team.index" class="item">
+          {{t 'Team Members'}}
+        </LinkTo>
+        <LinkTo @route="groups.team.permissions" class="item">
+          {{t 'Permissions'}}
+        </LinkTo>
+      </TabbedNavigation>
+    </div>
+    <div class="{{if this.device.isMobile 'sixteen' 'thirteen'}} wide column">
+      {{#if (eq this.router.currentRoute.name "groups.team.index")}}
+        <div class="content d-flex" style="align-items: center;">
+          <h2 class="header">{{t 'Team Members'}}</h2>
+          <button class="ui blue button ml-auto" {{action 'openAddUserRoleModal'}}>{{t 'Add People'}}</button>
+        </div>
 
-<table class="ui left aligned stackable table">
-  <thead>
-    <tr>
-      <th>{{t 'User (Email)'}}</th>
-      <th>{{t 'Role'}}</th>
-      <th>{{t 'Status'}}</th>
-    </tr>
-  </thead>
-  <tbody>
-    {{#each this.model.group.roles as |roleDetail|}}
-      <tr>
-        <td>{{roleDetail.email}}</td>
-        <td>{{roleDetail.role.titleName}}</td>
-        {{#if roleDetail.accepted}}
-          <td>{{t 'Accepted'}}</td>
-        {{else}}
-          <td>{{t 'Pending'}}</td>
-        {{/if}}
-      </tr>
-    {{/each}}
-  </tbody>
-</table>
+        <table class="ui left aligned stackable table">
+          <thead>
+            <tr>
+              <th>{{t 'User (Email)'}}</th>
+              <th>{{t 'Role'}}</th>
+              <th>{{t 'Status'}}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {{#each this.model.group.roles as |roleDetail|}}
+              <tr>
+                <td>{{roleDetail.email}}</td>
+                <td>{{roleDetail.role.titleName}}</td>
+                {{#if roleDetail.accepted}}
+                  <td>{{t 'Accepted'}}</td>
+                {{else}}
+                  <td>{{t 'Pending'}}</td>
+                {{/if}}
+              </tr>
+            {{/each}}
+          </tbody>
+        </table>
+      {{else}}
+        {{outlet}}
+      {{/if}}
+    </div>
+  </div>
 </div>
+
 <Modals::AddUserRoleModal
   @currentInvite={{this.currentInvite}}
   @isLoading={{this.isLoading}}

app/templates/groups/team/permissions.hbs

@@ -0,0 +1,30 @@
+{{outlet}}<table class="ui center aligned stackable celled structured table">
+  <thead>
+    <tr>
+      <th class="center aligned">{{t 'Permissions'}}</th>
+      <th class="center aligned">{{t 'Owner'}}</th>
+      <th class="center aligned">{{t 'Organizer'}}</th>
+    </tr>
+  </thead>
+  <tbody>
+    {{#each this.model.permissions as |permission|}}
+      <tr>
+        {{#if permission.header}}
+          <td colspan="3" class="left aligned" style="background-color: rgba(0, 0, 0, 0.05);">{{t-var permission.title}}</td>
+        {{else}}
+          <td class="left aligned">{{t-var permission.title}}</td>
+          <td>
+            {{#if permission.owner}}
+              <i class="check icon"></i>
+            {{/if}}
+          </td>
+          <td>
+            {{#if permission.organizer}}
+              <i class="check icon"></i>
+            {{/if}}
+          </td>
+        {{/if}}
+      </tr>
+    {{/each}}
+  </tbody>
+</table>

tests/unit/routes/groups/team/permissions-test.ts

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | groups/team/permissions', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    const route = this.owner.lookup('route:groups/team/permissions');
+    assert.ok(route);
+  });
+});