FEAT: modal for choosing a playlist for timeslots

src/components/ShowManager.vue

@@ -115,6 +115,9 @@
       <app-modalSuperuser
         ref="appModalSuperuser"
       />
+      <app-modalPlaylist
+        ref="appModalPlaylist"
+      />
 
       <!-- here are the filter settings for our timeslots table -->
       <b-card>
@@ -248,11 +251,11 @@
             ></span>
             <span
               class="timeslotEditLink"
-              @click="notYetImplemented()"
+              @click="editTimeslotPlaylist(shows[currentShow], data.item.options.schedule, data.item.options.id)"
             ><img
               src="../assets/16x16/media-eject.png"
-              alt="Upload audio file / Create playlist"
-              title="Upload audio file / Create playlist"
+              alt="Edit playlist"
+              title="Edit playlist"
             ></span>
             <span
               class="timeslotEditLink"
@@ -698,6 +701,7 @@
 import modalNotes from './ShowManagerModalNotes.vue'
 import modalShow from './ShowManagerModalShow.vue'
 import modalSuperuser from './ShowManagerModalSuperuser.vue'
+import modalPlaylist from './ShowManagerModalPlaylist.vue'
 import timeslotSort from '../mixins/timeslotSort'
 import prettyDate from '../mixins/prettyDate'
 import axios from 'axios'
@@ -710,6 +714,7 @@ export default {
     'app-modalNotes': modalNotes,
     'app-modalShow': modalShow,
     'app-modalSuperuser': modalSuperuser,
+    'app-modalPlaylist': modalPlaylist,
   },
 
   // generic functions that we want to use from our mixins folder
@@ -1024,6 +1029,10 @@ export default {
       this.$refs.appModalNotes.showModal(this.current.note, timeslotID, scheduleID)
     },
 
+    editTimeslotPlaylist: function (show, schedule, timeslot) {
+      this.$refs.appModalPlaylist.open(show, schedule, timeslot)
+    },
+
     // For a given timeslot ID return the corresponding note, if there is one
     getNoteByTimeslotID: function (timeslotID) {
       for (var i in this.current.notes) {

src/components/ShowManagerModalPlaylist.vue

+<template>
+  <div>
+    <b-modal
+      ref="modalShowManagerPlaylist"
+      title="Edit playlist for this timeslot"
+      size="lg"
+    >
+      <p v-if="loaded.playlists">
+        Currently chosen playlist ID:
+        <span v-if="timeslotObject.playlist_id === null">
+          <i><small>(none set)</small></i>
+        </span>
+        <span v-else>
+          {{ timeslotObject.playlist_id }}
+          <span v-if="currentPlaylistDescription">
+            , Description: <b>{{ currentPlaylistDescription }}</b>
+          </span>
+        </span>
+      </p>
+
+      <p>Available playlists:</p>
+      <div v-if="loaded.playlists">
+        <b-table
+          ref="playlistsTable"
+          striped
+          :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: 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
+                v-if="data.item.id !== timeslotObject.playlist_id"
+                variant="info"
+                @click="choose(data.item.id)"
+              >
+                Take it!
+              </b-button>
+            </b-button-group>
+          </template>
+        </b-table>
+      </div>
+      <div v-else>
+        <img
+          src="../assets/radio.gif"
+          alt="loading playlists"
+        >
+      </div>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import prettyDate from '../mixins/prettyDate'
+
+export default {
+  mixins: [ prettyDate ],
+
+  data () {
+    return {
+      show: null,
+      schedule: null,
+      timeslot: null,
+      timeslotObject: null,
+      playlists: null,
+      loaded: {
+        playlists: false,
+      },
+
+      playlistsTableFields: [
+        { key: 'id', label: 'Index' },
+        { key: 'description', label: 'Description' },
+        { key: 'entries', label: 'Entries' },
+        { key: 'actions', label: 'Actions', class: 'text-right' },
+      ],
+    }
+  },
+
+  computed: {
+    currentPlaylistDescription () {
+      let description = false
+      if (this.timeslotObject && this.timeslotObject.playlist_id !== null) {
+        let choosenList = this.playlists.find(list => list.id === this.timeslotObject.playlist_id)
+        if (choosenList && choosenList.description.length > 0) {
+          description = choosenList.description
+        }
+      }
+      return description
+    }
+  },
+
+  methods: {
+    open (show, schedule, timeslot) {
+      this.show = show
+      this.schedule = schedule
+      this.timeslot = timeslot
+      this.timeslotObject = this.getTimeslotObject(timeslot)
+      this.loadPlaylists()
+      this.$refs.modalShowManagerPlaylist.show()
+    },
+
+    getTimeslotObject (id) {
+      let timeslot = this.$parent.current.timeslots.find(slot => slot.id === id)
+      return timeslot
+    },
+
+    choose (id) {
+      let timeslot = this.getTimeslotObject(this.timeslot)
+      if (timeslot === null) {
+        this.$log.error('choosen playlist id', id)
+        this.$log.error('timeslot id', id)
+        this.$log.error('ShowManager.current.timeslots', this.$parent.current.timeslots)
+        alert('Error: could not find timeslot for chosen playlist. See console for details.')
+      }
+      timeslot.playlist_id = id
+      let show = this.$parent.shows[this.$parent.currentShow].id
+      let uri = process.env.VUE_APP_API_STEERING + 'shows/' + show + '/schedules/' + timeslot.schedule + '/timeslots/' + timeslot.id + '/'
+      axios.put(uri, timeslot, {
+        withCredentials: true,
+        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
+      }).then(() => {
+        this.$refs.modalShowManagerPlaylist.hide()
+      }).catch(error => {
+        this.$log.error(error.response.status + ' ' + error.response.statusText)
+        this.$log.error(error.response)
+        alert('Error: could not update timeslot with chosen playlist. See console for details.')
+      })
+    },
+
+    playlistToolTip (entries) {
+      let text = '<div style="white-space: nowrap;" align="left">'
+      for (let i in entries) {
+        text += i + ': ' + entries[i].uri + '<br>'
+      }
+      text += '</div>'
+      return text
+    },
+
+    loadPlaylists () {
+      this.loaded.playlists = false
+      let uri = process.env.VUE_APP_API_TANK + 'shows/' + this.show.slug + '/playlists'
+      axios.get(uri, {
+        withCredentials: true,
+        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
+      }).then(response => {
+        // we don't have to check separately, if there are playlists, because tank
+        // always provides an empty array if there are no playlists (or even if there is no corresponding show)
+        this.playlists = response.data.results
+        this.loaded.playlists = true
+      }).catch(error => {
+        this.$log.error(error.response.status + ' ' + error.response.statusText)
+        this.$log.error(error.response)
+        alert('Error: could not fetch playlists from tank. See console for details.')
+      })
+    },
+
+    notYetImplemented: function () {
+      alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
+    },
+  }
+}
+</script>
+
+<style scoped>
+</style>