Basic layout for groups tree

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

@@ -6,11 +6,16 @@ export default {
       required: true,
     },
   },
+  computed: {
+    hasGroups() {
+      return Object.keys(this.groups).length > 0;
+    },
+  },
 };
 </script>
 
 <template>
-  <ul class="list-group">
+  <ul class="content-list group-list-tree" v-show="hasGroups">
     <group-item v-for="group in groups" :group="group" />
   </ul>
 </template>

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

@@ -9,8 +9,27 @@ export default {
     },
   },
   methods: {
-    toggleSubGroups() {
-      eventHub.$emit('toggleSubGroups', this.group);
+    toggleSubGroups(e) {
+      if (e.target.tagName === 'A') {
+        return false;
+      }
+
+      // TODO: Do not trigger if group will not have subgroups
+
+      return eventHub.$emit('toggleSubGroups', this.group);
+    },
+  },
+  computed: {
+    rowClass() {
+      return {
+        'group-row': true,
+        'is-open': this.group.isOpen,
+        'is-expandable': this.isExpandable,
+        'no-description': !this.group.description,
+      };
+    },
+    isExpandable() {
+      return Object.keys(this.group.subGroups).length > 0;
     },
   },
 };
@@ -20,20 +39,65 @@ export default {
   <li
     @click.stop="toggleSubGroups"
     :id="group.id"
+    :class="rowClass"
     >
-    <span v-show="group.expandable">
-      <i
-        v-show="group.isOpen"
-        class="fa fa-caret-down"
-        aria-hidden="true" />
-      <i
-        v-show="!group.isOpen"
-        class="fa fa-caret-right"
-        aria-hidden="true"/>
-    </span>
-
-    <code>{{group.id}}</code> - <code v-show="group.isOrphan">Orphan</code> <a :href="group.webUrl">{{group.fullName}}</a></span>
-    <span>{{group.description}}</span>
+    <div class="controls">
+      <a class="btn" href="#edit">
+        <i aria-hidden="true" class="fa fa-cogs"></i>
+      </a>
+      <a class="btn" title="Leave this group" href="#leave">
+        <i aria-hidden="true" class="fa fa-sign-out"></i>
+      </a>
+    </div>
+
+    <div class="stats">
+      <span >
+        <i aria-hidden="true" class="fa fa-bookmark"></i>
+        {{group.numberProjects}}
+      </span>
+      <span>
+        <i aria-hidden="true" class="fa fa-users"></i>
+        {{group.numberMembers}}
+      </span>
+      <span>
+        <i aria-hidden="true" class="fa fa-globe"></i>
+      </span>
+    </div>
+
+    <div class="folder-toggle-wrap">
+      <span class="folder-caret">
+        <i
+          v-show="group.isOpen"
+          class="fa fa-caret-down" />
+        <i
+          v-show="!group.isOpen"
+          class="fa fa-caret-right" />
+      </span>
+
+      <span class="folder-icon">
+        <i
+          v-show="group.isOpen"
+          class="fa fa-folder-open"
+          aria-hidden="true" />
+        <i
+          v-show="!group.isOpen"
+          class="fa fa-folder" />
+      </span>
+    </div>
+
+    <div class="avatar-container s40">
+      <a href="/h5bp">
+        <img class="avatar s40 hidden-xs" src="http://localhost:3000/uploads/group/avatar/2/logo-extra-whitespace.png" alt="Logo extra whitespace">
+      </a>
+    </div>
+
+    <div class="title">
+      <a :href="group.webUrl">{{group.fullName}}</a>
+    </div>
+
+    <div class="description">
+      {{group.description}}
+    </div>
 
     <group-folder v-if="group.isOpen" :groups="group.subGroups" />
   </li>

app/assets/javascripts/groups/index.js

@@ -47,8 +47,10 @@ $(() => {
           });
       },
       toggleSubGroups(parentGroup = null) {
+        if (!parentGroup.isOpen) {
+          this.fetchGroups(parentGroup);
+        }
         GroupsStore.toggleSubGroups(parentGroup);
-        this.fetchGroups(parentGroup);
       },
     },
     created() {

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

@@ -33,7 +33,7 @@ export default class GroupsStore {
     Object.keys(mappedGroups).forEach((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 parentGroup = mappedGroups[currentGroup.parentId];
       if (currentGroup.parentId && parentGroup) {
         mappedGroups[currentGroup.parentId].subGroups[currentGroup.id] = currentGroup;
         mappedGroups[currentGroup.parentId].isOpen = true; // Expand group if it has subgroups
@@ -58,8 +58,10 @@ export default class GroupsStore {
       description: rawGroup.description,
       webUrl: rawGroup.web_url,
       parentId: rawGroup.parent_id,
-      expandable: true,
+      visibility: rawGroup.visibility,
       isOpen: false,
+      numberProjects: 10,
+      numberMembers: 10,
       subGroups: {},
     };
   }

app/assets/stylesheets/framework/lists.scss

@@ -263,3 +263,47 @@ ul.controls {
 ul.indent-list {
   padding: 10px 0 0 30px;
 }
+
+
+// Specific styles for tree list
+.group-list-tree {
+  .folder-toggle-wrap {
+    float: left;
+    line-height: $list-text-height;
+    font-size: 0;
+
+    span {
+      font-size: $gl-font-size;
+    }
+  }
+
+  .folder-caret,
+  .folder-icon {
+    display: inline-block;
+  }
+
+  .folder-caret {
+    width: 15px;
+  }
+
+  .folder-icon {
+    width: 20px;
+  }
+
+  > .group-row:not(.is-expandable) {
+    .folder-caret .fa {
+      opacity: 0;
+    }
+  }
+
+  .content-list li:last-child {
+    padding-bottom: 0;
+  }
+
+  .group-list-tree {
+    margin-top: 10px;
+    margin-bottom: 0;
+    margin-left: 20px;
+    border-top: solid 1px $border-white-light;
+  }
+}

app/assets/stylesheets/pages/groups.scss

@@ -111,9 +111,3 @@
     height: 50px;
   }
 }
-
-
-.list-group .list-group {
-  margin-top: 10px;
-  margin-bottom: 0;
-}