debian-mirror-gitlab/app/assets/javascripts/members/components/avatars/user_avatar.vue

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

112 lines
2.6 KiB
Vue
Raw Normal View History

2021-01-03 14:25:43 +05:30
<script>
import {
GlAvatarLink,
GlAvatarLabeled,
GlBadge,
GlSafeHtmlDirective as SafeHtml,
} from '@gitlab/ui';
2021-02-22 17:27:13 +05:30
import { generateBadges } from 'ee_else_ce/members/utils';
2021-03-11 19:13:27 +05:30
import { glEmojiTag } from '~/emoji';
2021-01-03 14:25:43 +05:30
import { __ } from '~/locale';
2022-04-04 11:22:00 +05:30
import { isUserBusy } from '~/set_status_modal/utils';
2021-02-22 17:27:13 +05:30
import { AVATAR_SIZE } from '../../constants';
2021-01-03 14:25:43 +05:30
export default {
name: 'UserAvatar',
2022-04-04 11:22:00 +05:30
i18n: {
busy: __('Busy'),
},
2021-01-03 14:25:43 +05:30
avatarSize: AVATAR_SIZE,
orphanedUserLabel: __('Orphaned member'),
safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
components: {
GlAvatarLink,
GlAvatarLabeled,
GlBadge,
},
directives: {
SafeHtml,
},
2021-04-29 21:17:54 +05:30
inject: ['canManageMembers'],
2021-01-03 14:25:43 +05:30
props: {
member: {
type: Object,
required: true,
},
isCurrentUser: {
type: Boolean,
required: true,
},
},
computed: {
user() {
return this.member.user;
},
badges() {
2021-04-17 20:07:23 +05:30
return generateBadges({
member: this.member,
isCurrentUser: this.isCurrentUser,
canManageMembers: this.canManageMembers,
}).filter((badge) => badge.show);
2021-01-03 14:25:43 +05:30
},
statusEmoji() {
2022-04-04 11:22:00 +05:30
return this.user?.showStatus && this.user?.status?.emoji;
},
isUserBusy() {
return isUserBusy(this.user?.availability || '');
2021-01-03 14:25:43 +05:30
},
},
methods: {
glEmojiTag,
},
};
</script>
<template>
<gl-avatar-link
v-if="user"
class="js-user-link"
:href="user.webUrl"
:data-user-id="user.id"
:data-username="user.username"
>
<gl-avatar-labeled
:label="user.name"
:sub-label="`@${user.username}`"
:src="user.avatarUrl"
:alt="user.name"
:size="$options.avatarSize"
:entity-name="user.name"
:entity-id="user.id"
>
<template #meta>
2022-04-04 11:22:00 +05:30
<div v-if="isUserBusy" class="gl-p-1">
<span class="gl-text-gray-500 gl-font-sm gl-font-weight-normal"
>({{ $options.i18n.busy }})</span
>
</div>
2021-01-03 14:25:43 +05:30
<div v-if="statusEmoji" class="gl-p-1">
2021-03-11 19:13:27 +05:30
<span
v-safe-html:[$options.safeHtmlConfig]="glEmojiTag(statusEmoji)"
class="user-status-emoji gl-mr-0"
></span>
2021-01-03 14:25:43 +05:30
</div>
<div v-for="badge in badges" :key="badge.text" class="gl-p-1">
<gl-badge size="sm" :variant="badge.variant">
{{ badge.text }}
</gl-badge>
</div>
</template>
</gl-avatar-labeled>
</gl-avatar-link>
<gl-avatar-labeled
v-else
:label="$options.orphanedUserLabel"
:alt="$options.orphanedUserLabel"
:size="$options.avatarSize"
:entity-name="$options.orphanedUserLabel"
:entity-id="member.id"
/>
</template>