FE: Added Paginator Vue component (af35db24) · Commits · IA2 / GMS

gms-ui/src/App.vue

+1 −2

Original line number	Diff line number	Diff line
		@@ -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;

gms-ui/src/api/server/index.js

+32 −3

Original line number	Diff line number	Diff line
		@@ -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, {

gms-ui/src/components/GroupsBreadcrumb.vue

+2 −2

Original line number	Diff line number	Diff line
		@@ -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);

gms-ui/src/components/GroupsPanel.vue

+13 −40

Original line number	Diff line number	Diff line
		@@ -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);
		});
		}
		}
		}

gms-ui/src/components/Main.vue

+20 −14

Original line number	Diff line number	Diff line
		@@ -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);
		client.fetchGroupsTab(this.input)
		.then(model => {
		this.$store.commit('updateGroups', model);
		});
		break;
		case 'members':
		this.$store.commit('updateMembersPanel', model);
		client.fetchMembersPanel(this.input)
		.then(panel => {
		this.$store.commit('updateMembersPanel', panel);
		});
		break;
		case 'permissions':
		this.$store.commit('updatePermissionsPanel', model);
		client.fetchPermissionsPanel(this.input)
		.then(panel => {
		this.$store.commit('updatePermissionsPanel', panel);
		});
		break;
		}
		});
		}
		},
		openAddGroupModal: function() {