refactor track list column toggle

This commit is contained in:
Thomas Amland 2020-09-07 18:41:12 +02:00
parent bf81b34da6
commit 4fca9f417b
2 changed files with 10 additions and 8 deletions

View File

@ -9,13 +9,13 @@
<th class="text-left"> <th class="text-left">
Title Title
</th> </th>
<th class="text-left d-none d-lg-table-cell"> <th v-if="!noArtist" class="text-left d-none d-lg-table-cell">
Artist Artist
</th> </th>
<th v-if="showAlbum" class="text-left d-none d-md-table-cell"> <th v-if="!noAlbum" class="text-left d-none d-md-table-cell">
Album Album
</th> </th>
<th class="text-right d-none d-md-table-cell"> <th v-if="!noDuration" class="text-right d-none d-md-table-cell">
Duration Duration
</th> </th>
<th class="text-right"> <th class="text-right">
@ -48,7 +48,7 @@
<small>{{ item.artist }}</small> <small>{{ item.artist }}</small>
</div> </div>
</td> </td>
<td class="d-none d-lg-table-cell"> <td v-if="!noArtist" class="d-none d-lg-table-cell">
<template v-if="item.artistId"> <template v-if="item.artistId">
<router-link :to="{name: 'artist', params: {id: item.artistId}}"> <router-link :to="{name: 'artist', params: {id: item.artistId}}">
{{ item.artist }} {{ item.artist }}
@ -58,12 +58,12 @@
{{ item.artist }} {{ item.artist }}
</template> </template>
</td> </td>
<td v-if="showAlbum" class="d-none d-md-table-cell"> <td v-if="!noAlbum" class="d-none d-md-table-cell">
<router-link :to="{name: 'album', params: {id: item.albumId}}"> <router-link :to="{name: 'album', params: {id: item.albumId}}">
{{ item.album }} {{ item.album }}
</router-link> </router-link>
</td> </td>
<td class="text-right d-none d-md-table-cell"> <td v-if="!noDuration" class="text-right d-none d-md-table-cell">
{{ $formatDuration(item.duration) }} {{ $formatDuration(item.duration) }}
</td> </td>
<td class="text-right"> <td class="text-right">
@ -100,7 +100,9 @@
}, },
props: { props: {
tracks: { type: Array, required: true }, tracks: { type: Array, required: true },
showAlbum: { type: Boolean, default: true }, noAlbum: { type: Boolean, default: false },
noArtist: { type: Boolean, default: false },
noDuration: { type: Boolean, default: false },
}, },
computed: { computed: {
...mapState('player', { ...mapState('player', {

View File

@ -27,7 +27,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<TrackList :tracks="album.tracks" :show-album="false" /> <TrackList :tracks="album.tracks" no-album />
</div> </div>
</div> </div>
</div> </div>