Skip to content

GitLab

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

FEAT: add more modals to change show information

parent e8886e5b
Hide whitespace changes
Inline Side-by-side
src/components/ShowManager.vue
View file @ 714370d9
......@@ -85,7 +85,7 @@
<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" v-on:click="notYetImplemented" />
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="$refs.appModalShow.showType()" />
</span>
<span v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /></span>
</p>
......@@ -98,7 +98,7 @@
<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" v-on:click="notYetImplemented" />
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="$refs.appModalShow.showFundingCategory()" />
</span>
<span v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /></span>
</p>
......@@ -138,7 +138,7 @@
<b-row>
<b-col lg="2">
<b-badge style="width:80%;">Categories:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
<b-badge style="width:80%;">Categories:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="$refs.appModalShow.showCategories()" />
</b-col>
<b-col lg="4">
<div v-if="loaded.categories">
......@@ -327,7 +327,7 @@ export default {
this.getLanguages()
this.getTopics()
this.getMusicfocus()
this.getRTRCategory()
this.getFundingCategory()
this.getType()
// now fetch the timeslots (including notes) for a given show from PV backend
this.getTimeslots(this.dateSlotsStart, this.dateSlotsEnd, this.numSlots)
......@@ -524,7 +524,7 @@ export default {
}
if (!loadingError) this.loaded.musicfocus = true
},
getRTRCategory: function () {
getFundingCategory: function () {
this.current.fundingcategory = []
var loadingError = false
if (typeof this.shows[this.currentShow].fundingcategory !== 'number') {
......@@ -537,7 +537,7 @@ export default {
this.current.fundingcategory.push(response.data)
}).catch(error => {
loadingError = true
alert('There was an error fetching RTR category from the server: ' + error)
alert('There was an error fetching funding category from the server: ' + error)
})
}
if (!loadingError) this.loaded.fundingcategory = true
......
src/components/ShowManagerModalShow.vue
View file @ 714370d9
......@@ -8,8 +8,8 @@
<b-form-textarea v-model="string" :rows="2" placeholder="Enter a short description"></b-form-textarea>
</b-modal>
<b-modal ref="modalShowDescription" title="Full description" size="lg">
<b-form-textarea v-model="string" :rows="2" placeholder="Enter the full description of this show" @ok="saveDescription"></b-form-textarea>
<b-modal ref="modalShowDescription" title="Full description" size="lg" @ok="saveDescription">
<b-form-textarea v-model="string" :rows="2" placeholder="Enter the full description of this show"></b-form-textarea>
</b-modal>
<!-- TODO: use b-form outside the b-form-input, so that
......@@ -30,17 +30,56 @@
<b-form-input v-model="id" type="number" placeholder="Put the CBA Series ID of your show here"></b-form-input>
</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" 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="Show categories" 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>
<b-form-select multiple v-model="array" :options="showCategorySelector" :select-size="5" />
</div>
</b-col>
</b-row>
</b-modal>
</div>
</template>
<script>
import axios from 'axios'
function debugErrorResponse (data) {
/* function debugErrorResponse (data) {
console.log('Response data provided to transformResponse:')
console.log(data)
return data
}
} */
export default {
props: {
......@@ -53,43 +92,53 @@ export default {
id: 0,
backupid: 0,
array: [],
backuparray: []
backuparray: [],
loaded: false,
types: [],
fundingcategories: [],
categories: []
}
},
methods: {
save () {
var retval = false
console.log('trying to save show')
console.log(process.env.API_STEERING_SHOWS + this.show.id + '/')
console.log(this.show)
axios.put(process.env.API_STEERING_SHOWS + this.show.id + '/', this.show, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token },
transformResponse: [debugErrorResponse]
}).then(response => {
console.log('Response:')
console.log(response)
retval = true
}).catch(error => {
console.log('Error:')
console.log(error)
// alert('There was an error fetching shows from the server: ' + error)
retval = false
})
return retval
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
},
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
}
},
methods: {
saveName (event) {
if (this.string !== this.show.name) {
event.preventDefault()
this.backupstring = this.show.name
this.show.name = this.string
var retval = this.save()
if (retval === false) {
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.$refs.modalShowName.hide()
}).catch(error => {
this.show.name = this.backupstring
console.log('Error:')
console.log(error)
alert('Error: could not save the new show information')
} else {
this.$refs.modalShowName.hide()
}
})
}
},
saveShortDescription (event) {
......@@ -97,13 +146,17 @@ export default {
event.preventDefault()
this.backupstring = this.show.short_description
this.show.short_description = this.string
var retval = this.save()
if (retval === false) {
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.$refs.modalShowShortDescription.hide()
}).catch(error => {
this.show.short_description = this.backupstring
console.log('Error:')
console.log(error)
alert('Error: could not save the new show information')
} else {
this.$refs.modalShowShortDescription.hide()
}
})
}
},
saveDescription (event) {
......@@ -111,13 +164,17 @@ export default {
event.preventDefault()
this.backupstring = this.show.description
this.show.description = this.string
var retval = this.save()
if (retval === false) {
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.$refs.modalShowDescription.hide()
}).catch(error => {
this.show.description = this.backupstring
console.log('Error:')
console.log(error)
alert('Error: could not save the new show information')
} else {
this.$refs.modalShowDescription.hide()
}
})
}
},
saveEmail (event) {
......@@ -125,13 +182,17 @@ export default {
event.preventDefault()
this.backupstring = this.show.email
this.show.email = this.string
var retval = this.save()
if (retval === false) {
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.$refs.modalShowEmail.hide()
}).catch(error => {
this.show.email = this.backupstring
console.log('Error:')
console.log(error)
alert('Error: could not save the new show information')
} else {
this.$refs.modalShowEmail.hide()
}
})
}
},
saveWebsite (event) {
......@@ -139,13 +200,17 @@ export default {
event.preventDefault()
this.backupstring = this.show.website
this.show.website = this.string
var retval = this.save()
if (retval === false) {
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.$refs.modalShowWebsite.hide()
}).catch(error => {
this.show.website = this.backupstring
console.log('Error:')
console.log(error)
alert('Error: could not save the new show information')
} else {
this.$refs.modalShowWebsite.hide()
}
})
}
},
saveCBAid (event) {
......@@ -153,13 +218,73 @@ export default {
event.preventDefault()
this.backupid = this.show.cba_series_id
this.show.cba_series_id = this.id
var retval = this.save()
if (retval === false) {
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.$refs.modalShowCBAid.hide()
}).catch(error => {
this.show.cba_series_id = this.backupid
console.log('Error:')
console.log(error)
alert('Error: could not save the new show information')
} else {
this.$refs.modalShowCBAid.hide()
}
})
}
},
saveShowType (event) {
if (this.id !== this.show.type) {
event.preventDefault()
this.backupid = this.show.type
this.show.type = this.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.getType()
this.$refs.modalShowType.hide()
}).catch(error => {
this.show.type = 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()
this.backupid = this.show.fundingcategory
this.show.fundingcategory = this.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.getFundingCategory()
this.$refs.modalShowType.hide()
}).catch(error => {
this.show.fundingcategory = this.backupid
console.log('Error:')
console.log(error)
alert('Error: could not save the new show information')
})
}
},
saveCategories (event) {
if (this.array.length !== this.show.category.length || !this.array.every((value, index) => value === this.show.category[index])) {
this.backuparray = this.show.category
this.show.category = 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.getCategories()
this.$refs.modalShowCategories.hide()
}).catch(error => {
this.show.category = this.backuparray
console.log('Error:')
console.log(error)
alert('Error: could not save the new show information')
})
}
},
/*
......@@ -189,6 +314,54 @@ export default {
showCBAid () {
this.id = this.show.cba_series_id
this.$refs.modalShowCBAid.show()
},
showType () {
this.id = this.show.type
this.loaded = false
axios.get(process.env.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 => {
console.log('Error:')
console.log(error)
alert('Error: could not load show type information')
})
this.$refs.modalShowType.show()
},
showFundingCategory () {
this.id = this.show.fundingcategory
this.loaded = false
axios.get(process.env.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 => {
console.log('Error:')
console.log(error)
alert('Error: could not load show type information')
})
this.$refs.modalShowFundingCategory.show()
},
showCategories () {
this.array = this.show.category
this.loaded = false
axios.get(process.env.API_STEERING + 'categories/', {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(response => {
this.categories = response.data
this.loaded = true
}).catch(error => {
console.log('Error:')
console.log(error)
alert('Error: could not load show type information')
})
this.$refs.modalShowCategories.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