Use slots to make the text content more dynamic

This commit is contained in:
Adam Goldsmith 2020-03-10 17:53:03 -04:00
parent a239e2dd6e
commit 16b736a0bd
4 changed files with 50 additions and 46 deletions

23
App.vue
View File

@ -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>

View File

@ -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>

31
ComputersLabelText.vue Normal file
View File

@ -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>

View File

@ -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>