FE: Added Paginator Vue component

gms-ui/src/App.vue

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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() {

gms-ui/src/components/MembersPanel.vue

 <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);
+        });
     }
   }
 }

gms-ui/src/components/Paginator.vue

+<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>

gms-ui/src/components/PermissionsPanel.vue

 <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);
+        });
     }
   }
 }

gms-ui/src/store.js

@@ -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;
     },