Verified Commit a7e3828f authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Prettier playlist edition

parent 71d46e43
<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 () {
......
<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>&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>
</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')
......
......@@ -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>
......
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