Commit f9f450fd authored by Alfredo Sumaran's avatar Alfredo Sumaran

Basic layout for groups tree

[ci skip]
parent db098f22
...@@ -6,11 +6,16 @@ export default { ...@@ -6,11 +6,16 @@ export default {
required: true, required: true,
}, },
}, },
computed: {
hasGroups() {
return Object.keys(this.groups).length > 0;
},
},
}; };
</script> </script>
<template> <template>
<ul class="list-group"> <ul class="content-list group-list-tree" v-show="hasGroups">
<group-item v-for="group in groups" :group="group" /> <group-item v-for="group in groups" :group="group" />
</ul> </ul>
</template> </template>
...@@ -9,8 +9,27 @@ export default { ...@@ -9,8 +9,27 @@ export default {
}, },
}, },
methods: { methods: {
toggleSubGroups() { toggleSubGroups(e) {
eventHub.$emit('toggleSubGroups', this.group); 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 { ...@@ -20,20 +39,65 @@ export default {
<li <li
@click.stop="toggleSubGroups" @click.stop="toggleSubGroups"
:id="group.id" :id="group.id"
:class="rowClass"
> >
<span v-show="group.expandable"> <div class="controls">
<i <a class="btn" href="#edit">
v-show="group.isOpen" <i aria-hidden="true" class="fa fa-cogs"></i>
class="fa fa-caret-down" </a>
aria-hidden="true" /> <a class="btn" title="Leave this group" href="#leave">
<i <i aria-hidden="true" class="fa fa-sign-out"></i>
v-show="!group.isOpen" </a>
class="fa fa-caret-right" </div>
aria-hidden="true"/>
</span> <div class="stats">
<span >
<code>{{group.id}}</code> - <code v-show="group.isOrphan">Orphan</code> <a :href="group.webUrl">{{group.fullName}}</a></span> <i aria-hidden="true" class="fa fa-bookmark"></i>
<span>{{group.description}}</span> {{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" /> <group-folder v-if="group.isOpen" :groups="group.subGroups" />
</li> </li>
......
...@@ -47,8 +47,10 @@ $(() => { ...@@ -47,8 +47,10 @@ $(() => {
}); });
}, },
toggleSubGroups(parentGroup = null) { toggleSubGroups(parentGroup = null) {
if (!parentGroup.isOpen) {
this.fetchGroups(parentGroup);
}
GroupsStore.toggleSubGroups(parentGroup); GroupsStore.toggleSubGroups(parentGroup);
this.fetchGroups(parentGroup);
}, },
}, },
created() { created() {
......
...@@ -33,7 +33,7 @@ export default class GroupsStore { ...@@ -33,7 +33,7 @@ export default class GroupsStore {
Object.keys(mappedGroups).forEach((key) => { Object.keys(mappedGroups).forEach((key) => {
const currentGroup = mappedGroups[key]; const currentGroup = mappedGroups[key];
// If the group is not at the root level, add it to its parent array of subGroups. // 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) { if (currentGroup.parentId && parentGroup) {
mappedGroups[currentGroup.parentId].subGroups[currentGroup.id] = currentGroup; mappedGroups[currentGroup.parentId].subGroups[currentGroup.id] = currentGroup;
mappedGroups[currentGroup.parentId].isOpen = true; // Expand group if it has subgroups mappedGroups[currentGroup.parentId].isOpen = true; // Expand group if it has subgroups
...@@ -58,8 +58,10 @@ export default class GroupsStore { ...@@ -58,8 +58,10 @@ export default class GroupsStore {
description: rawGroup.description, description: rawGroup.description,
webUrl: rawGroup.web_url, webUrl: rawGroup.web_url,
parentId: rawGroup.parent_id, parentId: rawGroup.parent_id,
expandable: true, visibility: rawGroup.visibility,
isOpen: false, isOpen: false,
numberProjects: 10,
numberMembers: 10,
subGroups: {}, subGroups: {},
}; };
} }
......
...@@ -263,3 +263,47 @@ ul.controls { ...@@ -263,3 +263,47 @@ ul.controls {
ul.indent-list { ul.indent-list {
padding: 10px 0 0 30px; 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;
}
}
...@@ -111,9 +111,3 @@ ...@@ -111,9 +111,3 @@
height: 50px; height: 50px;
} }
} }
.list-group .list-group {
margin-top: 10px;
margin-bottom: 0;
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment