GroupsPanel.vue

<template>
<b-tab title="Groups" :title-link-class="{ 'd-none': model.leaf }">
  <b-row>
    <b-col xs="12">
      <b-form-input placeholder="Search group" v-model="input.searchFilter" v-on:input="filterGroups"></b-form-input>
    </b-col>
  </b-row>
  <div id="groups-list" v-if="model.groupsPanel !== null">
    <b-list-group v-for="group in model.groupsPanel.items" v-bind:key="group.groupId">
      <b-list-group-item href="#" v-on:click="openGroup(group)">
        <span class="float-left">{{group.groupName}}</span>
        <span v-if="group.permission === 'ADMIN'" class="float-right">
          <a href="#" v-on:click.stop.prevent="openEditGroupModal(group)" title="Edit">
            <font-awesome-icon icon="edit"></font-awesome-icon>
          </a>
          &nbsp;
          <a href="#" v-on:click.stop.prevent="openRemoveGroupModal(group)" class="text-danger" title="Delete" v-if="!group.locked">
            <font-awesome-icon icon="trash"></font-awesome-icon>
          </a>
        </span>
      </b-list-group-item>
    </b-list-group>
    <p v-if="model.groupsPanel.items.length === 0">No groups</p>
  </div>
  <Paginator :paginatedPanel="model.groupsPanel" :onUpdate="updatePagination" :paginatorInput="input" />
  <EditGroupModal ref="editGroupModal" />
  <ConfirmRemoveGroupModal ref="confirmRemoveGroupModal" />
</b-tab>
</template>

<script>
import EditGroupModal from './modals/EditGroupModal.vue';
import ConfirmRemoveGroupModal from './modals/ConfirmRemoveGroupModal.vue';
import Paginator from './Paginator.vue';
import { mapState } from 'vuex';
import client from 'api-client';
import debounce from 'debounce'; // for delaying the input event (search filter)

export default {
  name: 'GroupsPanel',
  components: {
    EditGroupModal,
    ConfirmRemoveGroupModal,
    Paginator
  },
  computed: mapState({
    model: state => state.model,
    input: state => state.input
  }),
  methods: {
    openGroup: function(group) {
      this.$store.dispatch('openGroup', group.groupId);
    },
    openEditGroupModal: function(group) {
      this.$refs.editGroupModal.openEditGroupModal(group);
    },
    openRemoveGroupModal: function(group) {
      this.$refs.confirmRemoveGroupModal.openRemoveGroupModal(group);
    },
    filterGroups: function() {
      client.fetchGroupsPanel(this.input)
        .then(panel => {
          this.$store.commit('updateGroupsPanel', panel);
        });
    },
    updatePagination: function() {
      client.fetchGroupsPanel(this.input)
        .then(panel => {
          this.$store.commit('updateGroupsPanel', panel);
        });
    }
  },
  created: function() {
    this.filterGroups = debounce(this.filterGroups, 500);
  }
}
</script>

<style scoped>
#groups-list {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>