diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue index 8b2b1c78a5c..ce32d194363 100644 --- a/app/assets/javascripts/groups/components/group_item.vue +++ b/app/assets/javascripts/groups/components/group_item.vue @@ -14,7 +14,7 @@ export default { }, methods: { toggleSubGroups(e) { - if (e.target.tagName === 'A' || !this.hasSubgroups ) { + if (e.target.tagName === 'A' || !this.hasSubgroups) { return false; } diff --git a/app/assets/javascripts/groups/index.js b/app/assets/javascripts/groups/index.js index 35eac409afa..90dae30bafb 100644 --- a/app/assets/javascripts/groups/index.js +++ b/app/assets/javascripts/groups/index.js @@ -34,12 +34,18 @@ $(() => { fetchGroups(parentGroup) { let parentId = null; let getGroups = null; + let page = null; + let pageParam = null; if (parentGroup) { parentId = parentGroup.id; } - const page = gl.utils.getParameterByName('page'); + pageParam = gl.utils.getParameterByName('page'); + + if (pageParam) { + page = pageParam; + } getGroups = service.getGroups(parentId, page); getGroups.then((response) => { @@ -53,8 +59,10 @@ $(() => { }, toggleSubGroups(parentGroup = null) { if (!parentGroup.isOpen) { + store.resetGroups(parentGroup); this.fetchGroups(parentGroup); } + GroupsStore.toggleSubGroups(parentGroup); }, }, diff --git a/app/assets/javascripts/groups/services/groups_service.js b/app/assets/javascripts/groups/services/groups_service.js index ea0499779ed..2b861b6a4d5 100644 --- a/app/assets/javascripts/groups/services/groups_service.js +++ b/app/assets/javascripts/groups/services/groups_service.js @@ -8,7 +8,7 @@ export default class GroupsService { this.groups = Vue.resource(endpoint); } - getGroups(parentId, page = 1) { + getGroups(parentId, page) { const data = {}; if (parentId) { diff --git a/app/assets/javascripts/groups/stores/groups_store.js b/app/assets/javascripts/groups/stores/groups_store.js index 1bba9c3158f..e59aee42400 100644 --- a/app/assets/javascripts/groups/stores/groups_store.js +++ b/app/assets/javascripts/groups/stores/groups_store.js @@ -1,3 +1,4 @@ +/* eslint-disable class-methods-use-this */ export default class GroupsStore { constructor() { this.state = {}; @@ -9,7 +10,7 @@ export default class GroupsStore { setGroups(rawGroups, parent = null) { const parentGroup = parent; - const tree = this.buildTree(rawGroups); + const tree = this.buildTree(rawGroups, parentGroup); if (parentGroup) { parentGroup.subGroups = tree; @@ -20,6 +21,11 @@ export default class GroupsStore { return tree; } + resetGroups(parent) { + const parentGroup = parent; + parentGroup.subGroups = {}; + } + storePagination(pagination = {}) { let paginationInfo; @@ -33,7 +39,7 @@ export default class GroupsStore { this.state.pageInfo = paginationInfo; } - buildTree(rawGroups) { + buildTree(rawGroups, parentGroup) { const groups = this.decorateGroups(rawGroups); const tree = {}; const mappedGroups = {}; @@ -49,11 +55,14 @@ export default class GroupsStore { Object.keys(mappedGroups).map((key) => { const currentGroup = mappedGroups[key]; // If the group is not at the root level, add it to its parent array of subGroups. - const parentGroup = mappedGroups[currentGroup.parentId]; + const findParentGroup = mappedGroups[currentGroup.parentId]; + if (currentGroup.parentId) { - if (parentGroup) { + if (findParentGroup) { mappedGroups[currentGroup.parentId].subGroups[currentGroup.id] = currentGroup; mappedGroups[currentGroup.parentId].isOpen = true; // Expand group if it has subgroups + } else if (parentGroup && parentGroup.id === currentGroup.parentId) { + tree[currentGroup.id] = currentGroup; } else { // Means the groups hast no direct parent. // Save for later processing, we will add them to its corresponding base group