PermissionsPanel.vue

<template>
  <b-tab title="Permissions">
    <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>
    </div>
    <div class="text-center" v-if="model.permissionsPanel !== null">
      <b-pagination
        v-model="model.permissionsPanel.currentPage"
        :total-rows="model.permissionsPanel.totalItems"
        :per-page="model.permissionsPanel.pageSize"
        aria-controls="permissions-list"
        align="center"
        v-on:change="setPage"
      ></b-pagination>
    </div>
    <ConfirmRemovePermissionModal ref="confirmRemovePermissionModal" />
  </b-tab>
</template>

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

export default {
  name: 'PermissionsPanel',
  components: {
    User,
    ConfirmRemovePermissionModal
  },
  computed: mapState({
    model: state => state.model,
  }),
  methods: {
    openRemovePermissionModal: function(user) {
      this.$refs.confirmRemovePermissionModal.openRemovePermissionModal(user);
    },
    setPage: function(page) {
      console.log('setPage ', page);
    }
  }
}
</script>