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> |