From 5823a191f1ce0dc4214b955fcddc97b2e98e02d3 Mon Sep 17 00:00:00 2001
From: George Tsiolis <tsiolis.g@gmail.com>
Date: Thu, 22 Mar 2018 12:51:52 +0200
Subject: Move TimeTrackingComparisonPane vue component

---
 .../components/time_tracking/comparison_pane.js    | 89 ---------------------
 .../components/time_tracking/comparison_pane.vue   | 93 ++++++++++++++++++++++
 .../components/time_tracking/time_tracker.vue      |  4 +-
 ...time-tracking-comparison-pane-vue-component.yml |  5 ++
 4 files changed, 100 insertions(+), 91 deletions(-)
 delete mode 100644 app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.js
 create mode 100644 app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
 create mode 100644 changelogs/unreleased/refactor-move-time-tracking-comparison-pane-vue-component.yml

diff --git a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.js b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.js
deleted file mode 100644
index b5ebccd3795..00000000000
--- a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import { parseSeconds, stringifyTime } from '../../../lib/utils/pretty_time';
-
-export default {
-  name: 'time-tracking-comparison-pane',
-  props: {
-    timeSpent: {
-      type: Number,
-      required: true,
-    },
-    timeEstimate: {
-      type: Number,
-      required: true,
-    },
-    timeSpentHumanReadable: {
-      type: String,
-      required: true,
-    },
-    timeEstimateHumanReadable: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    parsedTimeRemaining() {
-      const diffSeconds = this.timeEstimate - this.timeSpent;
-      return parseSeconds(diffSeconds);
-    },
-    timeRemainingHumanReadable() {
-      return stringifyTime(this.parsedTimeRemaining);
-    },
-    timeRemainingTooltip() {
-      const prefix = this.timeRemainingMinutes < 0 ? 'Over by' : 'Time remaining:';
-      return `${prefix} ${this.timeRemainingHumanReadable}`;
-    },
-    /* Diff values for comparison meter */
-    timeRemainingMinutes() {
-      return this.timeEstimate - this.timeSpent;
-    },
-    timeRemainingPercent() {
-      return `${Math.floor((this.timeSpent / this.timeEstimate) * 100)}%`;
-    },
-    timeRemainingStatusClass() {
-      return this.timeEstimate >= this.timeSpent ? 'within_estimate' : 'over_estimate';
-    },
-  },
-  template: `
-    <div class="time-tracking-comparison-pane">
-      <div
-        class="compare-meter"
-        data-toggle="tooltip"
-        data-placement="top"
-        role="timeRemainingDisplay"
-        :aria-valuenow="timeRemainingTooltip"
-        :title="timeRemainingTooltip"
-        :data-original-title="timeRemainingTooltip"
-        :class="timeRemainingStatusClass"
-      >
-        <div
-          class="meter-container"
-          role="timeSpentPercent"
-          :aria-valuenow="timeRemainingPercent"
-        >
-          <div
-            :style="{ width: timeRemainingPercent }"
-            class="meter-fill"
-          />
-        </div>
-        <div class="compare-display-container">
-          <div class="compare-display pull-left">
-            <span class="compare-label">
-            {{ s__('TimeTracking|Spent') }}
-            </span>
-            <span class="compare-value spent">
-              {{ timeSpentHumanReadable }}
-            </span>
-          </div>
-          <div class="compare-display estimated pull-right">
-            <span class="compare-label">
-              {{ s__('TimeTrackingEstimated|Est') }}
-            </span>
-            <span class="compare-value">
-              {{ timeEstimateHumanReadable }}
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
new file mode 100644
index 00000000000..82c4562f9a9
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
@@ -0,0 +1,93 @@
+<script>
+import { parseSeconds, stringifyTime } from '../../../lib/utils/pretty_time';
+
+export default {
+  name: 'TimeTrackingComparisonPane',
+  props: {
+    timeSpent: {
+      type: Number,
+      required: true,
+    },
+    timeEstimate: {
+      type: Number,
+      required: true,
+    },
+    timeSpentHumanReadable: {
+      type: String,
+      required: true,
+    },
+    timeEstimateHumanReadable: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    parsedTimeRemaining() {
+      const diffSeconds = this.timeEstimate - this.timeSpent;
+      return parseSeconds(diffSeconds);
+    },
+    timeRemainingHumanReadable() {
+      return stringifyTime(this.parsedTimeRemaining);
+    },
+    timeRemainingTooltip() {
+      const prefix = this.timeRemainingMinutes < 0 ? 'Over by' : 'Time remaining:';
+      return `${prefix} ${this.timeRemainingHumanReadable}`;
+    },
+    /* Diff values for comparison meter */
+    timeRemainingMinutes() {
+      return this.timeEstimate - this.timeSpent;
+    },
+    timeRemainingPercent() {
+      return `${Math.floor((this.timeSpent / this.timeEstimate) * 100)}%`;
+    },
+    timeRemainingStatusClass() {
+      return this.timeEstimate >= this.timeSpent ? 'within_estimate' : 'over_estimate';
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="time-tracking-comparison-pane">
+    <div
+      class="compare-meter"
+      data-toggle="tooltip"
+      data-placement="top"
+      role="timeRemainingDisplay"
+      :aria-valuenow="timeRemainingTooltip"
+      :title="timeRemainingTooltip"
+      :data-original-title="timeRemainingTooltip"
+      :class="timeRemainingStatusClass"
+    >
+      <div
+        class="meter-container"
+        role="timeSpentPercent"
+        :aria-valuenow="timeRemainingPercent"
+      >
+        <div
+          :style="{ width: timeRemainingPercent }"
+          class="meter-fill"
+        >
+        </div>
+      </div>
+      <div class="compare-display-container">
+        <div class="compare-display pull-left">
+          <span class="compare-label">
+            {{ s__('TimeTracking|Spent') }}
+          </span>
+          <span class="compare-value spent">
+            {{ timeSpentHumanReadable }}
+          </span>
+        </div>
+        <div class="compare-display estimated pull-right">
+          <span class="compare-label">
+            {{ s__('TimeTrackingEstimated|Est') }}
+          </span>
+          <span class="compare-value">
+            {{ timeEstimateHumanReadable }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
index 28240468d2c..1c641c73ea3 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
@@ -4,7 +4,7 @@ import TimeTrackingCollapsedState from './collapsed_state.vue';
 import timeTrackingSpentOnlyPane from './spent_only_pane';
 import timeTrackingNoTrackingPane from './no_tracking_pane';
 import timeTrackingEstimateOnlyPane from './estimate_only_pane';
-import timeTrackingComparisonPane from './comparison_pane';
+import TimeTrackingComparisonPane from './comparison_pane.vue';
 
 import eventHub from '../../event_hub';
 
@@ -15,7 +15,7 @@ export default {
     'time-tracking-estimate-only-pane': timeTrackingEstimateOnlyPane,
     'time-tracking-spent-only-pane': timeTrackingSpentOnlyPane,
     'time-tracking-no-tracking-pane': timeTrackingNoTrackingPane,
-    'time-tracking-comparison-pane': timeTrackingComparisonPane,
+    TimeTrackingComparisonPane,
     'time-tracking-help-state': timeTrackingHelpState,
   },
   props: {
diff --git a/changelogs/unreleased/refactor-move-time-tracking-comparison-pane-vue-component.yml b/changelogs/unreleased/refactor-move-time-tracking-comparison-pane-vue-component.yml
new file mode 100644
index 00000000000..88a4b8ec8c1
--- /dev/null
+++ b/changelogs/unreleased/refactor-move-time-tracking-comparison-pane-vue-component.yml
@@ -0,0 +1,5 @@
+---
+title: Move TimeTrackingComparisonPane vue component
+merge_request: 17931
+author: George Tsiolis
+type: performance
-- 
cgit v1.2.1