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(response => {
          // everything was fine, we can close the modal now
          this.$refs.modalAddShow.hide()
          this.$parent.loadAndSwitch(response.data.id)
        }).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>