components approvers_column.vue

22.22% Statements 2/9
0% Branches 0/2
0% Functions 0/6
28.57% Lines 2/7
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  
 
 
 
3x
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  <script>
import { GlAvatarLink, GlAvatar, GlAvatarsInline, GlTooltipDirective } from '@gitlab/ui';
import { n__ } from '~/locale';
 
export const MAX_VISIBLE_AVATARS_DEFAULT = 3;
export const MAX_VISIBLE_AVATARS_COLLAPSED = 2;
 
export default {
  name: 'ApproversColumn',
  components: {
    GlAvatarLink,
    GlAvatar,
    GlAvatarsInline,
  },
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  props: {
    approvers: {
      type: Array,
      required: false,
      default: () => [],
    },
  },
  computed: {
    maxVisible() {
      return this.approvers.length > MAX_VISIBLE_AVATARS_DEFAULT
        ? MAX_VISIBLE_AVATARS_COLLAPSED
        : MAX_VISIBLE_AVATARS_DEFAULT;
    },
    hasMultipleApprovers() {
      return this.approvers.length > 1;
    },
    hasSingleApprover() {
      return this.approvers.length === 1;
    },
    firstApprover() {
      return this.approvers[0];
    },
    approversBadgeSrOnlyText() {
      return n__(
        '%d additional approver',
        '%d additional approvers',
        this.approvers.length - this.maxVisible,
      );
    },
  },
  avatarSize: 24,
  badgeTooltipMaxChars: 50,
};
</script>
 
<template>
  <div>
    <gl-avatars-inline
      v-if="hasMultipleApprovers"
      collapsed
      :avatars="approvers"
      :max-visible="maxVisible"
      :avatar-size="$options.avatarSize"
      badge-tooltip-prop="name"
      :badge-tooltip-max-chars="$options.badgeTooltipMaxChars"
      :badge-sr-only-text="approversBadgeSrOnlyText"
    >
      <template #avatar="{ avatar }">
        <gl-avatar-link v-gl-tooltip target="_blank" :href="avatar.web_url" :title="avatar.name">
          <gl-avatar :src="avatar.avatar_url" :size="$options.avatarSize" />
        </gl-avatar-link>
      </template>
    </gl-avatars-inline>
    <gl-avatar-link
      v-else-if="hasSingleApprover"
      v-gl-tooltip
      target="_blank"
      :href="firstApprover.web_url"
      :title="firstApprover.name"
    >
      <gl-avatar :src="firstApprover.avatar_url" :size="$options.avatarSize" />
    </gl-avatar-link>
    <template v-else> &ndash; </template>
  </div>
</template>