2017-05-06 04:15:04 +00:00
|
|
|
<script>
|
2017-05-08 20:22:26 +00:00
|
|
|
import eventHub from '../event_hub';
|
|
|
|
|
2017-05-06 04:15:04 +00:00
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
group: {
|
|
|
|
type: Object,
|
|
|
|
required: true,
|
2017-05-08 20:22:26 +00:00
|
|
|
},
|
2017-05-25 02:04:31 +00:00
|
|
|
baseGroup: {
|
|
|
|
type: Object,
|
|
|
|
required: false,
|
|
|
|
},
|
2017-05-08 20:22:26 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2017-05-16 14:29:38 +00:00
|
|
|
toggleSubGroups(e) {
|
2017-05-30 05:50:29 +00:00
|
|
|
if (e.target.tagName === 'A' || !this.hasSubgroups) {
|
2017-05-16 14:29:38 +00:00
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
return eventHub.$emit('toggleSubGroups', this.group);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed: {
|
2017-05-26 00:49:46 +00:00
|
|
|
groupDomId() {
|
|
|
|
return `group-${this.group.id}`;
|
|
|
|
},
|
2017-05-16 14:29:38 +00:00
|
|
|
rowClass() {
|
|
|
|
return {
|
|
|
|
'group-row': true,
|
|
|
|
'is-open': this.group.isOpen,
|
2017-05-30 05:06:34 +00:00
|
|
|
'has-subgroups': this.hasSubgroups,
|
2017-05-16 14:29:38 +00:00
|
|
|
'no-description': !this.group.description,
|
|
|
|
};
|
|
|
|
},
|
2017-05-30 05:06:34 +00:00
|
|
|
hasSubgroups() {
|
|
|
|
// TODO: Server should send a flag to indicate group will have subgroups
|
|
|
|
return true;
|
2017-05-08 20:22:26 +00:00
|
|
|
},
|
2017-05-25 02:04:31 +00:00
|
|
|
fullPath() {
|
|
|
|
let fullPath = '';
|
|
|
|
|
|
|
|
if (this.group.isOrphan) {
|
|
|
|
// check if current group is baseGroup
|
|
|
|
if (this.baseGroup) {
|
|
|
|
// Remove baseGroup prefix from our current group.fullName. e.g:
|
|
|
|
// baseGroup.fullName: `level1`
|
|
|
|
// group.fullName: `level1 / level2 / level3`
|
|
|
|
// Result: `level2 / level3`
|
|
|
|
const gfn = this.group.fullName;
|
|
|
|
const bfn = this.baseGroup.fullName;
|
|
|
|
const length = bfn.length;
|
|
|
|
const start = gfn.indexOf(bfn);
|
|
|
|
|
2017-05-26 00:49:46 +00:00
|
|
|
fullPath = gfn.substr(start + length + 3);
|
2017-05-25 02:04:31 +00:00
|
|
|
} else {
|
|
|
|
fullPath = this.group.fullName;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
fullPath = this.group.name;
|
|
|
|
}
|
|
|
|
|
|
|
|
return fullPath;
|
|
|
|
},
|
2017-05-08 20:22:26 +00:00
|
|
|
},
|
2017-05-06 04:15:04 +00:00
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2017-05-12 08:36:08 +00:00
|
|
|
<li
|
2017-05-15 21:32:09 +00:00
|
|
|
@click.stop="toggleSubGroups"
|
2017-05-26 00:49:46 +00:00
|
|
|
:id="groupDomId"
|
2017-05-16 14:29:38 +00:00
|
|
|
:class="rowClass"
|
2017-05-12 08:36:08 +00:00
|
|
|
>
|
2017-05-16 14:29:38 +00:00
|
|
|
<div class="controls">
|
2017-05-26 00:49:46 +00:00
|
|
|
<a class="edit-group btn" href="#edit">
|
2017-05-16 14:29:38 +00:00
|
|
|
<i aria-hidden="true" class="fa fa-cogs"></i>
|
|
|
|
</a>
|
2017-05-26 00:49:46 +00:00
|
|
|
<a class="leave-group btn" title="Leave this group" href="#leave">
|
2017-05-16 14:29:38 +00:00
|
|
|
<i aria-hidden="true" class="fa fa-sign-out"></i>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="stats">
|
2017-05-26 00:49:46 +00:00
|
|
|
<span class="number-projects">
|
2017-05-16 14:29:38 +00:00
|
|
|
<i aria-hidden="true" class="fa fa-bookmark"></i>
|
|
|
|
{{group.numberProjects}}
|
|
|
|
</span>
|
2017-05-26 00:49:46 +00:00
|
|
|
<span class="number-members">
|
2017-05-16 14:29:38 +00:00
|
|
|
<i aria-hidden="true" class="fa fa-users"></i>
|
|
|
|
{{group.numberMembers}}
|
|
|
|
</span>
|
2017-05-26 00:49:46 +00:00
|
|
|
<span class="group-visibility">
|
2017-05-16 14:29:38 +00:00
|
|
|
<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">
|
2017-05-25 02:04:31 +00:00
|
|
|
<a :href="group.webUrl">{{fullPath}}</a>
|
2017-05-16 14:29:38 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="description">
|
|
|
|
{{group.description}}
|
|
|
|
</div>
|
2017-05-09 23:10:19 +00:00
|
|
|
|
2017-05-25 02:04:31 +00:00
|
|
|
<group-folder v-if="group.isOpen" :groups="group.subGroups" :baseGroup="group" />
|
2017-05-09 23:10:19 +00:00
|
|
|
</li>
|
2017-05-06 04:15:04 +00:00
|
|
|
</template>
|