Skip to content

GitLab

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

complete submit methods for notes modal

parent a37dc5ee
Hide whitespace changes
Inline Side-by-side
src/components/shows/NotesModal.vue
View file @ ac07d7f7
......@@ -77,7 +77,9 @@
import { mapGetters } from 'vuex'
import prettyDate from '../../mixins/prettyDate'
import slugify from '../../mixins/slugify'
import axios from 'axios'
const SUBMIT_NEW = false
const SUBMIT_UPDATE = true
export default {
mixins: [ prettyDate, slugify ],
......@@ -122,107 +124,79 @@ export default {
},
methods: {
update (event) {
// only try to save if anything has changed
if (this.title !== this.note.title || this.summary !== this.note.summary || this.content !== this.note.content || this.host_selected !== this.note.host) {
// prevent the modal from closing automatically on click
event.preventDefault()
// backup the note contents
this.backuptitle = this.note.title
this.backupsummary = this.note.summary
this.backupcontent = this.note.content
this.backuphost = this.note.host
// now set the new contents
this.note.title = this.title
this.note.summary = this.summary
this.note.content = this.content
this.note.host = this.host_selected
// generate the uri for the API call:
// /api/v1/shows/1/schedules/1/timeslots/1/note/1/
var uri = process.env.VUE_APP_API_STEERING_SHOWS + this.selectedShow.id +
'/schedules/' + this.scheduleID +
'/timeslots/' + this.timeslotID +
'/note/' + this.note.id + '/'
// now send the PUT request with our updated note
axios.put(uri, this.note, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(() => {
// everything was fine, we can close the modal now
this.$refs.modalNote.hide()
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not update the note. See console for details.')
submit (event, updatemode) {
// prevent the modal from closing automatically on click
event.preventDefault()
// backup the note contents
this.backuptitle = this.note.title
this.backupsummary = this.note.summary
this.backupcontent = this.note.content
this.backuphost = this.note.host
// now set the new contents
this.note.title = this.title
this.note.summary = this.summary
this.note.content = this.content
this.note.host = this.host_selected
// for new notes we need to set some extras that are not in the UI yet
if (updatemode === SUBMIT_NEW) {
this.note.show = this.selectedShow.id
this.note.timeslot = this.timeslotID
this.note.slug = this.slug
this.note.ppoi = '(0.5,0.5)' // TODO: implement
this.note.height = null // TODO: implement
this.note.width = null // TODO: implement
this.note.image = null // TODO: implement
this.note.status = 1 // TODO: implement
this.note.start = '' // TODO: implement
this.note.cba_id = null // TODO: implement
this.note.audio_url = '' // TODO: implement
}
let modal = this.$refs.modalNote
this.$store.dispatch('shows/submitNote', {
update: updatemode,
id: this.selectedShow.id,
scheduleID: this.scheduleID,
timeslotID: this.timeslotID,
note: this.note,
callback: () => { modal.hide() },
callbackCancel: () => {
// as there was an error saving the show, we have to make sure
// to restore the initial values of the note object
this.note.title = this.backuptitle
this.note.summary = this.backupsummary
this.note.content = this.backupcontent
this.note.host = this.backuphost
if (updatemode === SUBMIT_NEW) { this.note.start = undefined }
// and we leave the modal open, so no call to its .hide function here
})
}
})
},
update (event) {
// only try to save if anything has changed
if (this.title !== this.note.title || this.summary !== this.note.summary || this.content !== this.note.content || this.host_selected !== this.note.host) {
this.submit(event, SUBMIT_UPDATE)
}
// if nothing was changed, just close the modal
} else {
else {
this.$refs.modalNote.hide()
}
},
new (event) {
// title and content are necessary
if (this.title.trim() === '' || this.content.trim() === '') {
if (this.title.trim() === '' || this.content.trim() === '' || this.host_selected === null) {
event.preventDefault()
// TODO: make this nicer UI-wise (red text annotations next to input fields instead of simple alert)
alert('Please provide at least a title and some content.')
alert('Please provide at least a title and some content and choose a host!')
} else {
// prevent the modal from closing automatically on click
event.preventDefault()
// prepare the new note
this.note = {
show: this.selectedShow.id,
timeslot: this.timeslotID,
host: this.host_selected,
title: this.title,
slug: this.slug,
summary: this.summary,
content: this.content,
ppoi: '(0.5,0.5)', // TODO: implement
height: null, // TODO: implement
width: null, // TODO: implement
image: null, // TODO: implement
status: 1, // TODO: implement
start: '', // TODO: implement
cba_id: null, // TODO: implement
audio_url: '' // TODO: implement
}
let modal = this.$refs.modalNote
this.$store.dispatch('shows/submitNote', {
id: this.selectedShow.id,
scheduleID: this.scheduleID,
timeslotID: this.timeslotID,
note: this.note,
callback: () => { modal.hide() },
callbackCancel: () => {
// as there was an error saving the show, we have to make sure
// to restore the initial values of the note object
this.note.title = this.backuptitle
this.note.summary = this.backupsummary
this.note.content = this.backupcontent
// and we have to set this back to undefined so next time we edit it
// it will still be treated as a new note and not an existing one to update
this.note.start = undefined
// and we leave the modal open, so no call to its .hide function here
}
})
this.submit(event, SUBMIT_NEW)
}
},
saveNote (event) {
if (typeof this.note.start === 'undefined') {
this.new(event)
} else {
this.update(event)
}
if (this.note.start === undefined) { this.new(event) }
else { this.update(event) }
},
openModal (note, timeslotID, scheduleID) {
......@@ -235,7 +209,7 @@ export default {
// should the field be empty by default or filled with the first host of the show?
this.host_selected = null
} else {
this.note = note
this.note = {...note}
this.title = this.note.title
this.summary = this.note.summary
this.content = this.note.content
......
src/store/modules/shows.js
View file @ ac07d7f7
......@@ -105,6 +105,10 @@ const mutations = {
addNote(state, note) {
state.notes.push(note)
},
setNote(state, note) {
let index = state.notes.findIndex(n => n.id === note.id)
state.notes.splice(index, 1, note)
},
setName (state, data) {
let index = state.shows.findIndex(s => s.id === data.id)
......@@ -270,15 +274,27 @@ const actions = {
'/schedules/' + data.scheduleID +
'/timeslots/' + data.timeslotID +
'/note/'
axios.post(uri, data.note, {
if (data.update) {
uri += data.note.id + '/'
}
let method = data.update ? 'put' : 'post'
axios.request({
url: uri,
method: method,
data: data.note,
withCredentials: true,
responseType: 'json', // we need this explicitly here, as it does not seem to work automagically as in GET and PUT requests
headers: { 'Authorization': 'Bearer ' + ctx.rootState.auth.user.access_token }
}).then(response => {
ctx.commit('addNote', response.data)
if (data.update) {
ctx.commit('setNote', response.data)
} else {
ctx.commit('addNote', response.data)
}
if (data && typeof(data.callback) === 'function') { data.callback(response) }
}).catch(error => {
handleApiError(this, error, 'could not add new note')
let msg = data.update ? 'could not update note' : 'could not add new note'
handleApiError(this, error, msg)
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