All files / app/assets/javascripts/members/components/avatars user_avatar.vue

100% Statements 5/5
100% Branches 0/0
100% Functions 5/5
100% Lines 5/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109              11x                                                             27x     26x             26x     26x                                                                                                                  
<script>
import { GlAvatarLink, GlAvatarLabeled, GlBadge } from '@gitlab/ui';
import SafeHtml from '~/vue_shared/directives/safe_html';
import { generateBadges } from 'ee_else_ce/members/utils';
import { glEmojiTag } from '~/emoji';
import { __ } from '~/locale';
import { isUserBusy } from '~/set_status_modal/utils';
import { AVATAR_SIZE } from '../../constants';
 
export default {
  name: 'UserAvatar',
  i18n: {
    busy: __('Busy'),
  },
  avatarSize: AVATAR_SIZE,
  orphanedUserLabel: __('Orphaned member'),
  safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
  components: {
    GlAvatarLink,
    GlAvatarLabeled,
    GlBadge,
  },
  directives: {
    SafeHtml,
  },
  inject: ['canManageMembers'],
  props: {
    member: {
      type: Object,
      required: true,
    },
    isCurrentUser: {
      type: Boolean,
      required: true,
    },
  },
  computed: {
    user() {
      return this.member.user;
    },
    badges() {
      return generateBadges({
        member: this.member,
        isCurrentUser: this.isCurrentUser,
        canManageMembers: this.canManageMembers,
      }).filter((badge) => badge.show);
    },
    statusEmoji() {
      return this.user?.showStatus && this.user?.status?.emoji;
    },
    isUserBusy() {
      return isUserBusy(this.user?.availability || '');
    },
  },
  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"
    :data-email="user.email"
  >
    <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>
        <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>
        <div v-if="statusEmoji" class="gl-p-1">
          <span
            v-safe-html:[$options.safeHtmlConfig]="glEmojiTag(statusEmoji)"
            class="user-status-emoji gl-mr-0"
          ></span>
        </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>