diff options
3 files changed, 33 insertions, 8 deletions
diff --git a/app/assets/javascripts/cycle_analytics/components/item_issue_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/item_issue_component.js.es6 index bd59124104c..57e20b2aa4e 100644 --- a/app/assets/javascripts/cycle_analytics/components/item_issue_component.js.es6 +++ b/app/assets/javascripts/cycle_analytics/components/item_issue_component.js.es6 @@ -45,14 +45,7 @@ </span> </div> <div class="item-time"> - <span class="hours" v-if="issue.totalTime.hours"> - {{ issue.totalTime.hours }} - <abbr title="Hours">hr</abbr> - </span> - <span class="minutes" v-if="issue.totalTime.minutes"> - {{ issue.totalTime.minutes }} - <abbr title="Minutes">mins</abbr> - </span> + <total-time :time="issue.totalTime"></total-time> </div> </div> `, diff --git a/app/assets/javascripts/cycle_analytics/components/total_time_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/total_time_component.js.es6 new file mode 100644 index 00000000000..9d87400dfd8 --- /dev/null +++ b/app/assets/javascripts/cycle_analytics/components/total_time_component.js.es6 @@ -0,0 +1,29 @@ +((global) => { + global.cycleAnalytics = global.cycleAnalytics || {}; + + global.cycleAnalytics.TotalTimeComponent = Vue.extend({ + props: { + time: Object, + }, + template: ` + <span> + <span class="days" v-if="time.days"> + {{ time.days }} + <abbr title="Days">{{ time.days === 1 ? 'day' : 'days' }}</abbr> + </span> + <span class="hours" v-if="time.hours"> + {{ time.hours }} + <abbr title="Hours">hr</abbr> + </span> + <span class="mins" v-if="time.mins"> + {{ time.mins }} + <abbr title="Minutes">mins</abbr> + </span> + <span class="seconds hide" v-if="time.seconds"> + {{ time.seconds }} + <abbr title="Seconds">s</abbr> + </span> + </span> + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js index 8a28db90508..05038c3c500 100644 --- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js +++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js @@ -115,4 +115,7 @@ $(() => { }, }, }); + + // Register global components + Vue.component('total-time', gl.cycleAnalytics.TotalTimeComponent); }); |