components issuable_stats.vue

0% Statements 0/2
0% Branches 0/2
0% Functions 0/2
0% Lines 0/2
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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  <script>
import { GlLink, GlBadge, GlSprintf } from '@gitlab/ui';
 
export default {
  name: 'IssuableStats',
  components: {
    GlLink,
    GlBadge,
    GlSprintf,
  },
  props: {
    label: {
      type: String,
      required: true,
    },
    total: {
      type: Number,
      required: true,
    },
    closed: {
      type: Number,
      required: true,
    },
    merged: {
      type: Number,
      required: false,
      default: null,
    },
    openedPath: {
      type: String,
      required: false,
      default: '',
    },
    closedPath: {
      type: String,
      required: false,
      default: '',
    },
    mergedPath: {
      type: String,
      required: false,
      default: '',
    },
  },
  computed: {
    opened() {
      return this.total - (this.closed + (this.merged || 0));
    },
    showMerged() {
      return this.merged != null;
    },
  },
};
</script>
 
<template>
  <div class="gl-display-flex gl-flex-direction-column gl-flex-shrink-0 gl-mr-6 gl-mb-5">
    <span class="gl-mb-2">
      {{ label }}
      <gl-badge variant="muted" size="sm">{{ total }}</gl-badge>
    </span>
    <div class="gl-display-flex">
      <span class="gl-white-space-pre-wrap" data-testid="open-stat">
        <gl-sprintf :message="__('Open: %{open}')">
          <template #open>
            <gl-link v-if="openedPath" :href="openedPath">{{ opened }}</gl-link>
            <template v-else>{{ opened }}</template>
          </template>
        </gl-sprintf>
      </span>
 
      <template v-if="showMerged">
        <span class="gl-mx-2">&bull;</span>
 
        <span class="gl-white-space-pre-wrap" data-testid="merged-stat">
          <gl-sprintf :message="__('Merged: %{merged}')">
            <template #merged>
              <gl-link v-if="mergedPath" :href="mergedPath">{{ merged }}</gl-link>
              <template v-else>{{ merged }}</template>
            </template>
          </gl-sprintf>
        </span>
      </template>
 
      <span class="gl-mx-2">&bull;</span>
 
      <span class="gl-white-space-pre-wrap" data-testid="closed-stat">
        <gl-sprintf :message="__('Closed: %{closed}')">
          <template #closed>
            <gl-link v-if="closedPath" :href="closedPath">{{ closed }}</gl-link>
            <template v-else>{{ closed }}</template>
          </template>
        </gl-sprintf>
      </span>
    </div>
  </div>
</template>