Commit b7bced95 authored by jackie / Andrea Ida Malkah Klaura's avatar jackie / Andrea Ida Malkah Klaura
Browse files

move playlist related actions in show manager to store

parent 30a9c80d
......@@ -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'})
......
<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>
......
......@@ -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>
......@@ -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 {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment