Commit 7f0bfb17 authored by Andrea Ida Malkah Klaura's avatar Andrea Ida Malkah Klaura
Browse files

added function to update notes, TODO: new notes

parent fb3601e2
......@@ -44,7 +44,7 @@
<div v-else>
<!-- include the modals to edit show and timeslot entries from the modal compontents -->
<app-modalShow ref="appModalShow" v-bind:show="shows[currentShow]"></app-modalShow>
<app-modalNotes ref="appModalNotes" v-bind:note="current.note"></app-modalNotes>
<app-modalNotes ref="appModalNotes" v-bind:show="shows[currentShow]"></app-modalNotes>
<!-- here we show our table of timeslots -->
<p>
......@@ -310,7 +310,9 @@ export default {
duration: this.prettyDuration(this.timeslots[i].start, this.timeslots[i].end) + 'min',
// TODO: find out how to insert images or iconffont icons into b-table rows
// options: '<img src="../assets/16x16/emblem-system.png" alt="edit note" v-on:click="' + this.editTimeslotNote(this.timeslots[i].id) + '" />'
options: '<span class="timeslotEditLink" onclick="document.getElementById(\'app\').children[1].__vue__.editTimeslotNote(' + this.timeslots[i].id + ')">edit</span> ' +
options: '<span class="timeslotEditLink" onclick="' +
'document.getElementById(\'app\').children[1].__vue__.' +
'editTimeslotNote(' + this.timeslots[i].id + ', ' + this.timeslots[i].schedule + ')">edit</span> ' +
'<span class="timeslotEditLink" onclick="alert(\'notYetImplemented\')">upload</span>' +
'<span class="timeslotEditLink" onclick="alert(\'notYetImplemented\')">...</span>'
})
......@@ -394,14 +396,15 @@ export default {
})
// done fetching timeslots
},
editTimeslotNote: function (timeslotID) {
editTimeslotNote: function (timeslotID, scheduleID) {
this.current.note = null
for (var n in this.notes) {
if (this.notes[n].timeslot === timeslotID) {
this.current.note = this.notes[n]
break
}
}
this.$refs.appModalNotes.$refs.modalNote.show()
this.$refs.appModalNotes.showModal(this.current.note, timeslotID, scheduleID)
},
getTimeslotNoteTitle: function (timeslotID) {
for (var n in this.notes) {
......@@ -411,6 +414,14 @@ export default {
}
return null
},
getTimeslotNoteID: function (timeslotID) {
for (var n in this.notes) {
if (this.notes[n].timeslot === timeslotID) {
return this.notes[n].id
}
}
return null
},
prettyTimeslotNote: function (timeslotID) {
var note = this.getTimeslotNoteTitle(timeslotID)
if (note !== null) {
......
<template>
<b-modal ref="modalNote" title="Editing a note" size="lg">
<b-container fluid>
<p>This is the note for the timeslot on {{ prettyDate(note.start) }}.)</p>
<b-row>
<b-col cols="2">Title:</b-col>
<b-col cols="10"><b-form-input v-model="note.title" type="text" placeholder="Enter a title"></b-form-input></b-col>
</b-row>
<b-row>
<b-col cols="2">Summary:</b-col>
<b-col cols="10"><b-form-textarea v-model="note.summary" :rows="4" placeholder="Enter a summary"></b-form-textarea></b-col>
</b-row>
<b-row>
<b-col cols="2">Content:</b-col>
<b-col cols="10"><b-form-textarea v-model="note.content" :rows="8" placeholder="Enter a text describing this timeslot"></b-form-textarea></b-col>
</b-row>
</b-container>
</b-modal>
<div>
<b-modal ref="modalNote" title="Editing a note" size="lg" @ok="saveNote">
<b-container fluid>
<p v-if="typeof note.start !== 'undefined'">This is the note for the timeslot on {{prettyDateTime(note.start) }}.</p>
<p v-else>You are creating a new note.</p>
<b-row>
<b-col cols="2">Title:</b-col>
<b-col cols="10"><b-form-input v-model="title" type="text" placeholder="Enter a title"></b-form-input></b-col>
</b-row>
<br />
<b-row>
<b-col cols="2">Summary:</b-col>
<b-col cols="10"><b-form-textarea v-model="summary" :rows="4" placeholder="Enter a summary"></b-form-textarea></b-col>
</b-row>
<br />
<b-row>
<b-col cols="2">Content:</b-col>
<b-col cols="10"><b-form-textarea v-model="content" :rows="8" placeholder="Enter a text describing this timeslot"></b-form-textarea></b-col>
</b-row>
</b-container>
</b-modal>
</div>
</template>
<script>
import prettyDate from '../mixins/prettyDate'
// import axios from 'axios'
import axios from 'axios'
function debugErrorResponse (data) {
console.log('Response data provided to transformResponse:')
console.log(data)
// alert(data)
return data
}
export default {
props: {
note: { type: Object, required: true }
show: { type: Object, required: true }
},
mixins: [ prettyDate ],
data () {
return {
note: {},
scheduleID: 0,
timeslotID: 0,
title: '',
summary: '',
content: '',
backuptitle: '',
backupsummary: '',
backupcontent: ''
}
},
mixins: [ prettyDate ],
methods: {
save: function () {
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) {
// 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
// now set the new contents
this.note.title = this.title
this.note.summary = this.summary
this.note.content = this.content
// generate the uri for the API call:
// /api/v1/shows/1/schedules/1/timeslots/1/note/1
var uri = process.env.API_STEERING_SHOWS + this.show.id +
'/schedules/' + this.scheduleID +
'/timeslots/' + this.timeslotID +
'/note/' + this.note.id + '/'
console.log('trying to update a note')
console.log(uri)
console.log(this.note)
// now send the PUT request with our updated note
axios.put(uri, this.note, {
withCredentials: true,
transformResponse: [debugErrorResponse]
}).then(response => {
console.log('Response:')
console.log(response)
// everything was fine, we can close the modal now
this.$refs.modalNote.hide()
}).catch(error => {
console.log('Error:')
console.log(error)
// 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 leave the modal open, so no call to its .hide function here
})
// if nothing was changed, just close the modal
} else {
this.$refs.modalNote.hide()
}
},
new () {
console.log('trying to create a new note')
},
saveNote (event) {
if (typeof this.note.start === 'undefined') {
this.new()
} else {
this.update(event)
}
},
showModal (note, timeslotID, scheduleID) {
if (note === null) {
this.note = {}
this.title = ''
this.summary = ''
this.content = ''
} else {
this.note = note
this.title = this.note.title
this.summary = this.note.summary
this.content = this.note.content
}
// console.log(this.$refs.modalNote)
this.timeslotID = timeslotID
this.scheduleID = scheduleID
this.$refs.modalNote.show()
}
}
}
......
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