FIX: table display issues due to bootrstrap-vue update

for details see the migration guide for v2.0.0:
https://github.com/bootstrap-vue/bootstrap-vue/releases/tag/v2.0.0

src/components/FileManager.vue

@@ -247,10 +247,7 @@
             the file is just being uploaded/imported, a spinner visualising an
             ongoing import.
             -->
-            <template
-              slot="metadata.album"
-              slot-scope="data"
-            >
+            <template v-slot:cell(metadata.album)="data">
               <span v-if="data.item.source.import.state === 'aborted'"><b-badge variant="danger">Error:</b-badge></span>
               <span v-else-if="data.item.source.import.state !== 'done'"><img
                 src="../assets/radio.gif"
@@ -265,10 +262,7 @@
             the file is just being uploaded/imported, the current phase
             of the ongoing import (fetching or normalizing).
             -->
-            <template
-              slot="metadata.title"
-              slot-scope="data"
-            >
+            <template v-slot:cell(metadata.title)="data">
               <span v-if="data.item.source.import.state === 'done'">{{ data.value }}</span>
               <span v-else-if="data.item.source.import.state === 'aborted'">import was aborted</span>
               <span v-else-if="data.item.source.import.progress !== undefined">{{ data.item.source.import.progress.step }} :</span>
@@ -278,10 +272,7 @@
             This column displays either the duration of the audio file, or, if
             the file is just being uploaded/imported, the current progress.
             -->
-            <template
-              slot="duration"
-              slot-scope="data"
-            >
+            <template v-slot:cell(duration)="data">
               <!-- In case the import is already done just print a pretty duration -->
               <div v-if="data.item.source.import.state === 'done'">
                 {{ prettyNanoseconds(data.value) }}
@@ -309,10 +300,7 @@
             This column displays the size of the audio file, if the file is
             already fully imported. Otherwise we'll just leave it empty.
             -->
-            <template
-              slot="size"
-              slot-scope="data"
-            >
+            <template v-slot:cell(size)="data">
               <span v-if="data.item.source.import.state === 'done'">{{ prettyFileSize(data.value) }}</span>
             </template>
 
@@ -320,10 +308,7 @@
             This column displays the available button for actions  the user can
             take on this file (e.g. editing and deleting).
             -->
-            <template
-              slot="actions"
-              slot-scope="data"
-            >
+            <template v-slot:cell(actions)="data">
               <b-button-group size="sm">
                 <b-button @click="editFile(data.item.id)">
                   Edit
@@ -411,10 +396,7 @@
                  Here we just use the array index, because the playlist entries
                  are ordered as an array, without the need for an extra id field
             -->
-            <template
-              slot="id"
-              slot-scope="data"
-            >
+            <template v-slot:cell(id)="data">
               {{ data.index + 1 }}.
             </template>
 
@@ -422,10 +404,7 @@
                  Based on the entry content (either file or uri), we display
                  a small badge indicating which type of source this is
             -->
-            <template
-              slot="type"
-              slot-scope="data"
-            >
+            <template v-slot:cell(type)="data">
               <b-badge
                 v-if="data.item.file"
                 variant="success"
@@ -455,10 +434,7 @@
             <!-- Column: Source
                  Here we display where this playlist entry is coming from
             -->
