debian-mirror-gitlab/app/assets/javascripts/groups/components/group_item.vue

157 lines
3.6 KiB
Vue
Raw Normal View History

2017-09-10 17:25:29 +05:30
<script>
2018-03-17 18:26:18 +05:30
import { visitUrl } from '../../lib/utils/url_utility';
import tooltip from '../../vue_shared/directives/tooltip';
import identicon from '../../vue_shared/components/identicon.vue';
2017-09-10 17:25:29 +05:30
import eventHub from '../event_hub';
2018-03-17 18:26:18 +05:30
import itemCaret from './item_caret.vue';
import itemTypeIcon from './item_type_icon.vue';
import itemStats from './item_stats.vue';
import itemActions from './item_actions.vue';
2017-09-10 17:25:29 +05:30
export default {
2018-03-17 18:26:18 +05:30
directives: {
tooltip,
},
2017-09-10 17:25:29 +05:30
components: {
2018-03-17 18:26:18 +05:30
identicon,
itemCaret,
itemTypeIcon,
itemStats,
itemActions,
2017-09-10 17:25:29 +05:30
},
props: {
2018-03-17 18:26:18 +05:30
parentGroup: {
2017-09-10 17:25:29 +05:30
type: Object,
required: false,
default: () => ({}),
},
2018-03-17 18:26:18 +05:30
group: {
2017-09-10 17:25:29 +05:30
type: Object,
2018-03-17 18:26:18 +05:30
required: true,
2017-09-10 17:25:29 +05:30
},
},
computed: {
groupDomId() {
return `group-${this.group.id}`;
},
rowClass() {
return {
'is-open': this.group.isOpen,
2018-03-17 18:26:18 +05:30
'has-children': this.hasChildren,
'has-description': this.group.description,
'being-removed': this.group.isBeingRemoved,
2017-09-10 17:25:29 +05:30
};
},
2018-03-17 18:26:18 +05:30
hasChildren() {
return this.group.childrenCount > 0;
2017-09-10 17:25:29 +05:30
},
2018-03-17 18:26:18 +05:30
hasAvatar() {
return this.group.avatarUrl !== null;
},
isGroup() {
return this.group.type === 'group';
},
},
methods: {
onClickRowGroup(e) {
const NO_EXPAND_CLS = 'no-expand';
if (!(e.target.classList.contains(NO_EXPAND_CLS) ||
e.target.parentElement.classList.contains(NO_EXPAND_CLS))) {
if (this.hasChildren) {
eventHub.$emit('toggleChildren', this.group);
2017-09-10 17:25:29 +05:30
} else {
2018-03-17 18:26:18 +05:30
visitUrl(this.group.relativePath);
2017-09-10 17:25:29 +05:30
}
}
},
},
};
</script>
<template>
<li
@click.stop="onClickRowGroup"
:id="groupDomId"
:class="rowClass"
2018-03-17 18:26:18 +05:30
class="group-row"
>
2017-09-10 17:25:29 +05:30
<div
2018-03-17 18:26:18 +05:30
class="group-row-contents"
:class="{ 'project-row-contents': !isGroup }">
<item-actions
v-if="isGroup"
:group="group"
:parent-group="parentGroup"
/>
<item-stats
:item="group"
/>
2017-09-10 17:25:29 +05:30
<div
2018-03-17 18:26:18 +05:30
class="folder-toggle-wrap"
>
<item-caret
:is-group-open="group.isOpen"
/>
<item-type-icon
:item-type="group.type"
:is-group-open="group.isOpen"
/>
2017-09-10 17:25:29 +05:30
</div>
<div
2018-03-17 18:26:18 +05:30
class="avatar-container prepend-top-8 prepend-left-5 s24 hidden-xs"
:class="{ 'content-loading': group.isChildrenLoading }"
>
2017-09-10 17:25:29 +05:30
<a
2018-03-17 18:26:18 +05:30
:href="group.relativePath"
class="no-expand"
>
2017-09-10 17:25:29 +05:30
<img
v-if="hasAvatar"
2018-03-17 18:26:18 +05:30
class="avatar s24"
2017-09-10 17:25:29 +05:30
:src="group.avatarUrl"
/>
2018-03-17 18:26:18 +05:30
<identicon
2017-09-10 17:25:29 +05:30
v-else
2018-03-17 18:26:18 +05:30
size-class="s24"
:entity-id="group.id"
2017-09-10 17:25:29 +05:30
:entity-name="group.name"
/>
</a>
</div>
<div
2018-03-17 18:26:18 +05:30
class="title namespace-title"
>
2017-09-10 17:25:29 +05:30
<a
2018-03-17 18:26:18 +05:30
v-tooltip
:href="group.relativePath"
:title="group.fullName"
class="no-expand"
data-placement="bottom"
>{{
// ending bracket must be by closing tag to prevent
// link hover text-decoration from over-extending
group.name
}}</a>
<span
v-if="group.permission"
class="user-access-role"
>
{{ group.permission }}
</span>
2017-09-10 17:25:29 +05:30
</div>
<div
2018-03-17 18:26:18 +05:30
v-if="group.description"
class="description">
<span v-html="group.description">
</span>
</div>
2017-09-10 17:25:29 +05:30
</div>
<group-folder
2018-03-17 18:26:18 +05:30
v-if="group.isOpen && hasChildren"
:parent-group="group"
:groups="group.children"
2017-09-10 17:25:29 +05:30
/>
</li>
</template>