Skip to content

GitLab

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
Hide whitespace changes
Inline Side-by-side
sample.env.development
View file @ f523fd3c
......@@ -3,6 +3,7 @@
# 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_SHOWS = http://127.0.0.1:8000/api/v1/shows/
VUE_APP_API_TANK = http://127.0.0.1:8040/api/v1/
......
sample.env.production
View file @ f523fd3c
......@@ -2,6 +2,7 @@
# ===============================
# 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_SHOWS = http://YOUR.STEERING.DOMAIN/api/v1/shows/
......
src/components/ShowManager.vue
View file @ f523fd3c
......@@ -52,10 +52,6 @@
<!-- When all show data is loaded, here we display all the rest -->
<div v-else>
<!-- include the modals to edit show and timeslot entries from the modal compontents -->
<app-modalShow
ref="appModalShow"
:show="shows[currentShow]"
/>
<app-modalNotes
ref="appModalNotes"
:show="shows[currentShow]"
......@@ -235,56 +231,7 @@
<show-metaSimpleTypes />
<show-metaArrays />
<show-metaOwners />
<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>
<show-metaImages />
<hr>
</div>
......@@ -296,8 +243,8 @@ import showJumbotron from './ShowJumbotron.vue'
import showMetaSimpleTypes from './ShowMetaSimpleTypes.vue'
import showMetaArrays from './ShowMetaArrays.vue'
import showMetaOwners from './ShowMetaOwners.vue'
import showMetaImages from './ShowMetaImages.vue'
import modalNotes from './ShowManagerModalNotes.vue'
import modalShow from './ShowManagerModalShow.vue'
import modalAddShow from './AddShowModal.vue'
import modalPlaylist from './ShowManagerModalPlaylist.vue'
import timeslotSort from '../mixins/timeslotSort'
......@@ -310,13 +257,13 @@ export default {
// components, to make it a tiny lickle bit less messy here
components: {
'app-modalNotes': modalNotes,
'app-modalShow': modalShow,
'app-modalPlaylist': modalPlaylist,
'addShowModal': modalAddShow,
'show-jumbotron': showJumbotron,
'show-metaArrays': showMetaArrays,
'show-metaSimpleTypes': showMetaSimpleTypes,
'show-metaOwners': showMetaOwners,
'show-metaImages': showMetaImages,
},
// generic functions that we want to use from our mixins folder
......
src/components/ShowManagerModalShow.vue → src/components/ShowMetaImages.vue
View file @ f523fd3c
<template>
<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
ref="modalLogo"
title="Logo of this show"
......@@ -75,137 +125,59 @@
</template>
<script>
import axios from 'axios'
import showUpdates from '../mixins/showUpdates.js'
import { mapGetters } from 'vuex'
export default {
mixins: [ showUpdates ],
props: {
show: { type: Object, required: true }
},
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: [],
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: {
...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: {
/*
Functions to update certain infos about a show should first check out a
new show object with getUpdateShowObject and then modify / add those
properties that actually get changed
TODO: think about refactoring all those function to one or few functions
*/
saveLogo (event) {
openModalLogo () {
if (this.selectedShow.logo === null) { this.string = '' }
else { this.string = this.selectedShow.logo }
this.file = null
this.$refs.modalLogo.show()
},
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()
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 propoerties 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 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.')
this.$store.dispatch('shows/updateImage', {
id: this.selectedShow.id,
type: type,
file: this.file,
callback: (response) => {
this.$log.debug('updateImage callback')
this.$log.debug(response)
modal.hide()
},
})
}
},
saveImage (event) {
event.preventDefault()
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.')
})
}
this.updateImage('image', this.$refs.modalImage, event)
},
/*
Functions to activate modals
They are called from the parent component
*/
showLogo () {
if (this.show.logo === null) { this.string = '' }
else { this.string = this.show.logo }
this.file = null
this.$refs.modalLogo.show()
saveLogo (event) {
this.updateImage('logo', this.$refs.modalLogo, event)
},
showImage () {
if (this.show.image === null) { this.string = '' }
else { this.string = this.show.image }
this.file = null
this.$refs.modalImage.show()
}
}
}
</script>
......
src/store/modules/shows.js
View file @ f523fd3c
......@@ -64,11 +64,13 @@ const getters = {
let show
if (data.id !== undefined) {
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) {
show = state.shows[data.index]
} else {
this.$log.error('getShowByDataParam: no ID or index was provided')
console.log('[ERROR] getShowByDataParam: no ID or index was provided')
}
return show
}
......@@ -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