Commit 369eb357 authored by jackie / Andrea Ida Malkah Klaura's avatar jackie / Andrea Ida Malkah Klaura
Browse files

improve files table and add delete function

* facilitate new bootstrap-vue table features to get rid of computed table array
* use template slots of the b-table for better rendering
* button group for edit and delete
* implement delete function
parent 234b43c8
......@@ -68,7 +68,20 @@
<div align="center" style="padding-bottom: 1.5em;">
<b-button variant="success" v-b-modal.modal-add-file>Upload or add a file</b-button>
</div>
<b-table striped :items="filesTable" />
<b-table striped :fields="filesTableFields" :items="files">
<template slot="duration" slot-scope="data">
{{ prettyNanoseconds(data.value) }}
</template>
<template slot="size" slot-scope="data">
{{ prettyFileSize(data.value) }}
</template>
<template slot="actions" slot-scope="data">
<b-button-group size="sm">
<b-button @click="editFile(data.item.id)">Edit</b-button>
<b-button variant="danger" @click="deleteFile(data.item.id)">Delete</b-button>
</b-button-group>
</template>
</b-table>
</div>
</div>
</div>
......@@ -119,27 +132,20 @@ export default {
button: {
files: 'info',
playlists: 'outline-info'
}
},
filesTableFields: [
{ key: 'id', label: 'Index' },
{ key: 'metadata.artist', label: 'Artist' },
{ key: 'metadata.album', label: 'Album' },
{ key: 'metadata.title', label: 'Title' },
{ key: 'duration', label: 'Duration' },
{ key: 'size', label: 'Size' },
{ key: 'actions', label: 'Actions' },
]
}
},
mixins: [ prettyDate ],
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.prettyNanoseconds(this.files[i].duration),
size: filesize(this.files[i].size),
updated: this.files[i].updated,
actions: '...'
})
}
return arr
},
playlistsTable: function (){
var arr = []
for (var i in this.files) {
......@@ -157,6 +163,25 @@ export default {
notYetImplemented: function () {
alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
},
prettyFileSize: function (s) {
return filesize(s)
},
editFile: function (id) {
alert('Not yet implemented. ID:'+ id)
},
deleteFile: function (id) {
var uri = process.env.VUE_APP_API_TANK + 'shows/' + this.shows[this.currentShow].slug + '/files/' + id
axios.delete(uri, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token },
}).then(
this.fetchShows(this.shows[this.currentShow].slug)
).catch(error => {
console.log('Error:')
console.log(error)
alert('Error: could not delete file. See console log for details.')
})
},
addFile: function () {
var uri = process.env.VUE_APP_API_TANK + 'shows/' + this.shows[this.currentShow].slug + '/files'
if (this.addNewFileURI) {
......@@ -214,8 +239,6 @@ export default {
flow.upload()
*/
var uri = process.env.VUE_APP_API_TANK + 'shows/' + this.shows[this.currentShow].slug + '/files/' + id + '/upload'
//var reader = new FileReader()
//axios.put(uri, reader.readAsArrayBuffer(this.uploadSourceFile), {
axios.put(uri, this.uploadSourceFile, {
withCredentials: true,
headers: {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment