Skip to content

GitLab

Commit 27474671 authored by Andrea Ida Malkah Klaura's avatar Andrea Ida Malkah Klaura
Browse files

finish all modals to change a shows info

parent 714370d9
Hide whitespace changes
Inline Side-by-side
src/components/ShowManager.vue
View file @ 27474671
......@@ -110,8 +110,8 @@
<!-- TODO: fetch name for predecessor_id from steering api -->
<b-badge variant="light">Predecessor:</b-badge>
<span v-if="shows[currentShow].predecessor_id === null"><small><i>This show has no predecessor show.</i></small></span>
<span v-else>{{ shows[currentShow].predecessor_id }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
<span v-else>{{ predecessorName }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="$refs.appModalShow.showPredecessor()" />
</p>
</b-col>
......@@ -155,7 +155,7 @@
</b-col>
<b-col lg="2">
<b-badge style="width:80%;">Topics:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
<b-badge style="width:80%;">Topics:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="$refs.appModalShow.showTopics()" />
</b-col>
<b-col lg="4">
<div v-if="loaded.topics">
......@@ -172,7 +172,7 @@
</b-col>
<b-col lg="2">
<b-badge style="width:80%;">Musicfocus:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
<b-badge style="width:80%;">Musicfocus:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="$refs.appModalShow.showMusicFocus()" />
</b-col>
<b-col lg="4">
<div v-if="loaded.musicfocus">
......@@ -189,7 +189,7 @@
</b-col>
<b-col lg="2">
<b-badge style="width:80%;">Languages:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
<b-badge style="width:80%;">Languages:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="$refs.appModalShow.showLanguages()" />
</b-col>
<b-col lg="4">
<div v-if="loaded.languages">
......@@ -206,7 +206,7 @@
</b-col>
<b-col lg="2">
<b-badge style="width:80%;">Hosts:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
<b-badge style="width:80%;">Hosts:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="$refs.appModalShow.showHosts()" />
</b-col>
<b-col lg="4">
<div v-if="loaded.hosts">
......@@ -283,6 +283,14 @@ export default {
},
mixins: [ timeslotSort, prettyDate ],
computed: {
predecessorName: function () {
for (var i in this.shows) {
if (this.shows[i].id === this.shows[this.currentShow].predecessor_id) {
return this.shows[i].name
}
}
return 'Name of predecessor show not available'
},
notesTableArray: function () {
var arr = []
for (var i in this.current.timeslots) {
......
src/components/ShowManagerModalShow.vue
View file @ 27474671
......@@ -30,6 +30,12 @@
<b-form-input v-model="id" type="number" placeholder="Put the CBA Series ID of your show here"></b-form-input>
</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">
......@@ -43,7 +49,7 @@
</b-row>
</b-modal>
<b-modal ref="modalShowFundingCategory" title="Funding category" size="lg" @ok="saveFundingCategory">
<b-modal ref="modalShowFundingCategory" title="Funding category of this show" size="lg" @ok="saveFundingCategory">
<b-row>
<b-col align="center">
<div v-if="!loaded">
......@@ -56,14 +62,81 @@
</b-row>
</b-modal>
<b-modal ref="modalShowCategories" title="Show categories" size="lg" @ok="saveCategories">
<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 multiple v-model="array" :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 multiple v-model="array" :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 multiple v-model="array" :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 multiple v-model="array" :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 multiple v-model="array" :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>
......@@ -75,6 +148,7 @@
<script>
import axios from 'axios'
// debug function - can be thrown out as soon as this component is stable
/* function debugErrorResponse (data) {
console.log('Response data provided to transformResponse:')
console.log(data)
......@@ -87,18 +161,39 @@ export default {
},
data () {
return {
/*
We use a those variables for the modals as the model variable, which
can be either a string, and id or an array, depending on the modal.
For every parameter we also need a backup parmeter to reset our local
show storage in case the API update in one of the save functions fails.
*/
string: '',
backupstring: '',
id: 0,
backupid: 0,
array: [],
backuparray: [],
// 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: []
categories: [],
topics: [],
musicfocus: [],
languages: [],
hosts: []
}
},
/*
We use those computed properties for all modals that have select boxes
which use a specific array format [{value:"",text:""},...] to render options.
*/
computed: {
showTypeSelector: function () {
var options = []
......@@ -114,15 +209,65 @@ export default {
}
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) {
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
the info set through the modal.
*/
methods: {
/*
Functions to update certain infos about a show through the API
The API always takes the full show object, so even if we only change one
single item in a show we have to send the whole show.
This also means we could use just one save function. Here we could think
about refactoring. It is important than to check which of the items have
changed and to restore those items in case the update fails.
For now we have single function for every modal to save only the bits
regarding this modal.
*/
saveName (event) {
if (this.string !== this.show.name) {
event.preventDefault()
......@@ -250,6 +395,28 @@ export default {
})
}
},
savePredecessor (event) {
if (this.id !== this.show.predecessor_id) {
event.preventDefault()
this.backupid = this.show.predecessor_id
this.show.predecessor_id = this.id
console.log(this.show.predecessor_id)
axios.put(process.env.API_STEERING_SHOWS + this.show.id + '/', this.show, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(response => {
// this.$parent.shows[this.$parent.currentShow].predecessor_id = this.show.predecessor_id
console.log('saved ' + this.show.predecessor_id)
console.log(response)
this.$refs.modalShowPredecessor.hide()
}).catch(error => {
this.show.predecessor_id = this.backupid
console.log('Error:')
console.log(error)
alert('Error: could not save the new show information')
})
}
},
saveFundingCategory (event) {
if (this.id !== this.show.fundingcategory) {
event.preventDefault()
......@@ -287,9 +454,81 @@ export default {
})
}
},
saveTopics (event) {
if (this.array.length !== this.show.topic.length || !this.array.every((value, index) => value === this.show.topic[index])) {
this.backuparray = this.show.topic
this.show.topic = this.array
axios.put(process.env.API_STEERING_SHOWS + this.show.id + '/', this.show, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(response => {
this.$parent.getTopics()
this.$refs.modalShowTopics.hide()
}).catch(error => {
this.show.topic = this.backuparray
console.log('Error:')
console.log(error)
alert('Error: could not save the new show information')
})
}
},
saveMusicFocus (event) {
if (this.array.length !== this.show.musicfocus.length || !this.array.every((value, index) => value === this.show.musicfocus[index])) {
this.backuparray = this.show.musicfocus
this.show.musicfocus = this.array
axios.put(process.env.API_STEERING_SHOWS + this.show.id + '/', this.show, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(response => {
this.$parent.getMusicfocus()
this.$refs.modalShowMusicFocus.hide()
}).catch(error => {
this.show.musicfocus = this.backuparray
console.log('Error:')
console.log(error)
alert('Error: could not save the new show information')
})
}
},
saveLanguages (event) {
if (this.array.length !== this.show.language.length || !this.array.every((value, index) => value === this.show.language[index])) {
this.backuparray = this.show.language
this.show.language = this.array
axios.put(process.env.API_STEERING_SHOWS + this.show.id + '/', this.show, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(response => {
this.$parent.getLanguages()
this.$refs.modalShowLanguages.hide()
}).catch(error => {
this.show.language = this.backuparray
console.log('Error:')
console.log(error)
alert('Error: could not save the new show information')
})
}
},
saveHosts (event) {
if (this.array.length !== this.show.hosts.length || !this.array.every((value, index) => value === this.show.hosts[index])) {
this.backuparray = this.show.hosts
this.show.hosts = this.array
axios.put(process.env.API_STEERING_SHOWS + this.show.id + '/', this.show, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(response => {
this.$parent.getHosts()
this.$refs.modalShowHosts.hide()
}).catch(error => {
this.show.hosts = this.backuparray
console.log('Error:')
console.log(error)
alert('Error: could not save the new show information')
})
}
},
/*
Functions to activate modals
The can be called from the parent component
They are called from the parent component
*/
showName () {
this.string = this.show.name
......@@ -315,6 +554,10 @@ export default {
this.id = this.show.cba_series_id
this.$refs.modalShowCBAid.show()
},
showPredecessor () {
this.id = this.show.predecessor_id
this.$refs.modalShowPredecessor.show()
},
showType () {
this.id = this.show.type
this.loaded = false
......@@ -327,7 +570,7 @@ export default {
}).catch(error => {
console.log('Error:')
console.log(error)
alert('Error: could not load show type information')
alert('Error: could not load available show types')
})
this.$refs.modalShowType.show()
},
......@@ -343,7 +586,7 @@ export default {
}).catch(error => {
console.log('Error:')
console.log(error)
alert('Error: could not load show type information')
alert('Error: could not load available funding categories')
})
this.$refs.modalShowFundingCategory.show()
},
......@@ -359,9 +602,73 @@ export default {
}).catch(error => {
console.log('Error:')
console.log(error)
alert('Error: could not load show type information')
alert('Error: could not load available categories')
})
this.$refs.modalShowCategories.show()
},
showTopics () {
this.array = this.show.topic
this.loaded = false
axios.get(process.env.API_STEERING + 'topics/', {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(response => {
this.topics = response.data
this.loaded = true
}).catch(error => {
console.log('Error:')
console.log(error)
alert('Error: could not load available topics')
})
this.$refs.modalShowTopics.show()
},
showMusicFocus () {
this.array = this.show.musicfocus
this.loaded = false
axios.get(process.env.API_STEERING + 'musicfocus/', {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(response => {
this.musicfocus = response.data
this.loaded = true
}).catch(error => {
console.log('Error:')
console.log(error)
alert('Error: could not load available music foci')
})
this.$refs.modalShowMusicFocus.show()
},
showLanguages () {
this.array = this.show.language
this.loaded = false
axios.get(process.env.API_STEERING + 'languages/', {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(response => {
this.languages = response.data
this.loaded = true
}).catch(error => {
console.log('Error:')
console.log(error)
alert('Error: could not load available languages')
})
this.$refs.modalShowLanguages.show()
},
showHosts () {
this.array = this.show.hosts
this.loaded = false
axios.get(process.env.API_STEERING + 'hosts/', {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(response => {
this.hosts = response.data
this.loaded = true
}).catch(error => {
console.log('Error:')
console.log(error)
alert('Error: could not load available hosts')
})
this.$refs.modalShowHosts.show()
}
}
}
......
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