From 9574e42960fb585893e73667d3a4f2ad75c83775 Mon Sep 17 00:00:00 2001
From: Sonia Zorba <sonia.zorba@inaf.it>
Date: Tue, 23 Jul 2019 17:27:35 +0200
Subject: [PATCH] FE: Added permissions panel
---
gms-ui/src/components/Main.vue | 54 ++++++++++++++++----
gms-ui/src/components/MembersPanel.vue | 34 +++++++------
gms-ui/src/components/PermissionsPanel.vue | 57 ++++++++++++++++++++++
gms-ui/src/components/User.vue | 25 ++++++++++
4 files changed, 144 insertions(+), 26 deletions(-)
create mode 100644 gms-ui/src/components/PermissionsPanel.vue
create mode 100644 gms-ui/src/components/User.vue
diff --git a/gms-ui/src/components/Main.vue b/gms-ui/src/components/Main.vue
index 87442ad..aa04da6 100644
--- a/gms-ui/src/components/Main.vue
+++ b/gms-ui/src/components/Main.vue
@@ -1,15 +1,18 @@
<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">
- <GroupsPanel />
- <MembersPanel />
- </b-tabs>
+ <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>
diff --git a/gms-ui/src/components/MembersPanel.vue b/gms-ui/src/components/MembersPanel.vue
index a1d4d3a..1b83ea7 100644
--- a/gms-ui/src/components/MembersPanel.vue
+++ b/gms-ui/src/components/MembersPanel.vue
@@ -1,19 +1,21 @@
<template>
- <b-tab title="Members" v-if="model.membersPanel !== null">
- <b-list-group v-for="member in model.membersPanel.members" id="members-list">
- <b-list-group-item href="#">
- {{member.label}}
- <span v-if="model.permission === 'ADMIN'">
- <a href="#" v-on:click="changeMemberPermission(member)">
- <font-awesome-icon icon="edit"></font-awesome-icon>
- </a>
- <a href="#" v-on:click="deleteMember(member)">
- <font-awesome-icon icon="trash"></font-awesome-icon>
- </a>
- </span>
- </b-list-group-item>
- </b-list-group>
- <div class="text-center">
+ <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'">
+ <a href="#" v-on:click="changeMemberPermission(member)">
+ <font-awesome-icon icon="edit"></font-awesome-icon>
+ </a>
+ <a href="#" v-on:click="deleteMember(member)">
+ <font-awesome-icon icon="trash"></font-awesome-icon>
+ </a>
+ </span>
+ </b-list-group-item>
+ </b-list-group>
+ </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) {
diff --git a/gms-ui/src/components/PermissionsPanel.vue b/gms-ui/src/components/PermissionsPanel.vue
new file mode 100644
index 0000000..e4ee838
--- /dev/null
+++ b/gms-ui/src/components/PermissionsPanel.vue
@@ -0,0 +1,57 @@
+<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>
diff --git a/gms-ui/src/components/User.vue b/gms-ui/src/components/User.vue
new file mode 100644
index 0000000..9e21ec8
--- /dev/null
+++ b/gms-ui/src/components/User.vue
@@ -0,0 +1,25 @@
+<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>
--
GitLab