Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in / Register
Toggle navigation
Menu
Open sidebar
Maxence Bothorel
funkwhale
Commits
a7e3828f
Verified
Commit
a7e3828f
authored
Mar 21, 2018
by
Eliot Berriot
Browse files
Prettier playlist edition
parent
71d46e43
Changes
3
Hide whitespace changes
Inline
Side-by-side
front/src/components/playlists/Editor.vue
View file @
a7e3828f
<
template
>
<div
class=
"ui text container"
>
<h2
class=
"ui header"
>
Playlist editor
</h2>
<p>
Drag and drop rows to reorder tracks in the playlist
</p>
<div>
<div
@
click=
"insertMany(queueTracks)"
:disabled=
"queueTracks.length === 0"
:class=
"['ui',
{disabled: queueTracks.length === 0}, 'labeled', 'icon', 'button']"
title="Copy tracks from current queue to playlist">
<i
class=
"plus icon"
></i>
Insert from queue (
{{
queueTracks
.
length
}}
tracks)
</div>
<dangerous-button
:disabled=
"plts.length === 0"
class=
"labeled right floated icon"
color=
'yellow'
:action=
"clearPlaylist"
>
<i
class=
"eraser icon"
></i>
Clear playlist
<p
slot=
"modal-header"
>
Do you want to clear the playlist "
{{
playlist
.
name
}}
"?
</p>
<p
slot=
"modal-content"
>
This will remove all tracks from this playlist and cannot be undone.
</p>
<p
slot=
"modal-confirm"
>
Clear playlist
</p>
</dangerous-button>
</div>
<h5
class=
"ui header"
>
Status
</h5>
<div>
<playlist-form
@
updated=
"$emit('playlist-updated', $event)"
:title=
"false"
:playlist=
"playlist"
></playlist-form>
<h3
class=
"ui top attached header"
>
Playlist editor
</h3>
<div
class=
"ui attached segment"
>
<template
v-if=
"status === 'loading'"
>
<div
class=
"ui active tiny inline loader"
></div>
Syncing changes to server...
</
template
>
<
template
v-else-if=
"status === 'errored'"
>
<i
class=
"red
x
icon"
></i>
<i
class=
"red
close
icon"
></i>
An error occured while saving your changes
<div
v-if=
"errors.length > 0"
class=
"ui negative message"
>
<ul
class=
"list"
>
...
...
@@ -36,36 +22,57 @@
<i
class=
"green check icon"
></i>
Changes synced with server
</
template
>
</div>
<table
class=
"ui compact very basic fixed single line unstackable table"
>
<draggable
v-model=
"plts"
element=
"tbody"
@
update=
"reorder"
>
<tr
v-for=
"(plt, index) in plts"
:key=
"plt.id"
>
<td
class=
"left aligned"
>
{{ plt.index + 1}}
</td>
<td
class=
"center aligned"
>
<img
class=
"ui mini image"
v-if=
"plt.track.album.cover"
:src=
"plt.track.album.cover"
>
<img
class=
"ui mini image"
v-else
src=
"../../assets/audio/default-cover.png"
>
</td>
<td
colspan=
"4"
>
<strong>
{{ plt.track.title }}
</strong><br
/>
{{ plt.track.artist.name }}
</td>
<td
class=
"right aligned"
>
<i
@
click.stop=
"removePlt(index)"
class=
"circular red trash icon"
></i>
</td>
</tr>
</draggable>
</table>
<div
class=
"ui bottom attached segment"
>
<div
@
click=
"insertMany(queueTracks)"
:disabled=
"queueTracks.length === 0"
:class=
"['ui', {disabled: queueTracks.length === 0}, 'labeled', 'icon', 'button']"
title=
"Copy tracks from current queue to playlist"
>
<i
class=
"plus icon"
></i>
Insert from queue ({{ queueTracks.length }} tracks)
</div>
<dangerous-button
:disabled=
"plts.length === 0"
class=
"labeled right floated icon"
color=
'yellow'
:action=
"clearPlaylist"
>
<i
class=
"eraser icon"
></i>
Clear playlist
<p
slot=
"modal-header"
>
Do you want to clear the playlist "{{ playlist.name }}"?
</p>
<p
slot=
"modal-content"
>
This will remove all tracks from this playlist and cannot be undone.
</p>
<p
slot=
"modal-confirm"
>
Clear playlist
</p>
</dangerous-button>
<div
class=
"ui hidden divider"
></div>
<
template
v-if=
"plts.length > 0"
>
<p>
Drag and drop rows to reorder tracks in the playlist
</p>
<table
class=
"ui compact very basic fixed single line unstackable table"
>
<draggable
v-model=
"plts"
element=
"tbody"
@
update=
"reorder"
>
<tr
v-for=
"(plt, index) in plts"
:key=
"plt.id"
>
<td
class=
"left aligned"
>
{{
plt
.
index
+
1
}}
</td>
<td
class=
"center aligned"
>
<img
class=
"ui mini image"
v-if=
"plt.track.album.cover"
:src=
"plt.track.album.cover"
>
<img
class=
"ui mini image"
v-else
src=
"../../assets/audio/default-cover.png"
>
</td>
<td
colspan=
"4"
>
<strong>
{{
plt
.
track
.
title
}}
</strong><br
/>
{{
plt
.
track
.
artist
.
name
}}
</td>
<td
class=
"right aligned"
>
<i
@
click.stop=
"removePlt(index)"
class=
"circular red trash icon"
></i>
</td>
</tr>
</draggable>
</table>
</
template
>
</div>
</div>
</template>
<
script
>
import
{
mapState
}
from
'
vuex
'
import
axios
from
'
axios
'
import
PlaylistForm
from
'
@/components/playlists/Form
'
import
draggable
from
'
vuedraggable
'
export
default
{
components
:
{
draggable
draggable
,
PlaylistForm
},
props
:
[
'
playlist
'
,
'
playlistTracks
'
],
data
()
{
...
...
front/src/components/playlists/Form.vue
View file @
a7e3828f
<
template
>
<form
class=
"ui form"
@
submit.prevent=
"submit()"
>
<h4
class=
"ui header"
>
Create a new playlist
</h4>
<h4
v-if=
"title"
class=
"ui header"
>
Create a new playlist
</h4>
<div
v-if=
"success"
class=
"ui positive message"
>
<div
class=
"header"
>
Playlist created
</div>
<div
class=
"header"
>
<template
v-if=
"playlist"
>
Playlist updated
</
template
>
<
template
v-else
>
Playlist created
</
template
>
</div>
</div>
<div
v-if=
"errors.length > 0"
class=
"ui negative message"
>
<div
class=
"header"
>
We cannot create the playlist
</div>
...
...
@@ -10,7 +17,7 @@
<li
v-for=
"error in errors"
>
{{ error }}
</li>
</ul>
</div>
<div
class=
"fields"
>
<div
class=
"
three
fields"
>
<div
class=
"field"
>
<label>
Playlist name
</label>
<input
v-model=
"name"
required
type=
"text"
placeholder=
"My awesome playlist"
/>
...
...
@@ -23,7 +30,10 @@
</div>
<div
class=
"field"
>
<label>
</label>
<button
:class=
"['ui',
{'loading': isLoading}, 'button']" type="submit">Create playlist
</button>
<button
:class=
"['ui', 'fluid', {'loading': isLoading}, 'button']"
type=
"submit"
>
<
template
v-if=
"playlist"
>
Update playlist
</
template
>
<
template
v-else
>
Create playlist
</
template
>
</button>
</div>
</div>
</form>
...
...
@@ -36,13 +46,15 @@ import axios from 'axios'
import
logger
from
'
@/logging
'
export
default
{
props
:
{
title
:
{
type
:
Boolean
,
default
:
true
},
playlist
:
{
type
:
Object
,
default
:
null
}
},
mounted
()
{
$
(
this
.
$el
).
find
(
'
.dropdown
'
).
dropdown
()
},
data
()
{
return
{
privacyLevel
:
this
.
$store
.
state
.
auth
.
profile
.
privacy_level
,
name
:
''
,
let
d
=
{
errors
:
[],
success
:
false
,
isLoading
:
false
,
...
...
@@ -61,6 +73,14 @@ export default {
}
]
}
if
(
this
.
playlist
)
{
d
.
name
=
this
.
playlist
.
name
d
.
privacyLevel
=
this
.
playlist
.
privacy_level
}
else
{
d
.
privacyLevel
=
this
.
$store
.
state
.
auth
.
profile
.
privacy_level
d
.
name
=
''
}
return
d
},
methods
:
{
submit
()
{
...
...
@@ -72,12 +92,23 @@ export default {
name
:
this
.
name
,
privacy_level
:
this
.
privacyLevel
}
let
url
=
`playlists/`
return
axios
.
post
(
url
,
payload
).
then
(
response
=>
{
logger
.
default
.
info
(
'
Successfully created playlist
'
)
let
promise
let
url
if
(
this
.
playlist
)
{
url
=
`playlists/
${
this
.
playlist
.
id
}
/`
promise
=
axios
.
patch
(
url
,
payload
)
}
else
{
url
=
'
playlists/
'
promise
=
axios
.
post
(
url
,
payload
)
}
return
promise
.
then
(
response
=>
{
self
.
success
=
true
self
.
isLoading
=
false
self
.
name
=
''
if
(
!
self
.
playlist
)
{
self
.
name
=
''
}
self
.
$emit
(
'
updated
'
,
response
.
data
)
self
.
$store
.
dispatch
(
'
playlists/fetchOwn
'
)
},
error
=>
{
logger
.
default
.
error
(
'
Error while creating playlist
'
)
...
...
front/src/views/playlists/Detail.vue
View file @
a7e3828f
...
...
@@ -36,7 +36,10 @@
</div>
<div
class=
"ui vertical stripe segment"
>
<
template
v-if=
"edit"
>
<playlist-editor
@
tracks-updated=
"updatePlts"
:playlist=
"playlist"
:playlist-tracks=
"playlistTracks"
></playlist-editor>
<playlist-editor
@
playlist-updated=
"playlist = $event"
@
tracks-updated=
"updatePlts"
:playlist=
"playlist"
:playlist-tracks=
"playlistTracks"
></playlist-editor>
</
template
>
<
template
v-else
>
<h2>
Tracks
</h2>
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment