Form, modal and player icon to add track to playlist

front/src/components/audio/Player.vue

@@ -30,7 +30,12 @@
               </router-link>
             </div>
             <div class="description">
-              <track-favorite-icon :track="currentTrack"></track-favorite-icon>
+              <track-favorite-icon
+                v-if="$store.state.auth.authenticated"
+                :track="currentTrack"></track-favorite-icon>
+              <track-playlist-icon
+                v-if="$store.state.auth.authenticated"
+                :track="currentTrack"></track-playlist-icon>
             </div>
           </div>
         </div>
@@ -140,11 +145,13 @@ import ColorThief from '@/vendor/color-thief'
 import Track from '@/audio/track'
 import AudioTrack from '@/components/audio/Track'
 import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
+import TrackPlaylistIcon from '@/components/playlists/TrackPlaylistIcon'
 
 export default {
   name: 'player',
   components: {
     TrackFavoriteIcon,
+    TrackPlaylistIcon,
     GlobalEvents,
     AudioTrack
   },
@@ -281,6 +288,7 @@ export default {
     cursor: pointer
 }
 .track-area {
+  margin-top: 0;
   .header, .meta, .artist, .album {
     color: white !important;
   }
@@ -384,4 +392,5 @@ export default {
 .ui.feed.icon {
   margin: 0;
 }
+
 </style>

front/src/components/playlists/Form.vue

+<template>
+  <form class="ui form" @submit.prevent="submit()">
+    <h4 class="ui header">Create a new playlist</h4>
+    <div v-if="success" class="ui positive message">
+      <div class="header">Playlist created</div>
+    </div>
+    <div v-if="errors.length > 0" class="ui negative message">
+      <div class="header">We cannot create the playlist</div>
+      <ul class="list">
+        <li v-for="error in errors">{{ error }}</li>
+      </ul>
+    </div>
+    <div class="fields">
+      <div class="field">
+        <label>Playlist name</label>
+        <input v-model="name" required type="text" placeholder="My awesome playlist" />
+      </div>
+      <div class="field">
+        <label>Playlist visibility</label>
+        <select class="ui dropdown" v-model="privacyLevel">
+          <option :value="c.value" v-for="c in privacyLevelChoices">{{ c.label }}</option>
+        </select>
+      </div>
+    </div>
+    <button :class="['ui', {'loading': isLoading}, 'button']" type="submit">Create playlist</button>
+  </form>
+</template>
+
+<script>
+import $ from 'jquery'
+import axios from 'axios'
+
+import logger from '@/logging'
+
+export default {
+  mounted () {
+    $(this.$el).find('.dropdown').dropdown()
+  },
+  data () {
+    return {
+      privacyLevel: this.$store.state.auth.profile.privacy_level,
+      name: '',
+      errors: [],
+      success: false,
+      isLoading: false,
+      privacyLevelChoices: [
+        {
+          value: 'me',
+          label: 'Nobody except me'
+        },
+        {
+          value: 'instance',
+          label: 'Everyone on this instance'
+        },
+        {
+          value: 'everyone',
+          label: 'Everyone'
+        }
+      ]
+    }
+  },
+  methods: {
+    submit () {
+      this.isLoading = true
+      this.success = false
+      this.errors = []
+      let self = this
+      let payload = {
+        name: this.name,
+        privacy_level: this.privacyLevel
+      }
+      let url = `playlists/`
+      return axios.post(url, payload).then(response => {
+        logger.default.info('Successfully created playlist')
+        self.success = true
+        self.isLoading = false
+        self.$store.dispatch('playlists/fetchOwn')
+      }, error => {
+        logger.default.error('Error while creating playlist')
+        self.isLoading = false
+        self.errors = error.backendErrors
+      })
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>

front/src/components/playlists/PlaylistModal.vue

+<template>
+  <modal @update:show="update" :show="show">
+    <div class="header">
+      Add track "{{ track.title }}" by {{ track.artist.name }} to playlist
+    </div>
+    <div class="content">
+      <div class="description">
+        <playlist-form></playlist-form>
+        <div class="ui divider"></div>
+        <div v-if="errors.length > 0" class="ui negative message">
+          <div class="header">We cannot add the track to a playlist</div>
+          <ul class="list">
+            <li v-for="error in errors">{{ error }}</li>
+          </ul>
+        </div>
+        <div class="ui items">
+          <div class="item" v-for="playlist in sortedPlaylists">
+            <div class="content">
+              <div class="header">{{ playlist.name }}</div>
+              <div class="meta">
+                <span class="tracks">45 tracks</span>
+              </div>
+              <div class="extra">
+                <div class="ui basic green button" @click="addToPlaylist(playlist.id)">
+                  Add to this playlist
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </modal>
+</template>
+
+<script>
+import axios from 'axios'
+import {mapState} from 'vuex'
+
+import logger from '@/logging'
+import Modal from '@/components/semantic/Modal'
+import PlaylistForm from '@/components/playlists/Form'
+
+export default {
+  components: {
+    Modal,
+    PlaylistForm
+  },
+  props: {
+    track: {type: Object},
+    show: {type: Boolean}
+  },
+  data () {
+    return {
+      errors: []
+    }
+  },
+  methods: {
+    update (v) {
+      this.$emit('update:show', v)
+    },
+    addToPlaylist (playlistId) {
+      let self = this
+      let payload = {
+        track: this.track.id,
+        playlist: playlistId
+      }
+      return axios.post('playlist-tracks/', payload).then(response => {
+        logger.default.info('Successfully added track to playlist')
+        self.$emit('update:show', false)
+        self.$store.dispatch('playlists/fetchOwn')
+      }, error => {
+        logger.default.error('Error while adding track to playlist')
+        self.errors = error.backendErrors
+      })
+    }
+  },
+  computed: {
+    ...mapState({
+      playlists: state => state.playlists.playlists
+    }),
+    sortedPlaylists () {
+      return this.playlists
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>

front/src/components/playlists/TrackPlaylistIcon.vue

+<template>
+  <button
+    @click="showModal = true"
+    v-if="button"
+    :class="['ui', 'button']">
+    <i class="list icon"></i>
+    Add to playlist...
+    <playlist-modal :track="track" :show.sync="showModal"></playlist-modal>
+  </button>
+  <i
+    v-else
+    @click="showModal = true"
+    :class="['favorite-icon', 'list', 'link', 'icon']"
+    title="Add to playlist...">
+    <playlist-modal :track="track" :show.sync="showModal"></playlist-modal>
+  </i>
+</template>
+
+<script>
+import PlaylistModal from '@/components/playlists/PlaylistModal'
+
+export default {
+  components: {
+    PlaylistModal
+  },
+  props: {
+    track: {type: Object},
+    button: {type: Boolean, default: false}
+  },
+  data () {
+    return {
+      showModal: false
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>