FEAT: add playlist table scaffold

src/components/FileManager.vue

@@ -348,9 +348,10 @@
         </b-row>
       </div>
 
-      <!-- If all playlist data is loaded we can present an create button and
+      <!-- If all playlist data is loaded we can present a create button and
       a table of playlists (if there are already any)-->
       <div v-else>
+        <!-- If no playlists are available, only show an alert and a create button -->
         <div
           v-if="playlists.length === 0"
           align="center"
@@ -368,12 +369,75 @@
             Create a playlist
           </b-button>
         </div>
+        <!-- In case there are playlists, show the button and then the table -->
         <div v-else>
+          <div
+            align="center"
+            style="padding-bottom: 1.5em;"
+          >
+            <b-button
+              variant="success"
+              @click="notYetImplemented"
+            >
+              Create a playlist
+            </b-button>
+          </div>
           <b-table
+            ref="playlistsTable"
             striped
-            :items="playlistsTable"
-          />
+            :fields="playlistsTableFields"
+            :items="playlists"
+          >
+            <!-- Column: Entries
+            This column displays the number of entries of the playlist.
+            -->
+            <template
+              slot="entries"
+              slot-scope="data"
+            >
+              {{ data.value.length }} items
+              <b-button
+                v-b-tooltip.html="playlistToolTip(data.value)"
+                variant="outline-success"
+                size="sm"
+              >
+                show entries
+              </b-button>
+            </template>
+
+            <!-- Column: Last edit
+            This column lists the last date this playlist was changed.
+            -->
+            <template
+              slot="updated"
+              slot-scope="data"
+            >
+              {{ prettyDateTime(data.value) }}
+            </template>
+
+            <!-- Column: Actions
+            This column displays the available buttons for actions the user can
+            take on this playlist (e.g. editing and deleting).
+            -->
+            <template
+              slot="actions"
+              slot-scope="data"
+            >
+              <b-button-group size="sm">
+                <b-button @click="editPlaylist(data.item.id)">
+                  Edit
+                </b-button>
+                <b-button
+                  variant="danger"
+                  @click="deletePlaylist(data.item.id)"
+                >
+                  Delete
+                </b-button>
+              </b-button-group>
+            </template>
+          </b-table>
         </div>
+        <!-- End of playlists table -->
       </div>
     </div>
   </b-container>
@@ -434,25 +498,16 @@ export default {
         { key: 'metadata.title', label: 'Title' },
         { key: 'duration', label: 'Duration' },
         { key: 'size', label: 'Size' },
-        { key: 'actions', label: 'Actions' },
-      ]
-    }
-  },
+        { key: 'actions', label: 'Actions', class: 'text-right' },
+      ],
 
-  // TODO: if we can use the playlists object itself (similar to the files in
-  // in the files table, we can get rid of the computed properties)
-  computed: {
-    playlistsTable: function (){
-      var arr = []
-      for (var i in this.files) {
-        arr.push({
-          id: this.files[i].id,
-          other_fields: 'not yet implemented',
-          updated: this.files[i].updated,
-          actions: '...'
-        })
-      }
-      return arr
+      // configuration of the playlists table, which will use the playlists array as data
+      playlistsTableFields: [
+        { key: 'id', label: 'Index' },
+        { key: 'entries', label: 'Entries' },
+        { key: 'updated', label: 'Last edit' },
+        { key: 'actions', label: 'Actions', class: 'text-right' },
+      ]
     }
   },
 
@@ -514,6 +569,25 @@ export default {
       return null
     },
 
+    playlistToolTip: function (entries) {
+      var text = '<div style="white-space: nowrap;" align="left">'
+      for (var i in entries) {
+        text += i + ': ' + entries[i].uri + '<br>'
+      }
+      text += '</div>'
+      return text
+    },
+
+    deletePlaylist: function (id) {
+      this.notYetImplemented()
+      return id
+    },
+
+    editPlaylist: function (id) {
+      this.notYetImplemented()
+      return id
+    },
+
     // To start modifying the meta information for a file we have to set our
     // temporary data (which will be used to check if anything changed) and
     // then open the editing modal