FE: Added permissions panel (9574e429) · Commits · IA2 / GMS

gms-ui/src/components/Main.vue

+44 −10

Original line number	Diff line number	Diff line
		<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

+18 −16

Original line number	Diff line number	Diff line
		<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

0 → 100644

+57 −0

Original line number	Diff line number	Diff line
		<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

0 → 100644

+25 −0

Original line number	Diff line number	Diff line
		<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>