All files / app/assets/javascripts/sidebar/components/time_tracking comparison_pane.vue

0% Statements 0/9
0% Branches 0/6
0% Functions 0/7
0% Lines 0/9

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                                                                                                                                                                                                         
<script>
import { GlProgressBar, GlTooltipDirective } from '@gitlab/ui';
import { parseSeconds, stringifyTime } from '~/lib/utils/datetime_utility';
import { s__, sprintf } from '~/locale';
 
export default {
  name: 'TimeTrackingComparisonPane',
  components: {
    GlProgressBar,
  },
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  props: {
    timeSpent: {
      type: Number,
      required: true,
    },
    timeEstimate: {
      type: Number,
      required: true,
    },
    timeSpentHumanReadable: {
      type: String,
      required: true,
    },
    timeEstimateHumanReadable: {
      type: String,
      required: true,
    },
    limitToHours: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  computed: {
    parsedTimeRemaining() {
      const diffSeconds = this.timeEstimate - this.timeSpent;
      return parseSeconds(diffSeconds, { limitToHours: this.limitToHours });
    },
    timeRemainingHumanReadable() {
      return stringifyTime(this.parsedTimeRemaining);
    },
    timeRemainingTooltip() {
      const { timeRemainingHumanReadable, timeRemainingMinutes } = this;
      return timeRemainingMinutes < 0
        ? sprintf(s__('TimeTracking|Over by %{timeRemainingHumanReadable}'), {
            timeRemainingHumanReadable,
          })
        : sprintf(s__('TimeTracking|Time remaining: %{timeRemainingHumanReadable}'), {
            timeRemainingHumanReadable,
          });
    },
    /* Diff values for comparison meter */
    timeRemainingMinutes() {
      return this.timeEstimate - this.timeSpent;
    },
    timeRemainingPercent() {
      return Math.floor((this.timeSpent / this.timeEstimate) * 100);
    },
    timeRemainingStatusClass() {
      return this.timeEstimate >= this.timeSpent ? 'within_estimate' : 'over_estimate';
    },
    progressBarVariant() {
      return this.timeRemainingPercent > 100 ? 'danger' : 'primary';
    },
  },
};
</script>
 
<template>
  <div class="gl-mt-2" data-testid="timeTrackingComparisonPane">
    <div
      v-gl-tooltip
      data-testid="compareMeter"
      :title="timeRemainingTooltip"
      :class="timeRemainingStatusClass"
      class="compare-meter"
    >
      <gl-progress-bar
        data-testid="timeRemainingProgress"
        :value="timeRemainingPercent"
        :variant="progressBarVariant"
      />
      <div
        class="compare-display-container gl-display-flex gl-justify-content-space-between gl-mt-2"
      >
        <div class="gl-float-left">
          <span class="gl-text-gray-400">{{ s__('TimeTracking|Spent') }}</span>
          <span class="compare-value spent">{{ timeSpentHumanReadable }}</span>
        </div>
        <div class="estimated gl-float-right">
          <span class="gl-text-gray-400">{{ s__('TimeTrackingEstimated|Est') }}</span>
          <span class="compare-value">{{ timeEstimateHumanReadable }}</span>
        </div>
      </div>
    </div>
  </div>
</template>