wip

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

@@ -2,6 +2,7 @@
 import eventHub from '../event_hub';
 export default {
+  name: 'group-item',
   props: {
     group: {
       type: Object,
@@ -10,6 +11,10 @@ export default {
   },
   methods: {
     toggleSubGroups() {
+      if (!this.group.subGroups.length) {
+        return;
+      }
+
       eventHub.$emit('toggleSubGroups', this.group);
     },
   },
@@ -18,25 +23,20 @@ export default {
 <template>
   <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>
+    <td>
+      <span v-show="group.subGroups && group.subGroups.length">
+        <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>
+      <span>
+        <a :href="group.web_url">{{group.full_name}}</a>
+      </span>
+    </td>
   </tr>
 </template>

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

+<script>
+import GroupItem from './group_item.vue';
+
+export default {
+  name: 'group-item-proxy',
+  props: {
+    groups: {
+      type: Array,
+      required: true,
+    },
+  },
+  components: {
+    'group-item': GroupItem,
+  },
+  render(createElement) {
+    const groupItemsComponents = []
+
+    for (let i = 0; i < this.groups.length; i += 1) {
+      groupItemsComponents.push(createElement('group-item', {
+        props: {
+          group: this.groups[i],
+        }
+      }));
+
+      if (this.groups[i].subgroups && this.groups[i].isOpen) {
+        groupItemsComponents.push(createElement('group-item-proxy', {
+          props: {
+            groups: this.groups[i].subgroups,
+          }
+        }));
+      }
+    }
+
+    return createElement('tr', {
+    }, groupItemsComponents);
+  },
+};
+</script>
\ No newline at end of file

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

@@ -2,11 +2,13 @@
 import GroupsStore from '../stores/groups_store';
 import GroupsService from '../services/groups_service';
 import GroupItem from '../components/group_item.vue';
+import GroupItemProxy from '../components/group_item_proxy.vue';
 import eventHub from '../event_hub';
 export default {
   components: {
     'group-item': GroupItem,
+    // 'group-item-proxy': GroupItemProxy,
   },
   data() {
@@ -28,10 +30,10 @@ export default {
   },
   methods: {
-    fetchGroups() {
+    fetchGroups(group = null) {
       this.service.getGroups()
         .then((response) => {
-          this.store.setGroups(response.json());
+          this.store.setGroups(group, this.service.getFakeGroups());
         })
         .catch(() => {
           // TODO: Handler error
@@ -39,19 +41,41 @@ export default {
     },
     toggleSubGroups(group) {
       GroupsStore.toggleSubGroups(group);
+
+      this.fetchGroups(group);
     },
   },
+  render(createElement) {
+    const ref = [];
+
+    if (!this.state.groups) {
+      return createElement('div', 'hola mundo');
+    }
+
+    function iterator (groups, ref) {
+      for (let i = 0; i < groups.length; i += 1) {
+        ref.push(createElement('group-item', {
+          props: {
+            group: groups[i],
+          },
+        }));
+
+        if (groups[i].subGroups && groups[i].isOpen) {
+          iterator(groups[i].subGroups, ref);
+        }
+      }
+    }
+
+    iterator(this.state.groups, ref);
+
+    return createElement('table', {
+      class: {
+        table: true, 
+        'table-bordered': true,
+      },
+      props: {
+      }
+    }, [createElement('tbody', {}, ref)]);
+  },
 };
 </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>
-</template>

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

@@ -11,4 +11,45 @@ export default class GroupsService {
   getGroups() {
     return this.groups.get();
   }
+
+  getFakeGroups() {
+    return [{
+        "id":1118,
+        "name":"tortor",
+        "path":"tortor",
+        "description":"",
+        "visibility":"private",
+        "web_url":"http://localhost:3000/groups/tortor",
+        "full_name":"tortor",
+        "full_path":"tortor",
+        "parent_id":null,
+        "subGroups": [], 
+        "isOpen": false,
+     },
+     {
+        "id":1117,
+        "name":"enot",
+        "path":"enot",
+        "description":"",
+        "visibility":"private",
+        "web_url":"http://localhost:3000/groups/enot",
+        "full_name":"enot",
+        "full_path":"enot",
+        "parent_id":null,
+        "isOpen": false,
+        "subGroups": [{
+          "id":1120,
+          "name":"tortor",
+          "path":"tortor",
+          "description":"",
+          "visibility":"private",
+          "web_url":"http://localhost:3000/groups/tortor",
+          "full_name":"tortor",
+          "full_path":"tortor",
+          "parent_id":null,
+          "subGroups": [],
+          "isOpen": false,
+        }],
+     }];
+  }
 }

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

@@ -6,8 +6,12 @@ export default class GroupsStore {
     return this;
   }
-  setGroups(groups) {
-    this.state.groups = this.decorateGroups(groups);
+  setGroups(group, groups) {
+    if (group) {
+      // const group = this.state.groups.find();
+    } else {
+      this.state.groups = this.decorateGroups(groups);
+    }
     return groups;
   }