ShowSelector.vue

<template>
  <b-row>
    <b-col>
      <h3>{{ title }}</h3>
    </b-col>
    <b-col
      v-if="shows.length > 10"
      align="right"
    >
      <b-input-group prepend="Select show:">
        <b-form-input
          v-model="inputSelector"
          list="list-of-shows"
          autocomplete="off"
          @keypress="keypressed"
        />
        <b-input-group-append>
          <b-button
            variant="success"
            :disabled="disabledOk"
            @click="confirmSelector"
          >
            <b-icon-check />
          </b-button>
          <b-button
            variant="danger"
            :disabled="disabledReset"
            @click="resetSelector"
          >
            <b-icon-x />
          </b-button>
        </b-input-group-append>
      </b-input-group>
      <datalist id="list-of-shows">
        <option
          v-for="show in shows"
          :key="show.id"
        >
          {{ show.name }} (ID: {{ show.id }})
        </option>
      </datalist>
    </b-col>
    <b-col
      v-else
      align="right"
    >
      <b-dropdown
        id="ddshows"
        text="Select a radio show"
        variant="info"
      >
        <b-dropdown-item
          v-for="(show, index) in shows"
          :key="show.id"
          @click="switchShow(index)"
        >
          {{ show.name }}
        </b-dropdown-item>
      </b-dropdown>
      &nbsp;
      <b-button
        v-if="isSuperuser"
        v-b-popover.hover.top="'Add a new show'"
        variant="info"
        @click="$refs.addShowModal.openModal()"
      >
        +
      </b-button>
      <addShowModal
        ref="addShowModal"
        :callback="newShowAdded"
      />
    </b-col>
  </b-row>
</template>

<script>
import { mapGetters } from 'vuex'
import { BIconCheck, BIconX } from 'bootstrap-vue'
import modalAddShow from './shows/AddShowModal.vue'

export default {
  components: {
    BIconCheck,
    BIconX,
    'addShowModal': modalAddShow,
  },

  props: {
    title: { type: String, default: 'Unlabeled component title' },
    callback: { type: Function, default: null }
  },

  data () {
    return {
      inputSelector: '',
    }
  },

  computed: {
    isSuperuser () {
      const user = this.$store.state.auth.user.steeringUser;
      return user && user.is_superuser;
    },
    loaded () {
      return {
        shows: this.$store.state.shows.loaded.shows,
        types: this.$store.state.shows.loaded.types,
        fundingcategories:  this.$store.state.shows.loaded.fundingcategories,
      }
    },

    disabledOk () { return ! this.isValidSelector() },
    disabledReset () { return this.inputSelector.length > 0 ? false : true },

    ...mapGetters({
      shows: 'shows/shows',
      selectedShow: 'shows/selectedShow',
    })
  },

  created () {
    if (!this.loaded.types) {
      this.$store.dispatch('shows/fetchMetaArray', {property: 'types', onlyActive: true})
    }
    if (!this.loaded.fundingcategories) {
      this.$store.dispatch('shows/fetchMetaArray', {property: 'fundingcategories', onlyActive: true})
    }
  },

  methods: {
    switchShow: function (index) {
      this.$store.commit('shows/switchShow', index)
      this.updateInputSelector()
      if (this.callback) { this.callback() }
    },

    newShowAdded () {
      this.updateInputSelector()
      if (this.callback) { this.callback() }
    },

    updateInputSelector () {
      this.inputSelector = this.selectedShow.name + ' (ID: ' + this.selectedShow.id + ')'
    },

    isValidSelector () {
      let pattern = /^.*\(ID: \d+\)$/
      if (pattern.test(this.inputSelector)) {
        if ( this.shows.findIndex(s => s.id == this.getSelectorId()) >= 0 ) {
          return true
        }
      }
      return false
    },

    getSelectorId () {
      let s = this.inputSelector.split('(ID: ')
      return s[s.length-1].slice(0,-1)
    },

    keypressed (k) {
      if (k.key === 'Enter') {
        if (this.isValidSelector()) {
          this.switchShow(this.shows.findIndex(s => s.id == this.getSelectorId()))
        }
      }
    },

    confirmSelector () {
      this.keypressed({key: 'Enter'})
    },

    resetSelector () {
      this.inputSelector = ''
    },

  }
}
</script>