Newer
Older
<GroupsBreadcrumb />
Sonia Zorba
committed
<b-tabs content-class="mt-3" card v-on:input="tabChanged" v-model="input.tabIndex">
<GroupsPanel />
<MembersPanel />
<PermissionsPanel />
<template slot="tabs-end">
<b-button variant="primary" class="in-tabs-header-btn" v-if="showAddGroupBtn" v-on:click="openAddGroupModal">Add group</b-button>
<b-button variant="primary" class="in-tabs-header-btn" v-if="showAddMemberBtn" v-on:click="openAddMemberModal">Add member</b-button>
<b-button variant="primary" class="in-tabs-header-btn" v-if="showAddCollaboratorBtn" v-on:click="openAddMemberModal">Add collaborator</b-button>
<b-button variant="primary" class="in-tabs-header-btn" v-if="showAddPermissionBtn" v-on:click="openAddPermissionModal">Add permission</b-button>
<AddGroupModal />
<AddMemberModal />
</div>
</template>
<script>
import GroupsBreadcrumb from './GroupsBreadcrumb.vue'
import GroupsPanel from './GroupsPanel.vue'
import MembersPanel from './MembersPanel.vue'
import PermissionsPanel from './PermissionsPanel.vue'
import AddGroupModal from './modals/AddGroupModal.vue'
import AddMemberModal from './modals/AddMemberModal.vue'
import AddPermissionModal from './modals/AddPermissionModal.vue'
import { mapState } from 'vuex';
Sonia Zorba
committed
import client from 'api-client';
export default {
name: 'Main',
components: {
GroupsBreadcrumb,
GroupsPanel,
MembersPanel,
AddGroupModal,
computed: mapState({
Sonia Zorba
committed
input: state => state.input,
showAddMemberBtn: state => state.model.permission === 'ADMIN' && state.input.selectedTab === 'members',
showAddCollaboratorBtn: state => state.model.permission === 'MANAGE_MEMBERS' && state.input.selectedTab === 'members',
showAddGroupBtn: state => state.model.permission === 'ADMIN' && state.input.selectedTab === 'groups',
showAddPermissionBtn: state => state.model.permission === 'ADMIN' && state.input.selectedTab === 'permissions'
tabChanged: function(tabIndex) {
let tab;
switch(tabIndex) {
case 0:
tab = 'groups';
break;
case 1:
tab = 'members';
break;
case 2:
tab = 'permissions';
break;
}
Sonia Zorba
committed
if(this.input.selectedTab !== tab) {
this.input.selectedTab = tab;
switch(this.input.selectedTab) {
case 'groups':
client.fetchGroupsTab(this.input)
.then(model => {
this.$store.commit('updateGroups', model);
});
break;
case 'members':
client.fetchMembersPanel(this.input)
.then(panel => {
this.$store.commit('updateMembersPanel', panel);
});
break;
case 'permissions':
client.fetchPermissionsPanel(this.input)
.then(panel => {
this.$store.commit('updatePermissionsPanel', panel);
});
break;
}
this.$bvModal.show('add-group-modal');
this.$bvModal.show('add-member-modal');
},
openAddPermissionModal: function() {
this.$bvModal.show('add-permission-modal');
<style scoped>
.in-tabs-header-btn {
position: absolute;
right: 8px;
top: 8px;
}
</style>