59 lines
1.2 KiB
Vue
59 lines
1.2 KiB
Vue
<template>
|
|
<b-col class="my-3" cols="12" md="6">
|
|
<b-card>
|
|
<template slot="header">
|
|
<h4>
|
|
<b-icon :icon="typeIcon"/> {{ title }}
|
|
</h4>
|
|
</template>
|
|
<b-button class="float-right" @click="performClick">Open</b-button>
|
|
<div class="float-left">
|
|
<p><b>Items:</b> {{ count }}</p>
|
|
<p><b>Type:</b> {{ type | capitalize }}</p>
|
|
</div>
|
|
</b-card>
|
|
</b-col>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "CollectionsListElement",
|
|
props: {
|
|
title: String,
|
|
count: Number,
|
|
type: String
|
|
},
|
|
methods: {
|
|
performClick() {
|
|
this.$emit('click');
|
|
}
|
|
},
|
|
computed: {
|
|
typeIcon() {
|
|
switch (this.type) {
|
|
case "work":
|
|
return "pencil-fill";
|
|
case "artist":
|
|
return "person-fill";
|
|
case "recording":
|
|
return "music-note";
|
|
case "release":
|
|
return "folder2";
|
|
default:
|
|
return "play-fill";
|
|
}
|
|
}
|
|
},
|
|
filters: {
|
|
capitalize(value) {
|
|
if (!value) return ''
|
|
value = value.toString()
|
|
return value.charAt(0).toUpperCase() + value.slice(1)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |