move playlist related actions in show manager to store

src/components/ShowManager.vue

@@ -121,7 +121,11 @@ export default {
   // Right after this component is set up, we want to fetch all available shows
   // and the arrays for the show meta info from the AuRa steering module.
   created () {
-    this.$store.dispatch('shows/fetchShows')
+    this.$store.dispatch('shows/fetchShows', {
+      callback: () => {
+        this.$store.dispatch('playlists/fetch', {slug: this.selectedShow.slug})
+      }
+    })
     this.$store.dispatch('shows/fetchMetaArray', {property: 'types', onlyActive: true})
     this.$store.dispatch('shows/fetchMetaArray', {property: 'fundingcategories', onlyActive: true})
     this.$store.dispatch('shows/fetchMetaArray', {property: 'categories'})

src/components/shows/ShowManagerModalPlaylist.vue → src/components/shows/PlaylistSelector.vue

 <template>
   <div>
     <b-modal
-      ref="modalShowManagerPlaylist"
+      ref="modalPlaylistSelector"
       title="Edit playlist for this timeslot"
       size="lg"
     >
       <p v-if="loaded">
         Currently chosen playlist ID:
-        <span v-if="timeslotObject.playlist_id === null">
+        <span v-if="timeslot === null || timeslot.playlist_id === null">
           <i><small>(none set)</small></i>
         </span>
         <span v-else>
-          {{ timeslotObject.playlist_id }}
+          {{ timeslot.playlist_id }}
           <span v-if="currentPlaylistDescription">
             , Description: <b>{{ currentPlaylistDescription }}</b>
           </span>
@@ -47,7 +47,7 @@
           <template v-slot:cell(actions)="data">
             <b-button-group size="sm">
               <b-button
-                v-if="data.item.id !== timeslotObject.playlist_id"
+                v-if="data.item.id !== timeslot.playlist_id"
                 variant="info"
                 @click="choose(data.item.id)"
               >
@@ -81,7 +81,7 @@
 </template>
 
 <script>
-import axios from 'axios'
+import { mapGetters } from 'vuex'
 import prettyDate from '../../mixins/prettyDate'
 
 export default {
@@ -89,12 +89,8 @@ export default {
 
   data () {
     return {
-      show: null,
-      schedule: null,
+      scheduleId: null,
       timeslot: null,
-      timeslotObject: null,
-      playlists: null,
-      loaded: false,
 
       playlistsTableFields: [
         { key: 'id', label: 'Index' },
@@ -106,54 +102,43 @@ export default {
   },
 
   computed: {
+    loaded () { return this.$store.state.playlists.loaded.playlists },
+
     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 (this.timeslot && this.timeslot.playlist_id !== null) {
+        let choosenList = this.playlists.find(list => list.id === this.timeslot.playlist_id)
         if (choosenList && choosenList.description.length > 0) {
           description = choosenList.description
         }
       }
       return description
-    }
+    },
+
+    ...mapGetters({
+      selectedShow: 'shows/selectedShow',
+      timeslots: 'shows/timeslots',
+      notes: 'shows/notes',
+      playlists: 'playlists/playlists',
+      getTimeslotById: 'shows/getTimeslotById',
+    })
   },
 
   methods: {
-    open (show, schedule, timeslot, playlists) {
-      this.show = show
-      this.schedule = schedule
-      this.timeslot = timeslot
-      this.playlists = playlists
-      this.timeslotObject = this.getTimeslotObject(timeslot)
-      this.loaded = true
-      this.$refs.modalShowManagerPlaylist.show()
-    },
-
-    getTimeslotObject (id) {
-      let timeslot = this.$parent.current.timeslots.find(slot => slot.id === id)
-      return timeslot
+    open (scheduleId, timeslotId) {
+      this.scheduleId = scheduleId
+      this.timeslot = this.getTimeslotById(timeslotId)
+      this.$refs.modalPlaylistSelector.show()
     },
 
     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.')
+      let ts = {...this.timeslot}
+      ts.playlist_id = id
+      this.$store.dispatch('shows/updateTimeslot', {
+        show: this.selectedShow.id,
+        schedule: this.scheduleId,
+        timeslot: ts,
+        callback: () => { this.timeslot = this.getTimeslotById(ts.id) }
       })
     },
 
@@ -165,10 +150,6 @@ export default {
       text += '</div>'
       return text
     },
-
-    notYetImplemented: function () {
-      alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
-    },
   }
 }
 </script>

src/components/shows/Timeslots.vue

@@ -169,10 +169,9 @@
 <script>
 import { mapGetters } from 'vuex'
 import modalNotes from './NotesModal.vue'
-import modalPlaylist from './ShowManagerModalPlaylist.vue'
+import modalPlaylist from './PlaylistSelector.vue'
 import timeslotSort from '../../mixins/timeslotSort'
 import prettyDate from '../../mixins/prettyDate'
-import axios from 'axios'
 
 export default {
   components: {
@@ -188,12 +187,7 @@ export default {
       dateStart: this.apiDate(new Date()),
       dateEnd: this.apiDate(new Date(new Date().getTime() + process.env.VUE_APP_TIMESLOT_FILTER_DEFAULT_DAYS * 86400000)),
 
-      loadedLocal: {
-        playlists: false,
-      },
-
       note: {},
-      playlists: [],
       timeslotmeta: {    // meta info when pagination is used
         count: 0,
         next: null,
@@ -264,6 +258,7 @@ export default {
       selectedShow: 'shows/selectedShow',
       timeslots: 'shows/timeslots',
       notes: 'shows/notes',
+      playlists: 'playlists/playlists',
     })
   },
 
@@ -289,6 +284,7 @@ export default {
 
     showHasSwitched () {
       this.resetFilter()
+      this.$store.dispatch('playlists/fetch', {slug: this.selectedShow.slug})
     },
 
     // Load a different page of timeslots for the timeslots table
@@ -299,25 +295,6 @@ export default {
       }
     },
 
-    loadPlaylists () {
-      this.loadedLocal.playlists = false
-      let uri = process.env.VUE_APP_API_TANK + 'shows/' + this.selectedShow.slug + '/playlists'
-      axios.get(uri, {
-        withCredentials: true,
-        headers: { 'Authorization': 'Bearer ' + this.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.loadedLocal.playlists = true
-      }).catch(error => {
-        //this.$log.error(error.response.status + ' ' + error.response.statusText)
-        //this.$log.error(error.response)
-        this.$log.error(error)
-        alert('Error: could not fetch playlists from tank. See console for details.')
-      })
-    },
-
     // Fetch timeslots for the current show and use filter variables if provided
     getTimeslots (start, end, limit, offset) {
       let options = {}
@@ -376,7 +353,7 @@ export default {
     },
 
     editTimeslotPlaylist (show, schedule, timeslot) {
-      this.$refs.appModalPlaylist.open(show, schedule, timeslot, this.playlists)
+      this.$refs.appModalPlaylist.open(schedule, timeslot)
     },
 
     // For a given timeslot ID return the corresponding note, if there is one
@@ -406,6 +383,10 @@ export default {
       else { return title }
     },
 
+    notYetImplemented: function () {
+      alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
+    },
+
   }
 }
 </script>

src/store/modules/shows.js

@@ -77,6 +77,9 @@ const getters = {
       console.log('[ERROR] getShowByDataParam: no ID or index was provided')
     }
     return show
+  },
+  getTimeslotById: state => id => {
+    return state.timeslots.find(s => s.id === id)
   }
 }
 
@@ -98,6 +101,10 @@ const mutations = {
   setTimeslots(state, slots) {
     state.timeslots = slots
   },
+  setTimeslot(state, slot) {
+    let index = state.timeslots.findIndex(s => s.id === slot.id)
+    state.timeslots.splice(index, 1, slot)
+  },
 
   setNotes(state, notes) {
     state.notes = notes
@@ -365,6 +372,23 @@ const actions = {
     })
   },
 
+  updateTimeslot (ctx, data) {
+    let uri = process.env.VUE_APP_API_STEERING + 'shows/' + data.show +
+      '/schedules/' + data.schedule +
+      '/timeslots/' + data.timeslot.id + '/'
+    axios.put(uri, data.timeslot, {
+      withCredentials: true,
+      headers: { 'Authorization': 'Bearer ' + ctx.rootState.auth.user.access_token }
+    }).then(() => {
+      ctx.commit('setTimeslot', data.timeslot)
+      if (data && typeof(data.callback) === 'function') { data.callback() }
+    }).catch(error => {
+      handleApiError(this, error, 'could not update timeslot')
+      if (data && typeof(data.callbackCancel) === 'function') { data.callbackCancel() }
+    })
+
+  },
+
 }
 
 export default {