FEAT: implement order and delete of playlist entries

also uses a b-table instead of b-rows because they are easy to rerender
after changes to the playlist entries array

src/components/FileManager.vue

@@ -350,40 +350,59 @@
           Editing playlist with index: {{ playlistEditor.id }}
         </div>
         <p>Playlist entries:</p>
+
         <hr>
+
+        <!-- If no entries are here (i.e. we add a new playlist), only show
+        a hint that there's nothing here yet. -->
         <div
           v-if="playlistEditor.entries.length === 0"
           align="center"
         >
           No entries yet. Add some.
         </div>
+        <!-- As soon as we have at least one entry in our temporary playlist
+        we can display a table with all the info and action buttons -->
         <div v-else>
-          <b-row
-            v-for="(entry, index) in playlistEditor.entries"
-            :key="index"
-            class="modalPlaylistRows"
+          <b-table
+            ref="playlistEditTable"
+            striped
+            :items="playlistEditor.entries"
+            :fields="playlistEditTableFields"
           >
-            <b-col
-              cols="1"
-              align="right"
+            <!-- Column: Index
+                 Here we just use the array index, because the playlist entries
+                 are ordered as an array, without the need for an extra id field
+            -->
+            <template
+              slot="id"
+              slot-scope="data"
+            >
+              {{ data.index + 1 }}.
+            </template>
+
+            <!-- Column: Type
+                 Based on the entry content (either file or uri), we display
+                 a small badge indicating which type of source this is
+            -->
+            <template
+              slot="type"
+              slot-scope="data"
             >
-              {{ index + 1 }}.
-            </b-col>
-            <b-col cols="1">
               <b-badge
-                v-if="entry.file"
+                v-if="data.item.file"
                 variant="success"
               >
                 File
               </b-badge>
               <b-badge
-                v-else-if="entry.uri.startsWith('line://')"
+                v-else-if="data.item.uri.startsWith('line://')"
                 variant="info"
               >
                 Line-in
               </b-badge>
               <b-badge
-                v-else-if="entry.uri.startsWith('http://') || entry.uri.startsWith('https://')"
+                v-else-if="data.item.uri.startsWith('http://') || data.item.uri.startsWith('https://')"
                 variant="light"
               >
                 Stream
@@ -394,57 +413,82 @@
               >
                 Other
               </b-badge>
-            </b-col>
-            <b-col>
-              <span v-if="entry.file">
-                file://{{ entry.file.show }}/{{ entry.file.id }}
+            </template>
+
+            <!-- Column: Source
+                 Here we display where this playlist entry is coming from
+            -->
+            <template
+              slot="source"
+              slot-scope="data"
+            >
+              <span v-if="data.item.file">
+                file://{{ data.item.file.show }}/{{ data.item.file.id }}
               </span>
               <span v-else>
-                {{ entry.uri }}
+                {{ data.item.uri }}
               </span>
-            </b-col>
-            <b-col cols="3">
+            </template>
+
+            <!-- Column: Actions
+                 Finally some buttons to reorder or delete playlist entries
+            -->
+            <template
+              slot="actions"
+              slot-scope="data"
+            >
               <b-button-group size="sm">
                 <b-button
-                  :disabled="index === 0"
-                  @click="movePlaylistItemUp(index)"
+                  :disabled="data.index === 0"
+                  @click="movePlaylistItemUp(data.index)"
                 >
                   <b class="upDownArrows">&uarr;</b>
                 </b-button>
                 <b-button
-                  :disabled="index === playlistEditor.entries.length - 1"
-                  @click="movePlaylistItemDown(index)"
+                  :disabled="data.index === playlistEditor.entries.length - 1"
+                  @click="movePlaylistItemDown(data.index)"
                 >
                   <b class="upDownArrows">&darr;</b>
                 </b-button>
                 <b-button
                   variant="danger"
-                  @click="deletePlaylistItem(index)"
+                  @click="deletePlaylistItem(data.index)"
                 >
                   Delete
                 </b-button>
               </b-button-group>
-            </b-col>
-          </b-row>
+            </template>
+          </b-table>
         </div>
+
         <hr>
