FEAT: add modal for playlist editing

src/components/FileManager.vue

@@ -336,6 +336,104 @@
     <!-- All the UI for creating and editing playlists is only shown if the user
     choose to edit playlists in the jumbotron above -->
     <div v-if="mode === 'playlists'">
+      <!-- Modal: Add new file
+      This is the modal that is used when the user clicks on the
+      "Upload or add a file" button. When the user hits the OK button,
+      the addFile method will be called. -->
+      <b-modal
+        id="modal-edit-playlist"
+        size="lg"
+        :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>
+        <hr>
+        <div
+          v-if="playlistEditor.entries.length === 0"
+          align="center"
+        >
+          No entries yet. Add some.
+        </div>
+        <div v-else>
+          <b-row
+            v-for="(entry, index) in playlistEditor.entries"
+            :key="index"
+          >
+            <b-col cols="1" align="right">
+              {{ index + 1 }}.
+            </b-col>
+            <b-col cols="1">
+              <b-badge
+                v-if="entry.file"
+                variant="success"
+              >
+                File
+              </b-badge>
+              <b-badge
+                v-else-if="entry.uri.startsWith('line://')"
+                variant="info"
+              >
+                Line-in
+              </b-badge>
+              <b-badge
+                v-else-if="entry.uri.startsWith('http://') || entry.uri.startsWith('https://')"
+                variant="light"
+              >
+                Stream
+              </b-badge>
+              <b-badge
+                v-else
+                variant="dark"
+              >
+                Other
+              </b-badge>
+            </b-col>
+            <b-col>
+              uri: {{ entry.uri }}
+            </b-col>
+            <b-col cols="3">
+              <b-button-group size="sm">
+                <b-button
+                  :disabled="index === 0"
+                  @click="movePlaylistItemUp(index)"
+                >
+                  Up
+                </b-button>
+                <b-button
+                  :disabled="index === playlistEditor.entries.length - 1"
+                  @click="movePlaylistItemDown(index)"
+                >
+                  Down
+                </b-button>
+                <b-button
+                  variant="danger"
+                  @click="deletePlaylistItem(index)"
+                >
+                  Delete
+                </b-button>
+              </b-button-group>
+            </b-col>
+          </b-row>
+        </div>
+        <hr>
+        Add:
+        <b-button-group>
+          <b-dropdown text="File">
+            <b-dropdown-item>File A</b-dropdown-item>
+            <b-dropdown-item>File B</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>
+      </b-modal>
+
       <!-- Only display a spinner if the playlists are not loaded yet -->
       <div v-if="!loaded.playlists">
         <b-row>
@@ -364,7 +462,7 @@
           </b-alert>
           <b-button
             variant="success"
-            @click="notYetImplemented"
+            @click="addPlaylist"
           >
             Create a playlist
           </b-button>
@@ -377,7 +475,7 @@
           >
             <b-button
               variant="success"
-              @click="notYetImplemented"
+              @click="addPlaylist"
             >
               Create a playlist
             </b-button>
@@ -476,6 +574,13 @@ export default {
       uploadSourceURI: '',
       uploadSourceFile: null,
 
+      // and for adding and editing the playlists we need some temporary stuff
+      playlistEditor: {
+        id: null,
+        mode: 'add',  // should be either 'add' or 'edit'
+        entries: []
+      },
+
       // we need this for the modal to edit a file's meta information
       temp: {
         id: null,
@@ -569,6 +674,16 @@ export default {
       return null
     },
 
+    // Returns a playlist object from the playlists array, given a playlist ID
+    getPlaylistById: function (id) {
+      for (var i in this.playlists) {
+        if (this.playlists[i].id === id) {
+          return this.playlists[i]
+        }
+      }
+      return null
+    },
+
     playlistToolTip: function (entries) {
       var text = '<div style="white-space: nowrap;" align="left">'
       for (var i in entries) {
@@ -578,6 +693,21 @@ export default {
       return text
     },
 
+    movePlaylistItemUp: function (index) {
+      this.notYetImplemented()
+      return index
+    },
+
+    movePlaylistItemDown: function (index) {
+      this.notYetImplemented()
+      return index
+    },
+
+    deletePlaylistItem: function (index) {
+      this.notYetImplemented()
+      return index
+    },
+
     deletePlaylist: function (id) {
       var uri = process.env.VUE_APP_API_TANK + 'shows/' + this.shows[this.currentShow].slug + '/playlists/' + id
       // TODO: add mechanism to indicate the running delete request in the files table
@@ -593,9 +723,31 @@ export default {
       })
     },
 
+    addPlaylist: function () {
+      this.playlistEditor.mode = 'add'
+      this.playlistEditor.entries = []
+      this.playlistEditor.id = null
+      this.$bvModal.show('modal-edit-playlist')
+    },
+
     editPlaylist: function (id) {
-      this.notYetImplemented()
-      return id
+      this.playlistEditor.mode = 'edit'
+      this.playlistEditor.entries = []
+      this.playlistEditor.id = id
+      var playlist = this.getPlaylistById(id)
+      for (var i in playlist.entries) {
+        var entry = {}
+        entry.uri = playlist.entries[i].uri
+        if (playlist.entries[i].file) {
+          entry.file = playlist.entries[i].file
+        }
+        this.playlistEditor.entries.push(entry)
+      }
+      this.$bvModal.show('modal-edit-playlist')
+    },
+
+    storePlaylist: function () {
+      alert(this.playlistEditor.mode)
     },
 
     // To start modifying the meta information for a file we have to set our