diff options
Diffstat (limited to 'app/assets/javascripts/cycle_analytics/components/total_time.vue')
-rw-r--r-- | app/assets/javascripts/cycle_analytics/components/total_time.vue | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/app/assets/javascripts/cycle_analytics/components/total_time.vue b/app/assets/javascripts/cycle_analytics/components/total_time.vue new file mode 100644 index 00000000000..a5a90a56974 --- /dev/null +++ b/app/assets/javascripts/cycle_analytics/components/total_time.vue @@ -0,0 +1,61 @@ +<script> +import { n__, s__ } from '~/locale'; + +export default { + props: { + time: { + type: Object, + required: false, + default: () => ({}), + }, + }, + computed: { + hasData() { + return Object.keys(this.time).length; + }, + calculatedTime() { + const { + time: { days = null, mins = null, hours = null, seconds = null }, + } = this; + + if (days) { + return { + duration: days, + units: n__('day', 'days', days), + }; + } + + if (hours) { + return { + duration: hours, + units: n__('Time|hr', 'Time|hrs', hours), + }; + } + + if (mins && !days) { + return { + duration: mins, + units: n__('Time|min', 'Time|mins', mins), + }; + } + + if ((seconds && this.hasData === 1) || seconds === 0) { + return { + duration: seconds, + units: s__('Time|s'), + }; + } + + return { duration: null, units: null }; + }, + }, +}; +</script> +<template> + <span class="total-time"> + <template v-if="hasData"> + {{ calculatedTime.duration }} <span>{{ calculatedTime.units }}</span> + </template> + <template v-else> -- </template> + </span> +</template> |