From 714370d9f00e44f98e0370a41fc2e733028c8712 Mon Sep 17 00:00:00 2001
From: jackie / Andrea Ida Malkah Klaura <jackie@o94.at>
Date: Thu, 17 May 2018 16:56:48 +0200
Subject: [PATCH] FEAT: add more modals to change show information
---
src/components/ShowManager.vue | 12 +-
src/components/ShowManagerModalShow.vue | 285 +++++++++++++++++++-----
2 files changed, 235 insertions(+), 62 deletions(-)
diff --git a/src/components/ShowManager.vue b/src/components/ShowManager.vue
index bfd15515..1419da51 100644
--- a/src/components/ShowManager.vue
+++ b/src/components/ShowManager.vue
@@ -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
diff --git a/src/components/ShowManagerModalShow.vue b/src/components/ShowManagerModalShow.vue
index 473e20fb..a889fb93 100644
--- a/src/components/ShowManagerModalShow.vue
+++ b/src/components/ShowManagerModalShow.vue
@@ -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()
}
}
}
--
GitLab