Extract component

web/src/components/ClientsDataTable.vue

@@ -22,28 +22,7 @@
       </template>
 
       <template #[`item.signalStrength`]="{ item: { signalStrength } }">
-        <template v-if="signalStrength < 0">
-          <v-chip
-            small
-            :color="signalStrengthColor(signalStrength) + ' lighten-5'"
-          >
-            <v-icon
-              small
-              left
-              :color="signalStrengthColor(signalStrength) + ' darken-2'"
-            >
-              {{ signalStrengthIcon(signalStrength) }}
-            </v-icon>
-            <span class="font-weight-medium">{{ signalStrength }}</span>
-            <small class="ml-1"> dBm </small>
-          </v-chip>
-        </template>
-        <template v-else>
-          <v-chip small color="grey lighten-4">
-            <v-icon small left color="grey">mdi-signal-off</v-icon>
-            <small>Aguarde...</small>
-          </v-chip>
-        </template>
+        <SignalStrength :value="signalStrength" />
       </template>
 
       <template #[`item.speed`]="{ item: { speed } }">
@@ -68,9 +47,10 @@
 
 <script>
 import Avatar from './Avatar.vue'
+import SignalStrength from './signalStrength.vue'
 
 export default {
-  components: { Avatar },
+  components: { Avatar, SignalStrength },
   props: {
     wifiDevices: {
       type: Array,
@@ -122,23 +102,6 @@ export default {
         this.headers.includes(value)
       )
     }
-  },
-  methods: {
-    signalStrengthIcon(signalStrength) {
-      if (signalStrength > -50) return 'mdi-signal-cellular-3'
-      if (signalStrength > -67) return 'mdi-signal-cellular-2'
-      if (signalStrength > -80) return 'mdi-signal-cellular-1'
-      return 'mdi-signal-cellular-outline'
-    },
-    signalStrengthColor(signalStrength) {
-      if (signalStrength > -50) return 'green'
-      else if (signalStrength > -60) return 'light-green'
-      else if (signalStrength > -67) return 'lime'
-      else if (signalStrength > -70) return 'amber'
-      else if (signalStrength > -80) return 'orange'
-      else if (signalStrength > -90) return 'deep-orange'
-      else return 'red'
-    }
   }
 }
 </script>

web/src/components/signalStrength.vue

@@ -0,0 +1,49 @@
+<template>
+  <span class="signal-strength">
+    <template v-if="value < 0">
+      <v-chip :color="signalStrengthColor(value) + ' lighten-5'" small>
+        <v-icon small left :color="signalStrengthColor(value) + ' darken-2'">
+          {{ signalStrengthIcon(value) }}
+        </v-icon>
+        <span class="font-weight-medium">{{ value }}</span>
+        <small class="ml-1"> dBm </small>
+      </v-chip>
+    </template>
+    <template v-else>
+      <v-chip small color="grey lighten-4">
+        <v-icon small left color="grey">mdi-signal-off</v-icon>
+        <small>Aguarde...</small>
+      </v-chip>
+    </template>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Number,
+      default: -1
+    }
+  },
+  methods: {
+    signalStrengthIcon(signalStrength) {
+      if (signalStrength > -50) return 'mdi-signal-cellular-3'
+      if (signalStrength > -67) return 'mdi-signal-cellular-2'
+      if (signalStrength > -80) return 'mdi-signal-cellular-1'
+      return 'mdi-signal-cellular-outline'
+    },
+    signalStrengthColor(signalStrength) {
+      if (signalStrength > -50) return 'green'
+      else if (signalStrength > -60) return 'light-green'
+      else if (signalStrength > -67) return 'lime'
+      else if (signalStrength > -70) return 'amber'
+      else if (signalStrength > -80) return 'orange'
+      else if (signalStrength > -90) return 'deep-orange'
+      else return 'red'
+    }
+  }
+}
+</script>
+
+<style></style>