-        Add:
-        <b-button-group>
-          <b-dropdown text="File">
-            <b-dropdown-item
-              v-for="(file, index) in files"
-              :key="index"
-            >
-              {{ file.id }}: {{ file.metadata.title ? file.metadata.title : "" }} ({{ prettyNanoseconds(file.duration) }}, {{ prettyFileSize(file.size) }}, {{ file.source.uri }})
-            </b-dropdown-item>
-          </b-dropdown>
-          <b-dropdown text="Line-in">
-            <b-dropdown-item>Studio 1</b-dropdown-item>
-            <b-dropdown-item>Preprod</b-dropdown-item>
-            <b-dropdown-item>Line 3</b-dropdown-item>
-          </b-dropdown>
-          <b-button>Stream</b-button>
-        </b-button-group>
+
+        <!-- Below the table with the playlists entry we display buttons to
+        add new entries to the table - these can either be files from our
+        uploaded/imported files, or one of the preconfigured inputs, or a
+        stream.
+        TODO: should we disable choosing files that are still being imported?
+        TODO: make the inputs configurable
+        -->
+        <div>
+          Add:
+          <b-button-group>
+            <b-dropdown text="File">
+              <b-dropdown-item
+                v-for="(file, index) in files"
+                :key="index"
+              >
+                {{ file.id }}: {{ file.metadata.title ? file.metadata.title : "" }} ({{ prettyNanoseconds(file.duration) }}, {{ prettyFileSize(file.size) }}, {{ file.source.uri }})
+              </b-dropdown-item>
+            </b-dropdown>
+            <b-dropdown text="Line-in">
+              <b-dropdown-item>Studio 1</b-dropdown-item>
+              <b-dropdown-item>Preprod</b-dropdown-item>
+              <b-dropdown-item>Line 3</b-dropdown-item>
+            </b-dropdown>
+            <b-button>Stream</b-button>
+          </b-button-group>
+        </div>
       </b-modal>
 
       <!-- Only display a spinner if the playlists are not loaded yet -->
@@ -625,6 +669,13 @@ export default {
         { key: 'entries', label: 'Entries' },
         { key: 'updated', label: 'Last edit' },
         { key: 'actions', label: 'Actions', class: 'text-right' },
+      ],
+
+      playlistEditTableFields: [
+        { key: 'id', label: 'Index' },
+        { key: 'type', label: 'Type' },
+        { key: 'source', label: 'Source' },
+        { key: 'actions', label: 'Actions', class: 'text-right' },
       ]
     }
   },
@@ -707,18 +758,28 @@ export default {
     },
 
     movePlaylistItemUp: function (index) {
-      this.notYetImplemented()
-      return index
+      if (index > 0 && index < this.playlistEditor.entries.length) {
+        var temp = this.playlistEditor.entries[index - 1]
+        this.playlistEditor.entries[index - 1] = this.playlistEditor.entries[index]
+        this.playlistEditor.entries[index] = temp
+        this.$refs.playlistEditTable.refresh()
+      }
     },
 
     movePlaylistItemDown: function (index) {
-      this.notYetImplemented()
-      return index
+      if (index < this.playlistEditor.entries.length - 1 && index >= 0) {
+        var temp = this.playlistEditor.entries[index + 1]
+        this.playlistEditor.entries[index + 1] = this.playlistEditor.entries[index]
+        this.playlistEditor.entries[index] = temp
+        this.$refs.playlistEditTable.refresh()
+      }
     },
 
     deletePlaylistItem: function (index) {
-      this.notYetImplemented()
-      return index
+      if (index >= 0 && index < this.playlistEditor.entries.length) {
+        this.playlistEditor.entries.splice(index, 1)
+        this.$refs.playlistEditTable.refresh()
+      }
     },
 
     deletePlaylist: function (id) {
@@ -763,7 +824,10 @@ export default {
     },
 
     storePlaylist: function () {
-      alert(this.playlistEditor.mode)
+      this.notYetImplemented()
+      var data = { entries: this.playlistEditor.entries }
+      console.log('Attempting to send playlist data:')
+      console.log(JSON.stringify(data))
     },
 
     // To start modifying the meta information for a file we have to set our