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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
<script>
import { GlLink, GlIcon, GlTooltipDirective } from '@gitlab/ui';
import {
dateInWords,
getTimeRemainingInWords,
isInFuture,
isInPast,
isToday,
} from '~/lib/utils/datetime_utility';
import { convertToCamelCase } from '~/lib/utils/text_utility';
import { __ } from '~/locale';
export default {
components: {
GlLink,
GlIcon,
IssueHealthStatus: () =>
import('ee_component/related_items_tree/components/issue_health_status.vue'),
WeightCount: () => import('ee_component/issues/components/weight_count.vue'),
},
directives: {
GlTooltip: GlTooltipDirective,
},
inject: {
hasIssuableHealthStatusFeature: {
default: false,
},
},
props: {
issue: {
type: Object,
required: true,
},
},
computed: {
milestoneDate() {
if (this.issue.milestone?.dueDate) {
const { dueDate, startDate } = this.issue.milestone;
const date = dateInWords(new Date(dueDate), true);
const remainingTime = this.milestoneRemainingTime(dueDate, startDate);
return `${date} (${remainingTime})`;
}
return __('Milestone');
},
dueDate() {
return this.issue.dueDate && dateInWords(new Date(this.issue.dueDate), true);
},
isDueDateInPast() {
return isInPast(new Date(this.issue.dueDate));
},
timeEstimate() {
return this.issue.timeStats?.humanTimeEstimate;
},
showHealthStatus() {
return this.hasIssuableHealthStatusFeature && this.issue.healthStatus;
},
healthStatus() {
return convertToCamelCase(this.issue.healthStatus);
},
},
methods: {
milestoneRemainingTime(dueDate, startDate) {
const due = new Date(dueDate);
const start = new Date(startDate);
if (dueDate && isInPast(due)) {
return __('Past due');
} else if (dueDate && isToday(due)) {
return __('Today');
} else if (startDate && isInFuture(start)) {
return __('Upcoming');
} else if (dueDate) {
return getTimeRemainingInWords(due);
}
return '';
},
},
};
</script>
<template>
<span>
<span
v-if="issue.milestone"
class="issuable-milestone gl-display-none gl-sm-display-inline-block! gl-mr-3"
data-testid="issuable-milestone"
>
<gl-link v-gl-tooltip :href="issue.milestone.webUrl" :title="milestoneDate">
<gl-icon name="clock" />
{{ issue.milestone.title }}
</gl-link>
</span>
<span
v-if="issue.dueDate"
v-gl-tooltip
class="issuable-due-date gl-display-none gl-sm-display-inline-block! gl-mr-3"
:class="{ 'gl-text-red-500': isDueDateInPast }"
:title="__('Due date')"
data-testid="issuable-due-date"
>
<gl-icon name="calendar" />
{{ dueDate }}
</span>
<span
v-if="timeEstimate"
v-gl-tooltip
class="gl-display-none gl-sm-display-inline-block! gl-mr-3"
:title="__('Estimate')"
data-testid="time-estimate"
>
<gl-icon name="timer" />
{{ timeEstimate }}
</span>
<weight-count
class="gl-display-none gl-sm-display-inline-block gl-mr-3"
:weight="issue.weight"
/>
<issue-health-status
v-if="showHealthStatus"
class="gl-display-none gl-sm-display-inline-block"
:health-status="healthStatus"
/>
</span>
</template>
|
