added save function to show modals - still debugging

src/components/ShowManager.vue

@@ -13,20 +13,22 @@
       <template slot="header">
         <span v-if="loaded.shows">
           {{ shows[currentShow].name }}
-          <img src="../assets/16x16/emblem-system.png" alt="edit name of show" v-on:click="$refs.appModalShow.$refs.modalShowName.show()" />
+          <img src="../assets/16x16/emblem-system.png" alt="edit name of show" v-on:click="$refs.appModalShow.showName()" />
         </span>
         <span v-else>Shows are being loaded</span>
       </template>
       <template slot="lead">
         <span v-if="loaded.shows">{{ shows[currentShow].short_description }}</span>
-        <img src="../assets/16x16/emblem-system.png" alt="edit short description" v-on:click="$refs.appModalShow.$refs.modalShowShortDescription.show()" />
+        <img src="../assets/16x16/emblem-system.png" alt="edit short description" v-on:click="$refs.appModalShow.showShortDescription()" />
       </template>
       <p v-if="loaded.shows">
-        <b>Description:</b> <img src="../assets/16x16/emblem-system.png" alt="edit description" v-on:click="$refs.appModalShow.$refs.modalShowDescription.show()" />
+        <b>Description:</b> <img src="../assets/16x16/emblem-system.png" alt="edit description" v-on:click="$refs.appModalShow.showDescription()" />
         <div v-if="loaded.shows">
-          <!-- TODO: see if we can make a nice but secure html rendering of the description -->
-          <!--{{ shows[currentShow].description.replace(/<[^>]*>/g, '') }}-->
-          {{ shows[currentShow].description }}
+          <!-- TODO: see if we can make a nice but secure html rendering of the description
+            This should be already secure, as long as you do not write directly to the DOM.
+            Only if you do this and render HTML, take care to have it save (no script tags etc.).
+            This current regex replace is only to have it looking nicely, in case there are html tags. -->
+          {{ shows[currentShow].description.replace(/<[^>]*>/g, '') }}
           <!-- TODO: add image and logo here? -->
         </div>
       </p>

src/components/ShowManagerModalShow.vue

 <template>
   <div>
-    <b-modal ref="modalShowName" title="Name of the show" size="lg">
-      <b-form-input v-model="show.name" type="text" placeholder="Enter name of the show"></b-form-input>
+    <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-form-input>
     </b-modal>
 
     <b-modal ref="modalShowShortDescription" title="Short description" size="lg">
-      <b-form-textarea v-model="show.short_description" :rows="2" placeholder="Enter a short description"></b-form-textarea>
+      <b-form-textarea v-model="string" :rows="2" placeholder="Enter a short description"></b-form-textarea>
     </b-modal>
 
     <b-modal ref="modalShowDescription" title="Full description" size="lg">
-      <b-form-textarea v-model="show.description" :rows="2" placeholder="Enter the full description of this show"></b-form-textarea>
+      <b-form-textarea v-model="string" :rows="2" placeholder="Enter the full description of this show"></b-form-textarea>
     </b-modal>
-    
+
   </div>
 </template>
 
 <script>
-// import axios from 'axios'
+import axios from 'axios'
+
+function debugErrorResponse (data) {
+  console.log('Response date provided to transformResponse:')
+  console.log(data)
+  return data
+}
 
 export default {
   props: {
@@ -24,11 +30,58 @@ export default {
   },
   data () {
     return {
-
+      string: '',
+      backupstring: '',
+      id: 0,
+      backupid: 0,
+      array: [],
+      backuparray: []
     }
   },
   methods: {
-    save: function () {
+    save () {
+      var retval = false
+      console.log('trying to save show')
+      console.log(process.env.API_STEERING_SHOWS + this.show.id + '/')
+      console.log(this.show)
+      axios.put(process.env.API_STEERING_SHOWS + this.show.id + '/', this.show, {
+        withCredentials: true,
+        transformResponse: [debugErrorResponse]
+      }).then(response => {
+        console.log('Response:')
+        console.log(response)
+        retval = true
+      }).catch(error => {
+        console.log('Error:')
+        console.log(error)
+        // alert('There was an error fetching shows from the server: ' + error)
+        retval = false
+      })
+      return retval
+    },
+    saveName (event) {
+      event.preventDefault()
+      this.backupstring = this.show.name
+      this.show.name = this.string
+      var retval = this.save()
+      if (retval === false) {
+        this.show.name = this.backupstring
+        alert('Error: could not save the new show information')
+      } else {
+        this.$refs.modalShowName.hide()
+      }
+    },
+    showName () {
+      this.string = this.show.name
+      this.$refs.modalShowName.show()
+    },
+    showShortDescription () {
+      this.string = this.show.short_description
+      this.$refs.modalShowShortDescription.show()
+    },
+    showDescription () {
+      this.string = this.show.description
+      this.$refs.modalShowDescription.show()
     }
   }
 }