Skip to content

GitLab

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

refactor show simple meta types to own component

parent 4d7dec5a
Hide whitespace changes
Inline Side-by-side
src/components/ShowManager.vue
View file @ fcb0f2cf
......@@ -232,131 +232,7 @@
<hr>
<h2>Allgemeine Einstellungen zur Sendereihe:</h2>
<b-row>
<b-col lg="6">
<p>
<b-badge variant="light">
E-Mail:
</b-badge>
<span v-if="shows[currentShow].email === null"><small><i>(none set)</i></small></span>
<span v-else>{{ shows[currentShow].email }}</span>
<img
src="../assets/16x16/emblem-system.png"
alt="edit contact e-mail"
@click="$refs.appModalShow.showEmail()"
>
</p>
</b-col>
<b-col lg="6">
<p>
<b-badge variant="light">
Website:
</b-badge>
<span v-if="shows[currentShow].website === null"><small><i>(none set)</i></small></span>
<span v-else><a :href="shows[currentShow].website">{{ shows[currentShow].website }}</a></span>
<img
src="../assets/16x16/emblem-system.png"
alt="edit website"
@click="$refs.appModalShow.showWebsite()"
>
</p>
</b-col>
<b-col lg="6">
<p>
<b-badge variant="light">
Show type:
</b-badge>
<!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
<span v-if="loaded.type">
<span v-if="current.type.length === 0"><small><i>(none set)</i></small></span>
<span v-else>{{ current.type[0].type }}</span>
<img
src="../assets/16x16/emblem-system.png"
alt="edit"
@click="$refs.appModalShow.showType()"
>
</span>
<span v-else><img
src="../assets/radio.gif"
height="24px"
alt="loading data"
></span>
</p>
</b-col>
<b-col lg="6">
<p>
<b-badge variant="light">
Funding category (eg. for RTR):
</b-badge>
<!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
<span v-if="loaded.fundingcategory">
<span v-if="current.fundingcategory.length === 0"><small><i>(none set)</i></small></span>
<span v-else>{{ current.fundingcategory[0].fundingcategory }}</span>
<img
src="../assets/16x16/emblem-system.png"
alt="edit"
@click="$refs.appModalShow.showFundingCategory()"
>
</span>
<span v-else><img
src="../assets/radio.gif"
height="24px"
alt="loading data"
></span>
</p>
</b-col>
<b-col lg="6">
<p>
<!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
<!-- TODO: fetch name for predecessor from steering api -->
<b-badge variant="light">
Predecessor:
</b-badge>
<span v-if="shows[currentShow].predecessor === null"><small><i>This show has no predecessor show.</i></small></span>
<span v-else>{{ predecessorName }}</span>
<img
src="../assets/16x16/emblem-system.png"
alt="edit"
@click="$refs.appModalShow.showPredecessor()"
>
</p>
</b-col>
<b-col lg="6">
<p>
<b-badge variant="light">
CBA Series ID:
</b-badge>
<span v-if="shows[currentShow].cba_series_id === null"><small><i>(none set)</i></small></span>
<span v-else>{{ shows[currentShow].cba_series_id }}</span>
<img
src="../assets/16x16/emblem-system.png"
alt="edit CBA series ID"
@click="$refs.appModalShow.showCBAid()"
>
</p>
</b-col>
<b-col lg="6">
<p>
<b-badge variant="light">
Fallback List/Pool:
</b-badge>
<span v-if="shows[currentShow].fallback_id === ''"><small><i>(none set)</i></small></span>
<span v-else>ID: {{ shows[currentShow].fallback_id }}</span>
<img
src="../assets/16x16/emblem-system.png"
alt="edit"
@click="notYetImplemented"
>
</p>
</b-col>
</b-row>
<show-metaSimpleTypes />
<hr v-if="$parent.user.steeringUser.is_superuser">
<b-row v-if="$parent.user.steeringUser.is_superuser">
......@@ -638,6 +514,7 @@
<script>
import showJumbotron from './ShowJumbotron.vue'
import showMetaSimpleTypes from './ShowMetaSimpleTypes.vue'
import modalNotes from './ShowManagerModalNotes.vue'
import modalShow from './ShowManagerModalShow.vue'
import modalSuperuser from './ShowManagerModalSuperuser.vue'
......@@ -656,6 +533,7 @@ export default {
'app-modalSuperuser': modalSuperuser,
'app-modalPlaylist': modalPlaylist,
'show-jumbotron': showJumbotron,
'show-metaSimpleTypes': showMetaSimpleTypes,
},
// generic functions that we want to use from our mixins folder
......@@ -739,22 +617,6 @@ export default {
return DOMPurify.sanitize(this.shows[this.currentShow].description)
},
// In order to not only just show the predecessor of a show as an ID. we
// have to find it in our shows array to then output the predecessors name.
// This currently assumes that a user has access to all the predecessors
// of the shows as well.
// TODO/discuss: if all predecessor names should be accessible, independent
// of access rights, then we would need to load all predecessors show after
// loading our initial shows as well.
predecessorName: function () {
for (var i in this.shows) {
if (this.shows[i].id === this.shows[this.currentShow].predecessor) {
return this.shows[i].name
}
}
return 'Name of predecessor show not available'
},
// As we do not have a single object which holds all info we need to display
// in the table with our timeslots, we use this computed array to do that
notesTableArray: function () {
......@@ -874,6 +736,8 @@ 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.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 @ fcb0f2cf
<template>
<div>
<!-- TODO: use b-form outside the b-form-input, so that
simple input validation works automagically -->
<b-modal
ref="modalShowEmail"
title="E-Mail"
size="lg"
@ok="saveEmail"
>
<b-form-input
v-model="string"
type="email"
placeholder="Put a contact address of your show here"
/>
</b-modal>
<!-- TODO: use b-form outside the b-form-input, so that
simple input validation works automagically -->
<b-modal
ref="modalShowWebsite"
title="Website"
size="lg"
@ok="saveWebsite"
>
<b-form-input
v-model="string"
type="url"
placeholder="Put the website of your show here"
/>
</b-modal>
<!-- TODO: use b-form outside the b-form-input, so that
simple input validation works automagically -->
<b-modal
ref="modalShowCBAid"
title="CBA Series ID"
size="lg"
@ok="saveCBAid"
>
<b-form-input
v-model="id"
type="number"
placeholder="Put the CBA Series ID of your show here"
/>
</b-modal>
<!-- TODO: use b-form outside the b-form-input, so that
simple input validation works automagically -->
<b-modal
ref="modalShowPredecessor"
title="Predecessor of this show"
size="lg"
@ok="savePredecessor"
>
<b-form-select
v-model="id"
:options="showPredecessorSelector"
/>
</b-modal>
<b-modal
ref="modalShowType"
title="Show type"
size="lg"
@ok="saveShowType"
>
<b-row>
<b-col align="center">
<div v-if="!loaded">
<img
src="../assets/radio.gif"
alt="loading data"
>
</div>
<div v-else>
<b-form-select
v-model="id"
:options="showTypeSelector"
/>
</div>
</b-col>
</b-row>
</b-modal>
<b-modal
ref="modalShowFundingCategory"
title="Funding category of this show"
size="lg"
@ok="saveFundingCategory"
>
<b-row>
<b-col align="center">
<div v-if="!loaded">
<img
src="../assets/radio.gif"
alt="loading data"
>
</div>
<div v-else>
<b-form-select
v-model="id"
:options="showFundingCategorySelector"
/>
</div>
</b-col>
</b-row>
</b-modal>
<b-modal
ref="modalShowCategories"
title="Categories of this show"
......@@ -402,28 +295,6 @@ export default {
which use a specific array format [{value:"",text:""},...] to render options.
*/
computed: {
showTypeSelector: function () {
var options = []
for (var i in this.types) {
options.push({value: this.types[i].id, text: this.types[i].type})
}
return options
},
showFundingCategorySelector: function () {
var options = []
for (var i in this.fundingcategories) {
options.push({value: this.fundingcategories[i].id, text: this.fundingcategories[i].abbrev + ' (' + this.fundingcategories[i].fundingcategory + ')', disabled: !this.fundingcategories[i].is_active})
}
return options
},
showPredecessorSelector: function () {
var options = []
options.push({value: null, text: '<i>... this show has no predecessor ...</i>'})
for (var i in this.$parent.shows) {
options.push({value: this.$parent.shows[i].id, text: this.$parent.shows[i].name})
}
return options
},
showCategorySelector: function () {
var options = []
for (var i in this.categories) {
......@@ -471,125 +342,6 @@ export default {
properties that actually get changed
TODO: think about refactoring all those function to one or few functions
*/
saveEmail (event) {
if (this.string !== this.show.email) {
event.preventDefault()
let updatedShow = this.getUpdateShowObject()
if (this.string === '') { updatedShow.email = null }
else { updatedShow.email = this.string }
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.email = updatedShow.email
this.$refs.modalShowEmail.hide()
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not save the show e-mail contact. See console for details.')
})
}
},
saveWebsite (event) {
if (this.string !== this.show.website) {
event.preventDefault()
let updatedShow = this.getUpdateShowObject()
if (this.string === '') { updatedShow.website = null }
else { updatedShow.website = this.string }
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.website = updatedShow.website
this.$refs.modalShowWebsite.hide()
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not save the show website. See console for details.')
})
}
},
saveCBAid (event) {
if (this.id !== this.show.cba_series_id) {
event.preventDefault()
let updatedShow = this.getUpdateShowObject()
if (this.id === '') { updatedShow.cba_series_id = null }
else { updatedShow.cba_series_id = this.id }
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.cba_series_id = updatedShow.cba_series_id
this.$refs.modalShowCBAid.hide()
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not save the CBA show id. See console for details.')
})
}
},
saveShowType (event) {
if (this.id !== this.show.type) {
event.preventDefault()
let updatedShow = this.getUpdateShowObject()
updatedShow.type = this.id
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.type = this.id
this.$parent.getType()
this.$refs.modalShowType.hide()
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not save the show type. See console for details.')
})
}
},
savePredecessor (event) {
if (this.id !== this.show.predecessor) {
event.preventDefault()
let updatedShow = this.getUpdateShowObject()
updatedShow.predecessor = this.id
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.predecessor = this.id
this.$refs.modalShowPredecessor.hide()
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not save the show predecessor. See console for details.')
})
}
},
saveFundingCategory (event) {
if (this.id !== this.show.fundingcategory) {
event.preventDefault()
let updatedShow = this.getUpdateShowObject()
updatedShow.fundingcategory = this.id
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.fundingcategory = this.id
this.$parent.getFundingCategory()
this.$refs.modalShowType.hide()
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not save the show\' funding category. See console for details.')
})
}
},
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])) {
......@@ -765,56 +517,6 @@ export default {
Functions to activate modals
They are called from the parent component
*/
showEmail () {
if (this.show.email !== null) { this.string = this.show.email }
else { this.string = '' }
this.$refs.modalShowEmail.show()
},
showWebsite () {
if (this.show.website !== null) { this.string = this.show.website }
else { this.string = '' }
this.$refs.modalShowWebsite.show()
},
showCBAid () {
this.id = this.show.cba_series_id
this.$refs.modalShowCBAid.show()
},
showPredecessor () {
this.id = this.show.predecessor
this.$refs.modalShowPredecessor.show()
},
showType () {
this.id = this.show.type
this.loaded = false
axios.get(process.env.VUE_APP_API_STEERING + 'types/?active=true', {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(response => {
this.types = response.data
this.loaded = true
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not load show types. See console for details.')
})
this.$refs.modalShowType.show()
},
showFundingCategory () {
this.id = this.show.fundingcategory
this.loaded = false
axios.get(process.env.VUE_APP_API_STEERING + 'fundingcategories/', {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(response => {
this.fundingcategories = response.data
this.loaded = true
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not load funding categories. See console for details.')
})
this.$refs.modalShowFundingCategory.show()
},
showCategories () {
this.array = this.show.category
this.loaded = false
......
src/components/ShowMetaSimpleTypes.vue 0 → 100644
View file @ fcb0f2cf
<template>
<div>
<b-row>
<b-col lg="6">
<p>
<b-badge variant="light">
E-Mail:
</b-badge>
<span v-if="selectedShow.email === null"><small><i>(none set)</i></small></span>
<span v-else>{{ selectedShow.email }}</span>
<img
src="../assets/16x16/emblem-system.png"
alt="edit contact e-mail"
@click="openModalEmail()"
>
</p>
</b-col>
<b-col lg="6">
<p>
<b-badge variant="light">
Website:
</b-badge>
<span v-if="selectedShow.website === null"><small><i>(none set)</i></small></span>
<span v-else><a :href="selectedShow.website">{{ selectedShow.website }}</a></span>
<img
src="../assets/16x16/emblem-system.png"
alt="edit website"
@click="openModalWebsite()"
>
</p>
</b-col>
<b-col lg="6">
<p>
<b-badge variant="light">
Show type:
</b-badge>
<!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
<span v-if="loaded.types">
<span v-if="selectedShow.type === null"><small><i>(none set)</i></small></span>
<span v-else>{{ type }}</span>
<img
src="../assets/16x16/emblem-system.png"
alt="edit"
@click="openModalType()"
>
</span>
<span v-else><img
src="../assets/radio.gif"
height="24px"
alt="loading data"
></span>
</p>
</b-col>
<b-col lg="6">
<p>
<b-badge variant="light">
Funding category (eg. for RTR):
</b-badge>
<!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
<span v-if="loaded.fundingcategories">
<span v-if="selectedShow.fundingcategory === null"><small><i>(none set)</i></small></span>
<span v-else>{{ fundingCategory }}</span>
<img
src="../assets/16x16/emblem-system.png"
alt="edit"
@click="openModalFundingCategory()"
>
</span>
<span v-else><img
src="../assets/radio.gif"
height="24px"
alt="loading data"
></span>
</p>
</b-col>
<b-col lg="6">
<p>
<!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
<!-- TODO: fetch name for predecessor from steering api -->
<b-badge variant="light">
Predecessor:
</b-badge>
<span v-if="selectedShow.predecessor === null"><small><i>This show has no predecessor show.</i></small></span>
<span v-else>{{ predecessorName }}</span>
<img
src="../assets/16x16/emblem-system.png"
alt="edit"
@click="openModalPredecessor()"
>
</p>
</b-col>
<b-col lg="6">
<p>
<b-badge variant="light">
CBA Series ID:
</b-badge>