Paginate group results

[ci skip]

5 files changed, 46 insertions, 7 deletions

diff --git a/app/assets/javascripts/groups/components/groups.vue b/app/assets/javascripts/groups/components/groups.vue
index 2ee7ec96dfe..78e97e416c8 100644
--- a/app/assets/javascripts/groups/components/groups.vue
+++ b/app/assets/javascripts/groups/components/groups.vue
@@ -1,10 +1,27 @@
 <script>
+import TablePaginationComponent from '~/vue_shared/components/table_pagination';
+
 export default {
+  components: {
+    'gl-pagination': TablePaginationComponent,
+  },
   props: {
     groups: {
       type: Array,
       required: true,
     },
+    pageInfo: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    change(pageNumber) {
+      const param = gl.utils.setParamInURL('page', pageNumber);
+
+      gl.utils.visitUrl(param);
+      return param;
+    },
   },
 };
 </script>
@@ -12,5 +29,8 @@ export default {
 <template>
   <div>
     <group-folder :groups="groups" />
+    <gl-pagination
+      :change="change"
+      :pageInfo="pageInfo" />
   </div>
 </template>
diff --git a/app/assets/javascripts/groups/index.js b/app/assets/javascripts/groups/index.js
index e20da52510e..e8a9191c3b5 100644
--- a/app/assets/javascripts/groups/index.js
+++ b/app/assets/javascripts/groups/index.js
@@ -38,9 +38,12 @@ $(() => {
           parentId = parentGroup.id;
         }
 
-        service.getGroups(parentId)
+        const page = gl.utils.getParameterByName('page');
+
+        service.getGroups(parentId, page)
           .then((response) => {
             store.setGroups(response.json(), parentGroup);
+            store.storePagination(response.headers);
           })
           .catch(() => {
             // TODO: Handler error
diff --git a/app/assets/javascripts/groups/services/groups_service.js b/app/assets/javascripts/groups/services/groups_service.js
index d92e93d5fa9..c31dc471022 100644
--- a/app/assets/javascripts/groups/services/groups_service.js
+++ b/app/assets/javascripts/groups/services/groups_service.js
@@ -8,13 +8,15 @@ export default class GroupsService {
     this.groups = Vue.resource(endpoint);
   }
 
-  getGroups(parentId) {
-    let data = {};
+  getGroups(parentId, page = 1) {
+    const data = {};
 
     if (parentId) {
-      data = {
-        parent_id: parentId,
-      };
+      data.parent_id = parentId;
+    }
+
+    if (page) {
+      data.page = page;
     }
 
     return this.groups.get(data);
diff --git a/app/assets/javascripts/groups/stores/groups_store.js b/app/assets/javascripts/groups/stores/groups_store.js
index 2602ad0ad2b..4b5de80e3b2 100644
--- a/app/assets/javascripts/groups/stores/groups_store.js
+++ b/app/assets/javascripts/groups/stores/groups_store.js
@@ -2,6 +2,7 @@ export default class GroupsStore {
   constructor() {
     this.state = {};
     this.state.groups = [];
+    this.state.pageInfo = {};
 
     return this;
   }
@@ -18,6 +19,19 @@ export default class GroupsStore {
     return rawGroups;
   }
 
+  storePagination(pagination = {}) {
+    let paginationInfo;
+
+    if (Object.keys(pagination).length) {
+      const normalizedHeaders = gl.utils.normalizeHeaders(pagination);
+      paginationInfo = gl.utils.parseIntPagination(normalizedHeaders);
+    } else {
+      paginationInfo = pagination;
+    }
+
+    this.state.pageInfo = paginationInfo;
+  }
+
   decorateGroups(rawGroups) {
     this.groups = rawGroups.map(GroupsStore.decorateGroup);
     return this.groups;
diff --git a/app/views/dashboard/groups/_groups.html.haml b/app/views/dashboard/groups/_groups.html.haml
index dafb58e5370..f6ac479d41a 100644
--- a/app/views/dashboard/groups/_groups.html.haml
+++ b/app/views/dashboard/groups/_groups.html.haml
@@ -1,3 +1,3 @@
 .js-groups-list-holder
   #dashboard-group-app{ data: { endpoint: dashboard_groups_path(format: :json) } }
-    %groups-component{ ':groups' => 'state.groups' }
+    %groups-component{ ':groups' => 'state.groups', ':page-info' => 'state.pageInfo' }