files & playlists tables; refactoring

now displaying files and playlists in a b-table or asking to upload something

also refactored groups to shows, after tank refactoring happened

src/components/FileManager.vue

@@ -39,7 +39,13 @@
         </b-row>
       </div>
       <div v-else>
-        files
+        <div v-if="files.length === 0" align="center">
+          <b-alert show variant="warning">There are no files for this show yet.</b-alert>
+          <b-button variant="success" @click="notYetImplemented">Upload a file</b-button>
+        </div>
+        <div v-else>
+          <b-table striped :items="filesTable" />
+        </div>
       </div>
     </div>
 
@@ -52,7 +58,13 @@
         </b-row>
       </div>
       <div v-else>
-        playlists
+        <div v-if="playlists.length === 0" align="center">
+          <b-alert show variant="warning">There are no playlists for this show yet.</b-alert>
+          <b-button variant="success" @click="notYetImplemented">Create a playlist</b-button>
+        </div>
+        <div v-else>
+          <b-table striped :items="playlistsTable" />
+        </div>
       </div>
     </div>
   </b-container>
@@ -67,12 +79,11 @@ export default {
       shows: [],        // an array of objects describing our shows (empty at load, will be populated on created())
       currentShow: 0,   // index of the currently selected show in our shows array
       currentShowID: 0, // actual id of the currently selected show
-      groups: [],       // group array from the tank (needed until #2 is solved)
-      groupExists: false, // indicates if there is already a group in the tank for the current show
+      files: [],
+      playlists: [],
       mode: 'files',
       loaded: {
         shows: false,
-        groups: false,
         files: false,
         playlists: false
       },
@@ -82,11 +93,45 @@ export default {
       }
     }
   },
+  computed: {
+    filesTable: function (){
+      var arr = []
+      for (var i in this.files) {
+        arr.push({
+          id: this.files[i].id,
+          artist: this.files[i].metadata.artist,
+          album:this.files[i].metadata.album,
+          title: this.files[i].metadata.title,
+          duration: this.files[i].duration,
+          size: this.files[i].size,
+          updated: this.files[i].updated,
+          actions: '...'
+        })
+      }
+      return arr
+    },
+    playlistsTable: function (){
+      var arr = []
+      for (var i in this.files) {
+        arr.push({
+          id: this.files[i].id,
+          other_fields: 'not yet implemented',
+          updated: this.files[i].updated,
+          actions: '...'
+        })
+      }
+      return arr
+    }
+  },
   methods: {
+    notYetImplemented: function () {
+      alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
+    },
     switchShow: function (index) {
       // set the current show and its ID to whatever we want to switch to now
       this.currentShow = index
       this.currentShowID = this.shows[this.currentShow].id
+      this.fetchShows(this.shows[this.currentShow].slug)
     },
     switchMode: function (mode) {
       if (this.mode !== mode) {
@@ -97,42 +142,38 @@ export default {
         }
       }
     },
-    fetchGroup: function (slug) {
-      this.groupExists = false
-      for (var s in this.groups) {
-        if (this.groups[s].name === slug) {
-          this.groupExists = true
-          // the group for this show already exists, so lets fetch files and playlists
-          var uri = process.env.VUE_APP_API_TANK + 'groups/' + slug + '/files'
-          axios.get(uri, {
-            withCredentials: true,
-            headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
-          }).then(response => {
-            this.loaded.files = true
-          }).catch(error => {
-            alert('There was an error fetching files from tank: ' + error)
-          })
-          var uri = process.env.VUE_APP_API_TANK + 'groups/' + slug + '/playlists'
-          axios.get(uri, {
-            withCredentials: true,
-            headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
-          }).then(response => {
-            this.loaded.playlists = true
-          }).catch(error => {
-            alert('There was an error fetching playlists from tank: ' + error)
-          })
-          this.loaded.groups = true
-          return
-        }
-      }
-      // it is important to set this to true, so the interface knows the groups
-      // are already loaded but for the current show there is no group in the tank
-      this.loaded.groups = true
+    fetchShows: function (slug) {
+      this.loaded.files = false
+      this.loaded.playlists = false
+      var uri = process.env.VUE_APP_API_TANK + 'shows/' + slug + '/files'
+      axios.get(uri, {
+        withCredentials: true,
+        headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
+      }).then(response => {
+        // we don't have to check separately, if there are files, because tank
+        // always provides an empty array if there are no files (or even if there is no corresponding show)
+        this.files = response.data.results
+        this.loaded.files = true
+      }).catch(error => {
+        alert('There was an error fetching files from tank: ' + error)
+      })
+      var uri = process.env.VUE_APP_API_TANK + 'shows/' + slug + '/playlists'
+      axios.get(uri, {
+        withCredentials: true,
+        headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
+      }).then(response => {
+        // we don't have to check separately, if there are playlists, because tank
+        // always provides an empty array if there are no playlists (or even if there is no corresponding show)
+        this.playlists = response.data.results
+        this.loaded.playlists = true
+      }).catch(error => {
+        alert('There was an error fetching playlists from tank: ' + error)
+      })
     }
   },
   created () {
     // when we enter this module, we want to load all shows of the current user
-    // before we search for corresponding groups in the tank
+    // before we search for corresponding shows in the tank
     var uri = process.env.VUE_APP_API_STEERING_SHOWS
     // only the superuser should see all shows and therefore files and playlists
     // normal users should only see their own shows
@@ -153,24 +194,6 @@ export default {
       this.currentShow = 0
       this.loaded.shows = true
       this.switchShow(this.currentShow)
-      //
-      // now that all the shows are laoded we can fetch the groups from tank
-      var uri = process.env.VUE_APP_API_TANK + 'groups'
-      axios.get(uri, {
-        withCredentials: true,
-        headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
-      }).then(response => {
-        if (response.data.length === 0) {
-          alert('There are no groups!')
-          return
-        }
-        // store the whole group array (until issue #2 is fixed)
-        // and then fetch group data for the current show
-        this.groups = response.data.results
-        this.fetchGroup(this.shows[this.currentShow].slug)
-      }).catch(error => {
-        alert('There was an error fetching groups from tank: ' + error)
-      })
     }).catch(error => {
       alert('There was an error fetching shows from steering: ' + error)
     })