FE: Added permissions panel

gms-ui/src/components/Main.vue

 <template>
   <div>
     <GroupsBreadcrumb />
-    <div class="">
-      <button type="button" class="btn btn-primary float-right" v-if="model.permissions.includes('ADMIN')">Add member</button>
-      <b-button variant="primary" class="float-right" v-if="model.permissions.includes('ADMIN')" v-b-modal.new-group-modal>Add group</b-button>
-      <button type="button" class="btn btn-primary float-right" v-if="model.permissions.includes('MANAGE_MEMBERS')">Add collaborator</button>
-    </div>
-    <b-tabs content-class="mt-3">
+    <b-card no-body>
+      <b-tabs content-class="mt-3" card v-on:input="tabChanged">
         <GroupsPanel />
         <MembersPanel />
+        <PermissionsPanel />
+        <template slot="tabs-end">
+          <b-button variant="primary" class="in-tabs-header-btn" v-b-modal.new-group-modal v-if="showAddGroupBtn">Add group</b-button>
+          <b-button variant="primary" class="in-tabs-header-btn" v-if="showAddMemberBtn">Add member</b-button>
+          <b-button variant="primary" class="in-tabs-header-btn" v-if="showAddCollaboratorBtn">Add collaborator</b-button>
+        </template>
       </b-tabs>
+    </b-card>
     <NewGroupModal />
   </div>
 </template>
@@ -18,6 +21,7 @@
 import GroupsBreadcrumb from './GroupsBreadcrumb.vue'
 import GroupsPanel from './GroupsPanel.vue'
 import MembersPanel from './MembersPanel.vue'
+import PermissionsPanel from './PermissionsPanel.vue'
 import NewGroupModal from './modals/NewGroupModal.vue'
 import { mapState } from 'vuex';
 
@@ -27,15 +31,45 @@ export default {
     GroupsBreadcrumb,
     GroupsPanel,
     MembersPanel,
+    PermissionsPanel,
     NewGroupModal
   },
   computed: mapState({
-    model: state => state.model
+    model: state => state.model,
+    showAddMemberBtn: state => state.model.permissions.includes('ADMIN') && state.input.selectedTab === 'members',
+    showAddCollaboratorBtn: state => state.model.permissions.includes('MANAGE_MEMBERS') && state.input.selectedTab === 'members',
+    showAddGroupBtn: state => state.model.permissions.includes('ADMIN') && state.input.selectedTab === 'groups'
   }),
   methods: {
+    tabChanged: function(tabIndex) {
+      let tab;
+      switch(tabIndex) {
+        case 0:
+          tab = 'groups';
+          break;
+        case 1:
+          tab = 'members';
+          break;
+        case 2:
+          tab = 'permissions';
+          break;
+      }
+      if(this.$store.state.input.selectedTab !== tab) {
+        this.$store.state.input.selectedTab = tab;
+        this.$store.commit('fetchGroupsModel');
+      }
+    },
     addMember: function() {
 
     }
   }
 }
 </script>
+
+<style scoped>
+  .in-tabs-header-btn {
+    position: absolute;
+    right: 8px;
+    top: 8px;
+  }
+</style>

gms-ui/src/components/MembersPanel.vue

 <template>
-  <b-tab title="Members" v-if="model.membersPanel !== null">
-    <b-list-group v-for="member in model.membersPanel.members" id="members-list">
+  <b-tab title="Members">
+    <div v-if="model.membersPanel !== null">
+      <b-list-group v-for="member in model.membersPanel.items" id="members-list">
         <b-list-group-item href="#">
           {{member.label}}
           <span v-if="model.permission === 'ADMIN'">
@@ -13,7 +14,8 @@
           </span>
         </b-list-group-item>
       </b-list-group>
-    <div class="text-center">
+    </div>
+    <div class="text-center" v-if="model.membersPanel !== null">
       <b-pagination
         v-model="model.membersPanel.paginator.page"
         :total-rows="model.membersPanel.paginator.totalItems"
@@ -32,7 +34,7 @@ import { mapState } from 'vuex';
 export default {
   name: 'MembersPanel',
   computed: mapState({
-    model: state => state.model
+    model: state => state.model,
   }),
   methods: {
     deleteMember: function(member) {

gms-ui/src/components/PermissionsPanel.vue

+<template>
+  <b-tab title="Permissions">
+    <div v-if="model.permissionsPanel !== null">
+      <table class="table b-table table-striped table-hover">
+        <thead>
+          <tr>
+            <th>User</th>
+            <th>Permission</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="up in model.permissionsPanel.items">
+            <td>
+              <User v-bind:user="up.user" />
+            </td>
+            <td>{{up.permission}}</td>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="text-center" v-if="model.permissionsPanel !== null">
+      <b-pagination
+        v-model="model.permissionsPanel.currentPage"
+        :total-rows="model.permissionsPanel.totalItems"
+        :per-page="model.permissionsPanel.pageSize"
+        aria-controls="permissions-list"
+        align="center"
+        v-on:change="setPage"
+      ></b-pagination>
+    </div>
+  </b-tab>
+</template>
+
+<script>
+import User from './User.vue'
+import { mapState } from 'vuex';
+
+export default {
+  name: 'PermissionsPanel',
+  components: {
+    User
+  },
+  computed: mapState({
+    model: state => state.model,
+  }),
+  methods: {
+    deletePermission: function(userPermission) {
+
+    },
+    setPage: function(page) {
+      console.log('setPage ', page);
+    }
+  }
+}
+</script>

gms-ui/src/components/User.vue

+<template>
+  <div :id="'user-name-' + user.id">
+    <span>{{user.displayName}}</span>
+    <b-tooltip ref="user-tooltip" :target="'user-name-' + user.id" placement="bottom">
+      <div class="text-left">
+        <p><strong>User id</strong>: {{user.id}}</p>
+        <p><strong>Identities</strong>:</p>
+        <ul>
+          <li v-for="identity in user.identities">
+            {{identity.email}} ({{identity.type}})
+          </li>
+        </ul>
+      </div>
+    </b-tooltip>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'User',
+  props: {
+    user: Object
+  }
+}
+</script>