Prettier playlist edition

front/src/components/playlists/Editor.vue

 <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

 <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

@@ -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>