70 lines
1.7 KiB
Vue
70 lines
1.7 KiB
Vue
<template>
|
|
<div class="ui card">
|
|
<div class="content">
|
|
<div v-if="isLoading" class="ui vertical segment">
|
|
<div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
|
|
</div>
|
|
<template v-if="data.id">
|
|
<header class="header">
|
|
<a :href="getMusicbrainzUrl('artist', data.id)" target="_blank" :title="labels.musicbrainz">{{ data.name }}</a>
|
|
</header>
|
|
<div class="description">
|
|
<table class="ui very basic fixed single line compact table">
|
|
<tbody>
|
|
<tr v-for="group in releasesGroups">
|
|
<td>
|
|
{{ group['first-release-date'] }}
|
|
</td>
|
|
<td colspan="3">
|
|
<a :href="getMusicbrainzUrl('release-group', group.id)" class="discrete link" target="_blank" :title="labels.musicbrainz">
|
|
{{ group.title }}
|
|
</a>
|
|
</td>
|
|
<td>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Vue from "vue"
|
|
import CardMixin from "./CardMixin"
|
|
import time from "@/utils/time"
|
|
|
|
export default Vue.extend({
|
|
mixins: [CardMixin],
|
|
data() {
|
|
return {
|
|
time
|
|
}
|
|
},
|
|
computed: {
|
|
labels() {
|
|
return {
|
|
musicbrainz: this.$gettext("View on MusicBrainz")
|
|
}
|
|
},
|
|
type() {
|
|
return "artist"
|
|
},
|
|
releasesGroups() {
|
|
return this.data["release-group-list"].filter(r => {
|
|
return r.type === "Album"
|
|
})
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style scoped lang="scss">
|
|
.ui.card {
|
|
width: 100% !important;
|
|
}
|
|
</style>
|