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 v-bind:user="up.user" />
            </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" />
    <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>