FIX: category & logo editing

src/components/ShowManagerModalShow.vue

@@ -685,21 +685,34 @@ export default {
       }
     },
     saveCategories (event) {
+      this.$log.debug('saveCategories', this.array, this.show.category)
       if (this.array.length !== this.show.category.length || !this.array.every((value, index) => value === this.show.category[index])) {
         event.preventDefault()
-        this.backuparray = this.show.category
-        this.show.category = this.array
-        axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', this.show, {
+        let updatedShow = {
+          name: this.show.name,
+          slug: this.show.slug,
+          short_description: this.show.short_description,
+          fundingcategory: this.show.fundingcategory,
+          type: this.show.type,
+          hosts: this.show.hosts,
+          language: this.show.language,
+          musicfocus: this.show.musicfocus,
+          owners: this.show.owners,
+          topic: this.show.topic,
+        }
+        updatedShow.category = this.array
+        let uri = process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/'
+        axios.put(uri, updatedShow, {
           withCredentials: true,
           headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
         }).then(() => {
+          this.$parent.shows[this.$parent.currentShow].category = updatedShow.category
           this.$parent.getCategories()
           this.$refs.modalShowCategories.hide()
         }).catch(error => {
-          this.show.category = this.backuparray
-          console.log('Error:')
-          console.log(error)
-          alert('Error: could not save the new show information')
+          this.$log.error(error.response.status + ' ' + error.response.statusText)
+          this.$log.error(error.response)
+          alert('Error: could not save categories. See console for details.')
         })
       }
     },
@@ -779,6 +792,7 @@ export default {
         })
       }
     },
+
     saveLogo (event) {
       event.preventDefault()
       if (this.file === null) { alert('Please provide a file to upload') }
@@ -786,49 +800,69 @@ export default {
       else {
         let formData = new FormData()
         this.backupstring = this.string
-        // work in progress:
-        // as it seems we have to use multipart webform data and add all items in order
-        // but this is still not working
-        // have to find out what exact format and encoding is needed to upload a show with files included
+        // these propoerties have to be sent always (and they must not be null)
         formData.append('name', this.show.name)
         formData.append('slug', this.show.slug)
-        formData.append('image', this.show.image)
-        formData.append('logo', this.file, this.file.name);
         formData.append('short_description', this.show.short_description)
-        formData.append('description', this.show.description)
-        formData.append('email', this.show.email)
-        formData.append('website', this.show.website)
         formData.append('type', this.show.type)
         formData.append('fundingcategory', this.show.fundingcategory)
-        formData.append('predecessor', this.show.predecessor)
-        formData.append('cba_series_id', this.show.cba_series_id)
-        formData.append('fallback_id', this.show.fallback_id)
-        formData.append('category', this.show.category)
-        formData.append('host', this.show.host)
-        formData.append('language', this.show.language)
-        formData.append('topic', this.show.topic)
-        formData.append('musicfocus', this.show.musicfocus)
-        axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', formData, {
+        // now we append the new logo file
+        formData.append('logo', this.file, this.file.name)
+        // ok then, let's submit it
+        let uri = process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/'
+        axios.put(uri, formData, {
           withCredentials: true,
           headers: {
             'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token,
-            'Content-Type': 'multipart/form-data'
+            'Content-Type': 'multipart/form-data',
           }
         }).then(() => {
-          //this.$parent.getHosts()
+          this.$parent.loadAndSwitch(this.$parent.currentShowID)
           this.$refs.modalLogo.hide()
         }).catch(error => {
           this.file = null
           this.string = this.backupstring
-          console.log('Error:')
-          console.log(error)
-          alert('Error: could not save the new logo')
+          this.$log.error(error.response.status + ' ' + error.response.statusText)
+          this.$log.error(error.response)
+          alert('Error: could not set new logo. See console for details.')
         })
       }
     },
+
     saveImage (event) {
-      alert('Not yet implemented')
-      console.log(event)
+      event.preventDefault()
+      if (this.file === null) { alert('Please provide a file to upload') }
+      else if (this.file.type !== 'image/jpeg' && this.file.type !== 'image/png') { alert('Please provide a valid image file (JPEG or PNG)') }
+      else {
+        let formData = new FormData()
+        this.backupstring = this.string
+        // these properties have to be sent always (and they must not be null)
+        formData.append('name', this.show.name)
+        formData.append('slug', this.show.slug)
+        formData.append('short_description', this.show.short_description)
+        formData.append('type', this.show.type)
+        formData.append('fundingcategory', this.show.fundingcategory)
+        // now we append the new image file
+        formData.append('image', this.file, this.file.name)
+        // ok then, let's submit it
+        let uri = process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/'
+        axios.put(uri, formData, {
+          withCredentials: true,
+          headers: {
+            'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token,
+            'Content-Type': 'multipart/form-data',
+          }
+        }).then(() => {
+          this.$parent.loadAndSwitch(this.$parent.currentShowID)
+          this.$refs.modalImage.hide()
+        }).catch(error => {
+          this.file = null
+          this.string = this.backupstring
+          this.$log.error(error.response.status + ' ' + error.response.statusText)
+          this.$log.error(error.response)
+          alert('Error: could set new image. See console for details.')
+        })
+      }
     },
     /*
     Functions to activate modals
@@ -978,7 +1012,7 @@ export default {
       if (this.show.logo === null) { this.string = '' }
       else { this.string = this.show.logo }
       this.file = null
-      this.$refs.fileinputLogo.reset()
+      //this.$refs.fileinputLogo.reset()
       this.$refs.modalLogo.show()
     },
     showImage () {