FEAT: add modal for creating new shows

src/components/ShowManager.vue

@@ -7,6 +7,14 @@
         <h3>Sendungen verwalten</h3>
       </b-col>
       <b-col align="right">
+        <b-button
+          v-if="$parent.user.steeringUser.is_superuser"
+          v-b-popover.hover.top="'Add a new show'"
+          @click="$refs.appModalSuperuser.showModalAddShow()"
+        >
+          +
+        </b-button>
+        &nbsp;
         <b-dropdown
           id="ddshows"
           text="Sendereihe auswählen"
@@ -92,6 +100,9 @@
         :show="shows[currentShow]"
         :show-aggregate="current"
       />
+      <app-modalSuperuser
+        ref="appModalSuperuser"
+      />
 
       <!-- here are the filter settings for our timeslots table -->
       <b-card>
@@ -609,6 +620,7 @@
 <script>
 import modalNotes from './ShowManagerModalNotes.vue'
 import modalShow from './ShowManagerModalShow.vue'
+import modalSuperuser from './ShowManagerModalSuperuser.vue'
 import timeslotSort from '../mixins/timeslotSort'
 import prettyDate from '../mixins/prettyDate'
 import axios from 'axios'
@@ -619,7 +631,8 @@ export default {
   // components, to make it a tiny lickle bit less messy here
   components: {
     'app-modalNotes': modalNotes,
-    'app-modalShow': modalShow
+    'app-modalShow': modalShow,
+    'app-modalSuperuser': modalSuperuser,
   },
 
   // generic functions that we want to use from our mixins folder

src/components/ShowManagerModalSuperuser.vue

+<template>
+  <div>
+    <b-modal
+      ref="modalAddShow"
+      title="Create a new show"
+      size="lg"
+      @ok="addShow"
+    >
+      <b-container fluid>
+        <b-row>
+          <b-col cols="2">
+            Name of the show:
+          </b-col>
+          <b-col cols="10">
+            <b-form-input
+              v-model="newShow.name"
+              type="text"
+              placeholder="Enter a title for this new show"
+            />
+          </b-col>
+          <b-col cols="2" />
+          <b-col cols="10">
+            <small class="slug">Slug: {{ temporarySlug }}</small>
+          </b-col>
+        </b-row>
+        <br>
+        <b-row>
+          <b-col cols="2">
+            Short description:
+          </b-col>
+          <b-col cols="10">
+            <b-form-input
+              v-model="newShow.short_description"
+              type="text"
+              placeholder="Enter a short description for this show"
+            />
+          </b-col>
+        </b-row>
+      </b-container>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import slugify from '../mixins/slugify.js'
+
+export default {
+  mixins: [ slugify ],
+  data () {
+    return {
+      newShow: {
+        name: "",
+        slug: "",
+        short_description: "",
+        type: 1,
+        fundingcategory: 1,
+        category: [],
+        hosts: [],
+        owners: [],
+        language: [],
+        topic: [],
+        musicfocus: []
+      }
+    }
+  },
+  computed: {
+    temporarySlug: function () {
+      return this.slug(this.newShow.name)
+    }
+  },
+  methods: {
+    addShow (event) {
+      // prevent the modal from closing automatically on click
+      event.preventDefault()
+      // only try to add a new show if name and short description are filled out
+      if (this.newShow.name.trim() === '' || this.newShow.short_description.trim() === '' ) {
+        // TODO: make this nicer UI-wise (red text annotations next to input fields instead of simple alert)
+        alert('Please provide at least a title and a short description for this show.')
+      } 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
+        axios.post(uri, this.newShow, {
+          withCredentials: true,
+          headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
+        }).then(() => {
+          // everything was fine, we can close the modal now
+          this.$refs.modalAddShow.hide()
+          // TODO:
+          // - add new show to the ShowManager show array
+          // - switch ShowManager to newly added show
+        }).catch(error => {
+          this.$log.error(error.response.status + ' ' + error.response.statusText)
+          this.$log.error(error.response)
+          alert('Error: could not add new 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 = ''
+      this.newShow.short_description = ''
+      // TODO:
+      // - load types & funding categories
+      this.$refs.modalAddShow.show()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.slug {
+  color: gray;
+}
+</style>

src/mixins/slugify.js

+export default {
+  methods: {
+    slug: function (title) {
+      return title.toLowerCase()
+        .replace(/\s+/g, '-')          // Replace spaces with -
+        .replace(/[^\w-]+/g, '')       // Remove all non-word chars
+        .replace(/--+/g, '-')          // Replace multiple - with single -
+        .replace(/^-+/, '')            // Trim - from start of text
+        .replace(/-+$/, '')            // Trim - from end of text
+    },
+  }
+}