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

fix #24: implement fallback playlist modal

parent b1565f06
<template>
<b-modal
ref="modalFallbackSelector"
title="Choose a fallback playlist for this show"
size="lg"
>
<p v-if="loaded">
Currently chosen playlist ID:
<span v-if="selectedShow.fallback_id === null">
<i><small>(none set)</small></i>
</span>
<span v-else>
{{ selectedShow.fallback_id }}
<span v-if="currentPlaylistDescription">
, Description: <b>{{ currentPlaylistDescription }}</b>
</span>
</span>
</p>
<p>Available playlists:</p>
<div v-if="loaded">
<b-table
ref="playlistsTable"
striped
:fields="playlistsTableFields"
:items="playlists"
>
<!-- Column: Entries
This column displays the number of entries of the playlist.
-->
<template v-slot:cell(entries)="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 v-slot:cell(actions)="data">
<b-button-group size="sm">
<b-button
v-if="data.item.id !== selectedShow.fallback_id"
variant="info"
@click="choose(data.item.id)"
>
Take it!
</b-button>
<b-button
v-else
variant="danger"
@click="choose(null)"
>
Unset
</b-button>
</b-button-group>
</template>
</b-table>
</div>
<div v-else>
<img
src="../../assets/radio.gif"
alt="loading playlists"
>
</div>
<div align="center">
<b-button :to="'files'">
Go to FileManager
</b-button>
</div>
</b-modal>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data () {
return {
saveFunction: null,
playlistsTableFields: [
{ key: 'id', label: 'Index' },
{ key: 'description', label: 'Description' },
{ key: 'entries', label: 'Entries' },
{ key: 'actions', label: 'Actions', class: 'text-right' },
],
}
},
computed: {
loaded () { return this.$store.state.playlists.loaded.playlists },
currentPlaylistDescription () {
let description = false
if (this.selectedShow.fallback_id !== null) {
let choosenList = this.playlists.find(list => list.id === this.selectedShow.fallback_id)
if (choosenList && choosenList.description.length > 0) {
description = choosenList.description
}
}
return description
},
...mapGetters({
selectedShow: 'shows/selectedShow',
playlists: 'playlists/playlists',
})
},
methods: {
open (saveFunction) {
this.saveFunction = saveFunction
this.$refs.modalFallbackSelector.show()
},
hide () {
this.$refs.modalFallbackSelector.hide()
},
choose (id) {
this.saveFunction(id)
},
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
},
}
}
</script>
<style scoped>
</style>
......@@ -114,8 +114,8 @@
<b-badge variant="light">
Fallback Playlist ID:
</b-badge>
<span v-if="selectedShow.fallback_id === ''"><small><i>(none set)</i></small></span>
<span v-else>{{ selectedShow.fallback_id }}</span>
<span v-if="!selectedShow.fallback_id"><small><i>(none set)</i></small></span>
<span v-else>{{ fallbackInfo }}</span>
<img
src="../../assets/16x16/emblem-system.png"
alt="edit"
......@@ -168,18 +168,7 @@
/>
</b-modal>
<b-modal
ref="modalFallback"
title="Fallback playlist ID"
size="lg"
@ok="saveFallback"
>
<b-form-input
v-model="id"
:state="validId"
placeholder="Put the ID of the playlist here, which should be used as a fallback"
/>
</b-modal>
<app-modalFallback ref="modalFallback" />
<b-modal
ref="modalPredecessor"
......@@ -245,14 +234,20 @@
<script>
import { mapGetters } from 'vuex'
import modalFallback from './FallbackSelector.vue'
export default {
components: {
'app-modalFallback': modalFallback,
},
data () {
return {
string: '',
id: 0,
}
},
computed: {
shows () { return this.$store.state.shows.shows },
isSuperuser () { return this.$store.state.auth.user.steeringUser.is_superuser },
......@@ -320,10 +315,19 @@ export default {
return this.id === null || RegExp('^[0-9]*$').test(this.id)
},
fallbackInfo () {
const list = this.playlists.find(p => p.id === this.selectedShow.fallback_id)
if (! list) { return this.selectedShow.fallback_id }
else {
return list.description + ' (ID: ' + list.id + ')'
}
},
...mapGetters({
selectedShow: 'shows/selectedShow',
types: 'shows/types',
fundingcategories: 'shows/fundingcategories',
playlists: 'playlists/playlists',
})
},
methods: {
......@@ -345,8 +349,7 @@ export default {
},
openModalFallback() {
this.id = this.selectedShow.fallback_id
this.$refs.modalFallback.show()
this.$refs.modalFallback.open(this.saveFallback)
},
openModalPredecessor() {
......@@ -366,7 +369,7 @@ export default {
saveProperty (property, value, modal, event) {
if (value !== this.selectedShow[property]) {
event.preventDefault()
if (event) { event.preventDefault() }
this.$store.dispatch('shows/updateProperty', {
id: this.selectedShow.id,
property: property,
......@@ -396,14 +399,9 @@ export default {
}
},
saveFallback (event) {
if (this.validId) {
let id = this.id === '' ? null : this.id
this.saveProperty('fallback_id', id, this.$refs.modalFallback, event)
} else {
event.preventDefault()
alert ('Please provide a valid integer value as ID')
}
saveFallback (id) {
this.saveProperty('fallback_id', id, this.$refs.modalFallback, event)
this.$log.debug(this.playlists)
},
savePredecessor (event) {
......
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