Set tree structure for groups

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

+<script>
+import eventHub from '../event_hub';
+
+export default {
+  props: {
+    groups: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <ul class="list-group">
+    <group-item v-for="group in groups" :group="group" />
+  </ul>
+</template>

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

@@ -10,6 +10,10 @@ export default {
   },
   methods: {
     toggleSubGroups() {
+      if (this.group.subGroups && !this.group.subGroups.length) {
+        return;
+      }
+
       eventHub.$emit('toggleSubGroups', this.group);
     },
   },
@@ -17,10 +21,8 @@ export default {
 </script>
 
 <template>
-  <tr @click="toggleSubGroups">
-    <template >
-      <td>
-        <span>
+  <li @click="toggleSubGroups" class="list-group-item">
+    <span v-show="group.subGroups && group.subGroups.length">
       <i
         v-show="group.isOpen"
         class="fa fa-caret-down"
@@ -30,13 +32,10 @@ export default {
         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>
+
+    <p><a :href="group.web_url">{{group.full_name}}</a></p>
+    <p>{{group.description}}</p>
+
+    <group-folder v-if="group.subGroups && group.isOpen" :groups="group.subGroups" />
+  </li>
 </template>

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

 <script>
 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: {
-    'group-item': GroupItem,
-  },
-
   data() {
     const store = new GroupsStore();
 
@@ -39,19 +34,15 @@ export default {
     },
     toggleSubGroups(group) {
       GroupsStore.toggleSubGroups(group);
+
+      this.fetchGroups();
     },
   },
 };
 </script>
 
 <template>
-  <table class="table table-bordered">
-    <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>
+  <div>
+    <group-folder :groups="state.groups" />
+  </div>
 </template>

app/assets/javascripts/groups/index.js

@@ -2,15 +2,18 @@
 
 import Vue from 'vue';
 import GroupsComponent from './components/groups.vue';
+import GroupFolder from './components/group_folder.vue';
+import GroupItem from './components/group_item.vue';
 
 $(() => {
   const appEl = document.querySelector('#dashboard-group-app');
 
+  Vue.component('groups-component', GroupsComponent);
+  Vue.component('group-folder', GroupFolder);
+  Vue.component('group-item', GroupItem);
+
   const GroupsApp = new Vue({
     el: appEl,
-    components: {
-      'groups-component': GroupsComponent,
-    },
     render: createElement => createElement('groups-component'),
   });
 });