AddShowModal.vue

<template>
    <div>
        <!-- Modal for adding new shows -->
        <b-modal
                ref="modalAddShow"
                :title="$t('showCreator.title')"
                :cancel-title="$t('cancel')"
                size="lg"
                @ok="addShow"
        >
            <b-container fluid>
                <b-row>
                    <b-col cols="3">
                        {{ $t('showMeta.showName') }}:
                    </b-col>
                    <b-col cols="9">
                        <b-form-input
                                v-model="newShow.name"
                                type="text"
                                :placeholder="$t('showMeta.showNamePlaceholder')"
                        />
                    </b-col>
                    <b-col cols="3" />
                    <b-col cols="9">
                        <small class="slug">{{ $t('slug') }}: {{ temporarySlug }}</small>
                    </b-col>
                </b-row>
                <br>

                <b-row>
                    <b-col cols="3">
                        {{ $t('showMeta.shortDescription' )}}:
                    </b-col>
                    <b-col cols="9">
                        <b-form-input
                                v-model="newShow.short_description"
                                type="text"
                                :placeholder="$t('showMeta.shortDescriptionPlaceholder')"
                        />
                    </b-col>
                </b-row>
                <br>

                <b-row>
                    <b-col cols="3">
                        {{ $t('showMeta.type') }}:
                    </b-col>
                    <b-col cols="9">
                        <div v-if="!loaded.types">
                            <img
                                    src="/assets/radio.gif"
                                    :alt="$t('loading')"
                            >
                        </div>
                        <div v-else>
                            <b-form-select
                                    v-model="newShow.type"
                                    :options="showTypeSelector"
                            />
                        </div>
                    </b-col>
                </b-row>
                <br>

                <b-row>
                    <b-col cols="3">
                        {{ $t('showMeta.fundingCategory') }}:
                    </b-col>
                    <b-col cols="9">
                        <div v-if="!loaded.fundingcategories">
                            <img
                                    src="/assets/radio.gif"
                                    :alt="$t('loading')"
                            >
                        </div>
                        <div v-else>
                            <b-form-select
                                    v-model="newShow.fundingcategory"
                                    :options="showFundingCategorySelector"
                            />
                        </div>
                    </b-col>
                </b-row>
            </b-container>
        </b-modal>
    </div>
</template>

<script>
    import slugify from '../../mixins/slugify.js'
    import {mapGetters} from 'vuex'

    export default {
        mixins: [slugify],
        props: {
            callback: {type: Function, default: null}
        },
        data() {
            return {
                newShow: {
                    name: "",
                    slug: "",
                    short_description: "",
                    type: 0,
                    fundingcategory: 0,
                    category: [],
                    hosts: [],
                    owners: [],
                    language: [],
                    topic: [],
                    musicfocus: [],
                },
            }
        },

        computed: {
            loaded() {
                return this.$store.state.shows.loaded
            },

            temporarySlug: function () {
                return this.slugify(this.newShow.name)
            },

            showTypeSelector: function () {
                let options = []
                for (let i in this.types) {
                    options.push({
                        value: this.types[i].id,
                        text: this.types[i].type
                    })
                }
                return options
            },

            showFundingCategorySelector: function () {
                let options = []
                for (let i in this.fundingcategories) {
                    options.push({
                        value: this.fundingcategories[i].id,
                        text: this.fundingcategories[i].abbrev + ' (' + this.fundingcategories[i].fundingcategory + ')'
                    })
                }
                return options
            },

            ...mapGetters({
                types: 'shows/types',
                fundingcategories: 'shows/fundingcategories',
                users: 'auth/users',
            })
        },

        methods: {
            // create a new show and POST it to the steering API
            // new shows have to at least contain a name, a slug and a short-description.
            // also a valide show type and funding category have to be choosen.
            // for all other categories we can use an empty array and let the user fill
            // it out through the existing show manager modals, after the show is created
            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.')
                    return
                }
                // also the type and funding category have to be set
                if (this.types.findIndex(type => type.id === this.newShow.type) === -1) {
                    // TODO: make this nicer UI-wise (red text annotations next to input fields instead of simple alert)
                    alert('Please choose a type for this show.')
                    return
                }
                if (this.fundingcategories.findIndex(cat => cat.id === this.newShow.fundingcategory) === -1) {
                    // TODO: make this nicer UI-wise (red text annotations next to input fields instead of simple alert)
                    alert('Please choose a funding category for this show.')
                    return
                }

                // as the slug is a computed property we have to assign it to the new show's slug property
                this.newShow.slug = this.temporarySlug

                let modal = this.$refs.modalAddShow
                this.$store.dispatch('shows/submitShow', {
                    show: this.newShow,
                    callback: (response) => {
                        modal.hide()
                        this.$store.commit('shows/switchShowById', response.data.id)
                        if (this.callback) {
                            this.callback()
                        }
                    }
                })
            },

            // clear and fetch modal data and open the modal to add new shows
            openModal() {
                this.newShow.name = ''
                this.newShow.slug = ''
                this.newShow.short_description = ''
                this.$refs.modalAddShow.show()
            },
        }
    }
</script>

<style scoped>
    .slug {
        color: gray;
    }
</style>