add button to add shows to show selector component and sort show array after adding new show

src/components/ShowSelector.vue

@@ -54,6 +54,19 @@
           {{ 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>
@@ -61,11 +74,13 @@
 <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: {
@@ -80,19 +95,17 @@ export default {
   },
 
   computed: {
+    isSuperuser () { return this.$store.state.auth.user.steeringUser.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
-    },
+    disabledOk () { return ! this.isValidSelector() },
+    disabledReset () { return this.inputSelector.length > 0 ? false : true },
 
     ...mapGetters({
       shows: 'shows/shows',
@@ -100,6 +113,15 @@ export default {
     })
   },
 
+  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)
@@ -107,6 +129,11 @@ export default {
       if (this.callback) { this.callback() }
     },
 
+    newShowAdded () {
+      this.updateInputSelector()
+      if (this.callback) { this.callback() }
+    },
+
     updateInputSelector () {
       this.inputSelector = this.selectedShow.name + ' (ID: ' + this.selectedShow.id + ')'
     },

src/components/shows/AddShowModal.vue

@@ -90,6 +90,9 @@ import { mapGetters } from 'vuex'
 
 export default {
   mixins: [ slugify ],
+  props: {
+    callback: { type: Function, default: null }
+  },
   data () {
     return {
       newShow: {
@@ -178,8 +181,10 @@ export default {
       let modal = this.$refs.modalAddShow
       this.$store.dispatch('shows/submitShow', {
         show: this.newShow,
-        callback: () => {
+        callback: (response) => {
           modal.hide()
+          this.$store.commit('shows/switchShowById', response.data.id)
+          if (this.callback) { this.callback() }
         }
       })
     },

src/store/modules/shows.js

@@ -94,7 +94,10 @@ const mutations = {
   finishLoading(state, item) { state.loaded[item] = true },
 
   setShows(state, shows) { state.shows = shows },
-  addShow (state, show) { state.shows.push(show) },
+  addShow (state, show) {
+    state.shows.push(show)
+    state.shows.sort((a, b) => a.name.toLowerCase() > b.name.toLowerCase())
+  },
 
   setSchedule (state, schedule) { state.schedule = schedule },
   setScheduleTimeslots (state, slots) { state.scheduleTimeslots = slots },
@@ -140,7 +143,13 @@ const mutations = {
       state.selected.index = index
       state.selected.id = state.shows[index].id
     }
-  }
+  },
+  switchShowById (state, id) {
+    if (state.loaded.shows) {
+      state.selected.index = state.shows.findIndex(s => s.id === id)
+      state.selected.id = id
+    }
+  },
 }
 
 const actions = {