From 4fca9f417be63577e405e6f8bddf22ec0e5f4ced Mon Sep 17 00:00:00 2001
From: Thomas Amland <thomas.amland@gmail.com>
Date: Mon, 7 Sep 2020 18:41:12 +0200
Subject: [PATCH] refactor track list column toggle

---
 src/library/TrackList.vue          | 16 +++++++++-------
 src/library/album/AlbumDetails.vue |  2 +-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/library/TrackList.vue b/src/library/TrackList.vue
index ba1baed..e05f5f1 100644
--- a/src/library/TrackList.vue
+++ b/src/library/TrackList.vue
@@ -9,13 +9,13 @@
           <th class="text-left">
             Title
           </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
           </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
           </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
           </th>
           <th class="text-right">
@@ -48,7 +48,7 @@
               <small>{{ item.artist }}</small>
             </div>
           </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">
               <router-link :to="{name: 'artist', params: {id: item.artistId}}">
                 {{ item.artist }}
@@ -58,12 +58,12 @@
               {{ item.artist }}
             </template>
           </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}}">
               {{ item.album }}
             </router-link>
           </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) }}
           </td>
           <td class="text-right">
@@ -100,7 +100,9 @@
     },
     props: {
       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: {
       ...mapState('player', {
diff --git a/src/library/album/AlbumDetails.vue b/src/library/album/AlbumDetails.vue
index 5182429..3ced200 100644
--- a/src/library/album/AlbumDetails.vue
+++ b/src/library/album/AlbumDetails.vue
@@ -27,7 +27,7 @@
     </div>
     <div class="row">
       <div class="col">
-        <TrackList :tracks="album.tracks" :show-album="false" />
+        <TrackList :tracks="album.tracks" no-album />
       </div>
     </div>
   </div>