time_tracker.vue 4.01 KB
Newer Older
1
<script>
2
import TimeTrackingHelpState from './help_state.vue';
3
import TimeTrackingCollapsedState from './collapsed_state.vue';
4
import TimeTrackingSpentOnlyPane from './spent_only_pane.vue';
5
import TimeTrackingNoTrackingPane from './no_tracking_pane.vue';
6
import TimeTrackingEstimateOnlyPane from './estimate_only_pane.vue';
7
import TimeTrackingComparisonPane from './comparison_pane.vue';
8 9 10 11

import eventHub from '../../event_hub';

export default {
12 13
  name: 'IssuableTimeTracker',
  components: {
14
    TimeTrackingCollapsedState,
15
    TimeTrackingEstimateOnlyPane,
16
    TimeTrackingSpentOnlyPane,
17
    TimeTrackingNoTrackingPane,
18
    TimeTrackingComparisonPane,
19
    TimeTrackingHelpState,
20
  },
21
  props: {
22
    timeEstimate: {
23 24 25
      type: Number,
      required: true,
    },
26
    timeSpent: {
27 28 29
      type: Number,
      required: true,
    },
30
    humanTimeEstimate: {
31 32 33 34
      type: String,
      required: false,
      default: '',
    },
35
    humanTimeSpent: {
36 37 38 39
      type: String,
      required: false,
      default: '',
    },
40 41 42
    limitToHours: {
      type: Boolean,
      default: false,
43
      required: false,
44
    },
45 46 47 48 49 50 51 52 53 54 55 56
    rootPath: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      showHelp: false,
    };
  },
  computed: {
    hasTimeSpent() {
57
      return Boolean(this.timeSpent);
58 59
    },
    hasTimeEstimate() {
60
      return Boolean(this.timeEstimate);
61 62 63 64 65 66 67 68 69 70 71 72 73 74
    },
    showComparisonState() {
      return this.hasTimeEstimate && this.hasTimeSpent;
    },
    showEstimateOnlyState() {
      return this.hasTimeEstimate && !this.hasTimeSpent;
    },
    showSpentOnlyState() {
      return this.hasTimeSpent && !this.hasTimeEstimate;
    },
    showNoTimeTrackingState() {
      return !this.hasTimeEstimate && !this.hasTimeSpent;
    },
    showHelpState() {
75
      return Boolean(this.showHelp);
76 77
    },
  },
78 79 80
  created() {
    eventHub.$on('timeTracker:updateData', this.update);
  },
81 82 83 84 85
  methods: {
    toggleHelpState(show) {
      this.showHelp = show;
    },
    update(data) {
86 87 88 89 90 91
      const { timeEstimate, timeSpent, humanTimeEstimate, humanTimeSpent } = data;

      this.timeEstimate = timeEstimate;
      this.timeSpent = timeSpent;
      this.humanTimeEstimate = humanTimeEstimate;
      this.humanTimeSpent = humanTimeSpent;
92 93
    },
  },
94 95 96 97
};
</script>

<template>
Mike Greiling's avatar
Mike Greiling committed
98
  <div v-cloak class="time_tracker time-tracking-component-wrap">
99 100 101 102 103 104
    <time-tracking-collapsed-state
      :show-comparison-state="showComparisonState"
      :show-no-time-tracking-state="showNoTimeTrackingState"
      :show-help-state="showHelpState"
      :show-spent-only-state="showSpentOnlyState"
      :show-estimate-only-state="showEstimateOnlyState"
105 106
      :time-spent-human-readable="humanTimeSpent"
      :time-estimate-human-readable="humanTimeEstimate"
107 108 109
    />
    <div class="title hide-collapsed">
      {{ __('Time tracking') }}
110
      <div v-if="!showHelpState" class="help-button float-right" @click="toggleHelpState(true)">
Mike Greiling's avatar
Mike Greiling committed
111
        <i class="fa fa-question-circle" aria-hidden="true"> </i>
112 113 114
      </div>
      <div
        v-if="showHelpState"
115
        class="close-help-button float-right"
116
        @click="toggleHelpState(false)"
117
      >
Mike Greiling's avatar
Mike Greiling committed
118
        <i class="fa fa-close" aria-hidden="true"> </i>
119 120 121 122 123
      </div>
    </div>
    <div class="time-tracking-content hide-collapsed">
      <time-tracking-estimate-only-pane
        v-if="showEstimateOnlyState"
124
        :time-estimate-human-readable="humanTimeEstimate"
125 126 127
      />
      <time-tracking-spent-only-pane
        v-if="showSpentOnlyState"
128
        :time-spent-human-readable="humanTimeSpent"
129
      />
Mike Greiling's avatar
Mike Greiling committed
130
      <time-tracking-no-tracking-pane v-if="showNoTimeTrackingState" />
131 132 133 134
      <time-tracking-comparison-pane
        v-if="showComparisonState"
        :time-estimate="timeEstimate"
        :time-spent="timeSpent"
135 136
        :time-spent-human-readable="humanTimeSpent"
        :time-estimate-human-readable="humanTimeEstimate"
137
        :limit-to-hours="limitToHours"
138
      />
139
      <transition name="help-state-toggle">
Mike Greiling's avatar
Mike Greiling committed
140
        <time-tracking-help-state v-if="showHelpState" :root-path="rootPath" />
141
      </transition>
142
    </div>
143 144
  </div>
</template>