FEAT: add playlist description field

src/components/FileManager.vue

@@ -346,13 +346,34 @@
         :title="playlistEditor.mode === 'edit' ? 'Edit playlist' : 'Add new playlist'"
         @ok="storePlaylist"
       >
-        <div v-if="playlistEditor.mode === 'edit'">
-          Editing playlist with index: {{ playlistEditor.id }}
-        </div>
-        <p>Playlist entries:</p>
+        <b-row
+          v-if="playlistEditor.mode === 'edit'"
+          style="padding-bottom: 1em;"
+        >
+          <b-col
+            cols="3"
+          >
+            Playlist index:
+          </b-col>
+          <b-col>{{ playlistEditor.id }}</b-col>
+        </b-row>
+
+        <b-row>
+          <b-col cols="3">
+            Description:
+          </b-col>
+          <b-col>
+            <b-form-input
+              v-model="playlistEditor.description"
+              type="text"
+            />
+          </b-col>
+        </b-row>
 
         <hr>
 
+        <p>Playlist entries:</p>
+
         <!-- If no entries are here (i.e. we add a new playlist), only show
         a hint that there's nothing here yet. -->
         <div
@@ -659,6 +680,7 @@ export default {
       playlistEditor: {
         id: null,
         mode: 'add',  // should be either 'add' or 'edit'
+        description: '',
         entries: [],
         newStreamURL: null
       },
@@ -691,6 +713,7 @@ export default {
       // configuration of the playlists table, which will use the playlists array as data
       playlistsTableFields: [
         { key: 'id', label: 'Index' },
+        { key: 'description', label: 'Description' },
         { key: 'entries', label: 'Entries' },
         { key: 'updated', label: 'Last edit' },
         { key: 'actions', label: 'Actions', class: 'text-right' },
@@ -867,8 +890,9 @@ export default {
 
     addPlaylist: function () {
       this.playlistEditor.mode = 'add'
-      this.playlistEditor.entries = []
       this.playlistEditor.id = null
+      this.playlistEditor.description = ''
+      this.playlistEditor.entries = []
       this.$bvModal.show('modal-edit-playlist')
     },
 
@@ -877,6 +901,7 @@ export default {
       this.playlistEditor.entries = []
       this.playlistEditor.id = id
       var playlist = this.getPlaylistById(id)
+      this.playlistEditor.description = playlist.description
       for (var i in playlist.entries) {
         var entry = {}
         if (playlist.entries[i].file) {
@@ -894,7 +919,10 @@ export default {
     // Adds a new or updates an existing playlist by sending a POST/PUT
     // request to the AURA tank API
     storePlaylist: function () {
-      var data = { entries: this.playlistEditor.entries }
+      var data = {
+        description: this.playlistEditor.description,
+        entries: this.playlistEditor.entries
+      }
       var uri = process.env.VUE_APP_API_TANK + 'shows/' + this.shows[this.currentShow].slug + '/playlists'
 
       // TODO: add some spinner or other visualisation while the playlist is added/updated