AddShowModal.vue

<template>
  <div>
    <!-- Modal for adding new shows -->
    <b-modal
      ref="modalAddShow"
      :title="$t('showCreator.title')"
      :cancel-title="$t('cancel')"
      size="lg"
      @ok.prevent="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"
              data-testid="add-show-modal:show-name"
              :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.shortDescription"
              type="text"
              data-testid="add-show-modal:show-description"
              :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.typeId"
                :options="showTypeSelector"
                data-testid="add-show-modal:show-type"
              />
              <p
                v-if="showTypeSelector.length === 0"
                v-html="$t('showCreator.missingShowTypes', { adminUrl })"
              />
            </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.fundingCategoryId"
                :options="showFundingCategorySelector"
                data-testid="add-show-modal:show-funding-category"
              />
              <p
                v-if="showFundingCategorySelector.length === 0"
                v-html="$t('showCreator.missingShowFundingCategories', { adminUrl })"
              />
            </div>
          </b-col>
        </b-row>
      </b-container>
    </b-modal>
  </div>
</template>

<script>
import slugify from '../../mixins/slugify.js'
import { mapGetters } from 'vuex'
import { mapStores } from 'pinia'
import { useUserStore } from '@/stores/auth'

export default {
  mixins: [slugify],
  data() {
    return {
      adminUrl: `${import.meta.env.VUE_APP_BASEURI_STEERING}/admin`,
      newShow: {
        name: '',
        slug: '',
        shortDescription: '',
        typeId: 0,
        fundingCategoryId: 0,
        categoryIds: [],
        hostIds: [],
        ownerIds: [],
        languageIds: [],
        topicIds: [],
        musicFocusIds: [],
      },
    }
  },

  computed: {
    ...mapStores(useUserStore),
    users() {
      return this.steeringUserStore.items
    },
    loaded() {
      return this.$store.state.shows.loaded
    },

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

    showTypeSelector: function () {
      return this.types.map(({ id, name }) => ({ value: id, text: name }))
    },

    showFundingCategorySelector: function () {
      return this.fundingCategories.map(({ id, name }) => ({
        value: id,
        text: name,
      }))
    },

    ...mapGetters({
      types: 'shows/types',
      fundingCategories: 'shows/fundingCategories',
    }),
  },

  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() {
      // only try to add a new show if name and short description are filled out
      if (this.newShow.name.trim() === '' || this.newShow.shortDescription.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.typeId) === -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.fundingCategoryId) === -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

      const modal = this.$refs.modalAddShow
      this.$store.dispatch('shows/submitShow', {
        show: this.newShow,
        callback: (response) => {
          modal.hide()
          this.$router.push({ name: 'show-basic-data', params: { showId: response.data.id } })
        },
      })
    },

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

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