Prepare groups components for subgroups

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

 <script>
+import eventHub from '../event_hub';
+
 export default {
   props: {
     group: {
       type: Object,
       required: true,
-    }    
-  }
+    },
+  },
+  methods: {
+    toggleSubGroups() {
+      eventHub.$emit('toggleSubGroups', this.group);
+    },
+  },
 };
 </script>
 <template>
-  <tr>
-    <td>
-      <div>
-        <a :href="group.web_url">{{group.full_name}}</a>
-      </div>
-      <div>{{group.description}}</div>
-    </td>
+  <tr @click="toggleSubGroups">
+    <template >
+      <td>
+        <span>
+          <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>
+      </td>
+      <td>
+        <div>
+          <a :href="group.web_url">{{group.full_name}}</a>
+        </div>
+        <div>{{group.description}}</div>
+      </td>
+    </template>
   </tr>
 </template>

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

@@ -2,6 +2,7 @@
 import GroupsStore from '../stores/groups_store';
 import GroupsService from '../services/groups_service';
 import GroupItem from '../components/group_item.vue';
+import eventHub from '../event_hub';
 export default {
   components: {
@@ -14,7 +15,7 @@ export default {
     return {
       store,
       state: store.state,
-    }
+    };
   },
   created() {
@@ -22,6 +23,8 @@ export default {
     this.service = new GroupsService(appEl.dataset.endpoint);
     this.fetchGroups();
+
+    eventHub.$on('toggleSubGroups', this.toggleSubGroups);
   },
   methods: {
@@ -34,12 +37,21 @@ export default {
           // TODO: Handler error
         });
     },
-  }
+    toggleSubGroups(group) {
+      GroupsStore.toggleSubGroups(group);
+    },
+  },
 };
 </script>
 <template>
   <table class="table table-bordered">
-    <group-item :group="group" v-for="group in state.groups" />
+    <template v-for="group in state.groups">
+      <tr is="group-item" :group="group" />
+      <tr v-if="group.isOpen">
+        <td>sub groups for {{group.name}}</td>
+        <td></td>
+      </tr>
+    </template>
   </table>
 </template>

app/assets/javascripts/groups/event_hub.js

+import Vue from 'vue';
+
+export default new Vue();

app/assets/javascripts/groups/index.js

 /* eslint-disable no-unused-vars */
 import Vue from 'vue';
-import GroupsComponent from './components/groups.vue'
+import GroupsComponent from './components/groups.vue';
 $(() => {
   const appEl = document.querySelector('#dashboard-group-app');
@@ -9,7 +9,7 @@ $(() => {
   const GroupsApp = new Vue({
     el: appEl,
     components: {
-      'groups-component': GroupsComponent
+      'groups-component': GroupsComponent,
     },
     render: createElement => createElement('groups-component'),
   });

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

@@ -7,8 +7,25 @@ export default class GroupsStore {
   }
   setGroups(groups) {
-    this.state.groups = groups;
+    this.state.groups = this.decorateGroups(groups);
     return groups;
   }
+
+  decorateGroups(rawGroups) {
+    this.groups = rawGroups.map(GroupsStore.decorateGroup);
+    return this.groups;
+  }
+
+  static decorateGroup(rawGroup) {
+    const group = rawGroup;
+    group.isOpen = false;
+    return group;
+  }
+
+  static toggleSubGroups(toggleGroup) {
+    const group = toggleGroup;
+    group.isOpen = !group.isOpen;
+    return group;
+  }
 }