fix #24: implement fallback playlist modal

src/components/shows/FallbackSelector.vue

+<template>
+  <b-modal
+    ref="modalFallbackSelector"
+    title="Choose a fallback playlist for this show"
+    size="lg"
+  >
+    <p v-if="loaded">
+      Currently chosen playlist ID:
+      <span v-if="selectedShow.fallback_id === null">
+        <i><small>(none set)</small></i>
+      </span>
+      <span v-else>
+        {{ selectedShow.fallback_id }}
+        <span v-if="currentPlaylistDescription">
+          , Description: <b>{{ currentPlaylistDescription }}</b>
+        </span>
+      </span>
+    </p>
+
+    <p>Available playlists:</p>
+    <div v-if="loaded">
+      <b-table
+        ref="playlistsTable"
+        striped
+        :fields="playlistsTableFields"
+        :items="playlists"
+      >
+        <!-- Column: Entries
+        This column displays the number of entries of the playlist.
+        -->
+        <template v-slot:cell(entries)="data">
+          {{ data.value.length }} items
+          <b-button
+            v-b-tooltip.html="playlistToolTip(data.value)"
+            variant="outline-success"
+            size="sm"
+          >
+            show entries
+          </b-button>
+        </template>
+
+        <!-- Column: Actions
+        This column displays the available buttons for actions the user can
+        take on this playlist (e.g. editing and deleting).
+        -->
+        <template v-slot:cell(actions)="data">
+          <b-button-group size="sm">
+            <b-button
+              v-if="data.item.id !== selectedShow.fallback_id"
+              variant="info"
+              @click="choose(data.item.id)"
+            >
+              Take it!
+            </b-button>
+            <b-button
+              v-else
+              variant="danger"
+              @click="choose(null)"
+            >
+              Unset
+            </b-button>
+          </b-button-group>
+        </template>
+      </b-table>
+    </div>
+    <div v-else>
+      <img
+        src="../../assets/radio.gif"
+        alt="loading playlists"
+      >
+    </div>
+
+    <div align="center">
+      <b-button :to="'files'">
+        Go to FileManager
+      </b-button>
+    </div>
+  </b-modal>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  data () {
+    return {
+      saveFunction: null,
+
+      playlistsTableFields: [
+        { key: 'id', label: 'Index' },
+        { key: 'description', label: 'Description' },
+        { key: 'entries', label: 'Entries' },
+        { key: 'actions', label: 'Actions', class: 'text-right' },
+      ],
+    }
+  },
+
+  computed: {
+    loaded () { return this.$store.state.playlists.loaded.playlists },
+
+    currentPlaylistDescription () {
+      let description = false
+      if (this.selectedShow.fallback_id !== null) {
+        let choosenList = this.playlists.find(list => list.id === this.selectedShow.fallback_id)
+        if (choosenList && choosenList.description.length > 0) {
+          description = choosenList.description
+        }
+      }
+      return description
+    },
+
+    ...mapGetters({
+      selectedShow: 'shows/selectedShow',
+      playlists: 'playlists/playlists',
+    })
+  },
+
+  methods: {
+    open (saveFunction) {
+      this.saveFunction = saveFunction
+      this.$refs.modalFallbackSelector.show()
+    },
+
+    hide () {
+      this.$refs.modalFallbackSelector.hide()
+    },
+
+    choose (id) {
+      this.saveFunction(id)
+    },
+
+    playlistToolTip (entries) {
+      let text = '<div style="white-space: nowrap;" align="left">'
+      for (let i in entries) {
+        text += i + ': ' + entries[i].uri + '<br>'
+      }
+      text += '</div>'
+      return text
+    },
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/components/shows/MetaSimpleTypes.vue

@@ -114,8 +114,8 @@
           <b-badge variant="light">
             Fallback Playlist ID:
           </b-badge>
-          <span v-if="selectedShow.fallback_id === ''"><small><i>(none set)</i></small></span>
-          <span v-else>{{ selectedShow.fallback_id }}</span>
+          <span v-if="!selectedShow.fallback_id"><small><i>(none set)</i></small></span>
+          <span v-else>{{ fallbackInfo }}</span>
           <img
             src="../../assets/16x16/emblem-system.png"
             alt="edit"
@@ -168,18 +168,7 @@
       />
     </b-modal>
 
-    <b-modal
-      ref="modalFallback"
-      title="Fallback playlist ID"
-      size="lg"
-      @ok="saveFallback"
-    >
-      <b-form-input
-        v-model="id"
-        :state="validId"
-        placeholder="Put the ID of the playlist here, which should be used as a fallback"
-      />
-    </b-modal>
+    <app-modalFallback ref="modalFallback" />
 
     <b-modal
       ref="modalPredecessor"
@@ -245,14 +234,20 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import modalFallback from './FallbackSelector.vue'
 
 export default {
+  components: {
+    'app-modalFallback': modalFallback,
+  },
+
   data () {
     return {
       string: '',
       id: 0,
     }
   },
+
   computed: {
     shows () { return this.$store.state.shows.shows },
     isSuperuser () { return this.$store.state.auth.user.steeringUser.is_superuser },
@@ -320,10 +315,19 @@ export default {
       return this.id === null || RegExp('^[0-9]*$').test(this.id)
     },
 
+    fallbackInfo () {
+      const list = this.playlists.find(p => p.id === this.selectedShow.fallback_id)
+      if (! list) { return this.selectedShow.fallback_id }
+      else {
+        return list.description + ' (ID: ' + list.id + ')'
+      }
+    },
+
     ...mapGetters({
       selectedShow: 'shows/selectedShow',
       types: 'shows/types',
       fundingcategories: 'shows/fundingcategories',
+      playlists: 'playlists/playlists',
     })
   },
   methods: {
@@ -345,8 +349,7 @@ export default {
     },
 
     openModalFallback() {
-      this.id = this.selectedShow.fallback_id
-      this.$refs.modalFallback.show()
+      this.$refs.modalFallback.open(this.saveFallback)
     },
 
     openModalPredecessor() {
@@ -366,7 +369,7 @@ export default {
 
     saveProperty (property, value, modal, event) {
       if (value !== this.selectedShow[property]) {
-        event.preventDefault()
+        if (event) { event.preventDefault() }
         this.$store.dispatch('shows/updateProperty', {
           id: this.selectedShow.id,
           property: property,
@@ -396,14 +399,9 @@ export default {
       }
     },
 
-    saveFallback (event) {
-      if (this.validId) {
-        let id = this.id === '' ? null : this.id
-        this.saveProperty('fallback_id', id, this.$refs.modalFallback, event)
-      } else {
-        event.preventDefault()
-        alert ('Please provide a valid integer value as ID')
-      }
+    saveFallback (id) {
+      this.saveProperty('fallback_id', id, this.$refs.modalFallback, event)
+      this.$log.debug(this.playlists)
     },
 
     savePredecessor (event) {