Build tree from server response

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

@@ -2,13 +2,13 @@
 export default {
   props: {
     groups: {
-      type: Array,
+      type: Object,
       required: true,
     },
   },
   computed: {
     hasGroups() {
-      return this.groups.length > 0;
+      return Object.keys(this.groups).length > 0;
     },
   },
 };

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

@@ -29,7 +29,7 @@ export default {
       };
     },
     isExpandable() {
-      return this.group.subGroups.length > 0;
+      return Object.keys(this.group.subGroups).length > 0;
     },
   },
 };
@@ -92,7 +92,7 @@ export default {
     </div>
 
     <div class="title">
-      <a :href="group.webUrl">{{group.fullName}}</a>
+      <a :href="group.webUrl">{{group.isOrphan ? group.fullName : group.name}}</a>
     </div>
 
     <div class="description">

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

@@ -7,7 +7,7 @@ export default {
   },
   props: {
     groups: {
-      type: Array,
+      type: Object,
       required: true,
     },
     pageInfo: {

app/assets/javascripts/groups/services/groups_service.js

@@ -13,12 +13,10 @@ export default class GroupsService {
 
     if (parentId) {
       data.parent_id = parentId;
-    } else {
       // Do not send this param for sub groups
-      if (page) {
+    } else if (page) {
       data.page = page;
     }
-    }
 
     return this.groups.get(data);
   }

app/assets/javascripts/groups/stores/groups_store.js

 export default class GroupsStore {
   constructor() {
     this.state = {};
-    this.state.groups = [];
+    this.state.groups = {};
     this.state.pageInfo = {};
 
     return this;
@@ -11,9 +11,9 @@ export default class GroupsStore {
     const parentGroup = parent;
 
     if (parentGroup) {
-      parentGroup.subGroups = this.decorateGroups(rawGroups);
+      parentGroup.subGroups = this.buildTree(rawGroups);
     } else {
-      this.state.groups = this.decorateGroups(rawGroups);
+      this.state.groups = this.buildTree(rawGroups);
     }
 
     return rawGroups;
@@ -32,6 +32,70 @@ export default class GroupsStore {
     this.state.pageInfo = paginationInfo;
   }
 
+  buildTree(rawGroups) {
+    const groups = this.decorateGroups(rawGroups);
+    const tree = {};
+    const mappedGroups = {};
+    const orphans = [];
+
+    // Map groups to an object
+    for (let i = 0, len = groups.length; i < len; i += 1) {
+      const group = groups[i];
+      mappedGroups[group.id] = group;
+      mappedGroups[group.id].subGroups = {};
+    }
+
+    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];
+      if (currentGroup.parentId) {
+        if (parentGroup) {
+          mappedGroups[currentGroup.parentId].subGroups[currentGroup.id] = currentGroup;
+          mappedGroups[currentGroup.parentId].isOpen = true; // Expand group if it has subgroups
+        } else {
+          // Means the groups hast no direct parent.
+          // Save for later processing, we will add them to its corresponding base group
+          orphans.push(currentGroup);
+        }
+      } else {
+        // If the group is at the root level, add it to first level elements array.
+        tree[currentGroup.id] = currentGroup;
+      }
+
+      return key;
+    });
+
+    // Hopefully this array will be empty for most cases
+    if (orphans.length) {
+      orphans.map((orphan) => {
+        let found = false;
+        const currentOrphan = orphan;
+
+        Object.keys(tree).map((key) => {
+          const group = tree[key];
+          if (currentOrphan.fullPath.lastIndexOf(group.fullPath) === 0) {
+            group.subGroups[currentOrphan.id] = currentOrphan;
+            group.isOpen = true;
+            currentOrphan.isOrphan = true;
+            found = true;
+          }
+
+          return key;
+        });
+
+        if (!found) {
+          currentOrphan.isOrphan = true;
+          tree[currentOrphan.id] = currentOrphan;
+        }
+
+        return orphan;
+      });
+    }
+
+    return tree;
+  }
+
   decorateGroups(rawGroups) {
     this.groups = rawGroups.map(GroupsStore.decorateGroup);
     return this.groups;
@@ -41,14 +105,17 @@ export default class GroupsStore {
     return {
       id: rawGroup.id,
       fullName: rawGroup.full_name,
+      fullPath: rawGroup.full_path,
+      name: rawGroup.name,
       description: rawGroup.description,
       webUrl: rawGroup.web_url,
       parentId: rawGroup.parent_id,
       visibility: rawGroup.visibility,
       isOpen: false,
+      isOrphan: false,
       numberProjects: 10,
       numberMembers: 10,
-      subGroups: [],
+      subGroups: {},
     };
   }