Skip to content

GitLab

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

implement update functions for jumbotron items in store

parent b67f97e2
Hide whitespace changes
Inline Side-by-side
src/components/ShowJumbotron.vue
View file @ 8ffbb488
......@@ -7,7 +7,7 @@
<img
src="../assets/16x16/emblem-system.png"
alt="edit name of show"
@click="$refs.appModalShow.showName()"
@click="openModalName()"
>
</span>
<span v-else>Shows are being loaded</span>
......@@ -18,7 +18,7 @@
<img
src="../assets/16x16/emblem-system.png"
alt="edit short description"
@click="$refs.appModalShow.showShortDescription()"
@click="openModalShortDescription()"
>
</template>
<!-- The rest of the jumbotron is filled with the show description -->
......@@ -26,7 +26,7 @@
<b>Description:</b> <img
src="../assets/16x16/emblem-system.png"
alt="edit description"
@click="$refs.appModalShow.showDescription()"
@click="openModalDescription()"
>
<div>
<!--
......@@ -40,14 +40,14 @@
</div>
<div
v-if="$parent.$parent.user.steeringUser.is_superuser"
v-if="isSuperuser"
align="center"
>
<div v-if="selectedShow.is_active">
<b-button
variant="danger"
size="sm"
@click="$refs.appModalSuperuser.showModalDeactivateShow(shows[currentShow])"
@click="openModalDeactivate()"
>
Deactivate show
</b-button>
......@@ -61,13 +61,70 @@
<b-button
variant="success"
size="sm"
@click="$refs.appModalSuperuser.activateShow(shows[currentShow])"
@click="activateShow()"
>
Activate!
</b-button>
</b-alert>
</div>
</div>
<b-modal
ref="modalName"
title="Name of the show"
size="lg"
@ok="saveName"
>
<b-form-input
v-model="string"
type="text"
placeholder="Enter name of the show"
/>
</b-modal>
<b-modal
ref="modalShortDescription"
title="Short description"
size="lg"
@ok="saveShortDescription"
>
<b-form-textarea
v-model="string"
:rows="2"
placeholder="Enter a short description"
/>
</b-modal>
<b-modal
ref="modalDescription"
title="Full description"
size="lg"
@ok="saveDescription"
>
<b-form-textarea
v-model="string"
:rows="2"
placeholder="Enter the full description of this show"
/>
</b-modal>
<!-- Modal to confirm and deactivate a show -->
<b-modal
ref="modalDeactivate"
title="Deactivate a show"
size="lg"
@ok="deactivateShow"
>
<b-alert
variant="danger"
show
>
You are about to deactivate the show <b>{{ selectedShow.name }}</b>!
</b-alert>
<div align="center">
Are you sure you want to continue?
</div>
</b-modal>
</div>
</b-jumbotron>
</template>
......@@ -79,10 +136,17 @@ import { mapGetters } from 'vuex'
export default {
data () {
return {
string: '',
backupstring: '',
deactivatedShow: {
id: null,
name: '',
},
}
},
computed: {
shows () { return this.$store.state.shows.shows },
isSuperuser () { return this.$store.state.auth.user.steeringUser.is_superuser },
loaded () {
return {
shows: this.$store.state.shows.loaded.shows,
......@@ -102,6 +166,110 @@ export default {
})
},
methods: {
openModalName () {
if (this.selectedShow.name !== null) { this.string = this.selectedShow.name }
else { this.string = '' }
this.$refs.modalName.show()
},
openModalShortDescription () {
if (this.selectedShow.short_description !== null) { this.string = this.selectedShow.short_description }
else { this.string = '' }
this.$refs.modalShortDescription.show()
},
openModalDescription () {
if (this.selectedShow.description !== null) { this.string = this.selectedShow.description }
else { this.string = '' }
this.$refs.modalDescription.show()
},
openModalDeactivate () {
this.$refs.modalDeactivate.show()
},
saveName (event) {
let modal = this.$refs.modalName
if (this.string !== this.selectedShow.name) {
event.preventDefault()
this.$store.dispatch('shows/updateName', {
id: this.selectedShow.id,
text: this.string,
callback: () => { modal.hide() }
})
}
},
saveShortDescription (event) {
let modal = this.$refs.modalShortDescription
if (this.string !== this.selectedShow.short_description) {
event.preventDefault()
this.$store.dispatch('shows/updateShortDescription', {
id: this.selectedShow.id,
text: this.string,
callback: () => { modal.hide() }
})
}
},
saveDescription (event) {
let modal = this.$refs.modalDescription
if (this.string !== this.selectedShow.description) {
event.preventDefault()
this.$store.dispatch('shows/updateDescription', {
id: this.selectedShow.id,
text: this.string,
callback: () => { modal.hide() }
})
}
},
deactivateShow (event) {
let modal = this.$refs.modalDeactivate
event.preventDefault()
this.$store.dispatch('shows/deactivateShow', {
id: this.selectedShow.id,
callback: () => { modal.hide() }
})
/*
let updatedShow = this.getUpdateShowObject()
updatedShow.is_active = false
let uri = process.env.VUE_APP_API_STEERING_SHOWS + this.deactivatedShow.id + '/'
axios.put(uri, updatedShow, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(() => {
this.show.is_active = false
this.$refs.modalDeactivateShow.hide()
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not deactivate show. See console for details.')
// and we leave the modal open, so no call to its .hide function here
})
*/
},
activateShow (show) {
this.$log.debug(show)
this.$store.dispatch('shows/activateShow', {
id: this.selectedShow.id,
})
/*
this.show = show
let updatedShow = this.getUpdateShowObject()
updatedShow.is_active = true
let uri = process.env.VUE_APP_API_STEERING_SHOWS + show.id + '/'
axios.put(uri, updatedShow, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(() => {
this.show.is_active = true
this.$refs.modalDeactivateShow.hide()
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not activate show. See console for details.')
})
*/
},
}
}
......
src/components/ShowManagerModalShow.vue
View file @ 8ffbb488
<template>
<div>
<b-modal
ref="modalShowName"
title="Name of the show"
size="lg"
@ok="saveName"
>
<b-form-input
v-model="string"
type="text"
placeholder="Enter name of the show"
/>
</b-modal>
<b-modal
ref="modalShowShortDescription"
title="Short description"
size="lg"
@ok="saveShortDescription"
>
<b-form-textarea
v-model="string"
:rows="2"
placeholder="Enter a short description"
/>
</b-modal>
<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-modal>
<!-- TODO: use b-form outside the b-form-input, so that
simple input validation works automagically -->
<b-modal
......@@ -510,64 +471,6 @@ export default {
properties that actually get changed
TODO: think about refactoring all those function to one or few functions
*/
saveName (event) {
if (this.string !== this.show.name) {
event.preventDefault()
let updatedShow = this.getUpdateShowObject()
updatedShow.name = this.string
axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', updatedShow, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(() => {
this.show.name = this.string
this.$refs.modalShowName.hide()
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not save the show name. See console for details.')
})
}
},
saveShortDescription (event) {
if (this.string !== this.show.short_description) {
event.preventDefault()
let updatedShow = this.getUpdateShowObject()
updatedShow.short_description = this.string
axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', updatedShow, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(() => {
this.show.short_description = this.string
this.$refs.modalShowShortDescription.hide()
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not save the show\'s short description. See console for details.')
})
}
},
saveDescription (event) {
if (this.string !== this.show.description) {
event.preventDefault()
let updatedShow = this.getUpdateShowObject()
if (this.string === '') { updatedShow.description = null }
else { updatedShow.description = this.string }
axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', updatedShow, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(() => {
this.show.description = updatedShow.description
this.$refs.modalShowDescription.hide()
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not save the show description. See console for details.')
})
}
},
saveEmail (event) {
if (this.string !== this.show.email) {
event.preventDefault()
......@@ -862,21 +765,6 @@ export default {
Functions to activate modals
They are called from the parent component
*/
showName () {
if (this.show.name !== null) { this.string = this.show.name }
else { this.string = '' }
this.$refs.modalShowName.show()
},
showShortDescription () {
if (this.show.short_description !== null) { this.string = this.show.short_description }
else { this.string = '' }
this.$refs.modalShowShortDescription.show()
},
showDescription () {
if (this.show.description !== null) { this.string = this.show.description }
else { this.string = '' }
this.$refs.modalShowDescription.show()
},
showEmail () {
if (this.show.email !== null) { this.string = this.show.email }
else { this.string = '' }
......
src/components/ShowManagerModalSuperuser.vue
View file @ 8ffbb488
......@@ -82,24 +82,6 @@
</b-container>
</b-modal>
<!-- Modal to confirm and deactivate a show -->
<b-modal
ref="modalDeactivateShow"
title="Deactivate a show"
size="lg"
@ok="deactivateShow"
>
<b-alert
variant="danger"
show
>
You are about to deactivate the show <b>{{ deactivatedShow.name }}</b>!
</b-alert>
<div align="center">
Are you sure you want to continue?
</div>
</b-modal>
<!-- Modal to edit show owners -->
<b-modal
ref="modalOwners"
......@@ -218,10 +200,6 @@ export default {
topic: [],
musicfocus: [],
},
deactivatedShow: {
id: null,
name: '',
},
show: null,
loaded: {
types: false,
......@@ -312,45 +290,6 @@ export default {
})
},
// deactivate a show by updating the is_active flag to false
deactivateShow (event) {
// prevent the modal from closing automatically on click
event.preventDefault()
let updatedShow = this.getUpdateShowObject()
updatedShow.is_active = false
let uri = process.env.VUE_APP_API_STEERING_SHOWS + this.deactivatedShow.id + '/'
axios.put(uri, updatedShow, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(() => {
this.show.is_active = false
this.$refs.modalDeactivateShow.hide()
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not deactivate show. See console for details.')
// and we leave the modal open, so no call to its .hide function here
})
},
activateShow (show) {
this.show = show
let updatedShow = this.getUpdateShowObject()
updatedShow.is_active = true
let uri = process.env.VUE_APP_API_STEERING_SHOWS + show.id + '/'
axios.put(uri, updatedShow, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(() => {
this.show.is_active = true
this.$refs.modalDeactivateShow.hide()
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not activate show. See console for details.')
})
},
// remove an owner from the list of show owners
deleteOwner (id) {
// we only have to find the item in our array and splice it out
......@@ -406,14 +345,6 @@ export default {
this.$refs.modalAddShow.show()
},
// open the deactivation confirmation modal
showModalDeactivateShow (show) {
this.deactivatedShow.id = show.id
this.deactivatedShow.name = show.name
this.show = show
this.$refs.modalDeactivateShow.show()
},
// open the modal to edit a show's owners
showModalOwners (show) {
this.show = show
......
src/store/modules/shows.js
View file @ 8ffbb488
import axios from 'axios'
import handleApiError from '../handleApiError'
const cloneMinimalShowObject = function (show) {
/* returns a new minimal object from the current show object with all
properties needed for a PUT request to the /show/ endpoint */
let s = {}
s.name = show.name
s.slug = show.slug
s.short_description = show.short_description
s.fundingcategory = show.fundingcategory
s.type = show.type
// we do not want the arrays do be passed as references, because the
// current show object should not get modified when the update object
// gets modified, therefore we use slice to clone the arrays
s.category = show.category.slice()
s.hosts = show.hosts.slice()
s.owners = show.owners.slice()
s.language = show.language.slice()
s.topic = show.topic.slice()
s.musicfocus = show.musicfocus.slice()
return s
}
const state = {
shows: [],
timeslots: [],
......@@ -17,7 +38,19 @@ const state = {
const getters = {
shows: state => state.shows,
selectedShow: state => state.shows[state.selected.index]
selectedShow: state => state.shows[state.selected.index],
getShowByDataParam: state => data => {
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!') }
} else if (data.index !== undefined) {
show = state.shows[data.index]
} else {
this.$log.error('getShowByDataParam: no ID or index was provided')
}
return show
}
}
const mutations = {
......@@ -35,7 +68,24 @@ const mutations = {
state.timeslots = slots
},
switchShow(state, index) {
setName (state, data) {
let index = state.shows.findIndex(s => s.id === data.id)
state.shows[index].name = data.text
},
setShortDescription (state, data) {
let index = state.shows.findIndex(s => s.id === data.id)
state.shows[index].short_description = data.text
},
setDescription (state, data) {
let index = state.shows.findIndex(s => s.id === data.id)
state.shows[index].description = data.text
},
setActive (state, data) {
let index = state.shows.findIndex(s => s.id === data.id)
state.shows[index].is_active = data.active
},
switchShow (state, index) {
state.selected.index = index
state.selected.id = state.shows[index].id
}
......@@ -87,7 +137,98 @@ const actions = {
handleApiError(this, error, 'could not load timeslots')
if (data && typeof(data.callbackCancel) === 'function') { data.callbackCancel() }
})
}
},
updateShow (ctx, data) {
ctx.commit('loading', 'shows')
let uri = process.env.VUE_APP_API_STEERING_SHOWS + data.id + '/'
axios.put(uri, data.show , {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + ctx.rootState.auth.user.access_token }
}).then(response => {
ctx.commit('finishLoading', 'shows')
if (data && typeof(data.callback) === 'function') { data.callback(response) }
}).catch(error => {
handleApiError(this, error, 'could not update show')
if (data && typeof(data.callbackCancel) === 'function') { data.callbackCancel() }
})
},
updateName (ctx, data) {
let show = cloneMinimalShowObject(ctx.getters.getShowByDataParam(data))
show.name = data.text
ctx.dispatch('updateShow', {
id: data.id,
show: show,
callback: () => {
ctx.commit('setName', {
id: data.id,
text: data.text
})
if (typeof(data.callback) === 'function') { data.callback() }
}
})
},
updateShortDescription (ctx, data) {
let show = cloneMinimalShowObject(ctx.getters.getShowByDataParam(data))
show.short_description = data.text
ctx.dispatch('updateShow', {
id: data.id,
show: show,
callback: () => {
ctx.commit('setShortDescription', {
id: data.id,
text: data.text
})
}
})
},
updateDescription (ctx, data) {
let show = cloneMinimalShowObject(ctx.getters.getShowByDataParam(data))
show.description = data.text
ctx.dispatch('updateShow', {
id: data.id,
show: show,
callback: () => {
ctx.commit('setDescription', {
id: data.id,
text: data.text
})
}