Skip to content
Snippets Groups Projects
Verified Commit a7e3828f authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Prettier playlist edition

parent 71d46e43
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
front/src/components/playlists/Editor.vue
+ 46
− 39
View file @ a7e3828f
<template> <template>
<div class="ui text container"> <div class="ui text container">
<h2 class="ui header">Playlist editor</h2> <playlist-form @updated="$emit('playlist-updated', $event)" :title="false" :playlist="playlist"></playlist-form>
<p>Drag and drop rows to reorder tracks in the playlist</p> <h3 class="ui top attached header">
<div> Playlist editor
<div </h3>
@click="insertMany(queueTracks)" <div class="ui attached segment">
: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>
<template v-if="status === 'loading'"> <template v-if="status === 'loading'">
<div class="ui active tiny inline loader"></div> <div class="ui active tiny inline loader"></div>
Syncing changes to server... Syncing changes to server...
</template> </template>
<template v-else-if="status === 'errored'"> <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 An error occured while saving your changes
<div v-if="errors.length > 0" class="ui negative message"> <div v-if="errors.length > 0" class="ui negative message">
<ul class="list"> <ul class="list">
...@@ -36,36 +22,57 @@ ...@@ -36,36 +22,57 @@
<i class="green check icon"></i> Changes synced with server <i class="green check icon"></i> Changes synced with server
</template> </template>
</div> </div>
<table class="ui compact very basic fixed single line unstackable table"> <div class="ui bottom attached segment">
<draggable v-model="plts" element="tbody" @update="reorder"> <div
<tr v-for="(plt, index) in plts" :key="plt.id"> @click="insertMany(queueTracks)"
<td class="left aligned">{{ plt.index + 1}}</td> :disabled="queueTracks.length === 0"
<td class="center aligned"> :class="['ui', {disabled: queueTracks.length === 0}, 'labeled', 'icon', 'button']"
<img class="ui mini image" v-if="plt.track.album.cover" :src="plt.track.album.cover"> title="Copy tracks from current queue to playlist">
<img class="ui mini image" v-else src="../../assets/audio/default-cover.png"> <i class="plus icon"></i> Insert from queue ({{ queueTracks.length }} tracks)</div>
</td>
<td colspan="4"> <dangerous-button :disabled="plts.length === 0" class="labeled right floated icon" color='yellow' :action="clearPlaylist">
<strong>{{ plt.track.title }}</strong><br /> <i class="eraser icon"></i> Clear playlist
{{ plt.track.artist.name }} <p slot="modal-header">Do you want to clear the playlist "{{ playlist.name }}"?</p>
</td> <p slot="modal-content">This will remove all tracks from this playlist and cannot be undone.</p>
<td class="right aligned"> <p slot="modal-confirm">Clear playlist</p>
<i @click.stop="removePlt(index)" class="circular red trash icon"></i> </dangerous-button>
</td> <div class="ui hidden divider"></div>
</tr> <template v-if="plts.length > 0">
</draggable> <p>Drag and drop rows to reorder tracks in the playlist</p>
</table> <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> </div>
</template> </template>
<script> <script>
import {mapState} from 'vuex' import {mapState} from 'vuex'
import axios from 'axios' import axios from 'axios'
import PlaylistForm from '@/components/playlists/Form'
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
export default { export default {
components: { components: {
draggable draggable,
PlaylistForm
}, },
props: ['playlist', 'playlistTracks'], props: ['playlist', 'playlistTracks'],
data () { data () {
......
front/src/components/playlists/Form.vue
+ 42
− 11
View file @ a7e3828f
<template> <template>
<form class="ui form" @submit.prevent="submit()"> <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 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>
<div v-if="errors.length > 0" class="ui negative message"> <div v-if="errors.length > 0" class="ui negative message">
<div class="header">We cannot create the playlist</div> <div class="header">We cannot create the playlist</div>
...@@ -10,7 +17,7 @@ ...@@ -10,7 +17,7 @@
<li v-for="error in errors">{{ error }}</li> <li v-for="error in errors">{{ error }}</li>
</ul> </ul>
</div> </div>
<div class="fields"> <div class="three fields">
<div class="field"> <div class="field">
<label>Playlist name</label> <label>Playlist name</label>
<input v-model="name" required type="text" placeholder="My awesome playlist" /> <input v-model="name" required type="text" placeholder="My awesome playlist" />
...@@ -23,7 +30,10 @@ ...@@ -23,7 +30,10 @@
</div> </div>
<div class="field"> <div class="field">
<label>&nbsp;</label> <label>&nbsp;</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>
</div> </div>
</form> </form>
...@@ -36,13 +46,15 @@ import axios from 'axios' ...@@ -36,13 +46,15 @@ import axios from 'axios'
import logger from '@/logging' import logger from '@/logging'
export default { export default {
props: {
title: {type: Boolean, default: true},
playlist: {type: Object, default: null}
},
mounted () { mounted () {
$(this.$el).find('.dropdown').dropdown() $(this.$el).find('.dropdown').dropdown()
}, },
data () { data () {
return { let d = {
privacyLevel: this.$store.state.auth.profile.privacy_level,
name: '',
errors: [], errors: [],
success: false, success: false,
isLoading: false, isLoading: false,
...@@ -61,6 +73,14 @@ export default { ...@@ -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: { methods: {
submit () { submit () {
...@@ -72,12 +92,23 @@ export default { ...@@ -72,12 +92,23 @@ export default {
name: this.name, name: this.name,
privacy_level: this.privacyLevel privacy_level: this.privacyLevel
} }
let url = `playlists/`
return axios.post(url, payload).then(response => { let promise
logger.default.info('Successfully created playlist') 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.success = true
self.isLoading = false self.isLoading = false
self.name = '' if (!self.playlist) {
self.name = ''
}
self.$emit('updated', response.data)
self.$store.dispatch('playlists/fetchOwn') self.$store.dispatch('playlists/fetchOwn')
}, error => { }, error => {
logger.default.error('Error while creating playlist') logger.default.error('Error while creating playlist')
......
front/src/views/playlists/Detail.vue
+ 4
− 1
View file @ a7e3828f
...@@ -36,7 +36,10 @@ ...@@ -36,7 +36,10 @@
</div> </div>
<div class="ui vertical stripe segment"> <div class="ui vertical stripe segment">
<template v-if="edit"> <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>
<template v-else> <template v-else>
<h2>Tracks</h2> <h2>Tracks</h2>
......
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