ShowSelector.vue 4.11 KB
Newer Older
1
2
<template>
  <b-row>
3
    <b-col>
4
5
      <h3>{{ title }}</h3>
    </b-col>
6
7
8
9
    <b-col
      v-if="shows.length > 10"
      align="right"
    >
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
      <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
44
      v-else
45
46
      align="right"
    >
47
48
      <b-dropdown
        id="ddshows"
49
        text="Select a radio show"
50
51
52
53
54
55
56
57
58
59
        variant="info"
      >
        <b-dropdown-item
          v-for="(show, index) in shows"
          :key="show.id"
          @click="switchShow(index)"
        >
          {{ show.name }}
        </b-dropdown-item>
      </b-dropdown>
60
61
62
63
64
65
66
67
68
69
70
71
72
      &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"
      />
73
74
75
76
77
78
    </b-col>
  </b-row>
</template>

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

export default {
83
84
85
  components: {
    BIconCheck,
    BIconX,
86
    'addShowModal': modalAddShow,
87
88
  },

89
90
  props: {
    title: { type: String, default: 'Unlabeled component title' },
91
    callback: { type: Function, default: null }
92
93
  },

94
95
96
97
98
99
  data () {
    return {
      inputSelector: '',
    }
  },

100
  computed: {
101
102
103
104
    isSuperuser () {
      const user = this.$store.state.auth.user.steeringUser;
      return user && user.is_superuser;
    },
105
106
107
    loaded () {
      return {
        shows: this.$store.state.shows.loaded.shows,
108
109
        types: this.$store.state.shows.loaded.types,
        fundingcategories:  this.$store.state.shows.loaded.fundingcategories,
110
111
112
      }
    },

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

116
117
118
119
120
121
    ...mapGetters({
      shows: 'shows/shows',
      selectedShow: 'shows/selectedShow',
    })
  },

122
123
124
125
126
127
128
129
130
  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})
    }
  },

131
132
133
  methods: {
    switchShow: function (index) {
      this.$store.commit('shows/switchShow', index)
134
      this.updateInputSelector()
135
      if (this.callback) { this.callback() }
136
    },
137

138
139
140
141
142
    newShowAdded () {
      this.updateInputSelector()
      if (this.callback) { this.callback() }
    },

143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
    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 = ''
    },

178
179
180
  }
}
</script>