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 { ...@@ -121,7 +121,11 @@ export default {
// Right after this component is set up, we want to fetch all available shows // 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. // and the arrays for the show meta info from the AuRa steering module.
created () { 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: 'types', onlyActive: true})
this.$store.dispatch('shows/fetchMetaArray', {property: 'fundingcategories', onlyActive: true}) this.$store.dispatch('shows/fetchMetaArray', {property: 'fundingcategories', onlyActive: true})
this.$store.dispatch('shows/fetchMetaArray', {property: 'categories'}) this.$store.dispatch('shows/fetchMetaArray', {property: 'categories'})
......
<template> <template>
<div> <div>
<b-modal <b-modal
ref="modalShowManagerPlaylist" ref="modalPlaylistSelector"
title="Edit playlist for this timeslot" title="Edit playlist for this timeslot"
size="lg" size="lg"
> >
<p v-if="loaded"> <p v-if="loaded">
Currently chosen playlist ID: 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> <i><small>(none set)</small></i>
</span> </span>
<span v-else> <span v-else>
{{ timeslotObject.playlist_id }} {{ timeslot.playlist_id }}
<span v-if="currentPlaylistDescription"> <span v-if="currentPlaylistDescription">
, Description: <b>{{ currentPlaylistDescription }}</b> , Description: <b>{{ currentPlaylistDescription }}</b>
</span> </span>
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
<template v-slot:cell(actions)="data"> <template v-slot:cell(actions)="data">
<b-button-group size="sm"> <b-button-group size="sm">
<b-button <b-button
v-if="data.item.id !== timeslotObject.playlist_id" v-if="data.item.id !== timeslot.playlist_id"
variant="info" variant="info"
@click="choose(data.item.id)" @click="choose(data.item.id)"
> >
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
</template> </template>
<script> <script>
import axios from 'axios' import { mapGetters } from 'vuex'
import prettyDate from '../../mixins/prettyDate' import prettyDate from '../../mixins/prettyDate'
export default { export default {
...@@ -89,12 +89,8 @@ export default { ...@@ -89,12 +89,8 @@ export default {
data () { data () {
return { return {
show: null, scheduleId: null,
schedule: null,
timeslot: null, timeslot: null,
timeslotObject: null,
playlists: null,
loaded: false,
playlistsTableFields: [ playlistsTableFields: [
{ key: 'id', label: 'Index' }, { key: 'id', label: 'Index' },
...@@ -106,54 +102,43 @@ export default { ...@@ -106,54 +102,43 @@ export default {
}, },
computed: { computed: {
loaded () { return this.$store.state.playlists.loaded.playlists },
currentPlaylistDescription () { currentPlaylistDescription () {
let description = false let description = false
if (this.timeslotObject && this.timeslotObject.playlist_id !== null) { if (this.timeslot && this.timeslot.playlist_id !== null) {
let choosenList = this.playlists.find(list => list.id === this.timeslotObject.playlist_id) let choosenList = this.playlists.find(list => list.id === this.timeslot.playlist_id)
if (choosenList && choosenList.description.length > 0) { if (choosenList && choosenList.description.length > 0) {
description = choosenList.description description = choosenList.description
} }
} }
return description return description
} },
...mapGetters({
selectedShow: 'shows/selectedShow',
timeslots: 'shows/timeslots',
notes: 'shows/notes',
playlists: 'playlists/playlists',
getTimeslotById: 'shows/getTimeslotById',
})
}, },
methods: { methods: {
open (show, schedule, timeslot, playlists) { open (scheduleId, timeslotId) {
this.show = show this.scheduleId = scheduleId
this.schedule = schedule this.timeslot = this.getTimeslotById(timeslotId)
this.timeslot = timeslot this.$refs.modalPlaylistSelector.show()
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
}, },
choose (id) { choose (id) {
let timeslot = this.getTimeslotObject(this.timeslot) let ts = {...this.timeslot}
if (timeslot === null) { ts.playlist_id = id
this.$log.error('choosen playlist id', id) this.$store.dispatch('shows/updateTimeslot', {
this.$log.error('timeslot id', id) show: this.selectedShow.id,
this.$log.error('ShowManager.current.timeslots', this.$parent.current.timeslots) schedule: this.scheduleId,
alert('Error: could not find timeslot for chosen playlist. See console for details.') timeslot: ts,
} callback: () => { this.timeslot = this.getTimeslotById(ts.id) }
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.')
}) })
}, },
...@@ -165,10 +150,6 @@ export default { ...@@ -165,10 +150,6 @@ export default {
text += '</div>' text += '</div>'
return text return text
}, },
notYetImplemented: function () {
alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
},
} }
} }
</script> </script>
......
...@@ -169,10 +169,9 @@ ...@@ -169,10 +169,9 @@
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import modalNotes from './NotesModal.vue' import modalNotes from './NotesModal.vue'
import modalPlaylist from './ShowManagerModalPlaylist.vue' import modalPlaylist from './PlaylistSelector.vue'
import timeslotSort from '../../mixins/timeslotSort' import timeslotSort from '../../mixins/timeslotSort'
import prettyDate from '../../mixins/prettyDate' import prettyDate from '../../mixins/prettyDate'
import axios from 'axios'
export default { export default {
components: { components: {
...@@ -188,12 +187,7 @@ export default { ...@@ -188,12 +187,7 @@ export default {
dateStart: this.apiDate(new Date()), dateStart: this.apiDate(new Date()),
dateEnd: this.apiDate(new Date(new Date().getTime() + process.env.VUE_APP_TIMESLOT_FILTER_DEFAULT_DAYS * 86400000)), dateEnd: this.apiDate(new Date(new Date().getTime() + process.env.VUE_APP_TIMESLOT_FILTER_DEFAULT_DAYS * 86400000)),
loadedLocal: {
playlists: false,
},
note: {}, note: {},
playlists: [],
timeslotmeta: { // meta info when pagination is used timeslotmeta: { // meta info when pagination is used
count: 0, count: 0,
next: null, next: null,
...@@ -264,6 +258,7 @@ export default { ...@@ -264,6 +258,7 @@ export default {
selectedShow: 'shows/selectedShow', selectedShow: 'shows/selectedShow',
timeslots: 'shows/timeslots', timeslots: 'shows/timeslots',
notes: 'shows/notes', notes: 'shows/notes',
playlists: 'playlists/playlists',
}) })
}, },
...@@ -289,6 +284,7 @@ export default { ...@@ -289,6 +284,7 @@ export default {
showHasSwitched () { showHasSwitched () {
this.resetFilter() this.resetFilter()
this.$store.dispatch('playlists/fetch', {slug: this.selectedShow.slug})
}, },
// Load a different page of timeslots for the timeslots table // Load a different page of timeslots for the timeslots table
...@@ -299,25 +295,6 @@ export default { ...@@ -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 // Fetch timeslots for the current show and use filter variables if provided
getTimeslots (start, end, limit, offset) { getTimeslots (start, end, limit, offset) {
let options = {} let options = {}
...@@ -376,7 +353,7 @@ export default { ...@@ -376,7 +353,7 @@ export default {
}, },
editTimeslotPlaylist (show, schedule, timeslot) { 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 // For a given timeslot ID return the corresponding note, if there is one
...@@ -406,6 +383,10 @@ export default { ...@@ -406,6 +383,10 @@ export default {
else { return title } else { return title }
}, },
notYetImplemented: function () {
alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
},
} }
} }
</script> </script>
...@@ -77,6 +77,9 @@ const getters = { ...@@ -77,6 +77,9 @@ const getters = {
console.log('[ERROR] getShowByDataParam: no ID or index was provided') console.log('[ERROR] getShowByDataParam: no ID or index was provided')
} }
return show return show
},
getTimeslotById: state => id => {
return state.timeslots.find(s => s.id === id)
} }
} }
...@@ -98,6 +101,10 @@ const mutations = { ...@@ -98,6 +101,10 @@ const mutations = {
setTimeslots(state, slots) { setTimeslots(state, slots) {
state.timeslots = 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) { setNotes(state, notes) {
state.notes = notes state.notes = notes
...@@ -365,6 +372,23 @@ const actions = { ...@@ -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 { export default {
......
Supports Markdown
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