debian-mirror-gitlab/app/assets/javascripts/issuable/components/issue_milestone.vue

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

94 lines
2.6 KiB
Vue
Raw Normal View History

2019-02-15 15:39:39 +05:30
<script>
2020-11-24 15:15:51 +05:30
import { GlTooltip, GlIcon } from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { timeFor, parsePikadayDate, dateInWords } from '~/lib/utils/datetime_utility';
2019-02-15 15:39:39 +05:30
import { __, sprintf } from '~/locale';
import timeagoMixin from '~/vue_shared/mixins/timeago';
export default {
components: {
2020-11-24 15:15:51 +05:30
GlIcon,
2019-02-15 15:39:39 +05:30
GlTooltip,
},
mixins: [timeagoMixin],
props: {
milestone: {
type: Object,
required: true,
},
},
computed: {
2019-07-31 22:56:46 +05:30
milestoneDue() {
2019-09-04 21:01:54 +05:30
const dueDate = this.milestone.due_date || this.milestone.dueDate;
return dueDate ? parsePikadayDate(dueDate) : null;
2019-07-31 22:56:46 +05:30
},
milestoneStart() {
2019-09-04 21:01:54 +05:30
const startDate = this.milestone.start_date || this.milestone.startDate;
return startDate ? parsePikadayDate(startDate) : null;
2019-07-31 22:56:46 +05:30
},
2019-02-15 15:39:39 +05:30
isMilestoneStarted() {
if (!this.milestoneStart) {
return false;
}
return Date.now() > this.milestoneStart;
},
isMilestonePastDue() {
if (!this.milestoneDue) {
return false;
}
return Date.now() > this.milestoneDue;
},
milestoneDatesAbsolute() {
if (this.milestoneDue) {
return `(${dateInWords(this.milestoneDue)})`;
} else if (this.milestoneStart) {
return `(${dateInWords(this.milestoneStart)})`;
}
return '';
},
milestoneDatesHuman() {
if (this.milestoneStart || this.milestoneDue) {
if (this.milestoneDue) {
return timeFor(
this.milestoneDue,
sprintf(__('Expired %{expiredOn}'), {
2020-01-01 13:55:28 +05:30
expiredOn: this.timeFormatted(this.milestoneDue),
2019-02-15 15:39:39 +05:30
}),
);
}
return sprintf(
this.isMilestoneStarted ? __('Started %{startsIn}') : __('Starts %{startsIn}'),
{
2020-01-01 13:55:28 +05:30
startsIn: this.timeFormatted(this.milestoneStart),
2019-02-15 15:39:39 +05:30
},
);
}
return '';
},
},
};
</script>
<template>
<div ref="milestoneDetails" class="issue-milestone-details">
2022-06-21 17:19:12 +05:30
<gl-icon :size="16" class="gl-mr-2 flex-shrink-0" name="clock" />
2022-08-27 11:52:29 +05:30
<span class="milestone-title gl-display-inline-block gl-text-truncate">{{
milestone.title
}}</span>
2019-02-15 15:39:39 +05:30
<gl-tooltip :target="() => $refs.milestoneDetails" placement="bottom" class="js-item-milestone">
<span class="bold">{{ __('Milestone') }}</span> <br />
<span>{{ milestone.title }}</span> <br />
<span
v-if="milestoneStart || milestoneDue"
:class="{
'text-danger-muted': isMilestonePastDue,
'text-tertiary': !isMilestonePastDue,
}"
><span>{{ milestoneDatesHuman }}</span
><br /><span>{{ milestoneDatesAbsolute }}</span>
</span>
</gl-tooltip>
</div>
</template>