All files / app/assets/javascripts/boards/components issue_due_date.vue

100% Statements 29/29
100% Branches 16/16
100% Functions 7/7
100% Lines 29/29

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 99 100 101 102 103 104 105  32x 32x 32x           32x                                                           43x 43x 43x   43x 4x     39x     43x   43x 1x 42x 1x 41x 1x 40x 1x     39x     43x     43x 43x     51x 37x     43x 43x   43x           228x                                      
<script>
import { GlTooltip, GlIcon } from '@gitlab/ui';
import dateFormat from 'dateformat';
import {
  getDayDifference,
  getTimeago,
  dateInWords,
  parsePikadayDate,
} from '~/lib/utils/datetime_utility';
import { __ } from '~/locale';
 
export default {
  components: {
    GlIcon,
    GlTooltip,
  },
  props: {
    closed: {
      type: Boolean,
      required: false,
      default: false,
    },
    date: {
      type: String,
      required: true,
    },
    cssClass: {
      type: String,
      required: false,
      default: '',
    },
    tooltipPlacement: {
      type: String,
      required: false,
      default: 'bottom',
    },
  },
  computed: {
    title() {
      const timeago = getTimeago();
      const { timeDifference, standardDateFormat } = this;
      const formattedDate = standardDateFormat;
 
      if (timeDifference >= -1 && timeDifference < 7) {
        return `${timeago.format(this.issueDueDate)} (${formattedDate})`;
      }
 
      return timeago.format(this.issueDueDate);
    },
    body() {
      const { timeDifference, issueDueDate, standardDateFormat } = this;
 
      if (timeDifference === 0) {
        return __('Today');
      } else if (timeDifference === 1) {
        return __('Tomorrow');
      } else if (timeDifference === -1) {
        return __('Yesterday');
      } else if (timeDifference > 0 && timeDifference < 7) {
        return dateFormat(issueDueDate, 'dddd');
      }
 
      return standardDateFormat;
    },
    issueDueDate() {
      return parsePikadayDate(this.date);
    },
    timeDifference() {
      const today = new Date();
      return getDayDifference(today, this.issueDueDate);
    },
    isPastDue() {
      if (this.timeDifference >= 0 || this.closed) return false;
      return true;
    },
    standardDateFormat() {
      const today = new Date();
      const isDueInCurrentYear = today.getFullYear() === this.issueDueDate.getFullYear();
 
      return dateInWords(this.issueDueDate, true, isDueInCurrentYear);
    },
  },
};
</script>
 
<template>
  <span>
    <span ref="issueDueDate" :class="cssClass" class="board-card-info card-number">
      <gl-icon
        :class="{ 'text-danger': isPastDue }"
        class="board-card-info-icon gl-mr-2"
        name="calendar"
      />
      <time :class="{ 'text-danger': isPastDue }" datetime="date" class="board-card-info-text">{{
        body
      }}</time>
    </span>
    <gl-tooltip :target="() => $refs.issueDueDate" :placement="tooltipPlacement">
      <span class="bold">{{ __('Due date') }}</span>
      <br />
      <span :class="{ 'text-danger-muted': isPastDue }">{{ title }}</span>
    </gl-tooltip>
  </span>
</template>