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

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

229 lines
6.7 KiB
Vue
Raw Normal View History

2017-09-10 17:25:29 +05:30
<script>
2021-04-17 20:07:23 +05:30
import {
2021-09-30 23:02:18 +05:30
GlAvatar,
2021-04-17 20:07:23 +05:30
GlLoadingIcon,
GlBadge,
GlIcon,
GlTooltipDirective,
GlSafeHtmlDirective,
} from '@gitlab/ui';
import { visitUrl } from '~/lib/utils/url_utility';
import UserAccessRoleBadge from '~/vue_shared/components/user_access_role_badge.vue';
2022-06-21 17:19:12 +05:30
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
2019-09-30 21:07:59 +05:30
import { VISIBILITY_TYPE_ICON, GROUP_VISIBILITY_TYPE } from '../constants';
2021-03-11 19:13:27 +05:30
import eventHub from '../event_hub';
2018-03-17 18:26:18 +05:30
2021-03-11 19:13:27 +05:30
import itemActions from './item_actions.vue';
2018-03-17 18:26:18 +05:30
import itemCaret from './item_caret.vue';
import itemStats from './item_stats.vue';
2021-03-11 19:13:27 +05:30
import itemTypeIcon from './item_type_icon.vue';
2020-06-23 00:09:42 +05:30
2017-09-10 17:25:29 +05:30
export default {
2018-03-17 18:26:18 +05:30
directives: {
2021-01-29 00:20:46 +05:30
GlTooltip: GlTooltipDirective,
2021-04-17 20:07:23 +05:30
SafeHtml: GlSafeHtmlDirective,
2018-03-17 18:26:18 +05:30
},
2017-09-10 17:25:29 +05:30
components: {
2021-09-30 23:02:18 +05:30
GlAvatar,
2020-03-13 15:44:24 +05:30
GlBadge,
2019-09-30 21:07:59 +05:30
GlLoadingIcon,
2021-04-17 20:07:23 +05:30
GlIcon,
UserAccessRoleBadge,
2021-10-27 15:23:28 +05:30
ComplianceFrameworkLabel: () =>
import(
'ee_component/vue_shared/components/compliance_framework_label/compliance_framework_label.vue'
),
2018-03-17 18:26:18 +05:30
itemCaret,
itemTypeIcon,
itemActions,
2022-04-04 11:22:00 +05:30
itemStats,
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
},
2018-11-20 20:47:30 +05:30
action: {
type: String,
required: false,
default: '',
},
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;
},
2021-10-27 15:23:28 +05:30
hasComplianceFramework() {
return Boolean(this.group.complianceFramework?.name);
},
2018-03-17 18:26:18 +05:30
isGroup() {
return this.group.type === 'group';
},
2020-03-13 15:44:24 +05:30
isGroupPendingRemoval() {
return this.group.type === 'group' && this.group.pendingRemoval;
},
2019-09-30 21:07:59 +05:30
visibilityIcon() {
return VISIBILITY_TYPE_ICON[this.group.visibility];
},
visibilityTooltip() {
return GROUP_VISIBILITY_TYPE[this.group.visibility];
},
2021-02-22 17:27:13 +05:30
microdata() {
return this.group.microdata || {};
},
2021-10-27 15:23:28 +05:30
complianceFramework() {
return this.group.complianceFramework;
},
2022-04-04 11:22:00 +05:30
showActionsMenu() {
return this.isGroup && (this.group.canEdit || this.group.canRemove || this.group.canLeave);
},
2018-03-17 18:26:18 +05:30
},
methods: {
onClickRowGroup(e) {
const NO_EXPAND_CLS = 'no-expand';
2018-11-20 20:47:30 +05:30
const targetClasses = e.target.classList;
const parentElClasses = e.target.parentElement.classList;
if (!(targetClasses.contains(NO_EXPAND_CLS) || parentElClasses.contains(NO_EXPAND_CLS))) {
2018-03-17 18:26:18 +05:30
if (this.hasChildren) {
2018-11-20 20:47:30 +05:30
eventHub.$emit(`${this.action}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
}
}
},
},
2021-04-17 20:07:23 +05:30
safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
2022-06-21 17:19:12 +05:30
AVATAR_SHAPE_OPTION_RECT,
2017-09-10 17:25:29 +05:30
};
</script>
<template>
2021-02-22 17:27:13 +05:30
<li
:id="groupDomId"
:class="rowClass"
class="group-row"
:itemprop="microdata.itemprop"
:itemtype="microdata.itemtype"
:itemscope="microdata.itemscope"
@click.stop="onClickRowGroup"
>
2017-09-10 17:25:29 +05:30
<div
2018-11-08 19:23:39 +05:30
:class="{ 'project-row-contents': !isGroup }"
2020-04-08 14:13:33 +05:30
class="group-row-contents d-flex align-items-center py-2 pr-3"
2018-11-18 11:00:15 +05:30
>
2020-07-28 23:09:34 +05:30
<div class="folder-toggle-wrap gl-mr-2 d-flex align-items-center">
2019-02-15 15:39:39 +05:30
<item-caret :is-group-open="group.isOpen" />
2022-06-21 17:19:12 +05:30
<item-type-icon :item-type="group.type" />
2017-09-10 17:25:29 +05:30
</div>
2019-09-30 21:07:59 +05:30
<gl-loading-icon
v-if="group.isChildrenLoading"
2020-04-08 14:13:33 +05:30
size="lg"
2020-06-23 00:09:42 +05:30
class="d-none d-sm-inline-flex flex-shrink-0 gl-mr-3"
2019-09-30 21:07:59 +05:30
/>
2021-09-30 23:02:18 +05:30
<a
:class="{ 'gl-sm-display-flex': !group.isChildrenLoading }"
class="gl-display-none gl-text-decoration-none! gl-mr-3"
:href="group.relativePath"
:aria-label="group.name"
2018-03-17 18:26:18 +05:30
>
2021-09-30 23:02:18 +05:30
<gl-avatar
2022-06-21 17:19:12 +05:30
:shape="$options.AVATAR_SHAPE_OPTION_RECT"
2021-09-30 23:02:18 +05:30
:entity-name="group.name"
:src="group.avatarUrl"
:alt="group.name"
:size="32"
:itemprop="microdata.imageItemprop"
/>
</a>
2019-09-30 21:07:59 +05:30
<div class="group-text-container d-flex flex-fill align-items-center">
<div class="group-text flex-grow-1 flex-shrink-1">
2020-06-23 00:09:42 +05:30
<div class="d-flex align-items-center flex-wrap title namespace-title gl-mr-3">
2019-09-30 21:07:59 +05:30
<a
2021-01-29 00:20:46 +05:30
v-gl-tooltip.bottom
2021-02-22 17:27:13 +05:30
data-testid="group-name"
2019-09-30 21:07:59 +05:30
:href="group.relativePath"
:title="group.fullName"
2021-04-17 20:07:23 +05:30
class="no-expand gl-mr-3 gl-mt-3 gl-text-gray-900!"
2021-02-22 17:27:13 +05:30
:itemprop="microdata.nameItemprop"
2021-04-17 20:07:23 +05:30
>
{{
2019-09-30 21:07:59 +05:30
// ending bracket must be by closing tag to prevent
// link hover text-decoration from over-extending
group.name
2021-04-17 20:07:23 +05:30
}}
</a>
<gl-icon
v-gl-tooltip.hover.bottom
class="gl-display-inline-flex gl-align-items-center gl-mr-3 gl-mt-3 gl-text-gray-500"
:name="visibilityIcon"
2019-09-30 21:07:59 +05:30
:title="visibilityTooltip"
2021-04-17 20:07:23 +05:30
data-testid="group-visibility-icon"
2019-09-30 21:07:59 +05:30
/>
2021-04-17 20:07:23 +05:30
<user-access-role-badge v-if="group.permission" class="gl-mt-3">
2019-09-30 21:07:59 +05:30
{{ group.permission }}
2021-04-17 20:07:23 +05:30
</user-access-role-badge>
2021-10-27 15:23:28 +05:30
<compliance-framework-label
v-if="hasComplianceFramework"
class="gl-mt-3"
:name="complianceFramework.name"
:color="complianceFramework.color"
:description="complianceFramework.description"
/>
2019-09-30 21:07:59 +05:30
</div>
<div v-if="group.description" class="description">
2021-02-22 17:27:13 +05:30
<span
2021-04-17 20:07:23 +05:30
v-safe-html:[$options.safeHtmlConfig]="group.description"
2021-02-22 17:27:13 +05:30
:itemprop="microdata.descriptionItemprop"
data-testid="group-description"
>
</span>
2019-09-30 21:07:59 +05:30
</div>
2018-11-18 11:00:15 +05:30
</div>
2020-03-13 15:44:24 +05:30
<div v-if="isGroupPendingRemoval">
2021-09-30 23:02:18 +05:30
<gl-badge variant="warning">{{ __('pending deletion') }}</gl-badge>
2020-03-13 15:44:24 +05:30
</div>
2022-04-04 11:22:00 +05:30
<div
class="metadata gl-display-flex gl-flex-grow-1 gl-flex-shrink-0 gl-flex-wrap justify-content-md-between"
>
<item-stats
:item="group"
class="group-stats gl-mt-2 gl-display-none gl-md-display-flex gl-align-items-center"
/>
2021-09-04 01:27:46 +05:30
<item-actions
2022-04-04 11:22:00 +05:30
v-if="showActionsMenu"
2021-09-04 01:27:46 +05:30
:group="group"
:parent-group="parentGroup"
:action="action"
/>
2018-11-18 11:00:15 +05:30
</div>
2018-03-17 18:26:18 +05:30
</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"
2018-11-20 20:47:30 +05:30
:action="action"
2017-09-10 17:25:29 +05:30
/>
</li>
</template>