-            <template
-              slot="source"
-              slot-scope="data"
-            >
+            <template v-slot:cell(source)="data">
               <span v-if="data.item.file">
                 {{ getFileTitleForPlaylist(data.item.file.show, data.item.file.id) }}
                 <small><i>( file://{{ data.item.file.show }}/{{ data.item.file.id }} )</i></small>
@@ -471,10 +447,7 @@
             <!-- Column: Actions
                  Finally some buttons to reorder or delete playlist entries
             -->
-            <template
-              slot="actions"
-              slot-scope="data"
-            >
+            <template v-slot:cell(actions)="data">
               <b-button-group size="sm">
                 <b-button
                   :disabled="data.index === 0"
@@ -607,10 +580,7 @@
             <!-- Column: Entries
             This column displays the number of entries of the playlist.
             -->
-            <template
-              slot="entries"
-              slot-scope="data"
-            >
+            <template v-slot:cell(entries)="data">
               {{ data.value.length }} items
               <b-button
                 v-b-tooltip.html="playlistToolTip(data.value)"
@@ -624,10 +594,7 @@
             <!-- Column: Last edit
             This column lists the last date this playlist was changed.
             -->
-            <template
-              slot="updated"
-              slot-scope="data"
-            >
+            <template v-slot:cell(updated)="data">
               {{ prettyDateTime(data.value) }}
             </template>
 
@@ -635,10 +602,7 @@
             This column displays the available buttons for actions the user can
             take on this playlist (e.g. editing and deleting).
             -->
-            <template
-              slot="actions"
-              slot-scope="data"
-            >
+            <template v-slot:cell(actions)="data">
               <b-button-group size="sm">
                 <b-button @click="editPlaylist(data.item.id)">
                   Edit

src/components/ShowManager.vue

@@ -214,33 +214,21 @@
           :items="notesTableArray"
         >
           <!-- Title of the timeslot (if already set) -->
-          <template
-            slot="title"
-            slot-scope="data"
-          >
+          <template v-slot:cell(title)="data">
             <span v-if="data.value">{{ data.value }}</span>
             <span v-else><small><i>(none set)</i></small></span>
           </template>
           <!-- Date and time when this timeslot starts -->
-          <template
-            slot="starts"
-            slot-scope="data"
-          >
+          <template v-slot:cell(starts)="data">
             {{ data.value }}
           </template>
           <!-- The duration of this timeslot -->
-          <template
-            slot="duration"
-            slot-scope="data"
-          >
+          <template v-slot:cell(duration)="data">
             {{ data.value }}
           </template>
           <!-- And here all the buttons for editing and doing other things
           with the displayed timeslot -->
-          <template
-            slot="options"
-            slot-scope="data"
-          >
+          <template v-slot:cell(options)="data">
             <span
               class="timeslotEditLink"
               @click="editTimeslotNote(data.item.options.id, data.item.options.schedule)"

src/components/ShowManagerModalPlaylist.vue

@@ -29,10 +29,7 @@
           <!-- Column: Entries
           This column displays the number of entries of the playlist.
           -->
-          <template
-            slot="entries"
-            slot-scope="data"
-          >
+          <template v-slot:cell(entries)="data">
             {{ data.value.length }} items
             <b-button
               v-b-tooltip.html="playlistToolTip(data.value)"
@@ -47,10 +44,7 @@
           This column displays the available buttons for actions the user can
           take on this playlist (e.g. editing and deleting).
           -->
-          <template
-            slot="actions"
-            slot-scope="data"
-          >
+          <template v-slot:cell(actions)="data">
             <b-button-group size="sm">
               <b-button
                 v-if="data.item.id !== timeslotObject.playlist_id"

src/components/ShowManagerModalSuperuser.vue

@@ -125,28 +125,16 @@
             :items="owners"
             :fields="ownersTableFields"
           >
-            <template
-              slot="name"
-              slot-scope="data"
-            >
+            <template v-slot:cell(name)="data">
               {{ data.item.first_name }} {{ data.item.last_name }}
             </template>
-            <template
-              slot="username"
-              slot-scope="data"
-            >
+            <template v-slot:cell(username)="data">
               <small>{{ data.value }}</small>
             </template>
-            <template
-              slot="email"
-              slot-scope="data"
-            >
+            <template v-slot:cell(email)="data">
               <small>{{ data.value }}</small>
             </template>
-            <template
-              slot="options"
-              slot-scope="data"
-            >
+            <template v-slot:cell(options)="data">
               <b-button
                 variant="danger"
                 size="sm"
@@ -177,28 +165,16 @@
           :items="users"
           :fields="ownersTableFields"
         >
-          <template
-            slot="name"
-            slot-scope="data"
-          >
+          <template v-slot:cell(name)="data">
             {{ data.item.first_name }} {{ data.item.last_name }}
           </template>
-          <template
-            slot="username"
-            slot-scope="data"
-          >
+          <template v-slot:cell(username)="data">
             <small>{{ data.value }}</small>
           </template>
-          <template
-            slot="email"
-            slot-scope="data"
-          >
+          <template v-slot:cell(email)="data">
             <small>{{ data.value }}</small>
           </template>
-          <template
-            slot="options"
-            slot-scope="data"
-          >
+          <template v-slot:cell(options)="data">
             <b-button
               variant="success"
               size="sm"