added modals for email, website and cba series id

src/components/ShowManager.vue

@@ -100,7 +100,7 @@
               <b-badge variant="light">E-Mail:</b-badge>
               <span v-if="shows[currentShow].email === null"><small><i>(none set)</i></small></span>
               <span v-else>{{ shows[currentShow].email }}</span>
-              <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
+              <img src="../assets/16x16/emblem-system.png" alt="edit contact e-mail" v-on:click="$refs.appModalShow.showEmail()" />
             </p>
           </b-col>
 
@@ -109,7 +109,7 @@
               <b-badge variant="light">Website:</b-badge>
               <span v-if="shows[currentShow].website === null"><small><i>(none set)</i></small></span>
               <span v-else><a :href="shows[currentShow].website">{{ shows[currentShow].website }}</a></span>
-              <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
+              <img src="../assets/16x16/emblem-system.png" alt="edit website" v-on:click="$refs.appModalShow.showWebsite()" />
             </p>
           </b-col>
 
@@ -155,7 +155,7 @@
               <b-badge variant="light">CBA Series ID:</b-badge>
               <span v-if="shows[currentShow].cba_series_id === null"><small><i>(none set)</i></small></span>
               <span v-else>{{ shows[currentShow].cba_series_id }}</span>
-              <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
+              <img src="../assets/16x16/emblem-system.png" alt="edit CBA series ID" v-on:click="$refs.appModalShow.showCBAid()" />
             </p>
           </b-col>
 

src/components/ShowManagerModalShow.vue

@@ -4,12 +4,30 @@
       <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-modal ref="modalShowShortDescription" title="Short description" size="lg" @ok="saveShortDescription">
       <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="string" :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" @ok="saveDescription"></b-form-textarea>
+    </b-modal>
+
+    <!-- TODO: use b-form outside the b-form-input, so that
+               simple input validation works automagically -->
+    <b-modal ref="modalShowEmail" title="E-Mail" size="lg" @ok="saveEmail">
+      <b-form-input v-model="string" type="email" placeholder="Put a contact address of your show here"></b-form-input>
+    </b-modal>
+
+    <!-- TODO: use b-form outside the b-form-input, so that
+               simple input validation works automagically -->
+    <b-modal ref="modalShowWebsite" title="Website" size="lg" @ok="saveWebsite">
+      <b-form-input v-model="string" type="url" placeholder="Put the website of your show here"></b-form-input>
+    </b-modal>
+
+    <!-- TODO: use b-form outside the b-form-input, so that
+               simple input validation works automagically -->
+    <b-modal ref="modalShowCBAid" title="CBA Series ID" size="lg" @ok="saveCBAid">
+      <b-form-input v-model="id" type="number" placeholder="Put the CBA Series ID of your show here"></b-form-input>
     </b-modal>
 
   </div>
@@ -19,7 +37,7 @@
 import axios from 'axios'
 
 function debugErrorResponse (data) {
-  console.log('Response date provided to transformResponse:')
+  console.log('Response data provided to transformResponse:')
   console.log(data)
   return data
 }
@@ -60,17 +78,93 @@ export default {
       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()
+      if (this.string !== this.show.name) {
+        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()
+        }
+      }
+    },
+    saveShortDescription (event) {
+      if (this.string !== this.show.short_description) {
+        event.preventDefault()
+        this.backupstring = this.show.short_description
+        this.show.short_description = this.string
+        var retval = this.save()
+        if (retval === false) {
+          this.show.short_description = this.backupstring
+          alert('Error: could not save the new show information')
+        } else {
+          this.$refs.modalShowShortDescription.hide()
+        }
+      }
+    },
+    saveDescription (event) {
+      if (this.string !== this.show.description) {
+        event.preventDefault()
+        this.backupstring = this.show.description
+        this.show.description = this.string
+        var retval = this.save()
+        if (retval === false) {
+          this.show.description = this.backupstring
+          alert('Error: could not save the new show information')
+        } else {
+          this.$refs.modalShowDescription.hide()
+        }
       }
     },
+    saveEmail (event) {
+      if (this.string !== this.show.email) {
+        event.preventDefault()
+        this.backupstring = this.show.email
+        this.show.email = this.string
+        var retval = this.save()
+        if (retval === false) {
+          this.show.email = this.backupstring
+          alert('Error: could not save the new show information')
+        } else {
+          this.$refs.modalShowEmail.hide()
+        }
+      }
+    },
+    saveWebsite (event) {
+      if (this.string !== this.show.website) {
+        event.preventDefault()
+        this.backupstring = this.show.website
+        this.show.website = this.string
+        var retval = this.save()
+        if (retval === false) {
+          this.show.website = this.backupstring
+          alert('Error: could not save the new show information')
+        } else {
+          this.$refs.modalShowWebsite.hide()
+        }
+      }
+    },
+    saveCBAid (event) {
+      if (this.id !== this.show.cba_series_id) {
+        event.preventDefault()
+        this.backupid = this.show.cba_series_id
+        this.show.cba_series_id = this.id
+        var retval = this.save()
+        if (retval === false) {
+          this.show.cba_series_id = this.backupid
+          alert('Error: could not save the new show information')
+        } else {
+          this.$refs.modalShowCBAid.hide()
+        }
+      }
+    },
+    /*
+    Functions to activate modals
+    The can be called from the parent component
+    */
     showName () {
       this.string = this.show.name
       this.$refs.modalShowName.show()
@@ -82,6 +176,18 @@ export default {
     showDescription () {
       this.string = this.show.description
       this.$refs.modalShowDescription.show()
+    },
+    showEmail () {
+      this.string = this.show.email
+      this.$refs.modalShowEmail.show()
+    },
+    showWebsite () {
+      this.string = this.show.website
+      this.$refs.modalShowWebsite.show()
+    },
+    showCBAid () {
+      this.id = this.show.cba_series_id
+      this.$refs.modalShowCBAid.show()
     }
   }
 }