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
|
<script>
import { GlLink, GlIcon, GlTooltipDirective } from '@gitlab/ui';
import { IssuableStatus } from '~/issues/constants';
import {
dateInWords,
getTimeRemainingInWords,
isInFuture,
isInPast,
isToday,
newDateAsLocaleTime,
} from '~/lib/utils/datetime_utility';
import { __ } from '~/locale';
export default {
components: {
GlLink,
GlIcon,
},
directives: {
GlTooltip: GlTooltipDirective,
},
props: {
issue: {
type: Object,
required: true,
},
},
computed: {
milestoneDate() {
if (this.issue.milestone?.dueDate) {
const { dueDate, startDate } = this.issue.milestone;
const date = dateInWords(newDateAsLocaleTime(dueDate), true);
const remainingTime = this.milestoneRemainingTime(dueDate, startDate);
return `${date} (${remainingTime})`;
}
return __('Milestone');
},
milestoneLink() {
return this.issue.milestone.webPath || this.issue.milestone.webUrl;
},
dueDate() {
return this.issue.dueDate && dateInWords(newDateAsLocaleTime(this.issue.dueDate), true);
},
showDueDateInRed() {
return (
isInPast(newDateAsLocaleTime(this.issue.dueDate)) &&
this.issue.state !== IssuableStatus.Closed
);
},
timeEstimate() {
return this.issue.humanTimeEstimate || this.issue.timeStats?.humanTimeEstimate;
},
},
methods: {
milestoneRemainingTime(dueDate, startDate) {
const due = newDateAsLocaleTime(dueDate);
const start = newDateAsLocaleTime(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-mr-3"
data-testid="issuable-milestone"
>
<gl-link v-gl-tooltip :href="milestoneLink" :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-mr-3"
:class="{ 'gl-text-red-500': showDueDateInRed }"
:title="__('Due date')"
data-testid="issuable-due-date"
>
<gl-icon name="calendar" />
{{ dueDate }}
</span>
<span
v-if="timeEstimate"
v-gl-tooltip
class="gl-mr-3"
:title="__('Estimate')"
data-testid="time-estimate"
>
<gl-icon name="timer" />
{{ timeEstimate }}
</span>
<slot></slot>
</span>
</template>
|
