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">
      <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.name}}</span>
          <span v-if="group.permissions.includes('ADMIN')" class="float-right">
            <a href="#" v-on:click="renameGroup(group)">
              <font-awesome-icon icon="edit"></font-awesome-icon>
            </a>
            <a href="#" v-on:click="deleteGroup(group)">
              <font-awesome-icon icon="trash"></font-awesome-icon>
            </a>
          </span>
        </b-list-group-item>
      </b-list-group>
    </div>
    <div class="row">
      <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>
  </b-tab>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'GroupsPanel',
  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.id;
      this.$store.commit('fetchGroupsModel');
    },
    renameGroup: function(group) {
      console.log('rename ' + group.id);
    },
    deleteGroup: function(group) {
      console.log('del ' + group.id);
    },
    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>