Commit 4604409b authored by jackie / Andrea Ida Malkah Klaura's avatar jackie / Andrea Ida Malkah Klaura
Browse files

FEAT: add playlist table scaffold

parent c94d9467
......@@ -348,9 +348,10 @@
</b-row>
</div>
<!-- If all playlist data is loaded we can present an create button and
<!-- If all playlist data is loaded we can present a create button and
a table of playlists (if there are already any)-->
<div v-else>
<!-- If no playlists are available, only show an alert and a create button -->
<div
v-if="playlists.length === 0"
align="center"
......@@ -368,12 +369,75 @@
Create a playlist
</b-button>
</div>
<!-- In case there are playlists, show the button and then the table -->
<div v-else>
<div
align="center"
style="padding-bottom: 1.5em;"
>
<b-button
variant="success"
@click="notYetImplemented"
>
Create a playlist
</b-button>
</div>
<b-table
ref="playlistsTable"
striped
:items="playlistsTable"
/>
:fields="playlistsTableFields"
:items="playlists"
>
<!-- Column: Entries
This column displays the number of entries of the playlist.
-->
<template
slot="entries"
slot-scope="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: Last edit
This column lists the last date this playlist was changed.
-->
<template
slot="updated"
slot-scope="data"
>
{{ prettyDateTime(data.value) }}
</template>
<!-- Column: Actions
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"
>
<b-button-group size="sm">
<b-button @click="editPlaylist(data.item.id)">
Edit
</b-button>
<b-button
variant="danger"
@click="deletePlaylist(data.item.id)"
>
Delete
</b-button>
</b-button-group>
</template>
</b-table>
</div>
<!-- End of playlists table -->
</div>
</div>
</b-container>
......@@ -434,25 +498,16 @@ export default {
{ key: 'metadata.title', label: 'Title' },
{ key: 'duration', label: 'Duration' },
{ key: 'size', label: 'Size' },
{ key: 'actions', label: 'Actions' },
]
}
},
{ key: 'actions', label: 'Actions', class: 'text-right' },
],
// TODO: if we can use the playlists object itself (similar to the files in
// in the files table, we can get rid of the computed properties)
computed: {
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
// configuration of the playlists table, which will use the playlists array as data
playlistsTableFields: [
{ key: 'id', label: 'Index' },
{ key: 'entries', label: 'Entries' },
{ key: 'updated', label: 'Last edit' },
{ key: 'actions', label: 'Actions', class: 'text-right' },
]
}
},
......@@ -514,6 +569,25 @@ export default {
return null
},
playlistToolTip: function (entries) {
var text = '<div style="white-space: nowrap;" align="left">'
for (var i in entries) {
text += i + ': ' + entries[i].uri + '<br>'
}
text += '</div>'
return text
},
deletePlaylist: function (id) {
this.notYetImplemented()
return id
},
editPlaylist: function (id) {
this.notYetImplemented()
return id
},
// To start modifying the meta information for a file we have to set our
// temporary data (which will be used to check if anything changed) and
// then open the editing modal
......
Supports Markdown
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