diff options
author | Alfredo Sumaran <alfredo@gitlab.com> | 2017-05-08 21:09:52 -0500 |
---|---|---|
committer | Alfredo Sumaran <alfredo@gitlab.com> | 2017-05-08 21:09:52 -0500 |
commit | 030f3ed3351661bb1a5e4d5b8076e9d57d455673 (patch) | |
tree | 1f7ab095d82f62cd08b8d063ac69f837bf28e486 | |
parent | 4b488d72a263b56b9701dde818ca6b77b038ca89 (diff) | |
download | gitlab-ce-wip-group-dashboard-ui-as.tar.gz |
5 files changed, 143 insertions, 36 deletions
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue index 98f1d516cb2..7d81392ab0f 100644 --- a/app/assets/javascripts/groups/components/group_item.vue +++ b/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> diff --git a/app/assets/javascripts/groups/components/group_item_proxy.vue b/app/assets/javascripts/groups/components/group_item_proxy.vue new file mode 100644 index 00000000000..1a00d699708 --- /dev/null +++ b/app/assets/javascripts/groups/components/group_item_proxy.vue @@ -0,0 +1,38 @@ +<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 diff --git a/app/assets/javascripts/groups/components/groups.vue b/app/assets/javascripts/groups/components/groups.vue index 26ed0990ef5..c9919ff93b1 100644 --- a/app/assets/javascripts/groups/components/groups.vue +++ b/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> diff --git a/app/assets/javascripts/groups/services/groups_service.js b/app/assets/javascripts/groups/services/groups_service.js index 4c5ce87f396..95b5eb50888 100644 --- a/app/assets/javascripts/groups/services/groups_service.js +++ b/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, + }], + }]; + } } diff --git a/app/assets/javascripts/groups/stores/groups_store.js b/app/assets/javascripts/groups/stores/groups_store.js index 2b74447c7f9..3ebe0945a00 100644 --- a/app/assets/javascripts/groups/stores/groups_store.js +++ b/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; } |