FEAT: add show delete function

src/components/ShowManager.vue

@@ -63,7 +63,7 @@
           alt="edit description"
           @click="$refs.appModalShow.showDescription()"
         >
-        <div v-if="loaded.shows">
+        <div>
           <!--
           we are disabling the linter warning for the next line, because, while it
           generally is not advisible to use v-html, in this case we took thorough
@@ -74,6 +74,16 @@
           <!-- TODO: add image and logo here? -->
         </div>
       </div>
+
+      <div align="center">
+        <b-button
+          v-if="$parent.user.steeringUser.is_superuser"
+          variant="danger"
+          @click="$refs.appModalSuperuser.showModalDeleteShow(shows[currentShow].id, shows[currentShow].name)"
+        >
+          Delete show
+        </b-button>
+      </div>
     </b-jumbotron>
 
     <!-- If the shows are not fully loaded yet, we just put the loading sign -->

src/components/ShowManagerModalSuperuser.vue

 <template>
   <div>
+    <!-- Modal for adding new shows -->
     <b-modal
       ref="modalAddShow"
       title="Create a new show"
@@ -38,6 +39,24 @@
         </b-row>
       </b-container>
     </b-modal>
+
+    <!-- Modal to confirm and delete a show -->
+    <b-modal
+      ref="modalDeleteShow"
+      title="Delete a show"
+      size="lg"
+      @ok="deleteShow"
+    >
+      <b-alert
+        variant="danger"
+        show
+      >
+        You are about to delete the show <b>{{ deletedShow.name }}</b>!
+      </b-alert>
+      <div align="center">
+        Are you sure you want to continue?
+      </div>
+    </b-modal>
   </div>
 </template>
 
@@ -60,7 +79,11 @@ export default {
         owners: [],
         language: [],
         topic: [],
-        musicfocus: []
+        musicfocus: [],
+      },
+      deletedShow: {
+        id: null,
+        name: '',
       }
     }
   },
@@ -80,7 +103,7 @@ export default {
       } else {
         // as the slug is a computed property we to assign it to the new show's slug variable
         this.newShow.slug = this.temporarySlug
-        var uri = process.env.VUE_APP_API_STEERING_SHOWS
+        let uri = process.env.VUE_APP_API_STEERING_SHOWS
         axios.post(uri, this.newShow, {
           withCredentials: true,
           headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
@@ -96,6 +119,25 @@ export default {
         })
       }
     },
+
+    deleteShow (event) {
+      // prevent the modal from closing automatically on click
+      event.preventDefault()
+      let uri = process.env.VUE_APP_API_STEERING_SHOWS + this.deletedShow.id
+      axios.delete(uri, {
+        withCredentials: true,
+        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
+      }).then(() => {
+        this.$refs.modalDeleteShow.hide()
+        this.$parent.loadAndSwitch(null)
+      }).catch(error => {
+        this.$log.error(error.response.status + ' ' + error.response.statusText)
+        this.$log.error(error.response)
+        alert('Error: could not delete show. See console for details.')
+        // and we leave the modal open, so no call to its .hide function here
+      })
+    },
+
     showModalAddShow () {
       this.newShow.name = ''
       this.newShow.slug = ''
@@ -103,6 +145,12 @@ export default {
       // TODO:
       // - load types & funding categories
       this.$refs.modalAddShow.show()
+    },
+
+    showModalDeleteShow (id, name) {
+      this.deletedShow.id = id
+      this.deletedShow.name = name
+      this.$refs.modalDeleteShow.show()
     }
   }
 }