Skip to content

GitLab

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

move arrays of show meta to own component

parent cff9ef36
Hide whitespace changes
Inline Side-by-side
src/components/ShowManager.vue
View file @ fde3cc26
......@@ -233,229 +233,7 @@
<h2>Allgemeine Einstellungen zur Sendereihe:</h2>
<show-metaSimpleTypes />
<hr v-if="$parent.user.steeringUser.is_superuser">
<b-row v-if="$parent.user.steeringUser.is_superuser">
<b-col lg="2">
<b-badge
variant="info"
style="width:80%;"
>
Owners:
</b-badge> <img
src="../assets/16x16/emblem-system.png"
alt="edit"
@click="$refs.appModalSuperuser.showModalOwners(shows[currentShow])"
>
</b-col>
<b-col lg="10">
<div v-if="loaded.owners">
<p v-if="shows[currentShow].owners.length === 0">
<small><i>(none set)</i></small>
</p>
<p v-else>
<!-- TODO: make link on name; when user clicks, open modal to edit host -->
<ul>
<li
v-for="owner in current.owners"
:key="owner.id"
>
{{ owner.first_name }} {{ owner.last_name }}
<b-badge variant="light">
username:
</b-badge> <small>{{ owner.username }}</small>
<span v-if="owner.email.length > 0">
<b-badge variant="light">
email:
</b-badge> <small>{{ owner.email }}</small>
</span>
</li>
</ul>
</p>
</div>
<div v-else>
<img
src="../assets/radio.gif"
height="24px"
alt="loading data"
><br>
</div>
</b-col>
</b-row>
<hr v-if="$parent.user.steeringUser.is_superuser">
<b-row>
<b-col lg="2">
<b-badge style="width:80%;">
Categories:
</b-badge> <img
src="../assets/16x16/emblem-system.png"
alt="edit"
@click="$refs.appModalShow.showCategories()"
>
</b-col>
<b-col lg="4">
<div v-if="loaded.categories">
<p v-if="shows[currentShow].category.length === 0">
<small><i>(none set)</i></small>
</p>
<p v-else>
<ul>
<li
v-for="cat in current.categories"
:key="cat.id"
>
{{ cat.category }}
</li>
</ul>
</p>
</div>
<div v-else>
<img
src="../assets/radio.gif"
height="24px"
alt="loading data"
><br>
</div>
</b-col>
<b-col lg="2">
<b-badge style="width:80%;">
Topics:
</b-badge> <img
src="../assets/16x16/emblem-system.png"
alt="edit"
@click="$refs.appModalShow.showTopics()"
>
</b-col>
<b-col lg="4">
<div v-if="loaded.topics">
<p v-if="shows[currentShow].topic.length === 0">
<small><i>(none set)</i></small>
</p>
<p v-else>
<ul>
<li
v-for="topic in current.topics"
:key="topic.id"
>
{{ topic.topic }}
</li>
</ul>
</p>
</div>
<div v-else>
<img
src="../assets/radio.gif"
height="24px"
alt="loading data"
><br>
</div>
</b-col>
<b-col lg="2">
<b-badge style="width:80%;">
Musicfocus:
</b-badge> <img
src="../assets/16x16/emblem-system.png"
alt="edit"
@click="$refs.appModalShow.showMusicFocus()"
>
</b-col>
<b-col lg="4">
<div v-if="loaded.musicfocus">
<p v-if="shows[currentShow].musicfocus.length === 0">
<small><i>(none set)</i></small>
</p>
<p v-else>
<ul>
<li
v-for="focus in current.musicfocus"
:key="focus.id"
>
{{ focus.focus }}
</li>
</ul>
</p>
</div>
<div v-else>
<img
src="../assets/radio.gif"
height="24px"
alt="loading data"
><br>
</div>
</b-col>
<b-col lg="2">
<b-badge style="width:80%;">
Languages:
</b-badge> <img
src="../assets/16x16/emblem-system.png"
alt="edit"
@click="$refs.appModalShow.showLanguages()"
>
</b-col>
<b-col lg="4">
<div v-if="loaded.languages">
<p v-if="shows[currentShow].language.length === 0">
<small><i>(none set)</i></small>
</p>
<p v-else>
<ul>
<li
v-for="lang in current.languages"
:key="lang.id"
>
{{ lang.name }}
</li>
</ul>
</p>
</div>
<div v-else>
<img
src="../assets/radio.gif"
height="24px"
alt="loading data"
><br>
</div>
</b-col>
<b-col lg="2">
<b-badge style="width:80%;">
Hosts:
</b-badge> <img
src="../assets/16x16/emblem-system.png"
alt="edit"
@click="$refs.appModalShow.showHosts()"
>
</b-col>
<b-col lg="4">
<div v-if="loaded.hosts">
<p v-if="shows[currentShow].hosts.length === 0">
<small><i>(none set)</i></small>
</p>
<p v-else>
<!-- TODO: make link on name; when user clicks, open modal to edit host -->
<ul>
<li
v-for="host in current.hosts"
:key="host.id"
>
{{ host.name }}
</li>
</ul>
</p>
</div>
<div v-else>
<img
src="../assets/radio.gif"
height="24px"
alt="loading data"
><br>
</div>
</b-col>
</b-row>
<show-metaArrays />
<b-row>
<b-col lg="2">
......@@ -514,7 +292,8 @@
<script>
import showJumbotron from './ShowJumbotron.vue'
import showMetaSimpleTypes from './ShowMetaSimpleTypes.vue'
import showMetaSimpleTypes from './ShowMetaArrays.vue'
import showMetaArrays from './ShowMetaSimpleTypes.vue'
import modalNotes from './ShowManagerModalNotes.vue'
import modalShow from './ShowManagerModalShow.vue'
import modalSuperuser from './ShowManagerModalSuperuser.vue'
......@@ -533,6 +312,7 @@ export default {
'app-modalSuperuser': modalSuperuser,
'app-modalPlaylist': modalPlaylist,
'show-jumbotron': showJumbotron,
'show-metaArrays': showMetaArrays,
'show-metaSimpleTypes': showMetaSimpleTypes,
},
......@@ -736,8 +516,13 @@ export default {
// If the id argument is null, the first show in the show array will be used
loadAndSwitch: function (id) {
this.$store.dispatch('shows/fetchShows')
this.$store.dispatch('shows/fetchTypes')
this.$store.dispatch('shows/fetchFundingCategories')
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'})
this.$store.dispatch('shows/fetchMetaArray', {property: 'topics'})
this.$store.dispatch('shows/fetchMetaArray', {property: 'musicfocus'})
this.$store.dispatch('shows/fetchMetaArray', {property: 'languages'})
this.$store.dispatch('shows/fetchMetaArray', {property: 'hosts'})
this.loaded.shows = false
var uri = process.env.VUE_APP_API_STEERING_SHOWS
// normal users should only see their own shows, only superusers see all shows
......
src/components/ShowManagerModalShow.vue
View file @ fde3cc26
<template>
<div>
<b-modal
ref="modalShowCategories"
title="Categories of this show"
size="lg"
@ok="saveCategories"
>
<b-row>
<b-col align="center">
<div v-if="!loaded">
<img
src="../assets/radio.gif"
alt="loading data"
>
</div>
<div v-else>
<p>Choose one or more categoires for this show:</p>
<b-form-select
v-model="array"
multiple
:options="showCategorySelector"
:select-size="5"
/>
<br><br>
<b-alert
show
dismissible
variant="info"
>
<b>Hint:</b> use <code>CTRL+click</code> for multiple selection
</b-alert>
</div>
</b-col>
</b-row>
</b-modal>
<b-modal
ref="modalShowTopics"
title="Topics of this show"
size="lg"
@ok="saveTopics"
>
<b-row>
<b-col align="center">
<div v-if="!loaded">
<img
src="../assets/radio.gif"
alt="loading data"
>
</div>
<div v-else>
<p>Choose one or more topics for this show:</p>
<b-form-select
v-model="array"
multiple
:options="showTopicsSelector"
:select-size="5"
/>
<br><br>
<b-alert
show
dismissible
variant="info"
>
<b>Hint:</b> use <code>CTRL+click</code> for multiple selection
</b-alert>
</div>
</b-col>
</b-row>
</b-modal>
<b-modal
ref="modalShowMusicFocus"
title="Music focus of this show"
size="lg"
@ok="saveMusicFocus"
>
<b-row>
<b-col align="center">
<div v-if="!loaded">
<img
src="../assets/radio.gif"
alt="loading data"
>
</div>
<div v-else>
<p>Choose none, one or more music foci for this show:</p>
<b-form-select
v-model="array"
multiple
:options="showMusicFocusSelector"
:select-size="5"
/>
<br><br>
<b-alert
show
dismissible
variant="info"
>
<b>Hint:</b> use <code>CTRL+click</code> for multiple selection
</b-alert>
</div>
</b-col>
</b-row>
</b-modal>
<b-modal
ref="modalShowLanguages"
title="Languages of this show"
size="lg"
@ok="saveLanguages"
>
<b-row>
<b-col align="center">
<div v-if="!loaded">
<img
src="../assets/radio.gif"
alt="loading data"
>
</div>
<div v-else>
<p>Choose one or more languages for this show:</p>
<b-form-select
v-model="array"
multiple
:options="showLanguagesSelector"
:select-size="5"
/>
<br><br>
<b-alert
show
dismissible
variant="info"
>
<b>Hint:</b> use <code>CTRL+click</code> for multiple selection
</b-alert>
</div>
</b-col>
</b-row>
</b-modal>
<b-modal
ref="modalShowHosts"
title="Hosts of this show"
size="lg"
@ok="saveHosts"
>
<b-row>
<b-col align="center">
<div v-if="!loaded">
<img
src="../assets/radio.gif"
alt="loading data"
>
</div>
<div v-else>
<p>Choose one or more hosts for this show:</p>
<b-form-select
v-model="array"
multiple
:options="showHostsSelector"
:select-size="5"
/>
<br><br>
<b-alert
show
dismissible
variant="info"
>
<b>Hint:</b> use <code>CTRL+click</code> for multiple selection
</b-alert>
</div>
</b-col>
</b-row>
</b-modal>
<b-modal
ref="modalLogo"
title="Logo of this show"
......@@ -275,19 +100,6 @@ export default {
file: null,
// we use this when opening modals, that have to fetch options through the API first.
loaded: false,
/*
These are temporary storages when we fetch arrays from the API. We need
them, because the show object only has arrays of ids and we have to
translate those to the correct labels, which we only get through API
calls.
*/
types: [],
fundingcategories: [],
categories: [],
topics: [],
musicfocus: [],
languages: [],
hosts: []
}
},
/*
......@@ -295,41 +107,6 @@ export default {
which use a specific array format [{value:"",text:""},...] to render options.
*/
computed: {
showCategorySelector: function () {
var options = []
for (var i in this.categories) {
options.push({value: this.categories[i].id, text: this.categories[i].abbrev + ' (' + this.categories[i].category + ')', disabled: !this.categories[i].is_active})
}
return options
},
showTopicsSelector: function () {
var options = []
for (var i in this.topics) {
options.push({value: this.topics[i].id, text: this.topics[i].abbrev + ' (' + this.topics[i].topic + ')', disabled: !this.topics[i].is_active})
}
return options
},
showMusicFocusSelector: function () {
var options = []
for (var i in this.musicfocus) {
options.push({value: this.musicfocus[i].id, text: this.musicfocus[i].abbrev + ' (' + this.musicfocus[i].focus + ')', disabled: !this.musicfocus[i].is_active})
}
return options
},
showLanguagesSelector: function () {
var options = []
for (var i in this.languages) {
options.push({value: this.languages[i].id, text: this.languages[i].name, disabled: !this.languages[i].is_active})
}
return options
},
showHostsSelector: function () {
var options = []
for (var i in this.hosts) {
options.push({value: this.hosts[i].id, text: this.hosts[i].name, disabled: !this.hosts[i].is_active})
}
return options
}
},
/*
Here we start all methods needed to show the single modals and to update
......@@ -342,106 +119,6 @@ export default {
properties that actually get changed
TODO: think about refactoring all those function to one or few functions
*/
saveCategories (event) {
this.$log.debug('saveCategories', this.array, this.show.category)
if (this.array.length !== this.show.category.length || !this.array.every((value, index) => value === this.show.category[index])) {
event.preventDefault()
let updatedShow = this.getUpdateShowObject()
updatedShow.category = this.array
let uri = process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/'
axios.put(uri, updatedShow, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(() => {
this.$parent.shows[this.$parent.currentShow].category = this.array
this.$parent.getCategories()
this.$refs.modalShowCategories.hide()
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not save categories. See console for details.')
})
}
},
saveTopics (event) {
if (this.array.length !== this.show.topic.length || !this.array.every((value, index) => value === this.show.topic[index])) {
event.preventDefault()
let updatedShow = this.getUpdateShowObject()
updatedShow.topic = this.array
axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', updatedShow, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(() => {
this.show.topic = this.array
this.$parent.getTopics()
this.$refs.modalShowTopics.hide()
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not save the show\'s topics. See console for details.')
})
}
},
saveMusicFocus (event) {
if (this.array.length !== this.show.musicfocus.length || !this.array.every((value, index) => value === this.show.musicfocus[index])) {
event.preventDefault()
let updatedShow = this.getUpdateShowObject()
updatedShow.musicfocus = this.array
axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', updatedShow, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(() => {
this.show.musicfocus = this.array
this.$parent.getMusicfocus()
this.$refs.modalShowMusicFocus.hide()
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not save the show\'s music focus. See console for details.')
})
}
},
saveLanguages (event) {
if (this.array.length !== this.show.language.length || !this.array.every((value, index) => value === this.show.language[index])) {
event.preventDefault()
let updatedShow = this.getUpdateShowObject()
updatedShow.language = this.array
axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', updatedShow, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(() => {
this.show.language = this.array
this.$parent.getLanguages()
this.$refs.modalShowLanguages.hide()
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not save the show\'s languages. See console for details.')
})
}
},
saveHosts (event) {
if (this.array.length !== this.show.hosts.length || !this.array.every((value, index) => value === this.show.hosts[index])) {
event.preventDefault()
let updatedShow = this.getUpdateShowObject()
updatedShow.hosts = this.array
axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', updatedShow, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(() => {
this.show.hosts = this.array
this.$parent.getHosts()
this.$refs.modalShowHosts.hide()
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not save the show\'s hosts. See console for details.')
})
}
},