PermissionsPanel.vue

<template>
<b-tab title="Permissions" v-if="model.permission === 'ADMIN'">
  <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 :user="up.user" :anchor="true" />
          </td>
          <td>{{up.permission}}</td>
          <td>
            <a href="#" v-on:click.stop="openRemovePermissionModal(up.user)" class="text-danger" title="Remove permission">
              <font-awesome-icon icon="trash"></font-awesome-icon>
            </a>
          </td>
        </tr>
      </tbody>
    </table>
    <p v-if="model.permissionsPanel.items.length === 0">No direct permissions</p>
  </div>
  <Paginator :paginatedPanel="model.permissionsPanel" :onUpdate="updatePagination" :paginatorInput="input" />
  <ConfirmRemovePermissionModal ref="confirmRemovePermissionModal" />
</b-tab>
</template>

<script>
import client from 'api-client';
import User from './User.vue';
import Paginator from './Paginator.vue';
import ConfirmRemovePermissionModal from './modals/ConfirmRemovePermissionModal.vue'
import {
  mapState
} from 'vuex';

export default {
  name: 'PermissionsPanel',
  components: {
    User,
    ConfirmRemovePermissionModal,
    Paginator
  },
  computed: mapState({
    model: state => state.model,
    input: state => state.input
  }),
  methods: {
    openRemovePermissionModal: function(user) {
      this.$refs.confirmRemovePermissionModal.openRemovePermissionModal(user);
    },
    updatePagination: function() {
      client.fetchPermissionsPanel(this.input)
        .then(panel => {
          this.$store.commit('updatePermissionsPanel', panel);
        });
    }
  }
}
</script>