Newer
Older
<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">
Sonia Zorba
committed
<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>
<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" />
<ConfirmRemoveGroupModal ref="confirmRemoveGroupModal" />
</b-tab>
import ConfirmRemoveGroupModal from './modals/ConfirmRemoveGroupModal.vue';
Sonia Zorba
committed
import { mapState } from 'vuex';
Sonia Zorba
committed
import client from 'api-client';
import debounce from 'debounce'; // for delaying the input event (search filter)
components: {
},
computed: mapState({
model: state => state.model,
input: state => state.input
}),
openGroup: function(group) {
Sonia Zorba
committed
this.$store.dispatch('openGroup', group.groupId);
openEditGroupModal: function(group) {
this.$parent.$parent.$refs.editGroupModal.openEditGroupModal(group, true);
openRemoveGroupModal: function(group) {
this.$refs.confirmRemoveGroupModal.openRemoveGroupModal(group);
client.fetchGroupsPanel(this.input)
.then(panel => {
this.$store.commit('updateGroupsPanel', panel);
});
client.fetchGroupsPanel(this.input)
.then(panel => {
this.$store.commit('updateGroupsPanel', panel);
this.filterGroups = debounce(this.filterGroups, 500);