From 16b736a0bda307de1e5b7c0460ae68cd2d734d4a Mon Sep 17 00:00:00 2001
From: Adam Goldsmith <adam@adamgoldsmith.name>
Date: Tue, 10 Mar 2020 17:53:03 -0400
Subject: [PATCH] Use slots to make the text content more dynamic

---
 App.vue                             | 23 ++++++++++++++++-----
 ComputerLabel.vue => AssetLabel.vue | 19 +-----------------
 ComputersLabelText.vue              | 31 +++++++++++++++++++++++++++++
 ToolLabels.vue                      | 23 ---------------------
 4 files changed, 50 insertions(+), 46 deletions(-)
 rename ComputerLabel.vue => AssetLabel.vue (78%)
 create mode 100644 ComputersLabelText.vue
 delete mode 100644 ToolLabels.vue

diff --git a/App.vue b/App.vue
index 0ebbeee..c53a2fa 100644
--- a/App.vue
+++ b/App.vue
@@ -1,13 +1,26 @@
 <template>
-  <ToolLabels />
+  <div>
+    <AssetLabel
+      v-for="asset in assets.rows.filter(t => t.name !== '')"
+      :asset="asset"
+      :key="asset.id"
+    >
+      <component :is="asset.category.name + 'LabelText'" :asset="asset" />
+    </AssetLabel>
+  </div>
 </template>
 
 <script lang="ts">
-import { Vue, Component } from 'vue-property-decorator';
-import ToolLabels from './ToolLabels.vue';
+import { Vue, Component, Prop } from 'vue-property-decorator';
 
-@Component({ components: { ToolLabels } })
+import snipeit from './snipeit';
+import AssetLabel from './AssetLabel.vue';
+import ComputersLabelText from './ComputersLabelText.vue';
+
+import assets from './computers.json';
+
+@Component({ components: { AssetLabel, ComputersLabelText } })
 export default class App extends Vue {
-  
+  assets: { rows: [snipeit.Hardware]; total: number } = assets;
 }
 </script>
diff --git a/ComputerLabel.vue b/AssetLabel.vue
similarity index 78%
rename from ComputerLabel.vue
rename to AssetLabel.vue
index caa42b8..2ded0f7 100644
--- a/ComputerLabel.vue
+++ b/AssetLabel.vue
@@ -2,12 +2,7 @@
   <article class="label">
     <div class="content">
       <img class="qrcode" :src="qrcode_dataURL" />
-      <span class="text-content">
-        <div class="name">{{ name }}</div>
-        <div class="hostname">{{ asset.name }}</div>
-        <div class="mac">{{ mac }}</div>
-        <div class="mac">{{ mac2 }}</div>
-      </span>
+      <slot> </slot>
     </div>
     <div class="bottom">
       <span class="scanme">Scan the QR code to learn more!</span>
@@ -22,7 +17,6 @@
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import JsBarcode from 'jsbarcode';
-import { toWords as numberToWords } from 'number-to-words';
 import QRCode from 'qrcode';
 
 import snipeit from './snipeit';
@@ -48,17 +42,6 @@ export default class ComputerLabel extends Vue {
       margin: 0,
     });
   }
-
-  get name() {
-    return numberToWords(this.asset.name.match(/[0-9]+$/)[0]).toUpperCase();
-  }
-
-  get mac() {
-    return this.asset.custom_fields['MAC Address']?.value;
-  }
-  get mac2() {
-    return this.asset.custom_fields['MAC Address 2']?.value;
-  }
 }
 </script>
 
diff --git a/ComputersLabelText.vue b/ComputersLabelText.vue
new file mode 100644
index 0000000..b0bc0dc
--- /dev/null
+++ b/ComputersLabelText.vue
@@ -0,0 +1,31 @@
+<template>
+  <span class="text-content">
+    <div class="name">{{ name }}</div>
+    <div class="hostname">{{ asset.name }}</div>
+    <div class="mac">{{ mac }}</div>
+    <div class="mac">{{ mac2 }}</div>
+  </span>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import { toWords as numberToWords } from 'number-to-words';
+
+import snipeit from './snipeit';
+
+@Component
+export default class ComputersLabelText extends Vue {
+  @Prop(Object) readonly asset: snipeit.Hardware;
+
+  get name() {
+    return numberToWords(this.asset.name.match(/[0-9]+$/)[0]).toUpperCase();
+  }
+
+  get mac() {
+    return this.asset.custom_fields['MAC Address']?.value;
+  }
+  get mac2() {
+    return this.asset.custom_fields['MAC Address 2']?.value;
+  }
+}
+</script>
diff --git a/ToolLabels.vue b/ToolLabels.vue
deleted file mode 100644
index bb98638..0000000
--- a/ToolLabels.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <div>
-    <ComputerLabel
-      v-for="asset in assets.rows.filter(t => t.name !== '')"
-      :asset="asset"
-      :key="asset.id"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
-
-import snipeit from './snipeit';
-import ComputerLabel from './ComputerLabel.vue';
-
-import assets from './computers.json';
-
-@Component({ components: { ComputerLabel } })
-export default class ToolLabels extends Vue {
-  assets: { rows: [snipeit.Hardware]; total: number } = assets;
-}
-</script>