Main.vue

<template>
  <div>
    <GroupsBreadcrumb />
    <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>

<script>
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';

export default {
  name: 'Main',
  components: {
    GroupsBreadcrumb,
    GroupsPanel,
    MembersPanel,
    PermissionsPanel,
    NewGroupModal
  },
  computed: mapState({
    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>