From 703027b834878e51f3df87a38eaed8497dd035e9 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@thoughtwoot.com>
Date: Sun, 26 Jul 2020 17:46:29 +0530
Subject: [PATCH] chore: Add showBadge prop to tabs-item component (#1096)

---
 .../dashboard/components/ui/Tabs/Tabs.js      |  4 +-
 .../ui/Tabs/{TabsItem.js => TabsItem.vue}     | 65 ++++++++++---------
 2 files changed, 34 insertions(+), 35 deletions(-)
 rename app/javascript/dashboard/components/ui/Tabs/{TabsItem.js => TabsItem.vue} (53%)

diff --git a/app/javascript/dashboard/components/ui/Tabs/Tabs.js b/app/javascript/dashboard/components/ui/Tabs/Tabs.js
index 2164dbbb0..87abd41f7 100644
--- a/app/javascript/dashboard/components/ui/Tabs/Tabs.js
+++ b/app/javascript/dashboard/components/ui/Tabs/Tabs.js
@@ -1,5 +1,3 @@
-/* eslint no-unused-vars: ["error", { "args": "none" }] */
-
 export default {
   name: 'WootTabs',
   props: {
@@ -8,7 +6,7 @@ export default {
       default: 0,
     },
   },
-  render(h) {
+  render() {
     const Tabs = this.$slots.default
       .filter(
         node =>
diff --git a/app/javascript/dashboard/components/ui/Tabs/TabsItem.js b/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
similarity index 53%
rename from app/javascript/dashboard/components/ui/Tabs/TabsItem.js
rename to app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
index 3c57abdc3..99c53d24d 100644
--- a/app/javascript/dashboard/components/ui/Tabs/TabsItem.js
+++ b/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
@@ -1,7 +1,19 @@
-/* eslint no-unused-vars: ["error", { "args": "none" }] */
-/* eslint prefer-template: 0 */
-/* eslint no-console: 0 */
-/* eslint func-names: 0 */
+<template>
+  <li
+    :class="{
+      'tabs-title': true,
+      'is-active': active,
+    }"
+  >
+    <a @click="onTabClick">
+      {{ name }}
+      <span v-if="showBadge" class="badge">
+        {{ getItemCount }}
+      </span>
+    </a>
+  </li>
+</template>
+<script>
 import TWEEN from 'tween.js';
 
 export default {
@@ -23,6 +35,10 @@ export default {
       type: Number,
       default: 0,
     },
+    showBadge: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   data() {
@@ -48,12 +64,12 @@ export default {
         TWEEN.update(time);
         animationFrame = window.requestAnimationFrame(animate);
       };
-      const that = this;
-      new TWEEN.Tween({ tweeningNumber: oldValue })
+      const tweeningNumber = { value: oldValue };
+      new TWEEN.Tween(tweeningNumber)
         .easing(TWEEN.Easing.Quadratic.Out)
-        .to({ tweeningNumber: newValue }, 500)
-        .onUpdate(function() {
-          that.animatedNumber = this.tweeningNumber.toFixed(0);
+        .to({ value: newValue }, 500)
+        .onUpdate(() => {
+          this.animatedNumber = tweeningNumber.value.toFixed(0);
         })
         .onComplete(() => {
           window.cancelAnimationFrame(animationFrame);
@@ -62,28 +78,13 @@ export default {
       animationFrame = window.requestAnimationFrame(animate);
     },
   },
-
-  render(h) {
-    return (
-      <li
-        class={{
-          'tabs-title': true,
-          'is-active': this.active,
-          'uk-disabled': this.disabled,
-        }}
-      >
-        <a
-          on-click={event => {
-            event.preventDefault();
-            if (!this.disabled) {
-              this.$parent.$emit('change', this.index);
-            }
-          }}
-        >
-          {`${this.name}`}
-          <span class="badge">{this.getItemCount}</span>
-        </a>
-      </li>
-    );
+  methods: {
+    onTabClick(event) {
+      event.preventDefault();
+      if (!this.disabled) {
+        this.$parent.$emit('change', this.index);
+      }
+    },
   },
 };
+</script>