added function to update notes, TODO: new notes

src/components/ShowManager.vue

@@ -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) {

src/components/ShowManagerModalNotes.vue

 <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()
     }
   }
 }