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

0% Statements 0/33
0% Branches 0/20
0% Functions 0/5
0% Lines 0/33

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 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121                                                                                                                                                                                                                                                 
<script>
import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
import { __, sprintf } from '~/locale';
 
export default {
  name: 'TimeTrackingCollapsedState',
  components: {
    GlIcon,
  },
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  props: {
    showComparisonState: {
      type: Boolean,
      required: true,
    },
    showSpentOnlyState: {
      type: Boolean,
      required: true,
    },
    showEstimateOnlyState: {
      type: Boolean,
      required: true,
    },
    showNoTimeTrackingState: {
      type: Boolean,
      required: true,
    },
    timeSpentHumanReadable: {
      type: String,
      required: false,
      default: '',
    },
    timeEstimateHumanReadable: {
      type: String,
      required: false,
      default: '',
    },
  },
  computed: {
    divClass() {
      Iif (this.showComparisonState) {
        return 'compare';
      }
      Iif (this.showEstimateOnlyState) {
        return 'estimate-only';
      }
      Iif (this.showSpentOnlyState) {
        return 'spend-only';
      }
      Iif (this.showNoTimeTrackingState) {
        return 'no-tracking';
      }
 
      return '';
    },
    spanClass() {
      Iif (this.showComparisonState) {
        return '';
      }
      Iif (this.showEstimateOnlyState || this.showSpentOnlyState) {
        return 'bold';
      }
      Iif (this.showNoTimeTrackingState) {
        return 'no-value collapse-truncated-title gl-pt-2 gl-px-3 gl-font-sm';
      }
 
      return '';
    },
    text() {
      Iif (this.showComparisonState) {
        return `${this.timeSpentHumanReadable} / ${this.timeEstimateHumanReadable}`;
      }
      Iif (this.showEstimateOnlyState) {
        return `-- / ${this.timeEstimateHumanReadable}`;
      }
      Iif (this.showSpentOnlyState) {
        return `${this.timeSpentHumanReadable} / --`;
      }
      Iif (this.showNoTimeTrackingState) {
        return __('None');
      }
 
      return '';
    },
    timeTrackedTooltipText() {
      let title;
      if (this.showComparisonState) {
        title = __('Time remaining');
      } else if (this.showEstimateOnlyState) {
        title = __('Estimated');
      } else Iif (this.showSpentOnlyState) {
        title = __('Time spent');
      }
 
      return sprintf('%{title}: %{text}', { title, text: this.text });
    },
    tooltipText() {
      return this.showNoTimeTrackingState ? __('Time tracking') : this.timeTrackedTooltipText;
    },
  },
};
</script>
 
<template>
  <div
    v-gl-tooltip:body.viewport.left
    :title="tooltipText"
    data-testid="collapsedState"
    class="sidebar-collapsed-icon"
  >
    <gl-icon name="timer" />
    <div class="time-tracking-collapsed-summary">
      <div :class="divClass">
        <span :class="spanClass"> {{ text }} </span>
      </div>
    </div>
  </div>
</template>