PermissionsPanel.vue

<template>
<b-tab title="Permissions" :title-link-class="{ 'd-none': (model.permission !== 'ADMIN') }">
  <div v-if="model.permissionsPanel !== null">
    <table class="table b-table table-striped table-hover" v-if="model.permissionsPanel.items.length > 0">
      <thead>
        <tr>
          <th>User</th>
          <th>Permission</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(up, index) in model.permissionsPanel.items" v-bind:key="index">
          <td>
            <User :user="up.user" :anchor="true" />
          </td>
          <td v-if="!up.editable">
            {{up.permission}}
            <a href="#" v-on:click.stop.prevent="openPermissionEditor(index)">
              <font-awesome-icon icon="edit"></font-awesome-icon>
            </a>
          </td>
          <td v-if="up.editable" class="col-3">
            <b-input-group>
              <b-form-select v-model="up.permission">
                <option value="ADMIN">ADMIN</option>
                <option value="MANAGE_MEMBERS">MANAGE_MEMBERS</option>
                <option value="VIEW_MEMBERS">VIEW_MEMBERS</option>
              </b-form-select>
              <b-input-group-append>
                <b-button @click="savePermission(up, index)">
                  <font-awesome-icon icon="save"></font-awesome-icon>
                </b-button>
              </b-input-group-append>
            </b-input-group>
          </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);
        });
    },
    openPermissionEditor(index) {
      this.$store.commit('togglePermissionEditable', index);
    },
    savePermission(up, index) {
      let permission = up.permission;
      client.updatePermission(this.input.selectedGroupId, up.user.id, permission)
        .then(() => {
          this.$store.commit('togglePermissionEditable', index);
        });
    }
  }
}
</script>