Main.vue

<template>
<div>
  <GroupsBreadcrumb />
  <b-card no-body>
    <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>
      </template>
    </b-tabs>
  </b-card>
  <AddGroupModal />
  <AddMemberModal />
  <AddPermissionModal />
</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';
import client from 'api-client';

export default {
  name: 'Main',
  components: {
    GroupsBreadcrumb,
    GroupsPanel,
    MembersPanel,
    PermissionsPanel,
    AddGroupModal,
    AddMemberModal,
    AddPermissionModal
  },
  computed: mapState({
    model: state => state.model,
    input: state => state.input,
    showAddMemberBtn: state => state.model.permission === 'ADMIN' && state.input.tabIndex === 1,
    showAddCollaboratorBtn: state => state.model.permission === 'MANAGE_MEMBERS' && state.input.tabIndex === 1,
    showAddGroupBtn: state => state.model.permission === 'ADMIN' && state.input.tabIndex === 0,
    showAddPermissionBtn: state => state.model.permission === 'ADMIN' && state.input.tabIndex === 2
  }),
  methods: {
    tabChanged: function(tabIndex) {
      switch (tabIndex) {
        case 0:
          client.fetchGroupsTab(this.input)
            .then(model => {
              this.$store.commit('updateGroups', model);
            });
          break;
        case 1:
          client.fetchMembersPanel(this.input)
            .then(panel => {
              this.$store.commit('updateMembersPanel', panel);
            });
          break;
        case 2:
          client.fetchPermissionsPanel(this.input)
            .then(panel => {
              this.$store.commit('updatePermissionsPanel', panel);
            });
          break;
      }
    },
    openAddGroupModal: function() {
      this.$bvModal.show('add-group-modal');
    },
    openAddMemberModal: function() {
      this.$bvModal.show('add-member-modal');
    },
    openAddPermissionModal: function() {
      this.$bvModal.show('add-permission-modal');
    }
  }
}
</script>

<style scoped>
.in-tabs-header-btn {
  position: absolute;
  right: 8px;
  top: 8px;
}
</style>