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>
<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
+ 42
− 11
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>&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')
......
front/src/views/playlists/Detail.vue
+ 4
− 1
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>
......
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