Commit af35db24 authored by Sonia Zorba's avatar Sonia Zorba
Browse files

FE: Added Paginator Vue component

parent f8443b4c
......@@ -6,7 +6,7 @@
</div>
<div id="loading" v-if="loading">
<div id="spinner-wrapper">
<font-awesome-icon icon="spinner" spin />
<b-spinner variant="primary" style="width: 3rem; height: 3rem;" label="Loading"></b-spinner>
</div>
</div>
</div>
......@@ -61,7 +61,6 @@ export default {
}
#loading {
font-size: 40px;
position: absolute;
top: 0;
bottom: 0;
......
......@@ -55,10 +55,39 @@ export default {
}
});
},
fetchPanel (input) {
fetchGroupsTab (input) {
let url = BASE_API_URL
+ input.selectedTab
+ '?groupId=' + input.selectedGroupId
+ 'groups?groupId=' + input.selectedGroupId
+ '&paginatorPageSize=' + input.paginatorPageSize
+ '&paginatorPage=' + input.paginatorPage;
return apiRequest(url, {
method: 'GET',
cache: 'no-cache',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
}
});
},
fetchMembersPanel (input) {
let url = BASE_API_URL
+ 'members?groupId=' + input.selectedGroupId
+ '&paginatorPageSize=' + input.paginatorPageSize
+ '&paginatorPage=' + input.paginatorPage;
return apiRequest(url, {
method: 'GET',
cache: 'no-cache',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
}
});
},
fetchPermissionsPanel (input) {
let url = BASE_API_URL
+ 'permissions?groupId=' + input.selectedGroupId
+ '&paginatorPageSize=' + input.paginatorPageSize
+ '&paginatorPage=' + input.paginatorPage;
return apiRequest(url, {
......
......@@ -41,9 +41,9 @@ export default {
changeBreadcrumb: function(groupId) {
this.input.selectedGroupId = groupId;
if(this.input.selectedTab === 'groups') {
client.fetchPanel(this.input)
client.fetchGroupsTab(this.input)
.then(model => {
this.$store.commit('updateGroupsPanel', model);
this.$store.commit('updateGroups', model);
});
} else {
this.$store.commit('setTabIndex', 0);
......
......@@ -20,33 +20,9 @@
</span>
</b-list-group-item>
</b-list-group>
<p v-if="model.groupsPanel.items.length === 0">No groups</p>
</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>
<Paginator :paginatedPanel="model.groupsPanel" :onUpdate="updatePagination" />
<RenameGroupModal ref="renameGroupModal" />
<ConfirmRemoveGroupModal ref="confirmRemoveGroupModal" />
</b-tab>
......@@ -55,6 +31,7 @@
<script>
import RenameGroupModal from './modals/RenameGroupModal.vue';
import ConfirmRemoveGroupModal from './modals/ConfirmRemoveGroupModal.vue';
import Paginator from './Paginator.vue';
import { mapState, mapActions } from 'vuex';
import client from 'api-client';
......@@ -62,7 +39,8 @@ export default {
name: 'GroupsPanel',
components: {
RenameGroupModal,
ConfirmRemoveGroupModal
ConfirmRemoveGroupModal,
Paginator
},
computed: mapState({
model: state => state.model,
......@@ -70,20 +48,15 @@ export default {
}),
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)
client.fetchGroupsTab(this.input)
.then(model => {
this.$store.commit('updateGroupsPanel', model);
this.$store.commit('updateGroups', model);
});
},
openRenameGroupModal: function(group) {
......@@ -92,14 +65,14 @@ export default {
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);
},
updatePagination: function() {
client.fetchGroupsTab(this.input)
.then(model => {
this.$store.commit('updateGroupsPanel', model.groupsPanel);
});
}
}
}
......
......@@ -66,20 +66,26 @@ export default {
}
if(this.input.selectedTab !== tab) {
this.input.selectedTab = tab;
client.fetchPanel(this.input)
.then(model => {
switch(this.input.selectedTab) {
case 'groups':
this.$store.commit('updateGroupsPanel', model);
break;
case 'members':
this.$store.commit('updateMembersPanel', model);
break;
case 'permissions':
this.$store.commit('updatePermissionsPanel', model);
break;
}
});
switch(this.input.selectedTab) {
case 'groups':
client.fetchGroupsTab(this.input)
.then(model => {
this.$store.commit('updateGroups', model);
});
break;
case 'members':
client.fetchMembersPanel(this.input)
.then(panel => {
this.$store.commit('updateMembersPanel', panel);
});
break;
case 'permissions':
client.fetchPermissionsPanel(this.input)
.then(panel => {
this.$store.commit('updatePermissionsPanel', panel);
});
break;
}
}
},
openAddGroupModal: function() {
......
<template>
<b-tab title="Members">
<b-tab title="Members" v-if="model.permission === 'ADMIN' || model.permission === 'MANAGE_MEMBERS' || model.permission === 'VIEW_MEMBERS'">
<div v-if="model.membersPanel !== null">
<b-list-group v-for="member in model.membersPanel.items" id="members-list">
<b-list-group-item href="#">
......@@ -13,17 +13,9 @@
</span>
</b-list-group-item>
</b-list-group>
<p v-if="model.membersPanel.items.length === 0">No direct members</p>
</div>
<div class="text-center" v-if="model.membersPanel !== null">
<b-pagination
v-model="model.membersPanel.page"
:total-rows="model.membersPanel.totalItems"
:per-page="model.membersPanel.pageSize"
aria-controls="members-list"
align="center"
v-on:change="setPage"
></b-pagination>
</div>
<Paginator :paginatedPanel="model.membersPanel" :onUpdate="updatePagination" />
<ConfirmRemoveMemberModal ref="confirmRemoveMemberModal" />
</b-tab>
</template>
......@@ -31,17 +23,20 @@
<script>
import client from 'api-client';
import User from './User.vue';
import ConfirmRemoveMemberModal from './modals/ConfirmRemoveMemberModal.vue'
import Paginator from './Paginator.vue';
import ConfirmRemoveMemberModal from './modals/ConfirmRemoveMemberModal.vue';
import { mapState } from 'vuex';
export default {
name: 'MembersPanel',
components: {
User,
ConfirmRemoveMemberModal
ConfirmRemoveMemberModal,
Paginator
},
computed: mapState({
model: state => state.model
model: state => state.model,
input: state => state.input
}),
methods: {
openRemoveMemberModal: function(member) {
......@@ -50,8 +45,11 @@ export default {
this.$refs.confirmRemoveMemberModal.openRemoveMemberModal(member, memberPermission);
});
},
setPage: function(page) {
console.log('setPage ', page);
updatePagination: function() {
client.fetchMembersPanel(this.input)
.then(panel => {
this.$store.commit('updateMembersPanel', panel);
});
}
}
}
......
<template>
<div class="row mt-4" v-if="paginatedPanel !== null && paginatedPanel.totalItems > 0">
<div class="col-md-8">
<b-pagination
v-model="paginatedPanel.currentPage"
:total-rows="paginatedPanel.totalItems"
:per-page="paginatedPanel.pageSize"
aria-controls="groups-list"
align="center"
v-on:change="setPage"
></b-pagination>
<p>Total items: {{paginatedPanel.totalItems}}</p>
</div>
<div class="col-md-4">
<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>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: 'Paginator',
props: {
paginatedPanel: Object,
onUpdate: Function
},
computed: mapState({
input: state => state.input
}),
data: function() {
return {
pageSizeOptions: [
{ value: 5, text: "5" },
{ value: 20, text: "20" },
{ value: 50, text: "50" },
{ value: 100, text: "100" }
]
};
},
methods: {
setPage: function(page) {
this.input.paginatorPage = page;
this.onUpdate();
},
changePageSize: function(pageSize) {
this.input.paginatorPageSize = pageSize;
this.onUpdate();
}
}
}
</script>
<template>
<b-tab title="Permissions">
<b-tab title="Permissions" v-if="model.permission === 'ADMIN'">
<div v-if="model.permissionsPanel !== null">
<table class="table b-table table-striped table-hover">
<thead>
......@@ -23,23 +23,17 @@
</tr>
</tbody>
</table>
<p v-if="model.permissionsPanel.items.length === 0">No direct permissions</p>
</div>
<div class="text-center" v-if="model.permissionsPanel !== null">
<b-pagination
v-model="model.permissionsPanel.currentPage"
:total-rows="model.permissionsPanel.totalItems"
:per-page="model.permissionsPanel.pageSize"
aria-controls="permissions-list"
align="center"
v-on:change="setPage"
></b-pagination>
</div>
<Paginator :paginatedPanel="model.permissionsPanel" :onUpdate="updatePagination" />
<ConfirmRemovePermissionModal ref="confirmRemovePermissionModal" />
</b-tab>
</template>
<script>
import client from 'api-client';
import User from './User.vue';
import Paginator from './Paginator.vue';
import ConfirmRemovePermissionModal from './modals/ConfirmRemovePermissionModal.vue'
import { mapState } from 'vuex';
......@@ -47,17 +41,22 @@ export default {
name: 'PermissionsPanel',
components: {
User,
ConfirmRemovePermissionModal
ConfirmRemovePermissionModal,
Paginator
},
computed: mapState({
model: state => state.model,
input: state => state.input
}),
methods: {
openRemovePermissionModal: function(user) {
this.$refs.confirmRemovePermissionModal.openRemovePermissionModal(user);
},
setPage: function(page) {
console.log('setPage ', page);
updatePagination: function() {
client.fetchPermissionsPanel(this.input)
.then(panel => {
this.$store.commit('updatePermissionsPanel', panel);
});
}
}
}
......
......@@ -33,11 +33,14 @@ export default new Vuex.Store({
this.state.model.permission = model.permission;
this.state.model.user = model.user;
},
updateGroupsPanel(state, model) {
updateGroups(state, model) {
this.state.model.breadcrumbs = model.breadcrumbs;
this.state.model.groupsPanel = model.groupsPanel;
this.state.model.permission = model.permission;
},
updateGroupsPanel(state, groupsPanel) {
this.state.model.groupsPanel = groupsPanel;
},
updatePermissionsPanel(state, permissionsPanel) {
this.state.model.permissionsPanel = permissionsPanel;
},
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment