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 @@
@@ -12,5 +29,8 @@ export default {
+
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' }