Newer
Older
<b-tab title="Groups" active>
<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">
<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>
<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>
<p v-if="model.groupsPanel.items.length === 0">No groups</p>
</div>
<Paginator :paginatedPanel="model.groupsPanel" :onUpdate="updatePagination" />
<RenameGroupModal ref="renameGroupModal" />
<ConfirmRemoveGroupModal ref="confirmRemoveGroupModal" />
</b-tab>
import RenameGroupModal from './modals/RenameGroupModal.vue';
import ConfirmRemoveGroupModal from './modals/ConfirmRemoveGroupModal.vue';
import {
mapState,
mapActions
} from 'vuex';
Sonia Zorba
committed
import client from 'api-client';
import debounce from 'debounce'; // for delaying the input event (search filter)
components: {
RenameGroupModal,
},
computed: mapState({
model: state => state.model,
input: state => state.input
}),
data: function() {
return {
groupFilter: ''
};
},
methods: {
openGroup: function(group) {
this.$store.state.input.selectedGroupId = group.groupId;
this.$store.state.input.searchFilter = null;
Sonia Zorba
committed
.then(model => {
this.$store.commit('updateGroups', model);
Sonia Zorba
committed
});
openRenameGroupModal: function(group) {
this.$refs.renameGroupModal.openRenameGroupModal(group);
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);
},
created: function() {
this.filterGroups = debounce(this.filterGroups, 500)