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

move show image modals to own component

parent 55c88449
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
# API URLs for the other AuRa modules # API URLs for the other AuRa modules
# =================================== # ===================================
VUE_APP_BASEURI_STEERING = http://127.0.0.1:8000
VUE_APP_API_STEERING = http://127.0.0.1:8000/api/v1/ VUE_APP_API_STEERING = http://127.0.0.1:8000/api/v1/
VUE_APP_API_STEERING_SHOWS = http://127.0.0.1:8000/api/v1/shows/ VUE_APP_API_STEERING_SHOWS = http://127.0.0.1:8000/api/v1/shows/
VUE_APP_API_TANK = http://127.0.0.1:8040/api/v1/ VUE_APP_API_TANK = http://127.0.0.1:8040/api/v1/
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
# =============================== # ===============================
# These are the REST API endpoints of your aura/steering module # These are the REST API endpoints of your aura/steering module
VUE_APP_BASEURI_STEERING = https://YOUR.STEERING.DOMAIN
VUE_APP_API_STEERING = http://YOUR.STEERING.DOMAIN/api/v1/ VUE_APP_API_STEERING = http://YOUR.STEERING.DOMAIN/api/v1/
VUE_APP_API_STEERING_SHOWS = http://YOUR.STEERING.DOMAIN/api/v1/shows/ VUE_APP_API_STEERING_SHOWS = http://YOUR.STEERING.DOMAIN/api/v1/shows/
......
...@@ -52,10 +52,6 @@ ...@@ -52,10 +52,6 @@
<!-- When all show data is loaded, here we display all the rest --> <!-- When all show data is loaded, here we display all the rest -->
<div v-else> <div v-else>
<!-- include the modals to edit show and timeslot entries from the modal compontents --> <!-- include the modals to edit show and timeslot entries from the modal compontents -->
<app-modalShow
ref="appModalShow"
:show="shows[currentShow]"
/>
<app-modalNotes <app-modalNotes
ref="appModalNotes" ref="appModalNotes"
:show="shows[currentShow]" :show="shows[currentShow]"
...@@ -235,56 +231,7 @@ ...@@ -235,56 +231,7 @@
<show-metaSimpleTypes /> <show-metaSimpleTypes />
<show-metaArrays /> <show-metaArrays />
<show-metaOwners /> <show-metaOwners />
<show-metaImages />
<b-row>
<b-col lg="2">
<b-badge style="width:80%;">
Logo:
</b-badge> <img
src="../assets/16x16/emblem-system.png"
alt="edit"
@click="$refs.appModalShow.showLogo()"
>
</b-col>
<b-col lg="4">
<div v-if="current.logo.length === 0">
<small><i>(none set)</i></small>
</div>
<div v-else>
<br>
<b-img
thumbnail
:src="current.logo"
fluid
@click="$refs.appModalShow.showLogo()"
/>
</div>
</b-col>
<b-col lg="2">
<b-badge style="width:80%;">
Image:
</b-badge> <img
src="../assets/16x16/emblem-system.png"
alt="edit"
@click="$refs.appModalShow.showImage()"
>
</b-col>
<b-col lg="4">
<div v-if="current.image.length === 0">
<small><i>(none set)</i></small>
</div>
<div v-else>
<br>
<b-img
thumbnail
:src="current.image"
fluid
@click="$refs.appModalShow.showImage()"
/>
</div>
</b-col>
</b-row>
<hr> <hr>
</div> </div>
...@@ -296,8 +243,8 @@ import showJumbotron from './ShowJumbotron.vue' ...@@ -296,8 +243,8 @@ import showJumbotron from './ShowJumbotron.vue'
import showMetaSimpleTypes from './ShowMetaSimpleTypes.vue' import showMetaSimpleTypes from './ShowMetaSimpleTypes.vue'
import showMetaArrays from './ShowMetaArrays.vue' import showMetaArrays from './ShowMetaArrays.vue'
import showMetaOwners from './ShowMetaOwners.vue' import showMetaOwners from './ShowMetaOwners.vue'
import showMetaImages from './ShowMetaImages.vue'
import modalNotes from './ShowManagerModalNotes.vue' import modalNotes from './ShowManagerModalNotes.vue'
import modalShow from './ShowManagerModalShow.vue'
import modalAddShow from './AddShowModal.vue' import modalAddShow from './AddShowModal.vue'
import modalPlaylist from './ShowManagerModalPlaylist.vue' import modalPlaylist from './ShowManagerModalPlaylist.vue'
import timeslotSort from '../mixins/timeslotSort' import timeslotSort from '../mixins/timeslotSort'
...@@ -310,13 +257,13 @@ export default { ...@@ -310,13 +257,13 @@ export default {
// components, to make it a tiny lickle bit less messy here // components, to make it a tiny lickle bit less messy here
components: { components: {
'app-modalNotes': modalNotes, 'app-modalNotes': modalNotes,
'app-modalShow': modalShow,
'app-modalPlaylist': modalPlaylist, 'app-modalPlaylist': modalPlaylist,
'addShowModal': modalAddShow, 'addShowModal': modalAddShow,
'show-jumbotron': showJumbotron, 'show-jumbotron': showJumbotron,
'show-metaArrays': showMetaArrays, 'show-metaArrays': showMetaArrays,
'show-metaSimpleTypes': showMetaSimpleTypes, 'show-metaSimpleTypes': showMetaSimpleTypes,
'show-metaOwners': showMetaOwners, 'show-metaOwners': showMetaOwners,
'show-metaImages': showMetaImages,
}, },
// generic functions that we want to use from our mixins folder // generic functions that we want to use from our mixins folder
......
<template> <template>
<div> <div>
<b-row>
<b-col lg="2">
<b-badge style="width:80%;">
Logo:
</b-badge> <img
src="../assets/16x16/emblem-system.png"
alt="edit"
@click="openModalLogo()"
>
</b-col>
<b-col lg="4">
<div v-if="selectedShow.logo.length === 0">
<small><i>(none set)</i></small>
</div>
<div v-else>
<br>
<b-img
thumbnail
:src="selectedShow.logo"
fluid
@click="openModalLogo()"
/>
</div>
</b-col>
<b-col lg="2">
<b-badge style="width:80%;">
Image:
</b-badge> <img
src="../assets/16x16/emblem-system.png"
alt="edit"
@click="openModalImage()"
>
</b-col>
<b-col lg="4">
<div v-if="selectedShow.image.length === 0">
<small><i>(none set)</i></small>
</div>
<div v-else>
<br>
<b-img
thumbnail
:src="selectedShow.image"
fluid
@click="openModalImage()"
/>
</div>
</b-col>
</b-row>
<b-modal <b-modal
ref="modalLogo" ref="modalLogo"
title="Logo of this show" title="Logo of this show"
...@@ -75,137 +125,59 @@ ...@@ -75,137 +125,59 @@
</template> </template>
<script> <script>
import axios from 'axios' import { mapGetters } from 'vuex'
import showUpdates from '../mixins/showUpdates.js'
export default { export default {
mixins: [ showUpdates ],
props: {
show: { type: Object, required: true }
},
data () { data () {
return { 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: '', string: '',
backupstring: '',
id: 0,
backupid: 0,
array: [],
backuparray: [],
file: null, file: null,
// we use this when opening modals, that have to fetch options through the API first.
loaded: false,
} }
}, },
/*
We use those computed properties for all modals that have select boxes
which use a specific array format [{value:"",text:""},...] to render options.
*/
computed: { computed: {
...mapGetters({
selectedShow: 'shows/selectedShow',
})
}, },
/*
Here we start all methods needed to show the single modals and to update
the info set through the modal.
*/
methods: { methods: {
/* openModalLogo () {
Functions to update certain infos about a show should first check out a if (this.selectedShow.logo === null) { this.string = '' }
new show object with getUpdateShowObject and then modify / add those else { this.string = this.selectedShow.logo }
properties that actually get changed this.file = null
TODO: think about refactoring all those function to one or few functions this.$refs.modalLogo.show()
*/ },
saveLogo (event) { openModalImage () {
if (this.selectedShow.image === null) { this.string = '' }
else { this.string = this.selectedShow.image }
this.file = null
this.$refs.modalImage.show()
},
updateImage (type, modal, event) {
event.preventDefault() event.preventDefault()
if (this.file === null) { alert('Please provide a file to upload') } if (this.file === null) { alert('Please provide a file to upload') }
else if (this.file.type !== 'image/jpeg' && this.file.type !== 'image/png') { alert('Please provide a valid image file (JPEG or PNG)') } else if (this.file.type !== 'image/jpeg' && this.file.type !== 'image/png') { alert('Please provide a valid image file (JPEG or PNG)') }
else { else {
let formData = new FormData() this.$store.dispatch('shows/updateImage', {
this.backupstring = this.string id: this.selectedShow.id,
// these propoerties have to be sent always (and they must not be null) type: type,
formData.append('name', this.show.name) file: this.file,
formData.append('slug', this.show.slug) callback: (response) => {
formData.append('short_description', this.show.short_description) this.$log.debug('updateImage callback')
formData.append('type', this.show.type) this.$log.debug(response)
formData.append('fundingcategory', this.show.fundingcategory) modal.hide()
// now we append the new logo file },
formData.append('logo', this.file, this.file.name)
// ok then, let's submit it
let uri = process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/'
axios.put(uri, formData, {
withCredentials: true,
headers: {
'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token,
'Content-Type': 'multipart/form-data',
}
}).then(() => {
this.$parent.loadAndSwitch(this.$parent.currentShowID)
this.$refs.modalLogo.hide()
}).catch(error => {
this.file = null
this.string = this.backupstring
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not set new logo. See console for details.')
}) })
} }
}, },
saveImage (event) { saveImage (event) {
event.preventDefault() this.updateImage('image', this.$refs.modalImage, event)
if (this.file === null) { alert('Please provide a file to upload') }
else if (this.file.type !== 'image/jpeg' && this.file.type !== 'image/png') { alert('Please provide a valid image file (JPEG or PNG)') }
else {
let formData = new FormData()
this.backupstring = this.string
// these properties have to be sent always (and they must not be null)
formData.append('name', this.show.name)
formData.append('slug', this.show.slug)
formData.append('short_description', this.show.short_description)
formData.append('type', this.show.type)
formData.append('fundingcategory', this.show.fundingcategory)
// now we append the new image file
formData.append('image', this.file, this.file.name)
// ok then, let's submit it
let uri = process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/'
axios.put(uri, formData, {
withCredentials: true,
headers: {
'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token,
'Content-Type': 'multipart/form-data',
}
}).then(() => {
this.$parent.loadAndSwitch(this.$parent.currentShowID)
this.$refs.modalImage.hide()
}).catch(error => {
this.file = null
this.string = this.backupstring
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could set new image. See console for details.')
})
}
}, },
/*
Functions to activate modals saveLogo (event) {
They are called from the parent component this.updateImage('logo', this.$refs.modalLogo, event)
*/
showLogo () {
if (this.show.logo === null) { this.string = '' }
else { this.string = this.show.logo }
this.file = null
this.$refs.modalLogo.show()
}, },
showImage () {
if (this.show.image === null) { this.string = '' }
else { this.string = this.show.image }
this.file = null
this.$refs.modalImage.show()
}
} }
} }
</script> </script>
......
...@@ -64,11 +64,13 @@ const getters = { ...@@ -64,11 +64,13 @@ const getters = {
let show let show
if (data.id !== undefined) { if (data.id !== undefined) {
show = state.shows.find(s => s.id === data.id) show = state.shows.find(s => s.id === data.id)
if (show === undefined) { this.$log.error('getShowByDataParam: ID not found in store!') } if (show === undefined) {
console.log('[ERROR] getShowByDataParam: ID not found in store!')
}
} else if (data.index !== undefined) { } else if (data.index !== undefined) {
show = state.shows[data.index] show = state.shows[data.index]
} else { } else {
this.$log.error('getShowByDataParam: no ID or index was provided') console.log('[ERROR] getShowByDataParam: no ID or index was provided')
} }
return show return show
} }
...@@ -237,6 +239,39 @@ const actions = { ...@@ -237,6 +239,39 @@ const actions = {
}) })
}, },
updateImage (ctx, data) {
ctx.commit('loading', 'shows')
let show = ctx.getters.getShowByDataParam(data)
let uri = process.env.VUE_APP_API_STEERING_SHOWS + data.id + '/'
let formData = new FormData()
// these propoerties have to be sent always (and they must not be null)
formData.append('name', show.name)
formData.append('slug', show.slug)
formData.append('short_description', show.short_description)
formData.append('type', show.type)
formData.append('fundingcategory', show.fundingcategory)
formData.append('is_active', show.is_active)
// now we append the new logo/image file (signified by data.type)
formData.append(data.type, data.file, data.file.name)
axios.put(uri, formData , {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + ctx.rootState.auth.user.access_token }
}).then(response => {
ctx.commit('setProperty', {
id: data.id,
property: data.type,
// when updating images of a show the steering API does not return
// the full URI but only the path on the server
// TODO: create an issue in steering, to create consistency
value: process.env.VUE_APP_BASEURI_STEERING + response.data[data.type]
})
ctx.commit('finishLoading', 'shows')
if (data && typeof(data.callback) === 'function') { data.callback(response) }
}).catch(error => {
handleApiError(this, error, 'could not update show ' + data.type)
if (data && typeof(data.callbackCancel) === 'function') { data.callbackCancel() }
})
},
} }
......
Markdown is supported
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