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 @@ ...@@ -348,9 +348,10 @@
</b-row> </b-row>
</div> </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)--> a table of playlists (if there are already any)-->
<div v-else> <div v-else>
<!-- If no playlists are available, only show an alert and a create button -->
<div <div
v-if="playlists.length === 0" v-if="playlists.length === 0"
align="center" align="center"
...@@ -368,12 +369,75 @@ ...@@ -368,12 +369,75 @@
Create a playlist Create a playlist
</b-button> </b-button>
</div> </div>
<!-- In case there are playlists, show the button and then the table -->
<div v-else> <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 <b-table
ref="playlistsTable"
striped 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> </div>
<!-- End of playlists table -->
</div> </div>
</div> </div>
</b-container> </b-container>
...@@ -434,25 +498,16 @@ export default { ...@@ -434,25 +498,16 @@ export default {
{ key: 'metadata.title', label: 'Title' }, { key: 'metadata.title', label: 'Title' },
{ key: 'duration', label: 'Duration' }, { key: 'duration', label: 'Duration' },
{ key: 'size', label: 'Size' }, { 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 // configuration of the playlists table, which will use the playlists array as data
// in the files table, we can get rid of the computed properties) playlistsTableFields: [
computed: { { key: 'id', label: 'Index' },
playlistsTable: function (){ { key: 'entries', label: 'Entries' },
var arr = [] { key: 'updated', label: 'Last edit' },
for (var i in this.files) { { key: 'actions', label: 'Actions', class: 'text-right' },
arr.push({ ]
id: this.files[i].id,
other_fields: 'not yet implemented',
updated: this.files[i].updated,
actions: '...'
})
}
return arr
} }
}, },
...@@ -514,6 +569,25 @@ export default { ...@@ -514,6 +569,25 @@ export default {
return null 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 // 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 // temporary data (which will be used to check if anything changed) and
// then open the editing modal // 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