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

FEAT: add show type and funding cat. to add show modal

parent 843f15b2
...@@ -9,27 +9,28 @@ ...@@ -9,27 +9,28 @@
> >
<b-container fluid> <b-container fluid>
<b-row> <b-row>
<b-col cols="2"> <b-col cols="3">
Name of the show: Name of the show:
</b-col> </b-col>
<b-col cols="10"> <b-col cols="9">
<b-form-input <b-form-input
v-model="newShow.name" v-model="newShow.name"
type="text" type="text"
placeholder="Enter a title for this new show" placeholder="Enter a title for this new show"
/> />
</b-col> </b-col>
<b-col cols="2" /> <b-col cols="3" />
<b-col cols="10"> <b-col cols="9">
<small class="slug">Slug: {{ temporarySlug }}</small> <small class="slug">Slug: {{ temporarySlug }}</small>
</b-col> </b-col>
</b-row> </b-row>
<br> <br>
<b-row> <b-row>
<b-col cols="2"> <b-col cols="3">
Short description: Short description:
</b-col> </b-col>
<b-col cols="10"> <b-col cols="9">
<b-form-input <b-form-input
v-model="newShow.short_description" v-model="newShow.short_description"
type="text" type="text"
...@@ -37,6 +38,47 @@ ...@@ -37,6 +38,47 @@
/> />
</b-col> </b-col>
</b-row> </b-row>
<br>
<b-row>
<b-col cols="3">
Show type:
</b-col>
<b-col cols="9">
<div v-if="!loaded.types">
<img
src="../assets/radio.gif"
alt="loading data"
>
</div>
<div v-else>
<b-form-select
v-model="newShow.type"
:options="showTypeSelector"
/>
</div>
</b-col>
</b-row>
<b-row>
<b-col cols="3">
Funding category:
</b-col>
<b-col cols="9">
<div v-if="!loaded.fundingcategories">
<img
src="../assets/radio.gif"
alt="loading data"
>
</div>
<div v-else>
<b-form-select
v-model="newShow.fundingcategory"
:options="showFundingCategorySelector"
/>
</div>
</b-col>
</b-row>
</b-container> </b-container>
</b-modal> </b-modal>
...@@ -72,8 +114,8 @@ export default { ...@@ -72,8 +114,8 @@ export default {
name: "", name: "",
slug: "", slug: "",
short_description: "", short_description: "",
type: 1, type: 0,
fundingcategory: 1, fundingcategory: 0,
category: [], category: [],
hosts: [], hosts: [],
owners: [], owners: [],
...@@ -84,14 +126,44 @@ export default { ...@@ -84,14 +126,44 @@ export default {
deletedShow: { deletedShow: {
id: null, id: null,
name: '', name: '',
} },
loaded: {
types: false,
fundingcategories: false,
},
types: [],
fundingcategories: [],
} }
}, },
computed: { computed: {
temporarySlug: function () { temporarySlug: function () {
return this.slug(this.newShow.name) return this.slug(this.newShow.name)
},
showTypeSelector: function () {
let options = []
for (let i in this.types) {
options.push({
value: this.types[i].id,
text: this.types[i].type
})
} }
return options
}, },
showFundingCategorySelector: function () {
let options = []
for (let i in this.fundingcategories) {
options.push({
value: this.fundingcategories[i].id,
text: this.fundingcategories[i].abbrev + ' (' + this.fundingcategories[i].fundingcategory + ')'
})
}
return options
},
},
methods: { methods: {
addShow (event) { addShow (event) {
// prevent the modal from closing automatically on click // prevent the modal from closing automatically on click
...@@ -138,20 +210,54 @@ export default { ...@@ -138,20 +210,54 @@ export default {
}) })
}, },
// clear and fetch modal data and open the modal to add new shows
showModalAddShow () { showModalAddShow () {
this.newShow.name = '' this.newShow.name = ''
this.newShow.slug = '' this.newShow.slug = ''
this.newShow.short_description = '' this.newShow.short_description = ''
// TODO: this.loadTypes()
// - load types & funding categories this.loadFundingCategories()
this.$refs.modalAddShow.show() this.$refs.modalAddShow.show()
}, },
// open the deletion confirmation modal
showModalDeleteShow (id, name) { showModalDeleteShow (id, name) {
this.deletedShow.id = id this.deletedShow.id = id
this.deletedShow.name = name this.deletedShow.name = name
this.$refs.modalDeleteShow.show() this.$refs.modalDeleteShow.show()
} },
// fetch all available (that is: active) show type from steering
loadTypes () {
this.loaded.types = 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.types = true
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not load available show types. See console for details.')
})
},
// fetch all available (that is: active) funding categories from steering
loadFundingCategories () {
this.loaded.fundingcategories = false
axios.get(process.env.VUE_APP_API_STEERING + 'fundingcategories/?active=true', {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(response => {
this.fundingcategories = response.data
this.loaded.fundingcategories = true
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not load available funding categories. See console for details.')
})
},
} }
} }
</script> </script>
......
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