Paginate group results

[ci skip]

app/assets/javascripts/groups/components/groups.vue

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

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

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

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;

app/views/dashboard/groups/_groups.html.haml

 .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' }