GroupsPanel.vue

<template>
  <b-tab title="Groups" active>
    <b-row>
      <b-col xs="12">
        <b-form-input placeholder="Search group" v-model="groupFilter" 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">
        <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="openRenameGroupModal(group)" title="Rename">
              <font-awesome-icon icon="edit"></font-awesome-icon>
            </a>
            &nbsp;
            <a href="#" v-on:click.stop="openRemoveGroupModal(group)" class="text-danger" title="Delete">
              <font-awesome-icon icon="trash"></font-awesome-icon>
            </a>
          </span>
        </b-list-group-item>
      </b-list-group>
    </div>
    <div class="row" v-if="model.groupsPanel !== null">
      <div class="col-md-9">
        <b-pagination
          v-model="model.groupsPanel.currentPage"
          :total-rows="model.groupsPanel.totalItems"
          :per-page="model.groupsPanel.pageSize"
          aria-controls="groups-list"
          align="center"
          v-on:change="setPage"
        ></b-pagination>
      </div>
      <div class="col-md-3">
        <b-container fluid>
          <b-row>
            <b-col sm="5">
              <label for="page-size">Page size:</label>
            </b-col>
            <b-col sm="6">
              <b-form-select id="page-size" v-model="input.paginatorPageSize" :options="pageSizeOptions" v-on:change="changePageSize"></b-form-select>
            </b-col>
          </b-row>
        </b-container>
      </div>
    </div>
    <div class="text-center">
    </div>
    <RenameGroupModal ref="renameGroupModal" />
    <ConfirmRemoveGroupModal ref="confirmRemoveGroupModal" />
  </b-tab>
</template>

<script>
import RenameGroupModal from './modals/RenameGroupModal.vue';
import ConfirmRemoveGroupModal from './modals/ConfirmRemoveGroupModal.vue';
import { mapState, mapActions } from 'vuex';
import client from 'api-client';

export default {
  name: 'GroupsPanel',
  components: {
    RenameGroupModal,
    ConfirmRemoveGroupModal
  },
  computed: mapState({
    model: state => state.model,
    input: state => state.input
  }),
  data: function() {
    return {
      pageSizeOptions: [
        { value: 20, text: "20" },
        { value: 50, text: "50" },
        { value: 100, text: "100" }
      ],
      groupFilter: ''
    };
  },
  methods: {
    openGroup: function(group) {
      this.$store.state.input.selectedGroupId = group.groupId;
      client.fetchPanel(this.input)
        .then(model => {
          this.$store.commit('updateGroupsPanel', model);
        });
    },
    openRenameGroupModal: function(group) {
      this.$refs.renameGroupModal.openRenameGroupModal(group);
    },
    openRemoveGroupModal: function(group) {
      this.$refs.confirmRemoveGroupModal.openRemoveGroupModal(group);
    },
    setPage: function(page) {
      console.log('setPage ', page);
    },
    changePageSize: function(pageSize) {
      console.log('changePageSize', pageSize);
    },
    filterGroups: function() {
      console.log('filterGroups', this.groupFilter);
    }
  }
}
</script>

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