From fe5ae3b0af46cfd5f370fb9d111c8b0f2cd1e0d4 Mon Sep 17 00:00:00 2001
From: Alfredo Sumaran <alfredo@gitlab.com>
Date: Wed, 16 Nov 2016 16:07:47 -0500
Subject: Adde TotalTimeComponent as global component

---
 .../components/item_issue_component.js.es6         |  9 +------
 .../components/total_time_component.js.es6         | 29 ++++++++++++++++++++++
 .../cycle_analytics/cycle_analytics_bundle.js      |  3 +++
 3 files changed, 33 insertions(+), 8 deletions(-)
 create mode 100644 app/assets/javascripts/cycle_analytics/components/total_time_component.js.es6

(limited to 'app')

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);
 });
-- 
cgit v1.2.1